diff --git a/.cursor/worktrees.json b/.cursor/worktrees.json
index 77e9744d..c81f1214 100644
--- a/.cursor/worktrees.json
+++ b/.cursor/worktrees.json
@@ -1,5 +1,3 @@
 {
-  "setup-worktree": [
-    "npm install"
-  ]
+  "setup-worktree": ["npm install"]
 }
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 3eea3a0f..1709f872 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -3,9 +3,9 @@ name: Build
 on:
   push:
     tags:
-      - 'v*'
+      - "v*"
     branches:
-      - 'main'
+      - "main"
   pull_request:
     branches: [main]
   workflow_dispatch:
@@ -31,8 +31,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
diff --git a/.github/workflows/mobile.yml b/.github/workflows/mobile.yml
index 0e12a59d..327840d5 100644
--- a/.github/workflows/mobile.yml
+++ b/.github/workflows/mobile.yml
@@ -3,12 +3,12 @@ name: Mobile Build
 on:
   push:
     tags:
-      - 'v*'  # Unified release: same tag as desktop
+      - "v*" # Unified release: same tag as desktop
     branches:
-      - 'main'
+      - "main"
   pull_request:
     branches: [main]
-  workflow_dispatch:  # Allow manual trigger anytime
+  workflow_dispatch: # Allow manual trigger anytime
 
 jobs:
   # Check for potential mobile sync issues — blocks mobile build if issues found
@@ -212,15 +212,15 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
           cache-dependency-path: mobile/package-lock.json
 
       - name: Setup Java
         uses: actions/setup-java@v4
         with:
-          distribution: 'temurin'
-          java-version: '17'
+          distribution: "temurin"
+          java-version: "17"
 
       - name: Setup Android SDK
         uses: android-actions/setup-android@v3
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index 56947ee6..a923b06f 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -3,7 +3,7 @@ name: Nightly Build
 on:
   schedule:
     # Run at 2:00 AM UTC every day
-    - cron: '0 2 * * *'
+    - cron: "0 2 * * *"
 
 jobs:
   check-changes:
@@ -52,8 +52,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
-          cache: 'npm'
+          node-version: "20"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
@@ -197,4 +197,4 @@ jobs:
             git reset --hard origin/main &&
             npm install &&
             npm run build:web
-          '
\ No newline at end of file
+          '
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7a73a41b..0967ef42 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,2 +1 @@
-{
-}
\ No newline at end of file
+{}
diff --git a/CLAUDE.md b/CLAUDE.md
index cf3ec054..6c321fa9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -86,7 +86,7 @@ wavespeed-desktop/
 - **`src/workflow/browser/run-in-browser.ts`**: Workflow execution (browser only): AI task via apiClient, free-tool nodes, I/O nodes
 - **`src/workflow/ipc/ipc-client.ts`**: Typed IPC client for workflow, execution, models, cost, history, registry, settings
 - **`src/workflow/types/node-defs.ts`**: NodeTypeDefinition, WaveSpeedModel, ParamDefinition
-- **`src/workflow/types/ipc.ts`**: IPC channel types (workflow:*, execution:*, models:*, cost:*, history:*, etc.)
+- **`src/workflow/types/ipc.ts`**: IPC channel types (workflow:_, execution:_, models:_, cost:_, history:\*, etc.)
 - **`src/workflow/hooks/useFreeToolListener.ts`**: Listens for free-tool execution requests from main process (used by Layout)
 - **`src/workflow/lib/free-tool-runner.ts`**: Runs free-tool nodes (e.g. background-remover) and returns outputs to main
 - **`src/components/playground/DynamicForm.tsx`**: Generates forms from model schemas
@@ -149,18 +149,19 @@ Authentication: `Authorization: Bearer {API_KEY}`
 
 ### Endpoints
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/api/v3/models` | GET | List available models with schemas |
-| `/api/v3/{model}` | POST | Run a prediction |
-| `/api/v3/predictions/{id}/result` | GET | Poll for prediction result |
-| `/api/v3/predictions` | POST | Get prediction history (with date filters) |
-| `/api/v3/media/upload/binary` | POST | Upload files (multipart/form-data) |
-| `/api/v3/balance` | GET | Get account balance (returns `{ data: { balance: number } }`) |
+| Endpoint                          | Method | Description                                                   |
+| --------------------------------- | ------ | ------------------------------------------------------------- |
+| `/api/v3/models`                  | GET    | List available models with schemas                            |
+| `/api/v3/{model}`                 | POST   | Run a prediction                                              |
+| `/api/v3/predictions/{id}/result` | GET    | Poll for prediction result                                    |
+| `/api/v3/predictions`             | POST   | Get prediction history (with date filters)                    |
+| `/api/v3/media/upload/binary`     | POST   | Upload files (multipart/form-data)                            |
+| `/api/v3/balance`                 | GET    | Get account balance (returns `{ data: { balance: number } }`) |
 
 ### History API
 
 The predictions history endpoint requires a POST request with JSON body:
+
 ```json
 {
   "page": 1,
@@ -185,19 +186,23 @@ npm run build:all    # Build for all platforms
 ## Common Tasks
 
 ### Adding a new page
+
 1. Create component in `src/pages/`
 2. Add route in `src/App.tsx`
 3. Add navigation item in `src/components/layout/Sidebar.tsx` under the appropriate section (Create, Manage, or Tools)
 
 ### Adding a new API method
+
 1. Add method to `WaveSpeedClient` class in `src/api/client.ts`
 2. Add types in `src/types/` if needed
 
 ### Modifying the build
+
 1. Build config is in `package.json` under `"build"` key
 2. GitHub Actions in `.github/workflows/`
 
 ### Adding a new UI component (shadcn/ui pattern)
+
 1. Create component in `src/components/ui/` following the existing pattern
 2. Use `@radix-ui/*` primitives (already installed: dialog, select, dropdown-menu, etc.)
 3. Use `cn()` for className merging
diff --git a/README.md b/README.md
index 1f94a47a..4034cce3 100644
--- a/README.md
+++ b/README.md
@@ -34,20 +34,20 @@ The Android app shares the same React codebase as the desktop version, giving yo
 
 12 free AI-powered creative tools that run entirely in your browser. No API key required, no usage limits, completely free. Also available as a standalone web app at [wavespeed.ai/studio](https://wavespeed.ai/studio) — fully responsive, works on desktop, tablet, and mobile browsers.
 
-| Tool | Description |
-|------|-------------|
-| **Image Enhancer** | Upscale images 2x–4x using ESRGAN with slim, medium, and thick quality options |
-| **Video Enhancer** | Frame-by-frame video upscaling with real-time progress and ETA |
-| **Face Enhancer** | Detect faces with YOLO v8 and enhance with GFPGAN v1.4 (WebGPU accelerated) |
-| **Face Swapper** | Swap faces using InsightFace (SCRFD + ArcFace + Inswapper) with optional GFPGAN post-processing |
+| Tool                   | Description                                                                                       |
+| ---------------------- | ------------------------------------------------------------------------------------------------- |
+| **Image Enhancer**     | Upscale images 2x–4x using ESRGAN with slim, medium, and thick quality options                    |
+| **Video Enhancer**     | Frame-by-frame video upscaling with real-time progress and ETA                                    |
+| **Face Enhancer**      | Detect faces with YOLO v8 and enhance with GFPGAN v1.4 (WebGPU accelerated)                       |
+| **Face Swapper**       | Swap faces using InsightFace (SCRFD + ArcFace + Inswapper) with optional GFPGAN post-processing   |
 | **Background Remover** | Remove backgrounds instantly — outputs foreground, background, and mask with individual downloads |
-| **Image Eraser** | Remove unwanted objects with LaMa inpainting, smart crop and blend (WebGPU accelerated) |
-| **Segment Anything** | Interactive object segmentation with point prompts using SlimSAM |
-| **Video Converter** | Convert between MP4, WebM, AVI, MOV, MKV with codec and quality options |
-| **Audio Converter** | Convert between MP3, WAV, AAC, FLAC, OGG with bitrate control |
-| **Image Converter** | Batch convert between JPG, PNG, WebP, GIF, BMP with quality settings |
-| **Media Trimmer** | Trim video and audio by selecting start and end times |
-| **Media Merger** | Merge multiple video or audio files into one |
+| **Image Eraser**       | Remove unwanted objects with LaMa inpainting, smart crop and blend (WebGPU accelerated)           |
+| **Segment Anything**   | Interactive object segmentation with point prompts using SlimSAM                                  |
+| **Video Converter**    | Convert between MP4, WebM, AVI, MOV, MKV with codec and quality options                           |
+| **Audio Converter**    | Convert between MP3, WAV, AAC, FLAC, OGG with bitrate control                                     |
+| **Image Converter**    | Batch convert between JPG, PNG, WebP, GIF, BMP with quality settings                              |
+| **Media Trimmer**      | Trim video and audio by selecting start and end times                                             |
+| **Media Merger**       | Merge multiple video or audio files into one                                                      |
 
 ![WaveSpeed Creative Studio](https://github.com/user-attachments/assets/67359fa7-8ff4-4001-a982-eb4802e5b841)
 
@@ -186,15 +186,15 @@ npm run dev
 
 ### Scripts
 
-| Script | Description |
-|--------|-------------|
-| `npm run dev` | Start development server with hot reload |
-| `npx vite` | Start web-only dev server (no Electron) |
-| `npm run build` | Build the application |
-| `npm run build:win` | Build for Windows |
-| `npm run build:mac` | Build for macOS |
-| `npm run build:linux` | Build for Linux |
-| `npm run build:all` | Build for all platforms |
+| Script                | Description                              |
+| --------------------- | ---------------------------------------- |
+| `npm run dev`         | Start development server with hot reload |
+| `npx vite`            | Start web-only dev server (no Electron)  |
+| `npm run build`       | Build the application                    |
+| `npm run build:win`   | Build for Windows                        |
+| `npm run build:mac`   | Build for macOS                          |
+| `npm run build:linux` | Build for Linux                          |
+| `npm run build:all`   | Build for all platforms                  |
 
 ### Mobile Development
 
@@ -263,6 +263,7 @@ wavespeed-desktop/
 ## Tech Stack
 
 ### Desktop
+
 - **Framework**: Electron + electron-vite
 - **Frontend**: React 18 + TypeScript
 - **Styling**: Tailwind CSS + shadcn/ui
@@ -272,6 +273,7 @@ wavespeed-desktop/
 - **Workflow Database**: sql.js (SQLite in-process)
 
 ### Mobile
+
 - **Framework**: Capacitor 6
 - **Frontend**: React 18 + TypeScript (shared with desktop)
 - **Styling**: Tailwind CSS + shadcn/ui (shared)
@@ -290,14 +292,14 @@ Get your API key from [WaveSpeedAI](https://wavespeed.ai)
 
 The application uses the WaveSpeedAI API v3:
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/api/v3/models` | GET | List available models |
-| `/api/v3/{model}` | POST | Run a prediction |
-| `/api/v3/predictions/{id}/result` | GET | Get prediction result |
-| `/api/v3/predictions` | POST | Get prediction history |
-| `/api/v3/media/upload/binary` | POST | Upload files |
-| `/api/v3/balance` | GET | Get account balance |
+| Endpoint                          | Method | Description            |
+| --------------------------------- | ------ | ---------------------- |
+| `/api/v3/models`                  | GET    | List available models  |
+| `/api/v3/{model}`                 | POST   | Run a prediction       |
+| `/api/v3/predictions/{id}/result` | GET    | Get prediction result  |
+| `/api/v3/predictions`             | POST   | Get prediction history |
+| `/api/v3/media/upload/binary`     | POST   | Upload files           |
+| `/api/v3/balance`                 | GET    | Get account balance    |
 
 ## Contributing
 
diff --git a/data/templates/ai-generation/image-to-video.json b/data/templates/ai-generation/image-to-video.json
index f36c8185..0efef1aa 100644
--- a/data/templates/ai-generation/image-to-video.json
+++ b/data/templates/ai-generation/image-to-video.json
@@ -2,12 +2,7 @@
   "name": "图生视频",
   "i18nKey": "imageToVideo",
   "description": "将静态图片转换为动态视频，并进行高清放大处理",
-  "tags": [
-    "图片",
-    "视频",
-    "AI生成",
-    "视频放大"
-  ],
+  "tags": ["图片", "视频", "AI生成", "视频放大"],
   "category": "ai-generation",
   "author": "WaveSpeed",
   "thumbnail": "https://d1q70pf5vjeyhc.cloudfront.net/media/fb8f674bbb1a429d947016fd223cfae1/images/1759814613446857978_B0Cyvroj.jpeg",
@@ -93,4 +88,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/data/templates/audio-processing/music_generate.json b/data/templates/audio-processing/music_generate.json
index 217a178d..235fddaf 100644
--- a/data/templates/audio-processing/music_generate.json
+++ b/data/templates/audio-processing/music_generate.json
@@ -2,12 +2,7 @@
   "name": "音乐生成",
   "i18nKey": "musicGenerate",
   "description": "通过歌词和风格标签生成原创音乐，支持多种音乐风格",
-  "tags": [
-    "音乐",
-    "生成",
-    "AI",
-    "歌词"
-  ],
+  "tags": ["音乐", "生成", "AI", "歌词"],
   "category": "audio-conversion",
   "author": "WaveSpeed",
   "thumbnail": "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1752486874849919611_uMhlqGOZ.png",
diff --git a/data/templates/image-processing/image-edit.json b/data/templates/image-processing/image-edit.json
index ad7d3ce3..ce93f2d2 100644
--- a/data/templates/image-processing/image-edit.json
+++ b/data/templates/image-processing/image-edit.json
@@ -2,12 +2,7 @@
   "name": "图像编辑",
   "i18nKey": "imageEdit",
   "description": "使用AI模型编辑图像，支持自定义提示词进行精确修改",
-  "tags": [
-    "图像",
-    "编辑",
-    "AI",
-    "提示词"
-  ],
+  "tags": ["图像", "编辑", "AI", "提示词"],
   "category": "image-processing",
   "author": "WaveSpeed",
   "thumbnail": "https://d1q70pf5vjeyhc.cloudfront.net/media/a171ce9f725a41f49d5694458dba5f2a/images/1771092349188456413_57k0enwG.jpg",
@@ -81,11 +76,7 @@
                 "type": "enum",
                 "description": "The format of the output image.",
                 "default": "jpeg",
-                "enum": [
-                  "jpeg",
-                  "png",
-                  "webp"
-                ],
+                "enum": ["jpeg", "png", "webp"],
                 "fieldType": "select"
               }
             ]
diff --git a/data/templates/video-processing/video-edit.json b/data/templates/video-processing/video-edit.json
index 5a717f91..c5548ab9 100644
--- a/data/templates/video-processing/video-edit.json
+++ b/data/templates/video-processing/video-edit.json
@@ -2,11 +2,7 @@
   "name": "视频编辑",
   "i18nKey": "videoEdit",
   "description": "使用AI模型编辑视频内容，支持通过提示词修改视频中的元素",
-  "tags": [
-    "视频",
-    "编辑",
-    "AI"
-  ],
+  "tags": ["视频", "编辑", "AI"],
   "category": "video-editing",
   "author": "WaveSpeed",
   "thumbnail": "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1763608542503495122_E5Jc0qQc.png",
@@ -49,10 +45,7 @@
                 "type": "enum",
                 "description": "The resolution of the output video.",
                 "default": "480p",
-                "enum": [
-                  "480p",
-                  "720p"
-                ],
+                "enum": ["480p", "720p"],
                 "fieldType": "select"
               },
               {
diff --git a/docs/mobile-desktop-unified-release.md b/docs/mobile-desktop-unified-release.md
index 91016736..982b7f83 100644
--- a/docs/mobile-desktop-unified-release.md
+++ b/docs/mobile-desktop-unified-release.md
@@ -16,24 +16,24 @@ Mobile 通过 Vite alias 覆写了 Desktop 的 13 个文件。当 Desktop 更新
 
 将 13 个覆写文件合并为 2 个，通过条件判断（`isCapacitorNative()`）让同一份代码兼容两个平台。
 
-| 覆写文件 | 合并前 | 合并后 |
-|---------|-------|-------|
-| slider, PromptOptimizer, DynamicForm | 3 个独立 mobile 版本 | 合并到 Desktop 代码 |
-| 4 个 Worker Hooks | 4 个独立 mobile 版本 | 合并到 Desktop 代码 |
-| API client | 独立 mobile 版本 | 合并到 Desktop 代码 |
-| FormField, SizeSelector | 独立 mobile 版本 | 合并到 Desktop 代码 |
-| FileUpload, AudioRecorder | 独立 mobile 版本 | 合并到 Desktop 代码 |
-| **SettingsPage** | 独立 mobile 版本 | **保留覆写**（差异过大） |
-| **i18n** | 独立 mobile 版本 | **保留覆写**（架构不同） |
+| 覆写文件                             | 合并前               | 合并后                   |
+| ------------------------------------ | -------------------- | ------------------------ |
+| slider, PromptOptimizer, DynamicForm | 3 个独立 mobile 版本 | 合并到 Desktop 代码      |
+| 4 个 Worker Hooks                    | 4 个独立 mobile 版本 | 合并到 Desktop 代码      |
+| API client                           | 独立 mobile 版本     | 合并到 Desktop 代码      |
+| FormField, SizeSelector              | 独立 mobile 版本     | 合并到 Desktop 代码      |
+| FileUpload, AudioRecorder            | 独立 mobile 版本     | 合并到 Desktop 代码      |
+| **SettingsPage**                     | 独立 mobile 版本     | **保留覆写**（差异过大） |
+| **i18n**                             | 独立 mobile 版本     | **保留覆写**（架构不同） |
 
 **结果：13 → 2 个覆写文件（减少 85%）。** Desktop 日常开发的改动会自动同步到 Mobile。
 
 ### 仍需手动同步的 2 个文件
 
-| 文件 | 保留覆写的原因 |
-|------|--------------|
+| 文件                         | 保留覆写的原因                                                                                               |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------ |
 | `src/pages/SettingsPage.tsx` | Desktop 有 Electron 自动更新、SD 模型管理；Mobile 有 APK 下载更新、Cache API、WASM 模型预下载。功能差异 >40% |
-| `src/i18n/index.ts` | Mobile 通过 deepMerge 扩展 Desktop 翻译，架构层面不同 |
+| `src/i18n/index.ts`          | Mobile 通过 deepMerge 扩展 Desktop 翻译，架构层面不同                                                        |
 
 CI 中已加入检测：如果这 2 个文件在 Desktop 端被修改，构建时会输出警告提醒手动同步。
 
@@ -75,14 +75,14 @@ push tag v1.0.48
 
 一个 GitHub Release 包含所有平台安装包：
 
-| 文件 | 平台 |
-|------|-----|
-| WaveSpeed-Desktop-win-x64.exe | Windows |
-| WaveSpeed-Desktop-mac-x64.dmg | macOS Intel |
-| WaveSpeed-Desktop-mac-arm64.dmg | macOS Apple Silicon |
-| WaveSpeed-Desktop-linux-x86_64.AppImage | Linux |
-| WaveSpeed-Mobile-{version}.apk | Android（带版本号） |
-| WaveSpeed-Mobile.apk | Android（固定链接用） |
+| 文件                                    | 平台                  |
+| --------------------------------------- | --------------------- |
+| WaveSpeed-Desktop-win-x64.exe           | Windows               |
+| WaveSpeed-Desktop-mac-x64.dmg           | macOS Intel           |
+| WaveSpeed-Desktop-mac-arm64.dmg         | macOS Apple Silicon   |
+| WaveSpeed-Desktop-linux-x86_64.AppImage | Linux                 |
+| WaveSpeed-Mobile-{version}.apk          | Android（带版本号）   |
+| WaveSpeed-Mobile.apk                    | Android（固定链接用） |
 
 ### 版本号
 
@@ -98,13 +98,13 @@ Mobile 版本号自动跟随 Desktop。CI 中自动完成：
 
 所有平台均有一键下载徽章，指向 `/releases/latest/download/`，永远是最新版本：
 
-| 平台 | 链接 |
-|------|-----|
-| Windows | `releases/latest/download/WaveSpeed-Desktop-win-x64.exe` |
-| macOS Intel | `releases/latest/download/WaveSpeed-Desktop-mac-x64.dmg` |
-| macOS Silicon | `releases/latest/download/WaveSpeed-Desktop-mac-arm64.dmg` |
-| Linux | `releases/latest/download/WaveSpeed-Desktop-linux-x86_64.AppImage` |
-| Android | `releases/latest/download/WaveSpeed-Mobile.apk` |
+| 平台          | 链接                                                               |
+| ------------- | ------------------------------------------------------------------ |
+| Windows       | `releases/latest/download/WaveSpeed-Desktop-win-x64.exe`           |
+| macOS Intel   | `releases/latest/download/WaveSpeed-Desktop-mac-x64.dmg`           |
+| macOS Silicon | `releases/latest/download/WaveSpeed-Desktop-mac-arm64.dmg`         |
+| Linux         | `releases/latest/download/WaveSpeed-Desktop-linux-x86_64.AppImage` |
+| Android       | `releases/latest/download/WaveSpeed-Mobile.apk`                    |
 
 ---
 
@@ -112,21 +112,21 @@ Mobile 版本号自动跟随 Desktop。CI 中自动完成：
 
 ### Desktop
 
-| 功能 | 支持 |
-|------|-----|
-| 后台自动检查更新 | ✅ 启动后 3 秒自动检查 |
-| 应用内下载 | ✅ 后台静默下载，显示进度 |
-| 自动安装 | ✅ 退出时自动安装新版本 |
-| 更新频道 | ✅ Stable / Nightly 可切换 |
+| 功能             | 支持                       |
+| ---------------- | -------------------------- |
+| 后台自动检查更新 | ✅ 启动后 3 秒自动检查     |
+| 应用内下载       | ✅ 后台静默下载，显示进度  |
+| 自动安装         | ✅ 退出时自动安装新版本    |
+| 更新频道         | ✅ Stable / Nightly 可切换 |
 
 ### Mobile
 
-| 功能 | 支持 |
-|------|-----|
-| 手动检查更新 | ✅ Settings → 检查更新 |
+| 功能           | 支持                                 |
+| -------------- | ------------------------------------ |
+| 手动检查更新   | ✅ Settings → 检查更新               |
 | 应用内下载 APK | ✅ 下载到 Downloads 文件夹，显示进度 |
-| 自动安装 | ❌ 需用户手动点击 APK 安装 |
-| 后台自动检查 | ❌ 需用户主动触发 |
+| 自动安装       | ❌ 需用户手动点击 APK 安装           |
+| 后台自动检查   | ❌ 需用户主动触发                    |
 
 ### Mobile 自动升级的限制
 
@@ -137,6 +137,7 @@ Android 侧载（sideload）应用无法实现静默自动更新，这是 Androi
 3. **安全策略**：APK 自动替换需要系统级权限，普通应用无法获取
 
 **如需实现 Mobile 真正的自动更新，需要上架 Google Play Store。** Google Play 提供：
+
 - 后台自动下载更新
 - Wi-Fi 下静默安装
 - 灰度发布 / 分阶段推送
diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index ea16f903..7dbfd6c1 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -1,20 +1,25 @@
-import { resolve } from 'path'
-import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
-import react from '@vitejs/plugin-react'
-import type { Plugin } from 'vite'
+import { resolve } from "path";
+import { defineConfig, externalizeDepsPlugin } from "electron-vite";
+import react from "@vitejs/plugin-react";
+import type { Plugin } from "vite";
 
 // Stub Capacitor modules for desktop dev server (they only run on mobile)
-const CAPACITOR_MODULES = ['@capacitor/core', '@capacitor/filesystem', '@capacitor/browser']
+const CAPACITOR_MODULES = [
+  "@capacitor/core",
+  "@capacitor/filesystem",
+  "@capacitor/browser",
+];
 function stubCapacitorPlugin(): Plugin {
   return {
-    name: 'stub-capacitor',
+    name: "stub-capacitor",
     resolveId(id) {
-      if (CAPACITOR_MODULES.includes(id)) return '\0' + id
+      if (CAPACITOR_MODULES.includes(id)) return "\0" + id;
     },
     load(id) {
-      if (id.startsWith('\0@capacitor/')) return 'export default {}; export const CapacitorHttp = {}; export const Filesystem = {}; export const Directory = {}; export const Browser = {};'
-    }
-  }
+      if (id.startsWith("\0@capacitor/"))
+        return "export default {}; export const CapacitorHttp = {}; export const Filesystem = {}; export const Directory = {}; export const Browser = {};";
+    },
+  };
 }
 
 export default defineConfig({
@@ -23,52 +28,48 @@ export default defineConfig({
     build: {
       rollupOptions: {
         input: {
-          index: resolve(__dirname, 'electron/main.ts')
+          index: resolve(__dirname, "electron/main.ts"),
         },
-        external: ['sql.js']
-      }
-    }
+        external: ["sql.js"],
+      },
+    },
   },
   preload: {
     plugins: [externalizeDepsPlugin()],
     build: {
       rollupOptions: {
         input: {
-          index: resolve(__dirname, 'electron/preload.ts')
-        }
-      }
-    }
+          index: resolve(__dirname, "electron/preload.ts"),
+        },
+      },
+    },
   },
   renderer: {
-    root: '.',
+    root: ".",
     resolve: {
       alias: {
-        '@': resolve(__dirname, 'src')
-      }
+        "@": resolve(__dirname, "src"),
+      },
     },
     plugins: [stubCapacitorPlugin(), react()],
     build: {
       rollupOptions: {
-        input: resolve(__dirname, 'index.html'),
+        input: resolve(__dirname, "index.html"),
         // Externalize Capacitor modules - they're only used in mobile builds
-        external: CAPACITOR_MODULES
-      }
+        external: CAPACITOR_MODULES,
+      },
     },
     optimizeDeps: {
-      include: [
-        'onnxruntime-web',
-        'upscaler',
-        '@huggingface/transformers'
-      ],
-      exclude: ['@google/model-viewer']
+      include: ["onnxruntime-web", "upscaler", "@huggingface/transformers"],
+      exclude: ["@google/model-viewer"],
     },
     server: {
       port: 5173,
-      strictPort: false,  // Auto-find available port if 5173 is in use
-      host: '0.0.0.0'
+      strictPort: false, // Auto-find available port if 5173 is in use
+      host: "0.0.0.0",
     },
     worker: {
-      format: 'es'
-    }
-  }
-})
+      format: "es",
+    },
+  },
+});
diff --git a/electron/lib/sdGenerator.ts b/electron/lib/sdGenerator.ts
index 0da78399..20501e1d 100644
--- a/electron/lib/sdGenerator.ts
+++ b/electron/lib/sdGenerator.ts
@@ -8,55 +8,55 @@
  * - Log streaming
  */
 
-import { spawn, ChildProcess } from 'child_process'
-import { existsSync, mkdirSync } from 'fs'
-import { dirname } from 'path'
+import { spawn, ChildProcess } from "child_process";
+import { existsSync, mkdirSync } from "fs";
+import { dirname } from "path";
 
 export interface GenerationOptions {
-  binaryPath: string
-  modelPath: string
-  llmPath?: string
-  vaePath?: string
-  clipOnCpu?: boolean
-  vaeTiling?: boolean
-  prompt: string
-  negativePrompt?: string
-  width: number
-  height: number
-  steps: number
-  cfgScale: number
-  seed?: number
-  samplingMethod?: string
-  scheduler?: string
-  outputPath: string
-  onProgress?: (progress: GenerationProgress) => void
-  onLog?: (log: LogMessage) => void
+  binaryPath: string;
+  modelPath: string;
+  llmPath?: string;
+  vaePath?: string;
+  clipOnCpu?: boolean;
+  vaeTiling?: boolean;
+  prompt: string;
+  negativePrompt?: string;
+  width: number;
+  height: number;
+  steps: number;
+  cfgScale: number;
+  seed?: number;
+  samplingMethod?: string;
+  scheduler?: string;
+  outputPath: string;
+  onProgress?: (progress: GenerationProgress) => void;
+  onLog?: (log: LogMessage) => void;
 }
 
 export interface GenerationProgress {
-  phase: 'generate'
-  progress: number // 0-100
+  phase: "generate";
+  progress: number; // 0-100
   detail?: {
-    current: number
-    total: number
-    unit: 'steps'
-  }
+    current: number;
+    total: number;
+    unit: "steps";
+  };
 }
 
 export interface LogMessage {
-  type: 'stdout' | 'stderr'
-  message: string
+  type: "stdout" | "stderr";
+  message: string;
 }
 
 export interface GenerationResult {
-  success: boolean
-  outputPath?: string
-  error?: string
+  success: boolean;
+  outputPath?: string;
+  error?: string;
 }
 
 export class SDGenerator {
-  private activeProcess: ChildProcess | null = null
-  private isCancelling = false
+  private activeProcess: ChildProcess | null = null;
+  private isCancelling = false;
 
   /**
    * Generate an image using stable-diffusion.cpp binary
@@ -76,217 +76,221 @@ export class SDGenerator {
       seed,
       samplingMethod,
       scheduler,
-    outputPath,
-    clipOnCpu,
-    vaeTiling,
-    onProgress,
-    onLog
-  } = options
+      outputPath,
+      clipOnCpu,
+      vaeTiling,
+      onProgress,
+      onLog,
+    } = options;
 
     // Validate binary exists
     if (!existsSync(binaryPath)) {
       return {
         success: false,
-        error: `Binary not found at: ${binaryPath}`
-      }
+        error: `Binary not found at: ${binaryPath}`,
+      };
     }
 
     // Sanitize prompt (escape dangerous characters)
-    const sanitizePrompt = (text: string) => text.replace(/["`$\\]/g, '\\$&').trim()
-    const safePrompt = sanitizePrompt(prompt)
-    const safeNegPrompt = negativePrompt ? sanitizePrompt(negativePrompt) : ''
+    const sanitizePrompt = (text: string) =>
+      text.replace(/["`$\\]/g, "\\$&").trim();
+    const safePrompt = sanitizePrompt(prompt);
+    const safeNegPrompt = negativePrompt ? sanitizePrompt(negativePrompt) : "";
 
     // Ensure output directory exists
-    const outputDir = dirname(outputPath)
+    const outputDir = dirname(outputPath);
     if (!existsSync(outputDir)) {
-      mkdirSync(outputDir, { recursive: true })
+      mkdirSync(outputDir, { recursive: true });
     }
 
     // Build command arguments
     const args = [
-      '--diffusion-model',
+      "--diffusion-model",
       modelPath,
-      '-p',
+      "-p",
       safePrompt,
-      '-W',
+      "-W",
       width.toString(),
-      '-H',
+      "-H",
       height.toString(),
-      '--steps',
+      "--steps",
       steps.toString(),
-      '--cfg-scale',
+      "--cfg-scale",
       cfgScale.toString(),
-      '-o',
+      "-o",
       outputPath,
-      '-v', // Verbose
-      '--offload-to-cpu', // Offload to CPU when needed
-      '--diffusion-fa' // Use Flash Attention
-    ]
+      "-v", // Verbose
+      "--offload-to-cpu", // Offload to CPU when needed
+      "--diffusion-fa", // Use Flash Attention
+    ];
 
     if (clipOnCpu) {
-      args.push('--clip-on-cpu')
+      args.push("--clip-on-cpu");
     }
 
     if (vaeTiling) {
-      args.push('--vae-tiling')
+      args.push("--vae-tiling");
     }
 
     // Add LLM (text encoder) if provided
     if (llmPath && existsSync(llmPath)) {
-      args.push('--llm', llmPath)
+      args.push("--llm", llmPath);
     }
 
     // Add VAE if provided
     if (vaePath && existsSync(vaePath)) {
-      args.push('--vae', vaePath)
+      args.push("--vae", vaePath);
     }
 
     if (safeNegPrompt) {
-      args.push('-n', safeNegPrompt)
+      args.push("-n", safeNegPrompt);
     }
 
     if (seed !== undefined) {
-      args.push('--seed', seed.toString())
+      args.push("--seed", seed.toString());
     }
 
     if (samplingMethod) {
-      args.push('--sampling-method', samplingMethod)
+      args.push("--sampling-method", samplingMethod);
     }
 
     if (scheduler) {
-      args.push('--scheduler', scheduler)
+      args.push("--scheduler", scheduler);
     }
 
-    console.log('[SDGenerator] Spawning SD process:', binaryPath)
-    console.log('[SDGenerator] Arguments:', JSON.stringify(args))
+    console.log("[SDGenerator] Spawning SD process:", binaryPath);
+    console.log("[SDGenerator] Arguments:", JSON.stringify(args));
 
-    const binaryDir = dirname(binaryPath)
+    const binaryDir = dirname(binaryPath);
     const ldLibraryPath = process.env.LD_LIBRARY_PATH
       ? `${binaryDir}:${process.env.LD_LIBRARY_PATH}`
-      : binaryDir
+      : binaryDir;
 
     // Spawn child process
     const childProcess = spawn(binaryPath, args, {
       cwd: outputDir,
-      env: { ...process.env, LD_LIBRARY_PATH: ldLibraryPath }
-    })
+      env: { ...process.env, LD_LIBRARY_PATH: ldLibraryPath },
+    });
 
     // Track active process for cancellation
-    this.activeProcess = childProcess
+    this.activeProcess = childProcess;
 
-    let stderrData = ''
-    let stdoutData = ''
+    let stderrData = "";
+    let stdoutData = "";
 
     // Listen to stdout and send logs + parse progress
-    childProcess.stdout.on('data', (data) => {
-      const log = data.toString()
-      stdoutData += log
+    childProcess.stdout.on("data", (data) => {
+      const log = data.toString();
+      stdoutData += log;
 
       // Send log to caller
       if (onLog) {
         onLog({
-          type: 'stdout',
-          message: log
-        })
+          type: "stdout",
+          message: log,
+        });
       }
 
       // Parse progress from stdout (some SD versions output here)
-      const progressInfo = this.parseProgress(log)
+      const progressInfo = this.parseProgress(log);
       if (progressInfo && onProgress) {
-        const scaledProgress = 10 + Math.min(progressInfo.progress, 100) * 0.9
+        const scaledProgress = 10 + Math.min(progressInfo.progress, 100) * 0.9;
         onProgress({
-          phase: 'generate',
+          phase: "generate",
           progress: Math.min(scaledProgress, 99),
           detail: {
             current: progressInfo.current,
             total: progressInfo.total,
-            unit: 'steps'
-          }
-        })
+            unit: "steps",
+          },
+        });
       }
-    })
+    });
 
     // Listen to stderr and send logs + parse progress
-    childProcess.stderr.on('data', (data) => {
-      const log = data.toString()
-      stderrData += log
+    childProcess.stderr.on("data", (data) => {
+      const log = data.toString();
+      stderrData += log;
 
       // Send log to caller
       if (onLog) {
         onLog({
-          type: 'stderr',
-          message: log
-        })
+          type: "stderr",
+          message: log,
+        });
       }
 
       // Parse progress from stderr
-      const progressInfo = this.parseProgress(log)
+      const progressInfo = this.parseProgress(log);
       if (progressInfo && onProgress) {
-        const scaledProgress = 10 + Math.min(progressInfo.progress, 100) * 0.9
+        const scaledProgress = 10 + Math.min(progressInfo.progress, 100) * 0.9;
         onProgress({
-          phase: 'generate',
+          phase: "generate",
           progress: Math.min(scaledProgress, 99),
           detail: {
             current: progressInfo.current,
             total: progressInfo.total,
-            unit: 'steps'
-          }
-        })
+            unit: "steps",
+          },
+        });
       }
-    })
+    });
 
     // Wait for process to end
     return new Promise((resolve) => {
-      childProcess.on('close', (code, signal) => {
-        this.activeProcess = null
-        const wasCancelled = this.isCancelling || signal === 'SIGTERM' || signal === 'SIGINT'
-        this.isCancelling = false
+      childProcess.on("close", (code, signal) => {
+        this.activeProcess = null;
+        const wasCancelled =
+          this.isCancelling || signal === "SIGTERM" || signal === "SIGINT";
+        this.isCancelling = false;
 
         if (wasCancelled) {
           resolve({
             success: false,
-            error: 'Cancelled'
-          })
-          return
+            error: "Cancelled",
+          });
+          return;
         }
 
         if (code === 0 && existsSync(outputPath)) {
-          console.log('[SDGenerator] Generation successful')
+          console.log("[SDGenerator] Generation successful");
           if (onProgress) {
             onProgress({
-              phase: 'generate',
-              progress: 100
-            })
+              phase: "generate",
+              progress: 100,
+            });
           }
           resolve({
             success: true,
-            outputPath: outputPath
-          })
+            outputPath: outputPath,
+          });
         } else {
           // Extract error information
-          const errorLines = stderrData.split('\n').filter((line) => line.trim())
+          const errorLines = stderrData
+            .split("\n")
+            .filter((line) => line.trim());
           const errorMsg =
             errorLines.length > 0
               ? errorLines[errorLines.length - 1]
-              : `Process exited with code ${code ?? 'unknown'}`
+              : `Process exited with code ${code ?? "unknown"}`;
 
-          console.error('[SDGenerator] Generation failed:', errorMsg)
+          console.error("[SDGenerator] Generation failed:", errorMsg);
           resolve({
             success: false,
-            error: errorMsg
-          })
+            error: errorMsg,
+          });
         }
-      })
+      });
 
-      childProcess.on('error', (err) => {
-        this.activeProcess = null
-        console.error('[SDGenerator] Process error:', err.message)
+      childProcess.on("error", (err) => {
+        this.activeProcess = null;
+        console.error("[SDGenerator] Process error:", err.message);
         resolve({
           success: false,
-          error: err.message
-        })
-      })
-    })
+          error: err.message,
+        });
+      });
+    });
   }
 
   /**
@@ -298,42 +302,45 @@ export class SDGenerator {
    * - "|==================================================| 12/12 - 7.28s/it"
    */
   private parseProgress(log: string): {
-    current: number
-    total: number
-    progress: number
+    current: number;
+    total: number;
+    progress: number;
   } | null {
     // Strip ANSI escape codes and scan the most recent lines for progress
-    const cleaned = log.replace(/\x1b\[[0-9;]*[A-Za-z]/g, '')
-    const lines = cleaned.split(/[\r\n]+/).filter(Boolean).reverse()
+    const cleaned = log.replace(/\x1b\[[0-9;]*[A-Za-z]/g, "");
+    const lines = cleaned
+      .split(/[\r\n]+/)
+      .filter(Boolean)
+      .reverse();
 
     for (const line of lines) {
       // Match "step: X/Y" or "sampling: X/Y"
-      let stepMatch = line.match(/(?:step|sampling):\s*(\d+)\/(\d+)/)
+      let stepMatch = line.match(/(?:step|sampling):\s*(\d+)\/(\d+)/);
 
       if (!stepMatch) {
         // Match progress bar format: |===...===| 12/20 - time
         // Must have dash or space after the numbers to avoid matching resolution
-        stepMatch = line.match(/\|[=\s>-]+\|\s*(\d+)\/(\d+)\s*[-\s]/)
+        stepMatch = line.match(/\|[=\s>-]+\|\s*(\d+)\/(\d+)\s*[-\s]/);
       }
 
       if (!stepMatch) {
         // Match tqdm-style output: "  3/20 [00:00<00:01, 3.45it/s]"
-        stepMatch = line.match(/\b(\d+)\s*\/\s*(\d+)\b.*(?:it\/s|s\/it|\])/)
+        stepMatch = line.match(/\b(\d+)\s*\/\s*(\d+)\b.*(?:it\/s|s\/it|\])/);
       }
 
       if (stepMatch) {
-        const current = parseInt(stepMatch[1], 10)
-        const total = parseInt(stepMatch[2], 10)
+        const current = parseInt(stepMatch[1], 10);
+        const total = parseInt(stepMatch[2], 10);
 
         // Validate: reasonable step range and current > 0 and current <= total
         if (total >= 1 && total <= 512 && current > 0 && current <= total) {
-          const progress = Math.round((current / total) * 100)
-          return { current, total, progress }
+          const progress = Math.round((current / total) * 100);
+          return { current, total, progress };
         }
       }
     }
 
-    return null
+    return null;
   }
 
   /**
@@ -341,12 +348,12 @@ export class SDGenerator {
    */
   cancel(): boolean {
     if (this.activeProcess) {
-      console.log('[SDGenerator] Cancelling generation')
-      this.isCancelling = true
-      this.activeProcess.kill('SIGTERM')
-      this.activeProcess = null
-      return true
+      console.log("[SDGenerator] Cancelling generation");
+      this.isCancelling = true;
+      this.activeProcess.kill("SIGTERM");
+      this.activeProcess = null;
+      return true;
     }
-    return false
+    return false;
   }
 }
diff --git a/electron/main.ts b/electron/main.ts
index 9cd7763c..d8bc81c9 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1,32 +1,59 @@
-import { app, BrowserWindow, shell, ipcMain, dialog, Menu, clipboard, protocol, net } from 'electron'
-import { join, dirname } from 'path'
-import { existsSync, readFileSync, writeFileSync, mkdirSync, createWriteStream, unlinkSync, statSync, readdirSync, copyFileSync } from 'fs'
-import { readdir, stat } from 'fs/promises'
-import AdmZip from 'adm-zip'
-import { electronApp, optimizer, is } from '@electron-toolkit/utils'
-import { autoUpdater, UpdateInfo } from 'electron-updater'
-import { spawn, execSync } from 'child_process'
-import https from 'https'
-import http from 'http'
-import { pathToFileURL } from 'url'
-import { SDGenerator } from './lib/sdGenerator'
-import log from 'electron-log'
-import { initWorkflowModule, closeWorkflowDatabase } from './workflow'
+import {
+  app,
+  BrowserWindow,
+  shell,
+  ipcMain,
+  dialog,
+  Menu,
+  clipboard,
+  protocol,
+  net,
+} from "electron";
+import { join, dirname } from "path";
+import {
+  existsSync,
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  createWriteStream,
+  unlinkSync,
+  statSync,
+  readdirSync,
+  copyFileSync,
+} from "fs";
+import { readdir, stat } from "fs/promises";
+import AdmZip from "adm-zip";
+import { electronApp, optimizer, is } from "@electron-toolkit/utils";
+import { autoUpdater, UpdateInfo } from "electron-updater";
+import { spawn, execSync } from "child_process";
+import https from "https";
+import http from "http";
+import { pathToFileURL } from "url";
+import { SDGenerator } from "./lib/sdGenerator";
+import log from "electron-log";
+import { initWorkflowModule, closeWorkflowDatabase } from "./workflow";
 
 // Suppress Chromium's noisy ffmpeg pixel format warnings (harmless, caused by video thumbnail decoding)
 // These come from GPU/renderer processes' stderr and cannot be disabled via command-line switches.
 // Filter them at the process level:
-const originalStderrWrite = process.stderr.write.bind(process.stderr)
-process.stderr.write = (chunk: string | Uint8Array, ...args: unknown[]): boolean => {
-  const str = typeof chunk === 'string' ? chunk : chunk.toString()
-  if (str.includes('Unsupported pixel format') || str.includes('ffmpeg_common.cc')) return true
-  return (originalStderrWrite as (...a: unknown[]) => boolean)(chunk, ...args)
-}
+const originalStderrWrite = process.stderr.write.bind(process.stderr);
+process.stderr.write = (
+  chunk: string | Uint8Array,
+  ...args: unknown[]
+): boolean => {
+  const str = typeof chunk === "string" ? chunk : chunk.toString();
+  if (
+    str.includes("Unsupported pixel format") ||
+    str.includes("ffmpeg_common.cc")
+  )
+    return true;
+  return (originalStderrWrite as (...a: unknown[]) => boolean)(chunk, ...args);
+};
 
 // Linux-specific flags
-if (process.platform === 'linux') {
-  app.commandLine.appendSwitch('no-sandbox')
-  app.commandLine.appendSwitch('disable-gpu-sandbox')
+if (process.platform === "linux") {
+  app.commandLine.appendSwitch("no-sandbox");
+  app.commandLine.appendSwitch("disable-gpu-sandbox");
 }
 
 // Configure electron-log
@@ -34,62 +61,67 @@ if (process.platform === 'linux') {
 // - Windows: %USERPROFILE%\AppData\Roaming\wavespeed-desktop\logs\main.log
 // - macOS: ~/Library/Logs/wavespeed-desktop/main.log
 // - Linux: ~/.config/wavespeed-desktop/logs/main.log
-log.transports.file.level = 'info'
-log.transports.console.level = is.dev ? 'debug' : 'info'
-log.info('='.repeat(80))
-log.info('Application starting...')
-log.info('Version:', app.getVersion())
-log.info('Platform:', process.platform, process.arch)
-log.info('Electron:', process.versions.electron)
-log.info('Chrome:', process.versions.chrome)
-log.info('Node:', process.versions.node)
-log.info('Log file:', log.transports.file.getFile().path)
-log.info('='.repeat(80))
+log.transports.file.level = "info";
+log.transports.console.level = is.dev ? "debug" : "info";
+log.info("=".repeat(80));
+log.info("Application starting...");
+log.info("Version:", app.getVersion());
+log.info("Platform:", process.platform, process.arch);
+log.info("Electron:", process.versions.electron);
+log.info("Chrome:", process.versions.chrome);
+log.info("Node:", process.versions.node);
+log.info("Log file:", log.transports.file.getFile().path);
+log.info("=".repeat(80));
 
 // Override console methods to use electron-log
-console.log = log.log.bind(log)
-console.info = log.info.bind(log)
-console.warn = log.warn.bind(log)
-console.error = log.error.bind(log)
-console.debug = log.debug.bind(log)
+console.log = log.log.bind(log);
+console.info = log.info.bind(log);
+console.warn = log.warn.bind(log);
+console.error = log.error.bind(log);
+console.debug = log.debug.bind(log);
 
 // Settings storage
-const userDataPath = app.getPath('userData')
-const settingsPath = join(userDataPath, 'settings.json')
+const userDataPath = app.getPath("userData");
+const settingsPath = join(userDataPath, "settings.json");
 
 // Global instances for SD operations
-const sdGenerator = new SDGenerator()
+const sdGenerator = new SDGenerator();
 
 // Global reference to active SD generation process (deprecated - using sdGenerator)
-let activeSDProcess: ReturnType<typeof spawn> | null = null
+let activeSDProcess: ReturnType<typeof spawn> | null = null;
 
 // Cache for system info to avoid repeated checks
-let systemInfoCache: { platform: string; arch: string; acceleration: string; supported: boolean } | null = null
-let metalSupportCache: boolean | null = null
-let binaryPathLoggedOnce = false
+let systemInfoCache: {
+  platform: string;
+  arch: string;
+  acceleration: string;
+  supported: boolean;
+} | null = null;
+let metalSupportCache: boolean | null = null;
+let binaryPathLoggedOnce = false;
 
 function parseMaxNumberFromOutput(output: string): number | null {
   const values = output
     .split(/\r?\n/)
-    .map((line) => parseInt(line.replace(/[^\d]/g, '').trim(), 10))
-    .filter((value) => Number.isFinite(value) && value > 0)
+    .map((line) => parseInt(line.replace(/[^\d]/g, "").trim(), 10))
+    .filter((value) => Number.isFinite(value) && value > 0);
 
   if (values.length === 0) {
-    return null
+    return null;
   }
 
-  return Math.max(...values)
+  return Math.max(...values);
 }
 
 function getNvidiaVramMb(): number | null {
   try {
     const output = execSync(
-      'nvidia-smi --query-gpu=memory.total --format=csv,noheader,nounits',
-      { encoding: 'utf8', timeout: 3000 }
-    )
-    return parseMaxNumberFromOutput(output)
+      "nvidia-smi --query-gpu=memory.total --format=csv,noheader,nounits",
+      { encoding: "utf8", timeout: 3000 },
+    );
+    return parseMaxNumberFromOutput(output);
   } catch (error) {
-    return null
+    return null;
   }
 }
 
@@ -97,978 +129,1054 @@ function getWindowsGpuVramMb(): number | null {
   try {
     const output = execSync(
       'powershell -NoProfile -Command "Get-CimInstance Win32_VideoController | Select-Object -ExpandProperty AdapterRAM"',
-      { encoding: 'utf8', timeout: 3000 }
-    )
-    const bytes = parseMaxNumberFromOutput(output)
-    if (!bytes) return null
-    return Math.round(bytes / (1024 * 1024))
+      { encoding: "utf8", timeout: 3000 },
+    );
+    const bytes = parseMaxNumberFromOutput(output);
+    if (!bytes) return null;
+    return Math.round(bytes / (1024 * 1024));
   } catch (error) {
     try {
       const output = execSync(
-        'wmic path win32_VideoController get AdapterRAM',
-        { encoding: 'utf8', timeout: 3000 }
-      )
-      const bytes = parseMaxNumberFromOutput(output)
-      if (!bytes) return null
-      return Math.round(bytes / (1024 * 1024))
+        "wmic path win32_VideoController get AdapterRAM",
+        { encoding: "utf8", timeout: 3000 },
+      );
+      const bytes = parseMaxNumberFromOutput(output);
+      if (!bytes) return null;
+      return Math.round(bytes / (1024 * 1024));
     } catch (err) {
-      return null
+      return null;
     }
   }
 }
 
 function getGpuVramMb(): number | null {
-  if (process.platform !== 'win32') {
-    return null
+  if (process.platform !== "win32") {
+    return null;
   }
 
-  return getNvidiaVramMb() ?? getWindowsGpuVramMb()
+  return getNvidiaVramMb() ?? getWindowsGpuVramMb();
 }
 
 interface Settings {
-  apiKey: string
-  theme: 'light' | 'dark' | 'system'
-  defaultPollInterval: number
-  defaultTimeout: number
-  updateChannel: 'stable' | 'nightly'
-  autoCheckUpdate: boolean
-  autoSaveAssets: boolean
-  assetsDirectory: string
-  language: string
+  apiKey: string;
+  theme: "light" | "dark" | "system";
+  defaultPollInterval: number;
+  defaultTimeout: number;
+  updateChannel: "stable" | "nightly";
+  autoCheckUpdate: boolean;
+  autoSaveAssets: boolean;
+  assetsDirectory: string;
+  language: string;
 }
 
 interface AssetMetadata {
-  id: string
-  filePath: string
-  fileName: string
-  type: 'image' | 'video' | 'audio' | 'text' | 'json'
-  modelId: string
-  modelName: string
-  createdAt: string
-  fileSize: number
-  tags: string[]
-  favorite: boolean
-  predictionId?: string
-  originalUrl?: string
-  source?: 'playground' | 'workflow' | 'free-tool'
-  workflowId?: string
-  workflowName?: string
-  nodeId?: string
-  executionId?: string
+  id: string;
+  filePath: string;
+  fileName: string;
+  type: "image" | "video" | "audio" | "text" | "json";
+  modelId: string;
+  modelName: string;
+  createdAt: string;
+  fileSize: number;
+  tags: string[];
+  favorite: boolean;
+  predictionId?: string;
+  originalUrl?: string;
+  source?: "playground" | "workflow" | "free-tool";
+  workflowId?: string;
+  workflowName?: string;
+  nodeId?: string;
+  executionId?: string;
 }
 
 // ─── Persistent key-value state (survives app restarts, unlike renderer localStorage) ────
-const statePath = join(userDataPath, 'renderer-state.json')
+const statePath = join(userDataPath, "renderer-state.json");
 
 function loadState(): Record<string, unknown> {
   try {
     if (existsSync(statePath)) {
-      return JSON.parse(readFileSync(statePath, 'utf-8'))
+      return JSON.parse(readFileSync(statePath, "utf-8"));
     }
-  } catch { /* corrupted file — start fresh */ }
-  return {}
+  } catch {
+    /* corrupted file — start fresh */
+  }
+  return {};
 }
 
 function saveState(state: Record<string, unknown>): void {
   try {
-    if (!existsSync(userDataPath)) mkdirSync(userDataPath, { recursive: true })
-    writeFileSync(statePath, JSON.stringify(state, null, 2))
+    if (!existsSync(userDataPath)) mkdirSync(userDataPath, { recursive: true });
+    writeFileSync(statePath, JSON.stringify(state, null, 2));
   } catch (error) {
-    console.error('Failed to save renderer state:', error)
+    console.error("Failed to save renderer state:", error);
   }
 }
 
-const defaultAssetsDirectory = join(app.getPath('documents'), 'WaveSpeed')
-const assetsMetadataPath = join(userDataPath, 'assets-metadata.json')
+const defaultAssetsDirectory = join(app.getPath("documents"), "WaveSpeed");
+const assetsMetadataPath = join(userDataPath, "assets-metadata.json");
 
 const defaultSettings: Settings = {
-  apiKey: '',
-  theme: 'system',
+  apiKey: "",
+  theme: "system",
   defaultPollInterval: 1000,
   defaultTimeout: 36000,
-  updateChannel: 'stable',
+  updateChannel: "stable",
   autoCheckUpdate: true,
   autoSaveAssets: true,
   assetsDirectory: defaultAssetsDirectory,
-  language: 'auto'
-}
+  language: "auto",
+};
 
 function loadSettings(): Settings {
   try {
     if (existsSync(settingsPath)) {
-      const data = readFileSync(settingsPath, 'utf-8')
-      return { ...defaultSettings, ...JSON.parse(data) }
+      const data = readFileSync(settingsPath, "utf-8");
+      return { ...defaultSettings, ...JSON.parse(data) };
     }
   } catch (error) {
-    console.error('Failed to load settings:', error)
+    console.error("Failed to load settings:", error);
   }
-  return { ...defaultSettings }
+  return { ...defaultSettings };
 }
 
 function saveSettings(settings: Partial<Settings>): void {
   try {
-    const currentSettings = loadSettings()
-    const newSettings = { ...currentSettings, ...settings }
+    const currentSettings = loadSettings();
+    const newSettings = { ...currentSettings, ...settings };
     if (!existsSync(userDataPath)) {
-      mkdirSync(userDataPath, { recursive: true })
+      mkdirSync(userDataPath, { recursive: true });
     }
-    writeFileSync(settingsPath, JSON.stringify(newSettings, null, 2))
+    writeFileSync(settingsPath, JSON.stringify(newSettings, null, 2));
   } catch (error) {
-    console.error('Failed to save settings:', error)
+    console.error("Failed to save settings:", error);
   }
 }
 
 function createWindow(): void {
-  const isMac = process.platform === 'darwin'
+  const isMac = process.platform === "darwin";
   mainWindow = new BrowserWindow({
     width: 1400,
     height: 900,
-    minWidth: 1000,
-    minHeight: 700,
+    minWidth: 520,
+    minHeight: 400,
     show: false,
     autoHideMenuBar: true,
-    icon: join(__dirname, '../../build/icon.png'),
-    backgroundColor: '#080c16',
-    titleBarStyle: isMac ? 'hiddenInset' : 'hidden',
+    icon: join(__dirname, "../../build/icon.png"),
+    backgroundColor: "#080c16",
+    titleBarStyle: isMac ? "hiddenInset" : "hidden",
     ...(isMac ? { trafficLightPosition: { x: 10, y: 8 } } : {}),
-    ...(process.platform !== 'darwin' ? {
-      titleBarOverlay: {
-        color: '#080c16',
-        symbolColor: '#6b7280',
-        height: 32
-      }
-    } : {}),
+    ...(process.platform !== "darwin"
+      ? {
+          titleBarOverlay: {
+            color: "#080c16",
+            symbolColor: "#6b7280",
+            height: 32,
+          },
+        }
+      : {}),
     webPreferences: {
-      preload: join(__dirname, '../preload/index.js'),
+      preload: join(__dirname, "../preload/index.js"),
       sandbox: false,
       contextIsolation: true,
       nodeIntegration: false,
-      webSecurity: !is.dev // Disable web security in dev mode to bypass CORS
-    }
-  })
+      webSecurity: !is.dev, // Disable web security in dev mode to bypass CORS
+    },
+  });
 
-  mainWindow.on('ready-to-show', () => {
-    mainWindow?.show()
-  })
+  mainWindow.on("ready-to-show", () => {
+    mainWindow?.show();
+  });
 
   // macOS: Hide window instead of closing when clicking the red button
   // The app will only quit when user presses Cmd+Q
-  if (process.platform === 'darwin') {
-    mainWindow.on('close', (event) => {
+  if (process.platform === "darwin") {
+    mainWindow.on("close", (event) => {
       if (!(app as typeof app & { isQuitting?: boolean }).isQuitting) {
-        event.preventDefault()
+        event.preventDefault();
         if (mainWindow?.isFullScreen()) {
-          const targetWindow = mainWindow
-          targetWindow.once('leave-full-screen', () => {
-            targetWindow.hide()
-          })
-          targetWindow.setFullScreen(false)
+          const targetWindow = mainWindow;
+          targetWindow.once("leave-full-screen", () => {
+            targetWindow.hide();
+          });
+          targetWindow.setFullScreen(false);
         } else {
-          mainWindow?.hide()
+          mainWindow?.hide();
         }
       }
-    })
+    });
   }
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
-    shell.openExternal(details.url)
-    return { action: 'deny' }
-  })
+    shell.openExternal(details.url);
+    return { action: "deny" };
+  });
 
   // Error handling for renderer
-  mainWindow.webContents.on('did-fail-load', (_, errorCode, errorDescription, validatedURL) => {
-    console.error('Failed to load:', errorCode, errorDescription, validatedURL)
-  })
-
-  mainWindow.webContents.on('render-process-gone', (_, details) => {
-    console.error('Render process gone:', details)
-  })
+  mainWindow.webContents.on(
+    "did-fail-load",
+    (_, errorCode, errorDescription, validatedURL) => {
+      console.error(
+        "Failed to load:",
+        errorCode,
+        errorDescription,
+        validatedURL,
+      );
+    },
+  );
+
+  mainWindow.webContents.on("render-process-gone", (_, details) => {
+    console.error("Render process gone:", details);
+  });
 
   // Load the app
-  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
+    mainWindow.loadURL(process.env["ELECTRON_RENDERER_URL"]);
   } else {
-    const indexPath = join(__dirname, '../renderer/index.html')
-    console.log('Loading renderer from:', indexPath)
-    console.log('File exists:', existsSync(indexPath))
-    mainWindow.loadFile(indexPath)
+    const indexPath = join(__dirname, "../renderer/index.html");
+    console.log("Loading renderer from:", indexPath);
+    console.log("File exists:", existsSync(indexPath));
+    mainWindow.loadFile(indexPath);
   }
 
   // Open DevTools with keyboard shortcut (Cmd+Opt+I on Mac, Ctrl+Shift+I on Windows/Linux)
-  mainWindow.webContents.on('before-input-event', (_, input) => {
-    if ((input.meta || input.control) && input.shift && input.key.toLowerCase() === 'i') {
-      mainWindow?.webContents.toggleDevTools()
+  mainWindow.webContents.on("before-input-event", (_, input) => {
+    if (
+      (input.meta || input.control) &&
+      input.shift &&
+      input.key.toLowerCase() === "i"
+    ) {
+      mainWindow?.webContents.toggleDevTools();
     }
     // Also allow F12
-    if (input.key === 'F12') {
-      mainWindow?.webContents.toggleDevTools()
+    if (input.key === "F12") {
+      mainWindow?.webContents.toggleDevTools();
     }
-  })
+  });
 
   // Enable right-click context menu
-  mainWindow.webContents.on('context-menu', (_, params) => {
-    const menuItems: Electron.MenuItemConstructorOptions[] = []
+  mainWindow.webContents.on("context-menu", (_, params) => {
+    const menuItems: Electron.MenuItemConstructorOptions[] = [];
 
     // Add text editing options when in editable field
     if (params.isEditable) {
       menuItems.push(
-        { label: 'Cut', role: 'cut', enabled: params.editFlags.canCut },
-        { label: 'Copy', role: 'copy', enabled: params.editFlags.canCopy },
-        { label: 'Paste', role: 'paste', enabled: params.editFlags.canPaste },
-        { type: 'separator' },
-        { label: 'Select All', role: 'selectAll' }
-      )
+        { label: "Cut", role: "cut", enabled: params.editFlags.canCut },
+        { label: "Copy", role: "copy", enabled: params.editFlags.canCopy },
+        { label: "Paste", role: "paste", enabled: params.editFlags.canPaste },
+        { type: "separator" },
+        { label: "Select All", role: "selectAll" },
+      );
     } else if (params.selectionText) {
       // Add copy option when text is selected
-      menuItems.push(
-        { label: 'Copy', role: 'copy' }
-      )
+      menuItems.push({ label: "Copy", role: "copy" });
     }
 
     // Add link options
     if (params.linkURL) {
-      if (menuItems.length > 0) menuItems.push({ type: 'separator' })
+      if (menuItems.length > 0) menuItems.push({ type: "separator" });
       menuItems.push(
         {
-          label: 'Open Link in Browser',
-          click: () => shell.openExternal(params.linkURL)
+          label: "Open Link in Browser",
+          click: () => shell.openExternal(params.linkURL),
         },
         {
-          label: 'Copy Link',
-          click: () => clipboard.writeText(params.linkURL)
-        }
-      )
+          label: "Copy Link",
+          click: () => clipboard.writeText(params.linkURL),
+        },
+      );
     }
 
     // Add image options
-    if (params.mediaType === 'image') {
-      if (menuItems.length > 0) menuItems.push({ type: 'separator' })
+    if (params.mediaType === "image") {
+      if (menuItems.length > 0) menuItems.push({ type: "separator" });
       menuItems.push(
         {
-          label: 'Copy Image',
-          click: () => mainWindow?.webContents.copyImageAt(params.x, params.y)
+          label: "Copy Image",
+          click: () => mainWindow?.webContents.copyImageAt(params.x, params.y),
         },
         {
-          label: 'Open Image in Browser',
-          click: () => shell.openExternal(params.srcURL)
-        }
-      )
+          label: "Open Image in Browser",
+          click: () => shell.openExternal(params.srcURL),
+        },
+      );
     }
 
     if (menuItems.length > 0) {
-      const menu = Menu.buildFromTemplate(menuItems)
-      menu.popup()
+      const menu = Menu.buildFromTemplate(menuItems);
+      menu.popup();
     }
-  })
+  });
 }
 
 // IPC Handlers
 
 // Update title bar overlay colors when theme changes (Windows only)
-ipcMain.handle('update-titlebar-theme', (_, isDark: boolean) => {
-  if (process.platform === 'darwin' || !mainWindow) return
+ipcMain.handle("update-titlebar-theme", (_, isDark: boolean) => {
+  if (process.platform === "darwin" || !mainWindow) return;
   try {
     mainWindow.setTitleBarOverlay({
-      color: isDark ? '#080c16' : '#f6f7f9',
-      symbolColor: isDark ? '#9ca3af' : '#6b7280',
-      height: 32
-    })
+      color: isDark ? "#080c16" : "#f6f7f9",
+      symbolColor: isDark ? "#9ca3af" : "#6b7280",
+      height: 32,
+    });
   } catch {
     // setTitleBarOverlay may not be available on all platforms
   }
-})
+});
 
-ipcMain.handle('get-api-key', () => {
-  const settings = loadSettings()
-  return settings.apiKey
-})
+ipcMain.handle("get-api-key", () => {
+  const settings = loadSettings();
+  return settings.apiKey;
+});
 
-ipcMain.handle('set-api-key', (_, apiKey: string) => {
-  saveSettings({ apiKey })
-  return true
-})
+ipcMain.handle("set-api-key", (_, apiKey: string) => {
+  saveSettings({ apiKey });
+  return true;
+});
 
-ipcMain.handle('get-settings', () => {
-  const settings = loadSettings()
+ipcMain.handle("get-settings", () => {
+  const settings = loadSettings();
   return {
     theme: settings.theme,
     defaultPollInterval: settings.defaultPollInterval,
     defaultTimeout: settings.defaultTimeout,
     updateChannel: settings.updateChannel,
     autoCheckUpdate: settings.autoCheckUpdate,
-    language: settings.language
-  }
-})
+    language: settings.language,
+  };
+});
 
-ipcMain.handle('set-settings', (_, newSettings: Partial<Settings>) => {
-  saveSettings(newSettings)
-  return true
-})
+ipcMain.handle("set-settings", (_, newSettings: Partial<Settings>) => {
+  saveSettings(newSettings);
+  return true;
+});
 
-ipcMain.handle('clear-all-data', () => {
-  saveSettings(defaultSettings)
-  return true
-})
+ipcMain.handle("clear-all-data", () => {
+  saveSettings(defaultSettings);
+  return true;
+});
 
 // Persistent renderer state (key-value, survives restarts)
-ipcMain.handle('get-state', (_, key: string) => {
-  const state = loadState()
-  return state[key] ?? null
-})
+ipcMain.handle("get-state", (_, key: string) => {
+  const state = loadState();
+  return state[key] ?? null;
+});
 
-ipcMain.handle('set-state', (_, key: string, value: unknown) => {
-  const state = loadState()
+ipcMain.handle("set-state", (_, key: string, value: unknown) => {
+  const state = loadState();
   if (value === null || value === undefined) {
-    delete state[key]
+    delete state[key];
   } else {
-    state[key] = value
+    state[key] = value;
   }
-  saveState(state)
-  return true
-})
+  saveState(state);
+  return true;
+});
 
-ipcMain.handle('remove-state', (_, key: string) => {
-  const state = loadState()
-  delete state[key]
-  saveState(state)
-  return true
-})
+ipcMain.handle("remove-state", (_, key: string) => {
+  const state = loadState();
+  delete state[key];
+  saveState(state);
+  return true;
+});
 
 // Open external URL handler
-ipcMain.handle('open-external', async (_, url: string) => {
-  await shell.openExternal(url)
-})
+ipcMain.handle("open-external", async (_, url: string) => {
+  await shell.openExternal(url);
+});
 
 // Download file handler
-ipcMain.handle('download-file', async (_, url: string, defaultFilename: string) => {
-  const mainWindow = BrowserWindow.getFocusedWindow()
-  if (!mainWindow) return { success: false, error: 'No focused window' }
-
-  // Show save dialog
-  const result = await dialog.showSaveDialog(mainWindow, {
-    defaultPath: defaultFilename,
-    filters: [
-      { name: 'All Files', extensions: ['*'] },
-      { name: 'Images', extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp'] },
-      { name: 'Videos', extensions: ['mp4', 'webm', 'mov'] }
-    ]
-  })
-
-  if (result.canceled || !result.filePath) {
-    return { success: false, canceled: true }
-  }
-
-  // Handle local-asset:// URLs (Z-Image local outputs)
-  if (url.startsWith('local-asset://')) {
-    try {
-      const localPath = decodeURIComponent(url.replace('local-asset://', ''))
-      if (!existsSync(localPath)) {
-        return { success: false, error: 'Source file not found' }
+ipcMain.handle(
+  "download-file",
+  async (_, url: string, defaultFilename: string) => {
+    const mainWindow = BrowserWindow.getFocusedWindow();
+    if (!mainWindow) return { success: false, error: "No focused window" };
+
+    // Show save dialog
+    const result = await dialog.showSaveDialog(mainWindow, {
+      defaultPath: defaultFilename,
+      filters: [
+        { name: "All Files", extensions: ["*"] },
+        { name: "Images", extensions: ["png", "jpg", "jpeg", "gif", "webp"] },
+        { name: "Videos", extensions: ["mp4", "webm", "mov"] },
+      ],
+    });
+
+    if (result.canceled || !result.filePath) {
+      return { success: false, canceled: true };
+    }
+
+    // Handle local-asset:// URLs (Z-Image local outputs)
+    if (url.startsWith("local-asset://")) {
+      try {
+        const localPath = decodeURIComponent(url.replace("local-asset://", ""));
+        if (!existsSync(localPath)) {
+          return { success: false, error: "Source file not found" };
+        }
+        copyFileSync(localPath, result.filePath);
+        return { success: true, filePath: result.filePath };
+      } catch (err) {
+        return { success: false, error: (err as Error).message };
       }
-      copyFileSync(localPath, result.filePath)
-      return { success: true, filePath: result.filePath }
-    } catch (err) {
-      return { success: false, error: (err as Error).message }
     }
-  }
 
-  // Download the file from http/https
-  return new Promise((resolve) => {
-    const httpProtocol = url.startsWith('https') ? https : http
-    const file = createWriteStream(result.filePath!)
-
-    httpProtocol.get(url, (response) => {
-      // Handle redirects
-      if (response.statusCode === 301 || response.statusCode === 302) {
-        const redirectUrl = response.headers.location
-        if (redirectUrl) {
-          const redirectProtocol = redirectUrl.startsWith('https') ? https : http
-          redirectProtocol.get(redirectUrl, (redirectResponse) => {
-            redirectResponse.pipe(file)
-            file.on('finish', () => {
-              file.close()
-              resolve({ success: true, filePath: result.filePath })
-            })
-          }).on('error', (err) => {
-            resolve({ success: false, error: err.message })
-          })
-          return
-        }
-      }
+    // Download the file from http/https
+    return new Promise((resolve) => {
+      const httpProtocol = url.startsWith("https") ? https : http;
+      const file = createWriteStream(result.filePath!);
+
+      httpProtocol
+        .get(url, (response) => {
+          // Handle redirects
+          if (response.statusCode === 301 || response.statusCode === 302) {
+            const redirectUrl = response.headers.location;
+            if (redirectUrl) {
+              const redirectProtocol = redirectUrl.startsWith("https")
+                ? https
+                : http;
+              redirectProtocol
+                .get(redirectUrl, (redirectResponse) => {
+                  redirectResponse.pipe(file);
+                  file.on("finish", () => {
+                    file.close();
+                    resolve({ success: true, filePath: result.filePath });
+                  });
+                })
+                .on("error", (err) => {
+                  resolve({ success: false, error: err.message });
+                });
+              return;
+            }
+          }
 
-      response.pipe(file)
-      file.on('finish', () => {
-        file.close()
-        resolve({ success: true, filePath: result.filePath })
-      })
-    }).on('error', (err) => {
-      resolve({ success: false, error: err.message })
-    })
-  })
-})
+          response.pipe(file);
+          file.on("finish", () => {
+            file.close();
+            resolve({ success: true, filePath: result.filePath });
+          });
+        })
+        .on("error", (err) => {
+          resolve({ success: false, error: err.message });
+        });
+    });
+  },
+);
 
 // Silent file save handler — saves a remote URL to a local directory without dialog
-ipcMain.handle('save-file-silent', async (_, url: string, dir: string, fileName: string) => {
-  try {
-    if (!fileName) return { success: false, error: 'Missing filename' }
-    const targetDir = dir || app.getPath('downloads')
-    if (!existsSync(targetDir)) mkdirSync(targetDir, { recursive: true })
-    const filePath = join(targetDir, fileName)
-
-    // Handle local-asset:// URLs
-    if (url.startsWith('local-asset://')) {
-      const localPath = decodeURIComponent(url.replace('local-asset://', ''))
-      if (!existsSync(localPath)) return { success: false, error: 'Source file not found' }
-      copyFileSync(localPath, filePath)
-      return { success: true, filePath }
-    }
-
-    // Handle data: URLs
-    if (url.startsWith('data:')) {
-      const matches = url.match(/^data:[^;]+;base64,(.+)$/)
-      if (matches) {
-        writeFileSync(filePath, Buffer.from(matches[1], 'base64'))
-        return { success: true, filePath }
+ipcMain.handle(
+  "save-file-silent",
+  async (_, url: string, dir: string, fileName: string) => {
+    try {
+      if (!fileName) return { success: false, error: "Missing filename" };
+      const targetDir = dir || app.getPath("downloads");
+      if (!existsSync(targetDir)) mkdirSync(targetDir, { recursive: true });
+      const filePath = join(targetDir, fileName);
+
+      // Handle local-asset:// URLs
+      if (url.startsWith("local-asset://")) {
+        const localPath = decodeURIComponent(url.replace("local-asset://", ""));
+        if (!existsSync(localPath))
+          return { success: false, error: "Source file not found" };
+        copyFileSync(localPath, filePath);
+        return { success: true, filePath };
       }
-      return { success: false, error: 'Invalid data URL' }
-    }
 
-    // Download from http/https
-    return new Promise((resolve) => {
-      const httpProtocol = url.startsWith('https') ? https : http
-      const file = createWriteStream(filePath)
-      httpProtocol.get(url, (response) => {
-        if (response.statusCode === 301 || response.statusCode === 302) {
-          const redirectUrl = response.headers.location
-          if (redirectUrl) {
-            const rp = redirectUrl.startsWith('https') ? https : http
-            rp.get(redirectUrl, (rr) => {
-              rr.pipe(file)
-              file.on('finish', () => { file.close(); resolve({ success: true, filePath }) })
-            }).on('error', (err) => resolve({ success: false, error: err.message }))
-            return
-          }
+      // Handle data: URLs
+      if (url.startsWith("data:")) {
+        const matches = url.match(/^data:[^;]+;base64,(.+)$/);
+        if (matches) {
+          writeFileSync(filePath, Buffer.from(matches[1], "base64"));
+          return { success: true, filePath };
         }
-        response.pipe(file)
-        file.on('finish', () => { file.close(); resolve({ success: true, filePath }) })
-      }).on('error', (err) => resolve({ success: false, error: err.message }))
-    })
-  } catch (err) {
-    return { success: false, error: (err as Error).message }
-  }
-})
+        return { success: false, error: "Invalid data URL" };
+      }
+
+      // Download from http/https
+      return new Promise((resolve) => {
+        const httpProtocol = url.startsWith("https") ? https : http;
+        const file = createWriteStream(filePath);
+        httpProtocol
+          .get(url, (response) => {
+            if (response.statusCode === 301 || response.statusCode === 302) {
+              const redirectUrl = response.headers.location;
+              if (redirectUrl) {
+                const rp = redirectUrl.startsWith("https") ? https : http;
+                rp.get(redirectUrl, (rr) => {
+                  rr.pipe(file);
+                  file.on("finish", () => {
+                    file.close();
+                    resolve({ success: true, filePath });
+                  });
+                }).on("error", (err) =>
+                  resolve({ success: false, error: err.message }),
+                );
+                return;
+              }
+            }
+            response.pipe(file);
+            file.on("finish", () => {
+              file.close();
+              resolve({ success: true, filePath });
+            });
+          })
+          .on("error", (err) =>
+            resolve({ success: false, error: err.message }),
+          );
+      });
+    } catch (err) {
+      return { success: false, error: (err as Error).message };
+    }
+  },
+);
 
 // Assets metadata helpers
 function loadAssetsMetadata(): AssetMetadata[] {
   try {
     if (existsSync(assetsMetadataPath)) {
-      const data = readFileSync(assetsMetadataPath, 'utf-8')
-      return JSON.parse(data)
+      const data = readFileSync(assetsMetadataPath, "utf-8");
+      return JSON.parse(data);
     }
   } catch (error) {
-    console.error('Failed to load assets metadata:', error)
+    console.error("Failed to load assets metadata:", error);
   }
-  return []
+  return [];
 }
 
 function saveAssetsMetadata(metadata: AssetMetadata[]): void {
   try {
     if (!existsSync(userDataPath)) {
-      mkdirSync(userDataPath, { recursive: true })
+      mkdirSync(userDataPath, { recursive: true });
     }
-    writeFileSync(assetsMetadataPath, JSON.stringify(metadata, null, 2))
+    writeFileSync(assetsMetadataPath, JSON.stringify(metadata, null, 2));
   } catch (error) {
-    console.error('Failed to save assets metadata:', error)
+    console.error("Failed to save assets metadata:", error);
   }
 }
 
 // Assets IPC Handlers
-ipcMain.handle('get-assets-settings', () => {
-  const settings = loadSettings()
+ipcMain.handle("get-assets-settings", () => {
+  const settings = loadSettings();
   return {
     autoSaveAssets: settings.autoSaveAssets,
-    assetsDirectory: settings.assetsDirectory || defaultAssetsDirectory
-  }
-})
-
-ipcMain.handle('set-assets-settings', (_, newSettings: { autoSaveAssets?: boolean; assetsDirectory?: string }) => {
-  saveSettings(newSettings)
-  return true
-})
-
-ipcMain.handle('get-default-assets-directory', () => {
-  return defaultAssetsDirectory
-})
-
-ipcMain.handle('get-zimage-output-path', () => {
+    assetsDirectory: settings.assetsDirectory || defaultAssetsDirectory,
+  };
+});
+
+ipcMain.handle(
+  "set-assets-settings",
+  (_, newSettings: { autoSaveAssets?: boolean; assetsDirectory?: string }) => {
+    saveSettings(newSettings);
+    return true;
+  },
+);
+
+ipcMain.handle("get-default-assets-directory", () => {
+  return defaultAssetsDirectory;
+});
+
+ipcMain.handle("get-zimage-output-path", () => {
   // Use same ID format as other assets: base36 timestamp + random suffix
-  const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 6)
-  const settings = loadSettings()
-  const assetsDir = settings.assetsDirectory || defaultAssetsDirectory
-  const imagesDir = join(assetsDir, 'images')
+  const id =
+    Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
+  const settings = loadSettings();
+  const assetsDir = settings.assetsDirectory || defaultAssetsDirectory;
+  const imagesDir = join(assetsDir, "images");
   // Ensure images subdirectory exists
   if (!existsSync(imagesDir)) {
-    mkdirSync(imagesDir, { recursive: true })
+    mkdirSync(imagesDir, { recursive: true });
   }
   // Format: {owner}_{model}_{id}_{resultIndex}.{ext} - consistent with generateFileName in assetsStore
-  return join(imagesDir, `local_z-image_${id}_0.png`)
-})
+  return join(imagesDir, `local_z-image_${id}_0.png`);
+});
 
-ipcMain.handle('select-directory', async () => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (!focusedWindow) return { success: false, error: 'No focused window' }
+ipcMain.handle("select-directory", async () => {
+  const focusedWindow = BrowserWindow.getFocusedWindow();
+  if (!focusedWindow) return { success: false, error: "No focused window" };
 
   const result = await dialog.showOpenDialog(focusedWindow, {
-    properties: ['openDirectory', 'createDirectory'],
-    title: 'Select Assets Directory'
-  })
+    properties: ["openDirectory", "createDirectory"],
+    title: "Select Assets Directory",
+  });
 
   if (result.canceled || !result.filePaths[0]) {
-    return { success: false, canceled: true }
+    return { success: false, canceled: true };
   }
 
-  return { success: true, path: result.filePaths[0] }
-})
+  return { success: true, path: result.filePaths[0] };
+});
 
-ipcMain.handle('save-asset', async (_, url: string, _type: string, fileName: string, subDir: string) => {
-  const settings = loadSettings()
-  const baseDir = settings.assetsDirectory || defaultAssetsDirectory
-  const targetDir = join(baseDir, subDir)
+ipcMain.handle(
+  "save-asset",
+  async (_, url: string, _type: string, fileName: string, subDir: string) => {
+    const settings = loadSettings();
+    const baseDir = settings.assetsDirectory || defaultAssetsDirectory;
+    const targetDir = join(baseDir, subDir);
 
-  // Ensure directory exists
-  if (!existsSync(targetDir)) {
-    mkdirSync(targetDir, { recursive: true })
-  }
+    // Ensure directory exists
+    if (!existsSync(targetDir)) {
+      mkdirSync(targetDir, { recursive: true });
+    }
 
-  const filePath = join(targetDir, fileName)
+    const filePath = join(targetDir, fileName);
 
-  // Handle local-asset:// URLs (Z-Image local outputs)
-  if (url.startsWith('local-asset://')) {
-    try {
-      const localPath = decodeURIComponent(url.replace('local-asset://', ''))
-      if (!existsSync(localPath)) {
-        return { success: false, error: 'Source file not found' }
+    // Handle local-asset:// URLs (Z-Image local outputs)
+    if (url.startsWith("local-asset://")) {
+      try {
+        const localPath = decodeURIComponent(url.replace("local-asset://", ""));
+        if (!existsSync(localPath)) {
+          return { success: false, error: "Source file not found" };
+        }
+        copyFileSync(localPath, filePath);
+        const stats = statSync(filePath);
+        return { success: true, filePath, fileSize: stats.size };
+      } catch (err) {
+        return { success: false, error: (err as Error).message };
       }
-      copyFileSync(localPath, filePath)
-      const stats = statSync(filePath)
-      return { success: true, filePath, fileSize: stats.size }
-    } catch (err) {
-      return { success: false, error: (err as Error).message }
     }
-  }
 
-  // Download file from http/https
-  return new Promise((resolve) => {
-    const httpProtocol = url.startsWith('https') ? https : http
-    const file = createWriteStream(filePath)
-
-    const handleResponse = (response: http.IncomingMessage) => {
-      // Handle redirects
-      if (response.statusCode === 301 || response.statusCode === 302) {
-        const redirectUrl = response.headers.location
-        if (redirectUrl) {
-          const redirectProtocol = redirectUrl.startsWith('https') ? https : http
-          redirectProtocol.get(redirectUrl, (redirectResponse) => {
-            handleResponse(redirectResponse)
-          }).on('error', (err) => {
-            resolve({ success: false, error: err.message })
-          })
-          return
-        }
-      }
+    // Download file from http/https
+    return new Promise((resolve) => {
+      const httpProtocol = url.startsWith("https") ? https : http;
+      const file = createWriteStream(filePath);
 
-      response.pipe(file)
-      file.on('finish', () => {
-        file.close()
-        try {
-          const stats = statSync(filePath)
-          resolve({ success: true, filePath, fileSize: stats.size })
-        } catch {
-          resolve({ success: true, filePath, fileSize: 0 })
+      const handleResponse = (response: http.IncomingMessage) => {
+        // Handle redirects
+        if (response.statusCode === 301 || response.statusCode === 302) {
+          const redirectUrl = response.headers.location;
+          if (redirectUrl) {
+            const redirectProtocol = redirectUrl.startsWith("https")
+              ? https
+              : http;
+            redirectProtocol
+              .get(redirectUrl, (redirectResponse) => {
+                handleResponse(redirectResponse);
+              })
+              .on("error", (err) => {
+                resolve({ success: false, error: err.message });
+              });
+            return;
+          }
         }
-      })
-    }
 
-    httpProtocol.get(url, handleResponse).on('error', (err) => {
-      resolve({ success: false, error: err.message })
-    })
-  })
-})
+        response.pipe(file);
+        file.on("finish", () => {
+          file.close();
+          try {
+            const stats = statSync(filePath);
+            resolve({ success: true, filePath, fileSize: stats.size });
+          } catch {
+            resolve({ success: true, filePath, fileSize: 0 });
+          }
+        });
+      };
+
+      httpProtocol.get(url, handleResponse).on("error", (err) => {
+        resolve({ success: false, error: err.message });
+      });
+    });
+  },
+);
 
-ipcMain.handle('delete-asset', async (_, filePath: string) => {
+ipcMain.handle("delete-asset", async (_, filePath: string) => {
   try {
     if (existsSync(filePath)) {
-      unlinkSync(filePath)
+      unlinkSync(filePath);
     }
-    return { success: true }
+    return { success: true };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('delete-assets-bulk', async (_, filePaths: string[]) => {
-  let deleted = 0
+ipcMain.handle("delete-assets-bulk", async (_, filePaths: string[]) => {
+  let deleted = 0;
   for (const filePath of filePaths) {
     try {
       if (existsSync(filePath)) {
-        unlinkSync(filePath)
-        deleted++
+        unlinkSync(filePath);
+        deleted++;
       }
     } catch (error) {
-      console.error('Failed to delete:', filePath, error)
+      console.error("Failed to delete:", filePath, error);
     }
   }
-  return { success: true, deleted }
-})
+  return { success: true, deleted };
+});
 
-ipcMain.handle('get-assets-metadata', () => {
-  return loadAssetsMetadata()
-})
+ipcMain.handle("get-assets-metadata", () => {
+  return loadAssetsMetadata();
+});
 
-ipcMain.handle('save-assets-metadata', (_, metadata: AssetMetadata[]) => {
-  saveAssetsMetadata(metadata)
-  return true
-})
+ipcMain.handle("save-assets-metadata", (_, metadata: AssetMetadata[]) => {
+  saveAssetsMetadata(metadata);
+  return true;
+});
 
-ipcMain.handle('open-file-location', async (_, filePath: string) => {
+ipcMain.handle("open-file-location", async (_, filePath: string) => {
   if (existsSync(filePath)) {
-    shell.showItemInFolder(filePath)
-    return { success: true }
+    shell.showItemInFolder(filePath);
+    return { success: true };
   }
-  return { success: false, error: 'File not found' }
-})
+  return { success: false, error: "File not found" };
+});
 
 /**
  * File operations for chunked downloads from Worker/Renderer
  */
-ipcMain.handle('file-get-size', (_, filePath: string) => {
+ipcMain.handle("file-get-size", (_, filePath: string) => {
   try {
     if (existsSync(filePath)) {
-      return { success: true, size: statSync(filePath).size }
+      return { success: true, size: statSync(filePath).size };
     }
-    return { success: true, size: 0 }
+    return { success: true, size: 0 };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('file-append-chunk', (_, filePath: string, chunk: ArrayBuffer) => {
-  try {
-    const dir = dirname(filePath)
-    if (!existsSync(dir)) {
-      mkdirSync(dir, { recursive: true })
-    }
+ipcMain.handle(
+  "file-append-chunk",
+  (_, filePath: string, chunk: ArrayBuffer) => {
+    try {
+      const dir = dirname(filePath);
+      if (!existsSync(dir)) {
+        mkdirSync(dir, { recursive: true });
+      }
 
-    const buffer = Buffer.from(chunk)
+      const buffer = Buffer.from(chunk);
 
-    // Append to file (create if not exists)
-    if (existsSync(filePath)) {
-      const fd = require('fs').openSync(filePath, 'a')
-      require('fs').writeSync(fd, buffer)
-      require('fs').closeSync(fd)
-    } else {
-      writeFileSync(filePath, buffer)
-    }
+      // Append to file (create if not exists)
+      if (existsSync(filePath)) {
+        const fd = require("fs").openSync(filePath, "a");
+        require("fs").writeSync(fd, buffer);
+        require("fs").closeSync(fd);
+      } else {
+        writeFileSync(filePath, buffer);
+      }
 
-    return { success: true }
-  } catch (error) {
-    return { success: false, error: (error as Error).message }
-  }
-})
+      return { success: true };
+    } catch (error) {
+      return { success: false, error: (error as Error).message };
+    }
+  },
+);
 
-ipcMain.handle('file-rename', (_, oldPath: string, newPath: string) => {
+ipcMain.handle("file-rename", (_, oldPath: string, newPath: string) => {
   try {
     if (existsSync(oldPath)) {
-      require('fs').renameSync(oldPath, newPath)
-      return { success: true }
+      require("fs").renameSync(oldPath, newPath);
+      return { success: true };
     }
-    return { success: false, error: 'File not found' }
+    return { success: false, error: "File not found" };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('file-delete', (_, filePath: string) => {
+ipcMain.handle("file-delete", (_, filePath: string) => {
   try {
     if (existsSync(filePath)) {
-      unlinkSync(filePath)
-      return { success: true }
+      unlinkSync(filePath);
+      return { success: true };
     }
-    return { success: true } // Already deleted
+    return { success: true }; // Already deleted
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('check-file-exists', (_, filePath: string) => {
-  return existsSync(filePath)
-})
+ipcMain.handle("check-file-exists", (_, filePath: string) => {
+  return existsSync(filePath);
+});
 
-ipcMain.handle('open-assets-folder', async () => {
-  const settings = loadSettings()
-  const assetsDir = settings.assetsDirectory || defaultAssetsDirectory
+ipcMain.handle("open-assets-folder", async () => {
+  const settings = loadSettings();
+  const assetsDir = settings.assetsDirectory || defaultAssetsDirectory;
 
   // Ensure directory exists
   if (!existsSync(assetsDir)) {
-    mkdirSync(assetsDir, { recursive: true })
+    mkdirSync(assetsDir, { recursive: true });
   }
 
-  const result = await shell.openPath(assetsDir)
-  return { success: !result, error: result || undefined }
-})
+  const result = await shell.openPath(assetsDir);
+  return { success: !result, error: result || undefined };
+});
 
 // Scan assets directory and return all files found (async for non-blocking)
-ipcMain.handle('scan-assets-directory', async () => {
-  const settings = loadSettings()
-  const assetsDir = settings.assetsDirectory || defaultAssetsDirectory
+ipcMain.handle("scan-assets-directory", async () => {
+  const settings = loadSettings();
+  const assetsDir = settings.assetsDirectory || defaultAssetsDirectory;
 
-  const subDirs = ['images', 'videos', 'audio', 'text']
+  const subDirs = ["images", "videos", "audio", "text"];
   const files: Array<{
-    filePath: string
-    fileName: string
-    type: 'image' | 'video' | 'audio' | 'text'
-    fileSize: number
-    createdAt: string
-  }> = []
-
-  const typeMap: Record<string, 'image' | 'video' | 'audio' | 'text'> = {
-    images: 'image',
-    videos: 'video',
-    audio: 'audio',
-    text: 'text'
-  }
+    filePath: string;
+    fileName: string;
+    type: "image" | "video" | "audio" | "text";
+    fileSize: number;
+    createdAt: string;
+  }> = [];
+
+  const typeMap: Record<string, "image" | "video" | "audio" | "text"> = {
+    images: "image",
+    videos: "video",
+    audio: "audio",
+    text: "text",
+  };
 
   // Process directories in parallel for better performance
-  await Promise.all(subDirs.map(async (subDir) => {
-    const dirPath = join(assetsDir, subDir)
-    if (!existsSync(dirPath)) return
-
-    try {
-      const entries = await readdir(dirPath)
-      // Process files in parallel batches
-      const filePromises = entries.map(async (entry) => {
-        const filePath = join(dirPath, entry)
-        try {
-          const stats = await stat(filePath)
-          if (stats.isFile()) {
-            return {
-              filePath,
-              fileName: entry,
-              type: typeMap[subDir],
-              fileSize: stats.size,
-              createdAt: stats.birthtime.toISOString()
+  await Promise.all(
+    subDirs.map(async (subDir) => {
+      const dirPath = join(assetsDir, subDir);
+      if (!existsSync(dirPath)) return;
+
+      try {
+        const entries = await readdir(dirPath);
+        // Process files in parallel batches
+        const filePromises = entries.map(async (entry) => {
+          const filePath = join(dirPath, entry);
+          try {
+            const stats = await stat(filePath);
+            if (stats.isFile()) {
+              return {
+                filePath,
+                fileName: entry,
+                type: typeMap[subDir],
+                fileSize: stats.size,
+                createdAt: stats.birthtime.toISOString(),
+              };
             }
+          } catch {
+            // Skip files we can't stat
           }
-        } catch {
-          // Skip files we can't stat
-        }
-        return null
-      })
-      const results = await Promise.all(filePromises)
-      files.push(...results.filter((f): f is NonNullable<typeof f> => f !== null))
-    } catch {
-      // Skip directories we can't read
-    }
-  }))
+          return null;
+        });
+        const results = await Promise.all(filePromises);
+        files.push(
+          ...results.filter((f): f is NonNullable<typeof f> => f !== null),
+        );
+      } catch {
+        // Skip directories we can't read
+      }
+    }),
+  );
 
-  return files
-})
+  return files;
+});
 
 // SD download path helpers for chunked downloads
-ipcMain.handle('sd-get-binary-download-path', () => {
+ipcMain.handle("sd-get-binary-download-path", () => {
   try {
-    const platform = process.platform
-    const binaryName = platform === 'win32' ? 'sd.exe' : 'sd'
+    const platform = process.platform;
+    const binaryName = platform === "win32" ? "sd.exe" : "sd";
 
-    const binaryDir = join(app.getPath('userData'), 'sd-bin')
-    const binaryPath = join(binaryDir, binaryName)
+    const binaryDir = join(app.getPath("userData"), "sd-bin");
+    const binaryPath = join(binaryDir, binaryName);
 
     // Ensure directory exists
     if (!existsSync(binaryDir)) {
-      mkdirSync(binaryDir, { recursive: true })
+      mkdirSync(binaryDir, { recursive: true });
     }
 
-    return { success: true, path: binaryPath }
+    return { success: true, path: binaryPath };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('sd-get-auxiliary-model-download-path', (_, type: 'llm' | 'vae') => {
-  try {
-    const auxDir = getAuxiliaryModelsDir()
+ipcMain.handle(
+  "sd-get-auxiliary-model-download-path",
+  (_, type: "llm" | "vae") => {
+    try {
+      const auxDir = getAuxiliaryModelsDir();
 
-    // Ensure directory exists
-    if (!existsSync(auxDir)) {
-      mkdirSync(auxDir, { recursive: true })
-    }
+      // Ensure directory exists
+      if (!existsSync(auxDir)) {
+        mkdirSync(auxDir, { recursive: true });
+      }
 
-    const filename = type === 'llm'
-      ? 'Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf'
-      : 'ae.safetensors'
+      const filename =
+        type === "llm"
+          ? "Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf"
+          : "ae.safetensors";
 
-    const filePath = join(auxDir, filename)
+      const filePath = join(auxDir, filename);
 
-    return { success: true, path: filePath }
-  } catch (error) {
-    return { success: false, error: (error as Error).message }
-  }
-})
+      return { success: true, path: filePath };
+    } catch (error) {
+      return { success: false, error: (error as Error).message };
+    }
+  },
+);
 
-ipcMain.handle('sd-get-models-dir', () => {
+ipcMain.handle("sd-get-models-dir", () => {
   try {
-    const modelsDir = getModelsDir()
+    const modelsDir = getModelsDir();
 
     // Ensure directory exists
     if (!existsSync(modelsDir)) {
-      mkdirSync(modelsDir, { recursive: true })
+      mkdirSync(modelsDir, { recursive: true });
     }
 
-    return { success: true, path: modelsDir }
+    return { success: true, path: modelsDir };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
 /**
  * Extract zip file and copy all contents to destination directory
  * Supports both old (sd) and new (sd-cli) binary names
  */
-ipcMain.handle('sd-extract-binary', (_, zipPath: string, destPath: string) => {
+ipcMain.handle("sd-extract-binary", (_, zipPath: string, destPath: string) => {
   try {
-    console.log('[SD Extract] Extracting:', zipPath)
-    console.log('[SD Extract] Destination:', destPath)
+    console.log("[SD Extract] Extracting:", zipPath);
+    console.log("[SD Extract] Destination:", destPath);
 
     if (!existsSync(zipPath)) {
-      throw new Error(`Zip file not found: ${zipPath}`)
+      throw new Error(`Zip file not found: ${zipPath}`);
     }
 
-    const zip = new AdmZip(zipPath)
-    const tempExtractDir = join(dirname(zipPath), 'temp-extract')
+    const zip = new AdmZip(zipPath);
+    const tempExtractDir = join(dirname(zipPath), "temp-extract");
 
     // Extract to temp directory
-    zip.extractAllTo(tempExtractDir, true)
-    console.log('[SD Extract] Extracted to temp directory:', tempExtractDir)
+    zip.extractAllTo(tempExtractDir, true);
+    console.log("[SD Extract] Extracted to temp directory:", tempExtractDir);
 
     // Find the binary file (sd, sd.exe, sd-cli, or sd-cli.exe)
-    const possibleNames = process.platform === 'win32'
-      ? ['sd.exe', 'sd-cli.exe']
-      : ['sd', 'sd-cli']
+    const possibleNames =
+      process.platform === "win32"
+        ? ["sd.exe", "sd-cli.exe"]
+        : ["sd", "sd-cli"];
 
-    let binaryPath: string | null = null
-    let actualBinaryName: string | null = null
+    let binaryPath: string | null = null;
+    let actualBinaryName: string | null = null;
 
     const findBinary = (dir: string): { path: string; name: string } | null => {
-      const files = readdirSync(dir, { withFileTypes: true })
+      const files = readdirSync(dir, { withFileTypes: true });
       for (const file of files) {
-        const fullPath = join(dir, file.name)
+        const fullPath = join(dir, file.name);
         if (file.isDirectory()) {
-          const found = findBinary(fullPath)
-          if (found) return found
+          const found = findBinary(fullPath);
+          if (found) return found;
         } else if (possibleNames.includes(file.name)) {
-          return { path: fullPath, name: file.name }
+          return { path: fullPath, name: file.name };
         }
       }
-      return null
-    }
+      return null;
+    };
 
-    const found = findBinary(tempExtractDir)
+    const found = findBinary(tempExtractDir);
     if (!found) {
-      throw new Error(`Binary not found in extracted files. Looked for: ${possibleNames.join(', ')}`)
+      throw new Error(
+        `Binary not found in extracted files. Looked for: ${possibleNames.join(", ")}`,
+      );
     }
 
-    binaryPath = found.path
-    actualBinaryName = found.name
-    console.log('[SD Extract] Found binary:', binaryPath)
+    binaryPath = found.path;
+    actualBinaryName = found.name;
+    console.log("[SD Extract] Found binary:", binaryPath);
 
     // Get the directory containing the binary
-    const binaryDir = dirname(binaryPath)
-    console.log('[SD Extract] Binary directory:', binaryDir)
+    const binaryDir = dirname(binaryPath);
+    console.log("[SD Extract] Binary directory:", binaryDir);
 
     // Ensure destination directory exists
-    const destDir = dirname(destPath)
+    const destDir = dirname(destPath);
     if (!existsSync(destDir)) {
-      mkdirSync(destDir, { recursive: true })
+      mkdirSync(destDir, { recursive: true });
     }
 
     // Copy all files from binary directory to destination directory
     const copyDirContents = (srcDir: string, dstDir: string) => {
-      const files = readdirSync(srcDir, { withFileTypes: true })
+      const files = readdirSync(srcDir, { withFileTypes: true });
       for (const file of files) {
-        const srcPath = join(srcDir, file.name)
-        const dstPath = join(dstDir, file.name)
+        const srcPath = join(srcDir, file.name);
+        const dstPath = join(dstDir, file.name);
 
         if (file.isDirectory()) {
           if (!existsSync(dstPath)) {
-            mkdirSync(dstPath, { recursive: true })
+            mkdirSync(dstPath, { recursive: true });
           }
-          copyDirContents(srcPath, dstPath)
+          copyDirContents(srcPath, dstPath);
         } else {
           // Copy file
           if (existsSync(dstPath)) {
-            unlinkSync(dstPath)
+            unlinkSync(dstPath);
           }
-          require('fs').copyFileSync(srcPath, dstPath)
-          console.log('[SD Extract] Copied:', file.name)
+          require("fs").copyFileSync(srcPath, dstPath);
+          console.log("[SD Extract] Copied:", file.name);
         }
       }
-    }
+    };
 
-    console.log('[SD Extract] Copying all files to:', destDir)
-    copyDirContents(binaryDir, destDir)
+    console.log("[SD Extract] Copying all files to:", destDir);
+    copyDirContents(binaryDir, destDir);
 
     // If binary is sd-cli, create sd symlink/copy for compatibility
-    const targetBinaryName = process.platform === 'win32' ? 'sd.exe' : 'sd'
-    const finalBinaryPath = join(destDir, targetBinaryName)
+    const targetBinaryName = process.platform === "win32" ? "sd.exe" : "sd";
+    const finalBinaryPath = join(destDir, targetBinaryName);
 
-    if (actualBinaryName.startsWith('sd-cli')) {
-      const sdCliPath = join(destDir, actualBinaryName)
+    if (actualBinaryName.startsWith("sd-cli")) {
+      const sdCliPath = join(destDir, actualBinaryName);
       if (existsSync(sdCliPath) && !existsSync(finalBinaryPath)) {
         // Create a copy with the old name for compatibility
-        require('fs').copyFileSync(sdCliPath, finalBinaryPath)
-        console.log(`[SD Extract] Created ${targetBinaryName} copy for compatibility`)
+        require("fs").copyFileSync(sdCliPath, finalBinaryPath);
+        console.log(
+          `[SD Extract] Created ${targetBinaryName} copy for compatibility`,
+        );
       }
     }
 
     // Make executables on Unix
-    if (process.platform !== 'win32') {
-      const files = readdirSync(destDir)
+    if (process.platform !== "win32") {
+      const files = readdirSync(destDir);
       for (const file of files) {
-        const filePath = join(destDir, file)
+        const filePath = join(destDir, file);
         if (statSync(filePath).isFile()) {
           try {
-            execSync(`chmod +x "${filePath}"`)
+            execSync(`chmod +x "${filePath}"`);
           } catch (err) {
             // Ignore chmod errors for non-executable files
           }
         }
       }
-      console.log('[SD Extract] Made files executable')
+      console.log("[SD Extract] Made files executable");
 
       // macOS: Fix rpath and dynamic library paths
-      if (process.platform === 'darwin') {
+      if (process.platform === "darwin") {
         try {
-          console.log('[SD Extract] Fixing macOS dynamic library paths...')
+          console.log("[SD Extract] Fixing macOS dynamic library paths...");
 
           // Find all dylib files
-          const dylibFiles = readdirSync(destDir).filter(f => f.endsWith('.dylib'))
+          const dylibFiles = readdirSync(destDir).filter((f) =>
+            f.endsWith(".dylib"),
+          );
 
           // Fix binary files
-          const binaryFiles = [targetBinaryName, actualBinaryName].filter(name => name && name !== null)
+          const binaryFiles = [targetBinaryName, actualBinaryName].filter(
+            (name) => name && name !== null,
+          );
           for (const binaryFile of binaryFiles) {
-            const binaryFullPath = join(destDir, binaryFile)
+            const binaryFullPath = join(destDir, binaryFile);
             if (existsSync(binaryFullPath)) {
               try {
                 // Delete existing rpaths pointing to build directories
                 try {
-                  execSync(`install_name_tool -delete_rpath "/Users/runner/work/stable-diffusion.cpp/stable-diffusion.cpp/build/bin" "${binaryFullPath}" 2>/dev/null || true`, { stdio: 'ignore' })
+                  execSync(
+                    `install_name_tool -delete_rpath "/Users/runner/work/stable-diffusion.cpp/stable-diffusion.cpp/build/bin" "${binaryFullPath}" 2>/dev/null || true`,
+                    { stdio: "ignore" },
+                  );
                 } catch (e) {
                   // Ignore if rpath doesn't exist
                 }
 
                 // Add @executable_path to rpath
                 try {
-                  execSync(`install_name_tool -add_rpath "@executable_path" "${binaryFullPath}" 2>/dev/null || true`, { stdio: 'ignore' })
+                  execSync(
+                    `install_name_tool -add_rpath "@executable_path" "${binaryFullPath}" 2>/dev/null || true`,
+                    { stdio: "ignore" },
+                  );
                 } catch (e) {
                   // Ignore if rpath already exists
                 }
@@ -1076,46 +1184,64 @@ ipcMain.handle('sd-extract-binary', (_, zipPath: string, destPath: string) => {
                 // Update references to dylib files to use @executable_path
                 for (const dylibFile of dylibFiles) {
                   try {
-                    execSync(`install_name_tool -change "/Users/runner/work/stable-diffusion.cpp/stable-diffusion.cpp/build/bin/${dylibFile}" "@executable_path/${dylibFile}" "${binaryFullPath}" 2>/dev/null || true`, { stdio: 'ignore' })
+                    execSync(
+                      `install_name_tool -change "/Users/runner/work/stable-diffusion.cpp/stable-diffusion.cpp/build/bin/${dylibFile}" "@executable_path/${dylibFile}" "${binaryFullPath}" 2>/dev/null || true`,
+                      { stdio: "ignore" },
+                    );
                   } catch (e) {
                     // Ignore if reference doesn't exist
                   }
                 }
 
-                console.log(`[SD Extract] Fixed rpath for ${binaryFile}`)
+                console.log(`[SD Extract] Fixed rpath for ${binaryFile}`);
               } catch (err) {
-                console.warn(`[SD Extract] Could not fully fix rpath for ${binaryFile}:`, (err as Error).message)
+                console.warn(
+                  `[SD Extract] Could not fully fix rpath for ${binaryFile}:`,
+                  (err as Error).message,
+                );
               }
             }
           }
 
           // Fix dylib files themselves
           for (const dylibFile of dylibFiles) {
-            const dylibFullPath = join(destDir, dylibFile)
+            const dylibFullPath = join(destDir, dylibFile);
             try {
               // Update the dylib's install name to use @rpath
-              execSync(`install_name_tool -id "@rpath/${dylibFile}" "${dylibFullPath}" 2>/dev/null || true`, { stdio: 'ignore' })
+              execSync(
+                `install_name_tool -id "@rpath/${dylibFile}" "${dylibFullPath}" 2>/dev/null || true`,
+                { stdio: "ignore" },
+              );
 
               // Update references to other dylibs
               for (const otherDylib of dylibFiles) {
                 if (otherDylib !== dylibFile) {
                   try {
-                    execSync(`install_name_tool -change "/Users/runner/work/stable-diffusion.cpp/stable-diffusion.cpp/build/bin/${otherDylib}" "@rpath/${otherDylib}" "${dylibFullPath}" 2>/dev/null || true`, { stdio: 'ignore' })
+                    execSync(
+                      `install_name_tool -change "/Users/runner/work/stable-diffusion.cpp/stable-diffusion.cpp/build/bin/${otherDylib}" "@rpath/${otherDylib}" "${dylibFullPath}" 2>/dev/null || true`,
+                      { stdio: "ignore" },
+                    );
                   } catch (e) {
                     // Ignore
                   }
                 }
               }
 
-              console.log(`[SD Extract] Fixed install name for ${dylibFile}`)
+              console.log(`[SD Extract] Fixed install name for ${dylibFile}`);
             } catch (err) {
-              console.warn(`[SD Extract] Could not fix install name for ${dylibFile}:`, (err as Error).message)
+              console.warn(
+                `[SD Extract] Could not fix install name for ${dylibFile}:`,
+                (err as Error).message,
+              );
             }
           }
 
-          console.log('[SD Extract] macOS library path fixes completed')
+          console.log("[SD Extract] macOS library path fixes completed");
         } catch (err) {
-          console.warn('[SD Extract] Failed to fix macOS library paths:', (err as Error).message)
+          console.warn(
+            "[SD Extract] Failed to fix macOS library paths:",
+            (err as Error).message,
+          );
         }
       }
     }
@@ -1123,176 +1249,183 @@ ipcMain.handle('sd-extract-binary', (_, zipPath: string, destPath: string) => {
     // Clean up
     const cleanupDir = (dir: string) => {
       if (existsSync(dir)) {
-        const files = readdirSync(dir, { withFileTypes: true })
+        const files = readdirSync(dir, { withFileTypes: true });
         for (const file of files) {
-          const fullPath = join(dir, file.name)
+          const fullPath = join(dir, file.name);
           if (file.isDirectory()) {
-            cleanupDir(fullPath)
+            cleanupDir(fullPath);
           } else {
-            unlinkSync(fullPath)
+            unlinkSync(fullPath);
           }
         }
-        require('fs').rmdirSync(dir)
+        require("fs").rmdirSync(dir);
       }
-    }
-    cleanupDir(tempExtractDir)
+    };
+    cleanupDir(tempExtractDir);
     if (existsSync(zipPath)) {
-      unlinkSync(zipPath)
+      unlinkSync(zipPath);
     }
-    console.log('[SD Extract] Cleanup completed')
+    console.log("[SD Extract] Cleanup completed");
 
-    return { success: true, path: finalBinaryPath }
+    return { success: true, path: finalBinaryPath };
   } catch (error) {
-    console.error('[SD Extract] Error:', error)
-    return { success: false, error: (error as Error).message }
+    console.error("[SD Extract] Error:", error);
+    return { success: false, error: (error as Error).message };
   }
-})
+});
 
 // Auto-updater state
-let mainWindow: BrowserWindow | null = null
+let mainWindow: BrowserWindow | null = null;
 
 // Configure auto-updater
-autoUpdater.autoDownload = true
-autoUpdater.autoInstallOnAppQuit = true
+autoUpdater.autoDownload = true;
+autoUpdater.autoInstallOnAppQuit = true;
 
 function sendUpdateStatus(status: string, data?: Record<string, unknown>) {
   if (mainWindow) {
-    mainWindow.webContents.send('update-status', { status, ...data })
+    mainWindow.webContents.send("update-status", { status, ...data });
   }
 }
 
 function setupAutoUpdater() {
   if (is.dev) {
-    return
+    return;
   }
 
-  const updateConfigPath = (autoUpdater as typeof autoUpdater & { appUpdateConfigPath?: string }).appUpdateConfigPath
-    ?? join(process.resourcesPath, 'app-update.yml')
+  const updateConfigPath =
+    (autoUpdater as typeof autoUpdater & { appUpdateConfigPath?: string })
+      .appUpdateConfigPath ?? join(process.resourcesPath, "app-update.yml");
   if (!existsSync(updateConfigPath)) {
-    console.warn('[AutoUpdater] app-update.yml not found, skipping auto-updater setup:', updateConfigPath)
-    return
+    console.warn(
+      "[AutoUpdater] app-update.yml not found, skipping auto-updater setup:",
+      updateConfigPath,
+    );
+    return;
   }
 
-  const settings = loadSettings()
-  const channel = settings.updateChannel || 'stable'
+  const settings = loadSettings();
+  const channel = settings.updateChannel || "stable";
 
   // Configure update channel
-  if (channel === 'nightly') {
-    autoUpdater.allowPrerelease = true
-    autoUpdater.channel = 'nightly'
+  if (channel === "nightly") {
+    autoUpdater.allowPrerelease = true;
+    autoUpdater.channel = "nightly";
     // Use generic provider pointing to nightly release assets
     autoUpdater.setFeedURL({
-      provider: 'generic',
-      url: 'https://github.com/WaveSpeedAI/wavespeed-desktop/releases/download/nightly'
-    })
+      provider: "generic",
+      url: "https://github.com/WaveSpeedAI/wavespeed-desktop/releases/download/nightly",
+    });
   } else {
-    autoUpdater.allowPrerelease = false
-    autoUpdater.channel = 'latest'
+    autoUpdater.allowPrerelease = false;
+    autoUpdater.channel = "latest";
   }
 
-  autoUpdater.on('checking-for-update', () => {
-    sendUpdateStatus('checking')
-  })
+  autoUpdater.on("checking-for-update", () => {
+    sendUpdateStatus("checking");
+  });
 
-  autoUpdater.on('update-available', (info: UpdateInfo) => {
-    sendUpdateStatus('available', {
+  autoUpdater.on("update-available", (info: UpdateInfo) => {
+    sendUpdateStatus("available", {
       version: info.version,
       releaseNotes: info.releaseNotes,
-      releaseDate: info.releaseDate
-    })
-  })
+      releaseDate: info.releaseDate,
+    });
+  });
 
-  autoUpdater.on('update-not-available', (info: UpdateInfo) => {
-    sendUpdateStatus('not-available', { version: info.version })
-  })
+  autoUpdater.on("update-not-available", (info: UpdateInfo) => {
+    sendUpdateStatus("not-available", { version: info.version });
+  });
 
-  autoUpdater.on('download-progress', (progress) => {
-    sendUpdateStatus('downloading', {
+  autoUpdater.on("download-progress", (progress) => {
+    sendUpdateStatus("downloading", {
       percent: progress.percent,
       bytesPerSecond: progress.bytesPerSecond,
       transferred: progress.transferred,
-      total: progress.total
-    })
-  })
+      total: progress.total,
+    });
+  });
 
-  autoUpdater.on('update-downloaded', (info: UpdateInfo) => {
-    sendUpdateStatus('downloaded', {
+  autoUpdater.on("update-downloaded", (info: UpdateInfo) => {
+    sendUpdateStatus("downloaded", {
       version: info.version,
-      releaseNotes: info.releaseNotes
-    })
-  })
+      releaseNotes: info.releaseNotes,
+    });
+  });
 
-  autoUpdater.on('error', (error) => {
-    sendUpdateStatus('error', { message: error.message })
-  })
+  autoUpdater.on("error", (error) => {
+    sendUpdateStatus("error", { message: error.message });
+  });
 }
 
 // Auto-updater IPC handlers
-ipcMain.handle('check-for-updates', async () => {
+ipcMain.handle("check-for-updates", async () => {
   if (is.dev) {
-    return { status: 'dev-mode', message: 'Auto-update disabled in development' }
+    return {
+      status: "dev-mode",
+      message: "Auto-update disabled in development",
+    };
   }
   try {
-    const result = await autoUpdater.checkForUpdates()
-    return { status: 'success', updateInfo: result?.updateInfo }
+    const result = await autoUpdater.checkForUpdates();
+    return { status: "success", updateInfo: result?.updateInfo };
   } catch (error) {
-    return { status: 'error', message: (error as Error).message }
+    return { status: "error", message: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('download-update', async () => {
+ipcMain.handle("download-update", async () => {
   try {
-    await autoUpdater.downloadUpdate()
-    return { status: 'success' }
+    await autoUpdater.downloadUpdate();
+    return { status: "success" };
   } catch (error) {
-    return { status: 'error', message: (error as Error).message }
+    return { status: "error", message: (error as Error).message };
   }
-})
+});
 
-ipcMain.handle('install-update', () => {
+ipcMain.handle("install-update", () => {
   // Set quitting flag before calling quitAndInstall so macOS window close handler allows quit
-  ;(app as typeof app & { isQuitting: boolean }).isQuitting = true
-  autoUpdater.quitAndInstall(false, true)
-})
-
-ipcMain.handle('get-app-version', () => {
-  return app.getVersion()
-})
-
-ipcMain.handle('get-log-file-path', () => {
-  return log.transports.file.getFile().path
-})
-
-ipcMain.handle('open-log-directory', () => {
-  const logPath = log.transports.file.getFile().path
-  const logDir = dirname(logPath)
-  shell.openPath(logDir)
-  return { success: true, path: logDir }
-})
-
-ipcMain.handle('set-update-channel', (_, channel: 'stable' | 'nightly') => {
-  saveSettings({ updateChannel: channel })
+  (app as typeof app & { isQuitting: boolean }).isQuitting = true;
+  autoUpdater.quitAndInstall(false, true);
+});
+
+ipcMain.handle("get-app-version", () => {
+  return app.getVersion();
+});
+
+ipcMain.handle("get-log-file-path", () => {
+  return log.transports.file.getFile().path;
+});
+
+ipcMain.handle("open-log-directory", () => {
+  const logPath = log.transports.file.getFile().path;
+  const logDir = dirname(logPath);
+  shell.openPath(logDir);
+  return { success: true, path: logDir };
+});
+
+ipcMain.handle("set-update-channel", (_, channel: "stable" | "nightly") => {
+  saveSettings({ updateChannel: channel });
   // Reconfigure updater with new channel
-  if (channel === 'nightly') {
-    autoUpdater.allowPrerelease = true
-    autoUpdater.channel = 'nightly'
+  if (channel === "nightly") {
+    autoUpdater.allowPrerelease = true;
+    autoUpdater.channel = "nightly";
     // Use generic provider pointing to nightly release assets
     autoUpdater.setFeedURL({
-      provider: 'generic',
-      url: 'https://github.com/WaveSpeedAI/wavespeed-desktop/releases/download/nightly'
-    })
+      provider: "generic",
+      url: "https://github.com/WaveSpeedAI/wavespeed-desktop/releases/download/nightly",
+    });
   } else {
-    autoUpdater.allowPrerelease = false
-    autoUpdater.channel = 'latest'
+    autoUpdater.allowPrerelease = false;
+    autoUpdater.channel = "latest";
     autoUpdater.setFeedURL({
-      provider: 'github',
-      owner: 'WaveSpeedAI',
-      repo: 'wavespeed-desktop',
-      releaseType: 'release'
-    })
+      provider: "github",
+      owner: "WaveSpeedAI",
+      repo: "wavespeed-desktop",
+      releaseType: "release",
+    });
   }
-  return true
-})
+  return true;
+});
 
 // ==============================================================================
 // Stable Diffusion IPC Handlers
@@ -1304,49 +1437,49 @@ ipcMain.handle('set-update-channel', (_, channel: 'stable' | 'nightly') => {
  * 1. Downloaded binary in userData/sd-bin
  * 2. Pre-compiled binary in resources directory
  */
-ipcMain.handle('sd-get-binary-path', () => {
+ipcMain.handle("sd-get-binary-path", () => {
   try {
-    const platform = process.platform
+    const platform = process.platform;
 
     // Priority 1: Check downloaded binary in userData
-    const userDataBinaryDir = join(app.getPath('userData'), 'sd-bin')
-    const binaryName = platform === 'win32' ? 'sd.exe' : 'sd'
-    const userDataBinaryPath = join(userDataBinaryDir, binaryName)
+    const userDataBinaryDir = join(app.getPath("userData"), "sd-bin");
+    const binaryName = platform === "win32" ? "sd.exe" : "sd";
+    const userDataBinaryPath = join(userDataBinaryDir, binaryName);
 
     if (existsSync(userDataBinaryPath)) {
       if (!binaryPathLoggedOnce) {
-        console.log('[SD] Using downloaded binary:', userDataBinaryPath)
-        binaryPathLoggedOnce = true
+        console.log("[SD] Using downloaded binary:", userDataBinaryPath);
+        binaryPathLoggedOnce = true;
       }
-      return { success: true, path: userDataBinaryPath }
+      return { success: true, path: userDataBinaryPath };
     }
 
     // Priority 2: Check pre-compiled binary in resources
     const basePath = is.dev
-      ? join(__dirname, '../../resources/bin/stable-diffusion')
-      : join(process.resourcesPath, 'bin/stable-diffusion')
+      ? join(__dirname, "../../resources/bin/stable-diffusion")
+      : join(process.resourcesPath, "bin/stable-diffusion");
 
-    const resourceBinaryPath = join(basePath, binaryName)
+    const resourceBinaryPath = join(basePath, binaryName);
     if (existsSync(resourceBinaryPath)) {
       if (!binaryPathLoggedOnce) {
-        console.log('[SD] Using pre-compiled binary:', resourceBinaryPath)
-        binaryPathLoggedOnce = true
+        console.log("[SD] Using pre-compiled binary:", resourceBinaryPath);
+        binaryPathLoggedOnce = true;
       }
-      return { success: true, path: resourceBinaryPath }
+      return { success: true, path: resourceBinaryPath };
     }
 
     // Binary not found in any location
     return {
       success: false,
-      error: `Binary not found. Checked: ${userDataBinaryPath}, ${resourceBinaryPath}`
-    }
+      error: `Binary not found. Checked: ${userDataBinaryPath}, ${resourceBinaryPath}`,
+    };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * Check if macOS system supports Metal acceleration (cached)
@@ -1354,597 +1487,627 @@ ipcMain.handle('sd-get-binary-path', () => {
 function checkMetalSupport(): boolean {
   // Return cached result if available
   if (metalSupportCache !== null) {
-    return metalSupportCache
+    return metalSupportCache;
   }
 
   try {
     // Check macOS version - Metal requires OS X 10.11 (El Capitan) or later
-    const osRelease = require('os').release()
-    const majorVersion = parseInt(osRelease.split('.')[0], 10)
+    const osRelease = require("os").release();
+    const majorVersion = parseInt(osRelease.split(".")[0], 10);
 
     // Darwin kernel version 15.x = OS X 10.11 (El Capitan)
     // Metal was introduced in OS X 10.11
     if (majorVersion < 15) {
-      console.log('[Metal Check] macOS version too old for Metal (Darwin kernel < 15)')
-      metalSupportCache = false
-      return false
+      console.log(
+        "[Metal Check] macOS version too old for Metal (Darwin kernel < 15)",
+      );
+      metalSupportCache = false;
+      return false;
     }
 
     // Check GPU capabilities using system_profiler
     try {
-      const output = execSync('system_profiler SPDisplaysDataType', {
-        encoding: 'utf8',
-        timeout: 5000
-      })
+      const output = execSync("system_profiler SPDisplaysDataType", {
+        encoding: "utf8",
+        timeout: 5000,
+      });
 
       // Check if output contains "Metal" support indication
-      const hasMetalSupport = output.toLowerCase().includes('metal')
-      console.log(`[Metal Check] Metal support detected: ${hasMetalSupport}`)
-      metalSupportCache = hasMetalSupport
-      return hasMetalSupport
+      const hasMetalSupport = output.toLowerCase().includes("metal");
+      console.log(`[Metal Check] Metal support detected: ${hasMetalSupport}`);
+      metalSupportCache = hasMetalSupport;
+      return hasMetalSupport;
     } catch (error) {
-      console.error('[Metal Check] Failed to run system_profiler:', error)
+      console.error("[Metal Check] Failed to run system_profiler:", error);
       // If system_profiler fails but OS version is new enough, assume Metal is available
-      metalSupportCache = majorVersion >= 15
-      return metalSupportCache
+      metalSupportCache = majorVersion >= 15;
+      return metalSupportCache;
     }
   } catch (error) {
-    console.error('[Metal Check] Failed to check Metal support:', error)
-    metalSupportCache = false
-    return false
+    console.error("[Metal Check] Failed to check Metal support:", error);
+    metalSupportCache = false;
+    return false;
   }
 }
 
 /**
  * Get system information (platform and acceleration type) - cached
  */
-ipcMain.handle('sd-get-system-info', () => {
+ipcMain.handle("sd-get-system-info", () => {
   // Return cached result if available
   if (systemInfoCache !== null) {
-    return systemInfoCache
+    return systemInfoCache;
   }
 
-  const platform = process.platform
-  const arch = process.arch
+  const platform = process.platform;
+  const arch = process.arch;
 
-  let acceleration = 'CPU'
+  let acceleration = "CPU";
 
-  if (platform === 'darwin') {
+  if (platform === "darwin") {
     // macOS: Check for Metal acceleration support
-    acceleration = checkMetalSupport() ? 'metal' : 'CPU'
-  } else if (platform === 'win32' || platform === 'linux') {
+    acceleration = checkMetalSupport() ? "metal" : "CPU";
+  } else if (platform === "win32" || platform === "linux") {
     // Check for NVIDIA GPU (CUDA support)
     try {
-      const { execSync } = require('child_process')
+      const { execSync } = require("child_process");
 
       // Try to detect NVIDIA GPU
-      if (platform === 'win32') {
+      if (platform === "win32") {
         // Windows: Check for nvidia-smi
         try {
-          execSync('nvidia-smi', { stdio: 'ignore', timeout: 3000 })
-          acceleration = 'CUDA'
+          execSync("nvidia-smi", { stdio: "ignore", timeout: 3000 });
+          acceleration = "CUDA";
         } catch {
           // nvidia-smi not found or failed, use CPU
         }
-      } else if (platform === 'linux') {
+      } else if (platform === "linux") {
         // Linux: Check for NVIDIA GPU in lspci or nvidia-smi
         try {
-          const output = execSync('lspci 2>/dev/null | grep -i nvidia', { encoding: 'utf8', timeout: 3000 })
-          if (output.toLowerCase().includes('nvidia')) {
-            acceleration = 'CUDA'
+          const output = execSync("lspci 2>/dev/null | grep -i nvidia", {
+            encoding: "utf8",
+            timeout: 3000,
+          });
+          if (output.toLowerCase().includes("nvidia")) {
+            acceleration = "CUDA";
           }
         } catch {
           // Try nvidia-smi as fallback
           try {
-            execSync('nvidia-smi', { stdio: 'ignore', timeout: 3000 })
-            acceleration = 'CUDA'
+            execSync("nvidia-smi", { stdio: "ignore", timeout: 3000 });
+            acceleration = "CUDA";
           } catch {
             // No NVIDIA GPU detected, use CPU
           }
         }
       }
     } catch (error) {
-      console.error('[System Info] Failed to detect GPU:', error)
+      console.error("[System Info] Failed to detect GPU:", error);
       // Fall back to CPU on error
     }
   }
 
-  console.log(`[System Info] Platform: ${platform}, Acceleration: ${acceleration}`)
+  console.log(
+    `[System Info] Platform: ${platform}, Acceleration: ${acceleration}`,
+  );
 
   // Cache the result
   systemInfoCache = {
     platform,
     arch,
     acceleration,
-    supported: true
-  }
+    supported: true,
+  };
 
-  return systemInfoCache
-})
+  return systemInfoCache;
+});
 
 /**
  * Get GPU VRAM in MB (Windows only)
  */
-ipcMain.handle('sd-get-gpu-vram', () => {
+ipcMain.handle("sd-get-gpu-vram", () => {
   try {
-    return { success: true, vramMb: getGpuVramMb() }
+    return { success: true, vramMb: getGpuVramMb() };
   } catch (error) {
     return {
       success: false,
       vramMb: null,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * Generate image
  */
-ipcMain.handle('sd-generate-image', async (event, params: {
-  modelPath: string
-  llmPath?: string
-  vaePath?: string
-  lowVramMode?: boolean
-  vaeTiling?: boolean
-  prompt: string
-  negativePrompt?: string
-  width: number
-  height: number
-  steps: number
-  cfgScale: number
-  seed?: number
-  samplingMethod?: string
-  scheduler?: string
-  outputPath: string
-}) => {
-  try {
-    // Get binary path using the same logic as sd-get-binary-path
-    const platform = process.platform
-    const arch = process.arch
-    const userDataBinaryDir = join(app.getPath('userData'), 'sd-bin')
-    const binaryName = platform === 'win32' ? 'sd.exe' : 'sd'
-
-    let binaryPath: string | null = null
-
-    // Priority 1: Check downloaded binary in userData
-    const userDataBinaryPath = join(userDataBinaryDir, binaryName)
-    if (existsSync(userDataBinaryPath)) {
-      binaryPath = userDataBinaryPath
-      console.log('[SD Generate] Using downloaded binary:', binaryPath)
-    }
-
-    // Priority 2: Check pre-compiled binary in resources
-    if (!binaryPath) {
-      const basePath = is.dev
-        ? join(__dirname, '../../resources/bin/stable-diffusion')
-        : join(process.resourcesPath, 'bin/stable-diffusion')
-
-      const resourceBinaryPath = join(basePath, `${platform}-${arch}`, binaryName)
-      if (existsSync(resourceBinaryPath)) {
-        binaryPath = resourceBinaryPath
-        console.log('[SD Generate] Using pre-compiled binary:', binaryPath)
+ipcMain.handle(
+  "sd-generate-image",
+  async (
+    event,
+    params: {
+      modelPath: string;
+      llmPath?: string;
+      vaePath?: string;
+      lowVramMode?: boolean;
+      vaeTiling?: boolean;
+      prompt: string;
+      negativePrompt?: string;
+      width: number;
+      height: number;
+      steps: number;
+      cfgScale: number;
+      seed?: number;
+      samplingMethod?: string;
+      scheduler?: string;
+      outputPath: string;
+    },
+  ) => {
+    try {
+      // Get binary path using the same logic as sd-get-binary-path
+      const platform = process.platform;
+      const arch = process.arch;
+      const userDataBinaryDir = join(app.getPath("userData"), "sd-bin");
+      const binaryName = platform === "win32" ? "sd.exe" : "sd";
+
+      let binaryPath: string | null = null;
+
+      // Priority 1: Check downloaded binary in userData
+      const userDataBinaryPath = join(userDataBinaryDir, binaryName);
+      if (existsSync(userDataBinaryPath)) {
+        binaryPath = userDataBinaryPath;
+        console.log("[SD Generate] Using downloaded binary:", binaryPath);
       }
-    }
 
-    if (!binaryPath) {
-      throw new Error('SD binary not found. Please download it first.')
-    }
+      // Priority 2: Check pre-compiled binary in resources
+      if (!binaryPath) {
+        const basePath = is.dev
+          ? join(__dirname, "../../resources/bin/stable-diffusion")
+          : join(process.resourcesPath, "bin/stable-diffusion");
+
+        const resourceBinaryPath = join(
+          basePath,
+          `${platform}-${arch}`,
+          binaryName,
+        );
+        if (existsSync(resourceBinaryPath)) {
+          binaryPath = resourceBinaryPath;
+          console.log("[SD Generate] Using pre-compiled binary:", binaryPath);
+        }
+      }
 
-    const vramMb = getGpuVramMb()
-    const isLowVramGpu = vramMb !== null && vramMb < 16000
-    const lowVramMode = Boolean(params.lowVramMode) || isLowVramGpu
-    const useCpuOffload = lowVramMode
-    const useVaeTiling = Boolean(params.vaeTiling) || isLowVramGpu
+      if (!binaryPath) {
+        throw new Error("SD binary not found. Please download it first.");
+      }
 
-    if (vramMb !== null) {
-      console.log(`[SD Generate] Detected GPU VRAM: ${vramMb} MB`)
-    } else {
-      console.log('[SD Generate] GPU VRAM detection unavailable')
-    }
+      const vramMb = getGpuVramMb();
+      const isLowVramGpu = vramMb !== null && vramMb < 16000;
+      const lowVramMode = Boolean(params.lowVramMode) || isLowVramGpu;
+      const useCpuOffload = lowVramMode;
+      const useVaeTiling = Boolean(params.vaeTiling) || isLowVramGpu;
 
-    if (Boolean(params.lowVramMode)) {
-      console.log('[SD Generate] Enabling low VRAM mode from UI setting')
-    } else if (isLowVramGpu) {
-      console.log('[SD Generate] Enabling low VRAM mode for low VRAM GPU')
-    }
+      if (vramMb !== null) {
+        console.log(`[SD Generate] Detected GPU VRAM: ${vramMb} MB`);
+      } else {
+        console.log("[SD Generate] GPU VRAM detection unavailable");
+      }
 
-    if (Boolean(params.vaeTiling)) {
-      console.log('[SD Generate] Enabling VAE tiling from UI setting')
-    } else if (isLowVramGpu) {
-      console.log('[SD Generate] Enabling VAE tiling for low VRAM GPU')
-    }
+      if (Boolean(params.lowVramMode)) {
+        console.log("[SD Generate] Enabling low VRAM mode from UI setting");
+      } else if (isLowVramGpu) {
+        console.log("[SD Generate] Enabling low VRAM mode for low VRAM GPU");
+      }
 
-    // Use SDGenerator class for image generation
-    const result = await sdGenerator.generate({
-      binaryPath,
-      modelPath: params.modelPath,
-      llmPath: params.llmPath,
-      vaePath: params.vaePath,
-      clipOnCpu: useCpuOffload,
-      vaeTiling: useVaeTiling,
-      prompt: params.prompt,
-      negativePrompt: params.negativePrompt,
-      width: params.width,
-      height: params.height,
-      steps: params.steps,
-      cfgScale: params.cfgScale,
-      seed: params.seed,
-      samplingMethod: params.samplingMethod,
-      scheduler: params.scheduler,
-      outputPath: params.outputPath,
-      onProgress: (progress) => {
-        // Send progress to frontend
-        event.sender.send('sd-progress', {
-          phase: progress.phase,
-          progress: progress.progress,
-          detail: progress.detail
-        })
-      },
-      onLog: (log) => {
-        // Send logs to frontend
-        event.sender.send('sd-log', {
-          type: log.type,
-          message: log.message
-        })
+      if (Boolean(params.vaeTiling)) {
+        console.log("[SD Generate] Enabling VAE tiling from UI setting");
+      } else if (isLowVramGpu) {
+        console.log("[SD Generate] Enabling VAE tiling for low VRAM GPU");
       }
-    })
 
-    // Also track via legacy activeSDProcess for backward compatibility
-    // (This will be set/cleared by SDGenerator internally)
+      // Use SDGenerator class for image generation
+      const result = await sdGenerator.generate({
+        binaryPath,
+        modelPath: params.modelPath,
+        llmPath: params.llmPath,
+        vaePath: params.vaePath,
+        clipOnCpu: useCpuOffload,
+        vaeTiling: useVaeTiling,
+        prompt: params.prompt,
+        negativePrompt: params.negativePrompt,
+        width: params.width,
+        height: params.height,
+        steps: params.steps,
+        cfgScale: params.cfgScale,
+        seed: params.seed,
+        samplingMethod: params.samplingMethod,
+        scheduler: params.scheduler,
+        outputPath: params.outputPath,
+        onProgress: (progress) => {
+          // Send progress to frontend
+          event.sender.send("sd-progress", {
+            phase: progress.phase,
+            progress: progress.progress,
+            detail: progress.detail,
+          });
+        },
+        onLog: (log) => {
+          // Send logs to frontend
+          event.sender.send("sd-log", {
+            type: log.type,
+            message: log.message,
+          });
+        },
+      });
 
-    return result
-  } catch (error) {
-    return {
-      success: false,
-      error: (error as Error).message
+      // Also track via legacy activeSDProcess for backward compatibility
+      // (This will be set/cleared by SDGenerator internally)
+
+      return result;
+    } catch (error) {
+      return {
+        success: false,
+        error: (error as Error).message,
+      };
     }
-  }
-})
+  },
+);
 
 /**
  * list models
  */
-ipcMain.handle('sd-list-models', () => {
+ipcMain.handle("sd-list-models", () => {
   try {
-    const modelsDir = getModelsDir()
+    const modelsDir = getModelsDir();
 
     if (!existsSync(modelsDir)) {
-      return { success: true, models: [] }
+      return { success: true, models: [] };
     }
 
-    const files = readdirSync(modelsDir)
+    const files = readdirSync(modelsDir);
     const models = files
-      .filter(f => f.endsWith('.gguf') && !f.endsWith('.part'))  // Exclude .part files
-      .map(f => {
-        const filePath = join(modelsDir, f)
-        const stats = statSync(filePath)
+      .filter((f) => f.endsWith(".gguf") && !f.endsWith(".part")) // Exclude .part files
+      .map((f) => {
+        const filePath = join(modelsDir, f);
+        const stats = statSync(filePath);
         return {
           name: f,
           path: filePath,
           size: stats.size,
-          createdAt: stats.birthtime.toISOString()
-        }
-      })
+          createdAt: stats.birthtime.toISOString(),
+        };
+      });
 
-    return { success: true, models }
+    return { success: true, models };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * delete model
  */
-ipcMain.handle('sd-delete-model', (_, modelPath: string) => {
+ipcMain.handle("sd-delete-model", (_, modelPath: string) => {
   try {
     if (existsSync(modelPath)) {
-      unlinkSync(modelPath)
+      unlinkSync(modelPath);
     }
-    return { success: true }
+    return { success: true };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * Get file size
  */
-ipcMain.handle('get-file-size', (_, filePath: string) => {
+ipcMain.handle("get-file-size", (_, filePath: string) => {
   try {
     if (existsSync(filePath)) {
-      const stats = statSync(filePath)
-      return stats.size
+      const stats = statSync(filePath);
+      return stats.size;
     }
-    return 0
+    return 0;
   } catch (error) {
-    console.error('Failed to get file size:', error)
-    return 0
+    console.error("Failed to get file size:", error);
+    return 0;
   }
-})
+});
 
 /**
  * Delete SD binary
  */
-ipcMain.handle('sd-delete-binary', () => {
+ipcMain.handle("sd-delete-binary", () => {
   try {
-    const platform = process.platform
-    const arch = process.arch
-    const binaryName = platform === 'win32' ? 'sd.exe' : 'sd'
+    const platform = process.platform;
+    const arch = process.arch;
+    const binaryName = platform === "win32" ? "sd.exe" : "sd";
 
     // Delete downloaded binary in userData (cache)
-    const userDataBinaryDir = join(app.getPath('userData'), 'sd-bin')
-    const userDataBinaryPath = join(userDataBinaryDir, binaryName)
+    const userDataBinaryDir = join(app.getPath("userData"), "sd-bin");
+    const userDataBinaryPath = join(userDataBinaryDir, binaryName);
     if (existsSync(userDataBinaryPath)) {
-      unlinkSync(userDataBinaryPath)
+      unlinkSync(userDataBinaryPath);
     }
 
     // Delete pre-compiled binary in resources (if present)
     const basePath = is.dev
-      ? join(__dirname, '../../resources/bin/stable-diffusion')
-      : join(process.resourcesPath, 'bin/stable-diffusion')
+      ? join(__dirname, "../../resources/bin/stable-diffusion")
+      : join(process.resourcesPath, "bin/stable-diffusion");
 
-    const binaryPath = join(basePath, `${platform}-${arch}`, binaryName)
+    const binaryPath = join(basePath, `${platform}-${arch}`, binaryName);
 
     if (existsSync(binaryPath)) {
-      unlinkSync(binaryPath)
+      unlinkSync(binaryPath);
     }
-    return { success: true }
+    return { success: true };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * Get main models directory (for z-image-turbo models)
  * Uses userData directory to keep models alongside sd-bin
  */
 function getModelsDir(): string {
-  return join(app.getPath('userData'), 'models', 'stable-diffusion')
+  return join(app.getPath("userData"), "models", "stable-diffusion");
 }
 
 /**
  * Get auxiliary models directory
  */
 function getAuxiliaryModelsDir(): string {
-  return join(getModelsDir(), 'auxiliary')
+  return join(getModelsDir(), "auxiliary");
 }
 
-
 /**
  * Check if auxiliary models exist
  */
-ipcMain.handle('sd-check-auxiliary-models', () => {
+ipcMain.handle("sd-check-auxiliary-models", () => {
   try {
-    const auxDir = getAuxiliaryModelsDir()
-    const llmPath = join(auxDir, 'Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf')
-    const vaePath = join(auxDir, 'ae.safetensors')
+    const auxDir = getAuxiliaryModelsDir();
+    const llmPath = join(auxDir, "Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf");
+    const vaePath = join(auxDir, "ae.safetensors");
 
     return {
       success: true,
       llmExists: existsSync(llmPath),
       vaeExists: existsSync(vaePath),
       llmPath,
-      vaePath
-    }
+      vaePath,
+    };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * List all auxiliary models (LLM and VAE)
  */
-ipcMain.handle('sd-list-auxiliary-models', () => {
+ipcMain.handle("sd-list-auxiliary-models", () => {
   try {
-    const auxDir = getAuxiliaryModelsDir()
-    const models: Array<{ name: string; path: string; size: number; type: 'llm' | 'vae' }> = []
+    const auxDir = getAuxiliaryModelsDir();
+    const models: Array<{
+      name: string;
+      path: string;
+      size: number;
+      type: "llm" | "vae";
+    }> = [];
 
     if (!existsSync(auxDir)) {
-      return { success: true, models: [] }
+      return { success: true, models: [] };
     }
 
-    const llmPath = join(auxDir, 'Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf')
-    const vaePath = join(auxDir, 'ae.safetensors')
+    const llmPath = join(auxDir, "Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf");
+    const vaePath = join(auxDir, "ae.safetensors");
 
     if (existsSync(llmPath)) {
-      const stats = statSync(llmPath)
+      const stats = statSync(llmPath);
       models.push({
-        name: 'Qwen3-4B-Instruct LLM',
+        name: "Qwen3-4B-Instruct LLM",
         path: llmPath,
         size: stats.size,
-        type: 'llm'
-      })
+        type: "llm",
+      });
     }
 
     if (existsSync(vaePath)) {
-      const stats = statSync(vaePath)
+      const stats = statSync(vaePath);
       models.push({
-        name: 'Z-Image VAE',
+        name: "Z-Image VAE",
         path: vaePath,
         size: stats.size,
-        type: 'vae'
-      })
+        type: "vae",
+      });
     }
 
-    return { success: true, models }
+    return { success: true, models };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * Delete an auxiliary model
  */
-ipcMain.handle('sd-delete-auxiliary-model', (_, type: 'llm' | 'vae') => {
+ipcMain.handle("sd-delete-auxiliary-model", (_, type: "llm" | "vae") => {
   try {
-    const auxDir = getAuxiliaryModelsDir()
-    const fileName = type === 'llm'
-      ? 'Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf'
-      : 'ae.safetensors'
-    const filePath = join(auxDir, fileName)
+    const auxDir = getAuxiliaryModelsDir();
+    const fileName =
+      type === "llm"
+        ? "Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf"
+        : "ae.safetensors";
+    const filePath = join(auxDir, fileName);
 
     if (existsSync(filePath)) {
-      unlinkSync(filePath)
-      console.log(`[Auxiliary Models] Deleted ${type} model:`, filePath)
-      return { success: true }
+      unlinkSync(filePath);
+      console.log(`[Auxiliary Models] Deleted ${type} model:`, filePath);
+      return { success: true };
     } else {
-      return { success: false, error: 'Model file not found' }
+      return { success: false, error: "Model file not found" };
     }
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
-
-
+});
 
 /**
  * Cancel SD image generation
  */
-ipcMain.handle('sd-cancel-generation', async () => {
+ipcMain.handle("sd-cancel-generation", async () => {
   try {
-    console.log('[SD Generation] Cancelling generation')
+    console.log("[SD Generation] Cancelling generation");
 
     // Cancel via SDGenerator class
-    const cancelled = sdGenerator.cancel()
+    const cancelled = sdGenerator.cancel();
 
     // Also cancel legacy activeSDProcess if exists
     if (activeSDProcess) {
-      activeSDProcess.kill('SIGTERM')
-      activeSDProcess = null
+      activeSDProcess.kill("SIGTERM");
+      activeSDProcess = null;
     }
 
-    return { success: true, cancelled }
+    return { success: true, cancelled };
   } catch (error) {
     return {
       success: false,
-      error: (error as Error).message
-    }
+      error: (error as Error).message,
+    };
   }
-})
+});
 
 /**
  * Save model from browser cache to file system
  */
-ipcMain.handle('sd-save-model-from-cache', async (_, fileName: string, data: Uint8Array, type: 'llm' | 'vae' | 'model') => {
-  try {
-    let destPath: string
+ipcMain.handle(
+  "sd-save-model-from-cache",
+  async (
+    _,
+    fileName: string,
+    data: Uint8Array,
+    type: "llm" | "vae" | "model",
+  ) => {
+    try {
+      let destPath: string;
 
-    if (type === 'model') {
-      // Main model goes to models directory
-      const modelsDir = getModelsDir()
-      if (!existsSync(modelsDir)) {
-        mkdirSync(modelsDir, { recursive: true })
-      }
-      destPath = join(modelsDir, fileName)
-    } else {
-      // Auxiliary models (LLM, VAE) go to auxiliary directory
-      const auxDir = getAuxiliaryModelsDir()
-      if (!existsSync(auxDir)) {
-        mkdirSync(auxDir, { recursive: true })
+      if (type === "model") {
+        // Main model goes to models directory
+        const modelsDir = getModelsDir();
+        if (!existsSync(modelsDir)) {
+          mkdirSync(modelsDir, { recursive: true });
+        }
+        destPath = join(modelsDir, fileName);
+      } else {
+        // Auxiliary models (LLM, VAE) go to auxiliary directory
+        const auxDir = getAuxiliaryModelsDir();
+        if (!existsSync(auxDir)) {
+          mkdirSync(auxDir, { recursive: true });
+        }
+        destPath = join(auxDir, fileName);
       }
-      destPath = join(auxDir, fileName)
-    }
 
-    // Write file
-    writeFileSync(destPath, data)
+      // Write file
+      writeFileSync(destPath, data);
 
-    return {
-      success: true,
-      filePath: destPath
-    }
-  } catch (error) {
-    return {
-      success: false,
-      error: (error as Error).message
+      return {
+        success: true,
+        filePath: destPath,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: (error as Error).message,
+      };
     }
-  }
-})
+  },
+);
 
 // Register custom protocol for local asset files (must be before app.whenReady)
 protocol.registerSchemesAsPrivileged([
   {
-    scheme: 'local-asset',
+    scheme: "local-asset",
     privileges: {
       secure: true,
       supportFetchAPI: true,
       stream: true,
-      bypassCSP: true
-    }
-  }
-])
+      bypassCSP: true,
+    },
+  },
+]);
 
 // App lifecycle
 app.whenReady().then(() => {
-  electronApp.setAppUserModelId('com.wavespeed.desktop')
+  electronApp.setAppUserModelId("com.wavespeed.desktop");
 
   // Handle local-asset:// protocol for loading local files (videos, images, etc.)
-  protocol.handle('local-asset', (request) => {
-    const filePath = decodeURIComponent(request.url.replace('local-asset://', ''))
-    return net.fetch(pathToFileURL(filePath).href)
-  })
+  protocol.handle("local-asset", (request) => {
+    const filePath = decodeURIComponent(
+      request.url.replace("local-asset://", ""),
+    );
+    return net.fetch(pathToFileURL(filePath).href);
+  });
 
-  app.on('browser-window-created', (_, window) => {
-    optimizer.watchWindowShortcuts(window)
-  })
+  app.on("browser-window-created", (_, window) => {
+    optimizer.watchWindowShortcuts(window);
+  });
 
-  createWindow()
+  createWindow();
 
   // Initialize workflow module (sql.js DB, node registry, IPC handlers)
-  initWorkflowModule().catch(err => {
-    console.error('[Workflow] Failed to initialize:', err)
-  })
+  initWorkflowModule().catch((err) => {
+    console.error("[Workflow] Failed to initialize:", err);
+  });
 
   // Setup auto-updater after window is created
-  setupAutoUpdater()
+  setupAutoUpdater();
 
   // Check for updates on startup (after a short delay) if autoCheckUpdate is enabled
   if (!is.dev) {
-    const settings = loadSettings()
+    const settings = loadSettings();
     if (settings.autoCheckUpdate !== false) {
       setTimeout(() => {
         autoUpdater.checkForUpdates().catch((err) => {
-          console.error('Failed to check for updates:', err)
-        })
-      }, 3000)
+          console.error("Failed to check for updates:", err);
+        });
+      }, 3000);
     }
   }
 
-  app.on('activate', function () {
+  app.on("activate", function () {
     // macOS: Show the hidden window when clicking dock icon
     if (mainWindow) {
-      mainWindow.show()
+      mainWindow.show();
     } else {
-      createWindow()
+      createWindow();
     }
-  })
-})
+  });
+});
 
 // macOS: Set quitting flag so window close handler allows actual quit
-app.on('before-quit', () => {
-  (app as typeof app & { isQuitting: boolean }).isQuitting = true
-})
-
-app.on('window-all-closed', () => {
-  closeWorkflowDatabase()
-  if (process.platform !== 'darwin') {
-    app.quit()
+app.on("before-quit", () => {
+  (app as typeof app & { isQuitting: boolean }).isQuitting = true;
+});
+
+app.on("window-all-closed", () => {
+  closeWorkflowDatabase();
+  if (process.platform !== "darwin") {
+    app.quit();
   }
-})
+});
diff --git a/electron/preload.ts b/electron/preload.ts
index 4f63198e..b3013a08 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -1,281 +1,416 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge, ipcRenderer } from "electron";
 
 interface Settings {
-  theme: 'light' | 'dark' | 'system'
-  defaultPollInterval: number
-  defaultTimeout: number
-  updateChannel: 'stable' | 'nightly'
-  autoCheckUpdate: boolean
-  language?: string
+  theme: "light" | "dark" | "system";
+  defaultPollInterval: number;
+  defaultTimeout: number;
+  updateChannel: "stable" | "nightly";
+  autoCheckUpdate: boolean;
+  language?: string;
 }
 
 interface UpdateStatus {
-  status: string
-  version?: string
-  releaseNotes?: string | null
-  releaseDate?: string
-  percent?: number
-  bytesPerSecond?: number
-  transferred?: number
-  total?: number
-  message?: string
+  status: string;
+  version?: string;
+  releaseNotes?: string | null;
+  releaseDate?: string;
+  percent?: number;
+  bytesPerSecond?: number;
+  transferred?: number;
+  total?: number;
+  message?: string;
 }
 
 interface UpdateCheckResult {
-  status: string
+  status: string;
   updateInfo?: {
-    version: string
-    releaseNotes?: string | null
-  }
-  message?: string
+    version: string;
+    releaseNotes?: string | null;
+  };
+  message?: string;
 }
 
 interface DownloadResult {
-  success: boolean
-  filePath?: string
-  error?: string
-  canceled?: boolean
+  success: boolean;
+  filePath?: string;
+  error?: string;
+  canceled?: boolean;
 }
 
 interface AssetsSettings {
-  autoSaveAssets: boolean
-  assetsDirectory: string
+  autoSaveAssets: boolean;
+  assetsDirectory: string;
 }
 
 interface SaveAssetResult {
-  success: boolean
-  filePath?: string
-  fileSize?: number
-  error?: string
+  success: boolean;
+  filePath?: string;
+  fileSize?: number;
+  error?: string;
 }
 
 interface DeleteAssetResult {
-  success: boolean
-  error?: string
+  success: boolean;
+  error?: string;
 }
 
 interface DeleteAssetsBulkResult {
-  success: boolean
-  deleted: number
+  success: boolean;
+  deleted: number;
 }
 
 interface SelectDirectoryResult {
-  success: boolean
-  path?: string
-  canceled?: boolean
-  error?: string
+  success: boolean;
+  path?: string;
+  canceled?: boolean;
+  error?: string;
 }
 
 interface AssetMetadata {
-  id: string
-  filePath: string
-  fileName: string
-  type: 'image' | 'video' | 'audio' | 'text' | 'json'
-  modelId: string
-  modelName: string
-  createdAt: string
-  fileSize: number
-  tags: string[]
-  favorite: boolean
-  predictionId?: string
-  originalUrl?: string
+  id: string;
+  filePath: string;
+  fileName: string;
+  type: "image" | "video" | "audio" | "text" | "json";
+  modelId: string;
+  modelName: string;
+  createdAt: string;
+  fileSize: number;
+  tags: string[];
+  favorite: boolean;
+  predictionId?: string;
+  originalUrl?: string;
 }
 
 const electronAPI = {
-  getApiKey: (): Promise<string> => ipcRenderer.invoke('get-api-key'),
-  setApiKey: (apiKey: string): Promise<boolean> => ipcRenderer.invoke('set-api-key', apiKey),
-  getSettings: (): Promise<Settings> => ipcRenderer.invoke('get-settings'),
-  setSettings: (settings: Partial<Settings>): Promise<boolean> => ipcRenderer.invoke('set-settings', settings),
-  clearAllData: (): Promise<boolean> => ipcRenderer.invoke('clear-all-data'),
-  downloadFile: (url: string, defaultFilename: string): Promise<DownloadResult> =>
-    ipcRenderer.invoke('download-file', url, defaultFilename),
-  saveFileSilent: (url: string, dir: string, fileName: string): Promise<DownloadResult> =>
-    ipcRenderer.invoke('save-file-silent', url, dir, fileName),
-  openExternal: (url: string): Promise<void> => ipcRenderer.invoke('open-external', url),
+  getApiKey: (): Promise<string> => ipcRenderer.invoke("get-api-key"),
+  setApiKey: (apiKey: string): Promise<boolean> =>
+    ipcRenderer.invoke("set-api-key", apiKey),
+  getSettings: (): Promise<Settings> => ipcRenderer.invoke("get-settings"),
+  setSettings: (settings: Partial<Settings>): Promise<boolean> =>
+    ipcRenderer.invoke("set-settings", settings),
+  clearAllData: (): Promise<boolean> => ipcRenderer.invoke("clear-all-data"),
+  downloadFile: (
+    url: string,
+    defaultFilename: string,
+  ): Promise<DownloadResult> =>
+    ipcRenderer.invoke("download-file", url, defaultFilename),
+  saveFileSilent: (
+    url: string,
+    dir: string,
+    fileName: string,
+  ): Promise<DownloadResult> =>
+    ipcRenderer.invoke("save-file-silent", url, dir, fileName),
+  openExternal: (url: string): Promise<void> =>
+    ipcRenderer.invoke("open-external", url),
 
   // Title bar theme
-  updateTitlebarTheme: (isDark: boolean): Promise<void> => ipcRenderer.invoke('update-titlebar-theme', isDark),
+  updateTitlebarTheme: (isDark: boolean): Promise<void> =>
+    ipcRenderer.invoke("update-titlebar-theme", isDark),
 
   // Auto-updater APIs
-  getAppVersion: (): Promise<string> => ipcRenderer.invoke('get-app-version'),
-  getLogFilePath: (): Promise<string> => ipcRenderer.invoke('get-log-file-path'),
+  getAppVersion: (): Promise<string> => ipcRenderer.invoke("get-app-version"),
+  getLogFilePath: (): Promise<string> =>
+    ipcRenderer.invoke("get-log-file-path"),
   openLogDirectory: (): Promise<{ success: boolean; path: string }> =>
-    ipcRenderer.invoke('open-log-directory'),
-  checkForUpdates: (): Promise<UpdateCheckResult> => ipcRenderer.invoke('check-for-updates'),
-  downloadUpdate: (): Promise<{ status: string; message?: string }> => ipcRenderer.invoke('download-update'),
+    ipcRenderer.invoke("open-log-directory"),
+  checkForUpdates: (): Promise<UpdateCheckResult> =>
+    ipcRenderer.invoke("check-for-updates"),
+  downloadUpdate: (): Promise<{ status: string; message?: string }> =>
+    ipcRenderer.invoke("download-update"),
   installUpdate: (): void => {
-    ipcRenderer.invoke('install-update')
+    ipcRenderer.invoke("install-update");
   },
-  setUpdateChannel: (channel: 'stable' | 'nightly'): Promise<boolean> =>
-    ipcRenderer.invoke('set-update-channel', channel),
+  setUpdateChannel: (channel: "stable" | "nightly"): Promise<boolean> =>
+    ipcRenderer.invoke("set-update-channel", channel),
   onUpdateStatus: (callback: (status: UpdateStatus) => void): (() => void) => {
-    const handler = (_: unknown, status: UpdateStatus) => callback(status)
-    ipcRenderer.on('update-status', handler)
-    return () => ipcRenderer.removeListener('update-status', handler)
+    const handler = (_: unknown, status: UpdateStatus) => callback(status);
+    ipcRenderer.on("update-status", handler);
+    return () => ipcRenderer.removeListener("update-status", handler);
   },
 
   // Assets APIs
-  getAssetsSettings: (): Promise<AssetsSettings> => ipcRenderer.invoke('get-assets-settings'),
+  getAssetsSettings: (): Promise<AssetsSettings> =>
+    ipcRenderer.invoke("get-assets-settings"),
   setAssetsSettings: (settings: Partial<AssetsSettings>): Promise<boolean> =>
-    ipcRenderer.invoke('set-assets-settings', settings),
-  getDefaultAssetsDirectory: (): Promise<string> => ipcRenderer.invoke('get-default-assets-directory'),
-  getZImageOutputPath: (): Promise<string> => ipcRenderer.invoke('get-zimage-output-path'),
-  selectDirectory: (): Promise<SelectDirectoryResult> => ipcRenderer.invoke('select-directory'),
-  saveAsset: (url: string, type: string, fileName: string, subDir: string): Promise<SaveAssetResult> =>
-    ipcRenderer.invoke('save-asset', url, type, fileName, subDir),
-  deleteAsset: (filePath: string): Promise<DeleteAssetResult> => ipcRenderer.invoke('delete-asset', filePath),
+    ipcRenderer.invoke("set-assets-settings", settings),
+  getDefaultAssetsDirectory: (): Promise<string> =>
+    ipcRenderer.invoke("get-default-assets-directory"),
+  getZImageOutputPath: (): Promise<string> =>
+    ipcRenderer.invoke("get-zimage-output-path"),
+  selectDirectory: (): Promise<SelectDirectoryResult> =>
+    ipcRenderer.invoke("select-directory"),
+  saveAsset: (
+    url: string,
+    type: string,
+    fileName: string,
+    subDir: string,
+  ): Promise<SaveAssetResult> =>
+    ipcRenderer.invoke("save-asset", url, type, fileName, subDir),
+  deleteAsset: (filePath: string): Promise<DeleteAssetResult> =>
+    ipcRenderer.invoke("delete-asset", filePath),
   deleteAssetsBulk: (filePaths: string[]): Promise<DeleteAssetsBulkResult> =>
-    ipcRenderer.invoke('delete-assets-bulk', filePaths),
-  getAssetsMetadata: (): Promise<AssetMetadata[]> => ipcRenderer.invoke('get-assets-metadata'),
+    ipcRenderer.invoke("delete-assets-bulk", filePaths),
+  getAssetsMetadata: (): Promise<AssetMetadata[]> =>
+    ipcRenderer.invoke("get-assets-metadata"),
   saveAssetsMetadata: (metadata: AssetMetadata[]): Promise<boolean> =>
-    ipcRenderer.invoke('save-assets-metadata', metadata),
+    ipcRenderer.invoke("save-assets-metadata", metadata),
   openFileLocation: (filePath: string): Promise<DeleteAssetResult> =>
-    ipcRenderer.invoke('open-file-location', filePath),
-  checkFileExists: (filePath: string): Promise<boolean> => ipcRenderer.invoke('check-file-exists', filePath),
+    ipcRenderer.invoke("open-file-location", filePath),
+  checkFileExists: (filePath: string): Promise<boolean> =>
+    ipcRenderer.invoke("check-file-exists", filePath),
   openAssetsFolder: (): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('open-assets-folder'),
-  scanAssetsDirectory: (): Promise<Array<{
-    filePath: string
-    fileName: string
-    type: 'image' | 'video' | 'audio' | 'text'
-    fileSize: number
-    createdAt: string
-  }>> => ipcRenderer.invoke('scan-assets-directory'),
+    ipcRenderer.invoke("open-assets-folder"),
+  scanAssetsDirectory: (): Promise<
+    Array<{
+      filePath: string;
+      fileName: string;
+      type: "image" | "video" | "audio" | "text";
+      fileSize: number;
+      createdAt: string;
+    }>
+  > => ipcRenderer.invoke("scan-assets-directory"),
 
   // Stable Diffusion APIs
-  sdGetBinaryPath: (): Promise<{ success: boolean; path?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-get-binary-path'),
-  sdGetSystemInfo: (): Promise<{ platform: string; arch: string; acceleration: string; supported: boolean }> =>
-    ipcRenderer.invoke('sd-get-system-info'),
-  sdGetGpuVramMb: (): Promise<{ success: boolean; vramMb: number | null; error?: string }> =>
-    ipcRenderer.invoke('sd-get-gpu-vram'),
-  sdCheckAuxiliaryModels: (): Promise<{ success: boolean; llmExists: boolean; vaeExists: boolean; llmPath: string; vaePath: string; error?: string }> =>
-    ipcRenderer.invoke('sd-check-auxiliary-models'),
-  sdListAuxiliaryModels: (): Promise<{ success: boolean; models?: Array<{ name: string; path: string; size: number; type: 'llm' | 'vae' }>; error?: string }> =>
-    ipcRenderer.invoke('sd-list-auxiliary-models'),
-  sdDeleteAuxiliaryModel: (type: 'llm' | 'vae'): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('sd-delete-auxiliary-model', type),
+  sdGetBinaryPath: (): Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-get-binary-path"),
+  sdGetSystemInfo: (): Promise<{
+    platform: string;
+    arch: string;
+    acceleration: string;
+    supported: boolean;
+  }> => ipcRenderer.invoke("sd-get-system-info"),
+  sdGetGpuVramMb: (): Promise<{
+    success: boolean;
+    vramMb: number | null;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-get-gpu-vram"),
+  sdCheckAuxiliaryModels: (): Promise<{
+    success: boolean;
+    llmExists: boolean;
+    vaeExists: boolean;
+    llmPath: string;
+    vaePath: string;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-check-auxiliary-models"),
+  sdListAuxiliaryModels: (): Promise<{
+    success: boolean;
+    models?: Array<{
+      name: string;
+      path: string;
+      size: number;
+      type: "llm" | "vae";
+    }>;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-list-auxiliary-models"),
+  sdDeleteAuxiliaryModel: (
+    type: "llm" | "vae",
+  ): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke("sd-delete-auxiliary-model", type),
   sdGenerateImage: (params: {
-    modelPath: string
-    llmPath?: string
-    vaePath?: string
-    lowVramMode?: boolean
-    vaeTiling?: boolean
-    prompt: string
-    negativePrompt?: string
-    width: number
-    height: number
-    steps: number
-    cfgScale: number
-    seed?: number
-    outputPath: string
+    modelPath: string;
+    llmPath?: string;
+    vaePath?: string;
+    lowVramMode?: boolean;
+    vaeTiling?: boolean;
+    prompt: string;
+    negativePrompt?: string;
+    width: number;
+    height: number;
+    steps: number;
+    cfgScale: number;
+    seed?: number;
+    outputPath: string;
   }): Promise<{ success: boolean; outputPath?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-generate-image', params),
+    ipcRenderer.invoke("sd-generate-image", params),
   sdCancelGeneration: (): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('sd-cancel-generation'),
-  sdSaveModelFromCache: (filename: string, data: Uint8Array, type: 'model' | 'llm' | 'vae'): Promise<{ success: boolean; filePath?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-save-model-from-cache', filename, data, type),
+    ipcRenderer.invoke("sd-cancel-generation"),
+  sdSaveModelFromCache: (
+    filename: string,
+    data: Uint8Array,
+    type: "model" | "llm" | "vae",
+  ): Promise<{ success: boolean; filePath?: string; error?: string }> =>
+    ipcRenderer.invoke("sd-save-model-from-cache", filename, data, type),
   sdListModels: (): Promise<{
-    success: boolean
-    models?: Array<{ name: string; path: string; size: number; createdAt: string }>
-    error?: string
-  }> => ipcRenderer.invoke('sd-list-models'),
-  sdDeleteModel: (modelPath: string): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('sd-delete-model', modelPath),
+    success: boolean;
+    models?: Array<{
+      name: string;
+      path: string;
+      size: number;
+      createdAt: string;
+    }>;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-list-models"),
+  sdDeleteModel: (
+    modelPath: string,
+  ): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke("sd-delete-model", modelPath),
   sdDeleteBinary: (): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('sd-delete-binary'),
+    ipcRenderer.invoke("sd-delete-binary"),
   getFileSize: (filePath: string): Promise<number> =>
-    ipcRenderer.invoke('get-file-size', filePath),
-  onSdProgress: (callback: (data: { phase: string; progress: number; detail?: unknown }) => void): (() => void) => {
-    const handler = (_: unknown, data: unknown) => callback(data as { phase: string; progress: number; detail?: unknown })
-    ipcRenderer.on('sd-progress', handler)
-    return () => ipcRenderer.removeListener('sd-progress', handler)
+    ipcRenderer.invoke("get-file-size", filePath),
+  onSdProgress: (
+    callback: (data: {
+      phase: string;
+      progress: number;
+      detail?: unknown;
+    }) => void,
+  ): (() => void) => {
+    const handler = (_: unknown, data: unknown) =>
+      callback(data as { phase: string; progress: number; detail?: unknown });
+    ipcRenderer.on("sd-progress", handler);
+    return () => ipcRenderer.removeListener("sd-progress", handler);
   },
-  onSdLog: (callback: (data: { type: 'stdout' | 'stderr'; message: string }) => void): (() => void) => {
-    const handler = (_: unknown, data: unknown) => callback(data as { type: 'stdout' | 'stderr'; message: string })
-    ipcRenderer.on('sd-log', handler)
-    return () => ipcRenderer.removeListener('sd-log', handler)
+  onSdLog: (
+    callback: (data: { type: "stdout" | "stderr"; message: string }) => void,
+  ): (() => void) => {
+    const handler = (_: unknown, data: unknown) =>
+      callback(data as { type: "stdout" | "stderr"; message: string });
+    ipcRenderer.on("sd-log", handler);
+    return () => ipcRenderer.removeListener("sd-log", handler);
   },
-  onSdDownloadProgress: (callback: (data: { phase: string; progress: number; detail?: unknown }) => void): (() => void) => {
-    const handler = (_: unknown, data: unknown) => callback(data as { phase: string; progress: number; detail?: unknown })
-    ipcRenderer.on('sd-download-progress', handler)
-    return () => ipcRenderer.removeListener('sd-download-progress', handler)
+  onSdDownloadProgress: (
+    callback: (data: {
+      phase: string;
+      progress: number;
+      detail?: unknown;
+    }) => void,
+  ): (() => void) => {
+    const handler = (_: unknown, data: unknown) =>
+      callback(data as { phase: string; progress: number; detail?: unknown });
+    ipcRenderer.on("sd-download-progress", handler);
+    return () => ipcRenderer.removeListener("sd-download-progress", handler);
   },
-  onSdBinaryDownloadProgress: (callback: (data: { phase: string; progress: number; detail?: unknown }) => void): (() => void) => {
-    const handler = (_: unknown, data: unknown) => callback(data as { phase: string; progress: number; detail?: unknown })
-    ipcRenderer.on('sd-binary-download-progress', handler)
-    return () => ipcRenderer.removeListener('sd-binary-download-progress', handler)
+  onSdBinaryDownloadProgress: (
+    callback: (data: {
+      phase: string;
+      progress: number;
+      detail?: unknown;
+    }) => void,
+  ): (() => void) => {
+    const handler = (_: unknown, data: unknown) =>
+      callback(data as { phase: string; progress: number; detail?: unknown });
+    ipcRenderer.on("sd-binary-download-progress", handler);
+    return () =>
+      ipcRenderer.removeListener("sd-binary-download-progress", handler);
   },
-  onSdLlmDownloadProgress: (callback: (data: { phase: string; progress: number; detail?: unknown }) => void): (() => void) => {
-    const handler = (_: unknown, data: unknown) => callback(data as { phase: string; progress: number; detail?: unknown })
-    ipcRenderer.on('sd-llm-download-progress', handler)
-    return () => ipcRenderer.removeListener('sd-llm-download-progress', handler)
+  onSdLlmDownloadProgress: (
+    callback: (data: {
+      phase: string;
+      progress: number;
+      detail?: unknown;
+    }) => void,
+  ): (() => void) => {
+    const handler = (_: unknown, data: unknown) =>
+      callback(data as { phase: string; progress: number; detail?: unknown });
+    ipcRenderer.on("sd-llm-download-progress", handler);
+    return () =>
+      ipcRenderer.removeListener("sd-llm-download-progress", handler);
   },
-  onSdVaeDownloadProgress: (callback: (data: { phase: string; progress: number; detail?: unknown }) => void): (() => void) => {
-    const handler = (_: unknown, data: unknown) => callback(data as { phase: string; progress: number; detail?: unknown })
-    ipcRenderer.on('sd-vae-download-progress', handler)
-    return () => ipcRenderer.removeListener('sd-vae-download-progress', handler)
+  onSdVaeDownloadProgress: (
+    callback: (data: {
+      phase: string;
+      progress: number;
+      detail?: unknown;
+    }) => void,
+  ): (() => void) => {
+    const handler = (_: unknown, data: unknown) =>
+      callback(data as { phase: string; progress: number; detail?: unknown });
+    ipcRenderer.on("sd-vae-download-progress", handler);
+    return () =>
+      ipcRenderer.removeListener("sd-vae-download-progress", handler);
   },
 
   // File operations for chunked downloads
-  fileGetSize: (filePath: string): Promise<{ success: boolean; size?: number; error?: string }> =>
-    ipcRenderer.invoke('file-get-size', filePath),
-  fileAppendChunk: (filePath: string, chunk: ArrayBuffer): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('file-append-chunk', filePath, chunk),
-  fileRename: (oldPath: string, newPath: string): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('file-rename', oldPath, newPath),
-  fileDelete: (filePath: string): Promise<{ success: boolean; error?: string }> =>
-    ipcRenderer.invoke('file-delete', filePath),
+  fileGetSize: (
+    filePath: string,
+  ): Promise<{ success: boolean; size?: number; error?: string }> =>
+    ipcRenderer.invoke("file-get-size", filePath),
+  fileAppendChunk: (
+    filePath: string,
+    chunk: ArrayBuffer,
+  ): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke("file-append-chunk", filePath, chunk),
+  fileRename: (
+    oldPath: string,
+    newPath: string,
+  ): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke("file-rename", oldPath, newPath),
+  fileDelete: (
+    filePath: string,
+  ): Promise<{ success: boolean; error?: string }> =>
+    ipcRenderer.invoke("file-delete", filePath),
 
   // SD download path helpers for chunked downloads
-  sdGetBinaryDownloadPath: (): Promise<{ success: boolean; path?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-get-binary-download-path'),
-  sdGetAuxiliaryModelDownloadPath: (type: 'llm' | 'vae'): Promise<{ success: boolean; path?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-get-auxiliary-model-download-path', type),
-  sdGetModelsDir: (): Promise<{ success: boolean; path?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-get-models-dir'),
-  sdExtractBinary: (zipPath: string, destPath: string): Promise<{ success: boolean; path?: string; error?: string }> =>
-    ipcRenderer.invoke('sd-extract-binary', zipPath, destPath),
+  sdGetBinaryDownloadPath: (): Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-get-binary-download-path"),
+  sdGetAuxiliaryModelDownloadPath: (
+    type: "llm" | "vae",
+  ): Promise<{ success: boolean; path?: string; error?: string }> =>
+    ipcRenderer.invoke("sd-get-auxiliary-model-download-path", type),
+  sdGetModelsDir: (): Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }> => ipcRenderer.invoke("sd-get-models-dir"),
+  sdExtractBinary: (
+    zipPath: string,
+    destPath: string,
+  ): Promise<{ success: boolean; path?: string; error?: string }> =>
+    ipcRenderer.invoke("sd-extract-binary", zipPath, destPath),
 
   // Persistent key-value state (survives app restarts, unlike renderer localStorage)
-  getState: (key: string): Promise<unknown> => ipcRenderer.invoke('get-state', key),
-  setState: (key: string, value: unknown): Promise<boolean> => ipcRenderer.invoke('set-state', key, value),
-  removeState: (key: string): Promise<boolean> => ipcRenderer.invoke('remove-state', key),
+  getState: (key: string): Promise<unknown> =>
+    ipcRenderer.invoke("get-state", key),
+  setState: (key: string, value: unknown): Promise<boolean> =>
+    ipcRenderer.invoke("set-state", key, value),
+  removeState: (key: string): Promise<boolean> =>
+    ipcRenderer.invoke("remove-state", key),
 
   // Assets event listener (workflow executor pushes new assets)
   onAssetsNewAsset: (callback: (asset: unknown) => void): (() => void) => {
-    const handler = (_: unknown, asset: unknown) => callback(asset)
-    ipcRenderer.on('assets:new-asset', handler)
-    return () => ipcRenderer.removeListener('assets:new-asset', handler)
-  }
-}
+    const handler = (_: unknown, asset: unknown) => callback(asset);
+    ipcRenderer.on("assets:new-asset", handler);
+    return () => ipcRenderer.removeListener("assets:new-asset", handler);
+  },
+};
 
 // ─── Workflow API (isolated namespace to avoid collision with electronAPI) ────
 const workflowAPI = {
   invoke: (channel: string, args?: unknown): Promise<unknown> =>
     ipcRenderer.invoke(channel, args),
   on: (channel: string, callback: (...args: unknown[]) => void): void => {
-    const handler = (_event: unknown, ...rest: unknown[]) => callback(...rest)
-    ipcRenderer.on(channel, handler)
+    const handler = (_event: unknown, ...rest: unknown[]) => callback(...rest);
+    ipcRenderer.on(channel, handler);
     // Store handler reference for removal
-    ;(workflowAPI as Record<string, unknown>)[`__handler_${channel}_${callback.toString().slice(0, 50)}`] = handler
+    (workflowAPI as Record<string, unknown>)[
+      `__handler_${channel}_${callback.toString().slice(0, 50)}`
+    ] = handler;
   },
-  removeListener: (channel: string, _callback: (...args: unknown[]) => void): void => {
+  removeListener: (
+    channel: string,
+    _callback: (...args: unknown[]) => void,
+  ): void => {
     // Best-effort removal — remove all listeners for this channel
-    ipcRenderer.removeAllListeners(channel)
-  }
-}
+    ipcRenderer.removeAllListeners(channel);
+  },
+};
 
 if (process.contextIsolated) {
   try {
-    contextBridge.exposeInMainWorld('electronAPI', electronAPI)
-    contextBridge.exposeInMainWorld('workflowAPI', workflowAPI)
+    contextBridge.exposeInMainWorld("electronAPI", electronAPI);
+    contextBridge.exposeInMainWorld("workflowAPI", workflowAPI);
   } catch (error) {
-    console.error(error)
+    console.error(error);
   }
 } else {
   // @ts-ignore - fallback for non-isolated context
-  window.electronAPI = electronAPI
+  window.electronAPI = electronAPI;
   // @ts-ignore
-  window.workflowAPI = workflowAPI
+  window.workflowAPI = workflowAPI;
 }
diff --git a/electron/workflow/db/budget.repo.ts b/electron/workflow/db/budget.repo.ts
index bdcd8857..b0d52d4e 100644
--- a/electron/workflow/db/budget.repo.ts
+++ b/electron/workflow/db/budget.repo.ts
@@ -1,36 +1,45 @@
 /**
  * Budget repository — get/set budget config and daily spend.
  */
-import { getDatabase, persistDatabase } from './connection'
-import type { BudgetConfig } from '../../../src/workflow/types/ipc'
+import { getDatabase, persistDatabase } from "./connection";
+import type { BudgetConfig } from "../../../src/workflow/types/ipc";
 
 export function getBudgetConfig(): BudgetConfig {
-  const db = getDatabase()
-  const result = db.exec('SELECT per_execution_limit, daily_limit FROM budget_config WHERE id = 1')
-  if (!result.length || !result[0].values.length) return { perExecutionLimit: 10, dailyLimit: 100 }
-  const row = result[0].values[0]
-  return { perExecutionLimit: row[0] as number, dailyLimit: row[1] as number }
+  const db = getDatabase();
+  const result = db.exec(
+    "SELECT per_execution_limit, daily_limit FROM budget_config WHERE id = 1",
+  );
+  if (!result.length || !result[0].values.length)
+    return { perExecutionLimit: 10, dailyLimit: 100 };
+  const row = result[0].values[0];
+  return { perExecutionLimit: row[0] as number, dailyLimit: row[1] as number };
 }
 
 export function setBudgetConfig(config: BudgetConfig): void {
-  const db = getDatabase()
-  db.run('UPDATE budget_config SET per_execution_limit = ?, daily_limit = ? WHERE id = 1',
-    [config.perExecutionLimit, config.dailyLimit])
-  persistDatabase()
+  const db = getDatabase();
+  db.run(
+    "UPDATE budget_config SET per_execution_limit = ?, daily_limit = ? WHERE id = 1",
+    [config.perExecutionLimit, config.dailyLimit],
+  );
+  persistDatabase();
 }
 
 export function getDailySpend(date?: string): number {
-  const db = getDatabase()
-  const d = date ?? new Date().toISOString().slice(0, 10)
-  const result = db.exec('SELECT total_cost FROM daily_spend WHERE date = ?', [d])
-  if (!result.length || !result[0].values.length) return 0
-  return result[0].values[0][0] as number
+  const db = getDatabase();
+  const d = date ?? new Date().toISOString().slice(0, 10);
+  const result = db.exec("SELECT total_cost FROM daily_spend WHERE date = ?", [
+    d,
+  ]);
+  if (!result.length || !result[0].values.length) return 0;
+  return result[0].values[0][0] as number;
 }
 
 export function addDailySpend(cost: number, date?: string): void {
-  const db = getDatabase()
-  const d = date ?? new Date().toISOString().slice(0, 10)
-  db.run(`INSERT INTO daily_spend (date, total_cost) VALUES (?, ?) ON CONFLICT(date) DO UPDATE SET total_cost = total_cost + ?`,
-    [d, cost, cost])
-  persistDatabase()
+  const db = getDatabase();
+  const d = date ?? new Date().toISOString().slice(0, 10);
+  db.run(
+    `INSERT INTO daily_spend (date, total_cost) VALUES (?, ?) ON CONFLICT(date) DO UPDATE SET total_cost = total_cost + ?`,
+    [d, cost, cost],
+  );
+  persistDatabase();
 }
diff --git a/electron/workflow/db/connection.ts b/electron/workflow/db/connection.ts
index 1f02bfc6..07015cb6 100644
--- a/electron/workflow/db/connection.ts
+++ b/electron/workflow/db/connection.ts
@@ -2,137 +2,154 @@
  * SQLite database connection management using sql.js (WASM-based).
  */
 
-import initSqlJs, { type Database as SqlJsDatabase } from 'sql.js'
-import { app } from 'electron'
-import { join } from 'path'
-import { existsSync, readFileSync, writeFileSync, renameSync, mkdirSync } from 'fs'
-import { dirname } from 'path'
-import { initializeSchema, runMigrations } from './schema'
-
-const DB_FILENAME = 'workflow.db'
-
-let db: SqlJsDatabase | null = null
-let dbPath: string = ''
+import initSqlJs, { type Database as SqlJsDatabase } from "sql.js";
+import { app } from "electron";
+import { join } from "path";
+import {
+  existsSync,
+  readFileSync,
+  writeFileSync,
+  renameSync,
+  mkdirSync,
+} from "fs";
+import { dirname } from "path";
+import { initializeSchema, runMigrations } from "./schema";
+
+const DB_FILENAME = "workflow.db";
+
+let db: SqlJsDatabase | null = null;
+let dbPath: string = "";
 
 function getWorkflowDataRoot(): string {
   // Packaged app runs from app.asar (read-only). Persist workflow data in userData.
   if (app.isPackaged) {
-    return join(app.getPath('userData'), 'workflow-data')
+    return join(app.getPath("userData"), "workflow-data");
   }
   // In dev mode keep current behavior for easier local inspection.
-  return join(app.getAppPath(), 'workflow-data')
+  return join(app.getAppPath(), "workflow-data");
 }
 
-export type { SqlJsDatabase }
+export type { SqlJsDatabase };
 
 export function getDatabasePath(): string {
   if (!dbPath) {
     try {
-      dbPath = join(getWorkflowDataRoot(), DB_FILENAME)
+      dbPath = join(getWorkflowDataRoot(), DB_FILENAME);
     } catch {
-      dbPath = join(process.cwd(), 'workflow-data', DB_FILENAME)
+      dbPath = join(process.cwd(), "workflow-data", DB_FILENAME);
     }
   }
-  return dbPath
+  return dbPath;
 }
 
 function saveToDisk(): void {
-  if (!db) return
-  const filePath = getDatabasePath()
-  const dir = dirname(filePath)
-  if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
-  const data = db.export()
-  const buffer = Buffer.from(data)
-  writeFileSync(filePath, buffer)
+  if (!db) return;
+  const filePath = getDatabasePath();
+  const dir = dirname(filePath);
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+  const data = db.export();
+  const buffer = Buffer.from(data);
+  writeFileSync(filePath, buffer);
 }
 
 export async function openDatabase(): Promise<SqlJsDatabase> {
-  if (db) return db
+  if (db) return db;
 
-  const SQL = await initSqlJs()
-  const filePath = getDatabasePath()
-  const dbExists = existsSync(filePath)
-  let isCorrupt = false
+  const SQL = await initSqlJs();
+  const filePath = getDatabasePath();
+  const dbExists = existsSync(filePath);
+  let isCorrupt = false;
 
   if (dbExists) {
     try {
-      const fileBuffer = readFileSync(filePath)
-      db = new SQL.Database(fileBuffer)
-      const result = db.exec('PRAGMA integrity_check')
-      const ok = result[0]?.values?.[0]?.[0]
-      if (ok !== 'ok') throw new Error('integrity_check failed')
+      const fileBuffer = readFileSync(filePath);
+      db = new SQL.Database(fileBuffer);
+      const result = db.exec("PRAGMA integrity_check");
+      const ok = result[0]?.values?.[0]?.[0];
+      if (ok !== "ok") throw new Error("integrity_check failed");
     } catch (error) {
-      console.error('[Workflow DB] Database corrupt or unreadable:', error)
-      isCorrupt = true
-      if (db) { db.close(); db = null }
-      const backupPath = `${filePath}.corrupt.${Date.now()}`
-      renameSync(filePath, backupPath)
-      console.warn(`[Workflow DB] Corrupt database backed up to: ${backupPath}`)
+      console.error("[Workflow DB] Database corrupt or unreadable:", error);
+      isCorrupt = true;
+      if (db) {
+        db.close();
+        db = null;
+      }
+      const backupPath = `${filePath}.corrupt.${Date.now()}`;
+      renameSync(filePath, backupPath);
+      console.warn(
+        `[Workflow DB] Corrupt database backed up to: ${backupPath}`,
+      );
     }
   }
 
   if (!db) {
-    db = new SQL.Database()
+    db = new SQL.Database();
   }
 
-  db.run('PRAGMA foreign_keys = ON')
+  db.run("PRAGMA foreign_keys = ON");
 
   if (!dbExists || isCorrupt) {
-    initializeSchema(db)
-    saveToDisk()
+    initializeSchema(db);
+    saveToDisk();
   } else {
-    runMigrations(db)
-    saveToDisk() // Save after running migrations
+    runMigrations(db);
+    saveToDisk(); // Save after running migrations
   }
 
-  return db
+  return db;
 }
 
 export function getDatabase(): SqlJsDatabase {
-  if (!db) throw new Error('[Workflow DB] Database not initialized. Call openDatabase() first.')
-  return db
+  if (!db)
+    throw new Error(
+      "[Workflow DB] Database not initialized. Call openDatabase() first.",
+    );
+  return db;
 }
 
-let persistTimer: ReturnType<typeof setTimeout> | null = null
+let persistTimer: ReturnType<typeof setTimeout> | null = null;
 
 /** Debounced persist — batches rapid writes into a single disk flush (max 500ms delay) */
 export function persistDatabase(): void {
-  if (persistTimer) clearTimeout(persistTimer)
+  if (persistTimer) clearTimeout(persistTimer);
   persistTimer = setTimeout(() => {
-    persistTimer = null
-    saveToDisk()
-  }, 500)
+    persistTimer = null;
+    saveToDisk();
+  }, 500);
 }
 
 /** Immediate persist — for critical moments like close/shutdown */
 export function persistDatabaseNow(): void {
-  if (persistTimer) { clearTimeout(persistTimer); persistTimer = null }
-  saveToDisk()
+  if (persistTimer) {
+    clearTimeout(persistTimer);
+    persistTimer = null;
+  }
+  saveToDisk();
 }
 
 export function closeDatabase(): void {
   if (db) {
     try {
-      persistDatabaseNow()
-      db.close()
+      persistDatabaseNow();
+      db.close();
     } catch (error) {
-      console.error('[Workflow DB] Error closing database:', error)
+      console.error("[Workflow DB] Error closing database:", error);
     } finally {
-      db = null
+      db = null;
     }
   }
 }
 
 export function transaction<T>(fn: (db: SqlJsDatabase) => T): T {
-  const database = getDatabase()
-  database.run('BEGIN TRANSACTION')
+  const database = getDatabase();
+  database.run("BEGIN TRANSACTION");
   try {
-    const result = fn(database)
-    database.run('COMMIT')
-    saveToDisk()
-    return result
+    const result = fn(database);
+    database.run("COMMIT");
+    saveToDisk();
+    return result;
   } catch (error) {
-    database.run('ROLLBACK')
-    throw error
+    database.run("ROLLBACK");
+    throw error;
   }
 }
diff --git a/electron/workflow/db/edge.repo.ts b/electron/workflow/db/edge.repo.ts
index a39dcaa2..3363ea5b 100644
--- a/electron/workflow/db/edge.repo.ts
+++ b/electron/workflow/db/edge.repo.ts
@@ -1,34 +1,45 @@
 /**
  * Edge repository — CRUD operations for edges table.
  */
-import { getDatabase, persistDatabase } from './connection'
-import type { WorkflowEdge } from '../../../src/workflow/types/workflow'
+import { getDatabase, persistDatabase } from "./connection";
+import type { WorkflowEdge } from "../../../src/workflow/types/workflow";
 
 function rowToEdge(row: unknown[]): WorkflowEdge {
   return {
-    id: row[0] as string, workflowId: row[1] as string, sourceNodeId: row[2] as string,
-    sourceOutputKey: row[3] as string, targetNodeId: row[4] as string, targetInputKey: row[5] as string
-  }
+    id: row[0] as string,
+    workflowId: row[1] as string,
+    sourceNodeId: row[2] as string,
+    sourceOutputKey: row[3] as string,
+    targetNodeId: row[4] as string,
+    targetInputKey: row[5] as string,
+  };
 }
 
-const EDGE_COLS = 'id, workflow_id, source_node_id, source_output_key, target_node_id, target_input_key'
+const EDGE_COLS =
+  "id, workflow_id, source_node_id, source_output_key, target_node_id, target_input_key";
 
 export function getEdgesByWorkflowId(workflowId: string): WorkflowEdge[] {
-  const db = getDatabase()
-  const result = db.exec(`SELECT ${EDGE_COLS} FROM edges WHERE workflow_id = ?`, [workflowId])
-  if (!result.length) return []
-  return result[0].values.map(rowToEdge)
+  const db = getDatabase();
+  const result = db.exec(
+    `SELECT ${EDGE_COLS} FROM edges WHERE workflow_id = ?`,
+    [workflowId],
+  );
+  if (!result.length) return [];
+  return result[0].values.map(rowToEdge);
 }
 
 export function getEdgesBySourceNode(sourceNodeId: string): WorkflowEdge[] {
-  const db = getDatabase()
-  const result = db.exec(`SELECT ${EDGE_COLS} FROM edges WHERE source_node_id = ?`, [sourceNodeId])
-  if (!result.length) return []
-  return result[0].values.map(rowToEdge)
+  const db = getDatabase();
+  const result = db.exec(
+    `SELECT ${EDGE_COLS} FROM edges WHERE source_node_id = ?`,
+    [sourceNodeId],
+  );
+  if (!result.length) return [];
+  return result[0].values.map(rowToEdge);
 }
 
 export function deleteEdge(edgeId: string): void {
-  const db = getDatabase()
-  db.run('DELETE FROM edges WHERE id = ?', [edgeId])
-  persistDatabase()
+  const db = getDatabase();
+  db.run("DELETE FROM edges WHERE id = ?", [edgeId]);
+  persistDatabase();
 }
diff --git a/electron/workflow/db/execution.repo.ts b/electron/workflow/db/execution.repo.ts
index b5d898ad..10a07993 100644
--- a/electron/workflow/db/execution.repo.ts
+++ b/electron/workflow/db/execution.repo.ts
@@ -1,82 +1,121 @@
 /**
  * Execution record repository — CRUD for node_executions table.
  */
-import { getDatabase, persistDatabase } from './connection'
-import type { NodeExecutionRecord } from '../../../src/workflow/types/execution'
+import { getDatabase, persistDatabase } from "./connection";
+import type { NodeExecutionRecord } from "../../../src/workflow/types/execution";
 
 function rowToRecord(row: unknown[]): NodeExecutionRecord {
   return {
-    id: row[0] as string, nodeId: row[1] as string, workflowId: row[2] as string,
-    inputHash: row[3] as string, paramsHash: row[4] as string,
-    status: row[5] as NodeExecutionRecord['status'],
+    id: row[0] as string,
+    nodeId: row[1] as string,
+    workflowId: row[2] as string,
+    inputHash: row[3] as string,
+    paramsHash: row[4] as string,
+    status: row[5] as NodeExecutionRecord["status"],
     resultPath: row[6] as string | null,
     resultMetadata: row[7] ? JSON.parse(row[7] as string) : null,
-    durationMs: row[8] as number | null, cost: row[9] as number,
-    createdAt: row[10] as string, score: row[11] as number | null,
-    starred: (row[12] as number) === 1
-  }
+    durationMs: row[8] as number | null,
+    cost: row[9] as number,
+    createdAt: row[10] as string,
+    score: row[11] as number | null,
+    starred: (row[12] as number) === 1,
+  };
 }
 
-const EXEC_COLS = 'id, node_id, workflow_id, input_hash, params_hash, status, result_path, result_metadata, duration_ms, cost, created_at, score, starred'
+const EXEC_COLS =
+  "id, node_id, workflow_id, input_hash, params_hash, status, result_path, result_metadata, duration_ms, cost, created_at, score, starred";
 
-export function insertExecution(record: Omit<NodeExecutionRecord, 'createdAt'>): NodeExecutionRecord {
-  const db = getDatabase()
-  const now = new Date().toISOString()
+export function insertExecution(
+  record: Omit<NodeExecutionRecord, "createdAt">,
+): NodeExecutionRecord {
+  const db = getDatabase();
+  const now = new Date().toISOString();
   db.run(
     `INSERT INTO node_executions (id, node_id, workflow_id, input_hash, params_hash, status, result_path, result_metadata, duration_ms, cost, created_at, score, starred)
      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
-    [record.id, record.nodeId, record.workflowId, record.inputHash, record.paramsHash,
-     record.status, record.resultPath, record.resultMetadata ? JSON.stringify(record.resultMetadata) : null,
-     record.durationMs, record.cost, now, record.score, record.starred ? 1 : 0]
-  )
-  persistDatabase()
-  return { ...record, createdAt: now }
+    [
+      record.id,
+      record.nodeId,
+      record.workflowId,
+      record.inputHash,
+      record.paramsHash,
+      record.status,
+      record.resultPath,
+      record.resultMetadata ? JSON.stringify(record.resultMetadata) : null,
+      record.durationMs,
+      record.cost,
+      now,
+      record.score,
+      record.starred ? 1 : 0,
+    ],
+  );
+  persistDatabase();
+  return { ...record, createdAt: now };
 }
 
 export function getExecutionsByNodeId(nodeId: string): NodeExecutionRecord[] {
-  const db = getDatabase()
-  const result = db.exec(`SELECT ${EXEC_COLS} FROM node_executions WHERE node_id = ? ORDER BY created_at DESC`, [nodeId])
-  if (!result.length) return []
-  return result[0].values.map(rowToRecord)
+  const db = getDatabase();
+  const result = db.exec(
+    `SELECT ${EXEC_COLS} FROM node_executions WHERE node_id = ? ORDER BY created_at DESC`,
+    [nodeId],
+  );
+  if (!result.length) return [];
+  return result[0].values.map(rowToRecord);
 }
 
 export function getExecutionById(id: string): NodeExecutionRecord | null {
-  const db = getDatabase()
-  const result = db.exec(`SELECT ${EXEC_COLS} FROM node_executions WHERE id = ?`, [id])
-  if (!result.length || !result[0].values.length) return null
-  return rowToRecord(result[0].values[0])
+  const db = getDatabase();
+  const result = db.exec(
+    `SELECT ${EXEC_COLS} FROM node_executions WHERE id = ?`,
+    [id],
+  );
+  if (!result.length || !result[0].values.length) return null;
+  return rowToRecord(result[0].values[0]);
 }
 
 export function updateExecutionScore(executionId: string, score: number): void {
-  const db = getDatabase()
-  db.run('UPDATE node_executions SET score = ? WHERE id = ?', [score, executionId])
-  persistDatabase()
+  const db = getDatabase();
+  db.run("UPDATE node_executions SET score = ? WHERE id = ?", [
+    score,
+    executionId,
+  ]);
+  persistDatabase();
 }
 
-export function updateExecutionStarred(executionId: string, starred: boolean): void {
-  const db = getDatabase()
-  db.run('UPDATE node_executions SET starred = ? WHERE id = ?', [starred ? 1 : 0, executionId])
-  persistDatabase()
+export function updateExecutionStarred(
+  executionId: string,
+  starred: boolean,
+): void {
+  const db = getDatabase();
+  db.run("UPDATE node_executions SET starred = ? WHERE id = ?", [
+    starred ? 1 : 0,
+    executionId,
+  ]);
+  persistDatabase();
 }
 
 export function deleteExecution(executionId: string): void {
-  const db = getDatabase()
-  db.run('DELETE FROM node_executions WHERE id = ?', [executionId])
-  persistDatabase()
+  const db = getDatabase();
+  db.run("DELETE FROM node_executions WHERE id = ?", [executionId]);
+  persistDatabase();
 }
 
 export function deleteExecutionsByNodeId(nodeId: string): void {
-  const db = getDatabase()
-  db.run('DELETE FROM node_executions WHERE node_id = ?', [nodeId])
-  persistDatabase()
+  const db = getDatabase();
+  db.run("DELETE FROM node_executions WHERE node_id = ?", [nodeId]);
+  persistDatabase();
 }
 
-export function findByCache(nodeId: string, inputHash: string, paramsHash: string): NodeExecutionRecord | null {
-  const db = getDatabase()
+export function findByCache(
+  nodeId: string,
+  inputHash: string,
+  paramsHash: string,
+): NodeExecutionRecord | null {
+  const db = getDatabase();
   const result = db.exec(
     `SELECT ${EXEC_COLS} FROM node_executions WHERE node_id = ? AND input_hash = ? AND params_hash = ? AND status = 'success' ORDER BY created_at DESC LIMIT 1`,
-    [nodeId, inputHash, paramsHash]
-  )
-  if (!result.length || !result[0].values.length) return null
-  return rowToRecord(result[0].values[0])
+    [nodeId, inputHash, paramsHash],
+  );
+  if (!result.length || !result[0].values.length) return null;
+  return rowToRecord(result[0].values[0]);
 }
diff --git a/electron/workflow/db/index.ts b/electron/workflow/db/index.ts
index c4d66552..d053bf16 100644
--- a/electron/workflow/db/index.ts
+++ b/electron/workflow/db/index.ts
@@ -1,6 +1,12 @@
-export { openDatabase, getDatabase, persistDatabase, closeDatabase, transaction } from './connection'
-export * from './workflow.repo'
-export * from './node.repo'
-export * from './edge.repo'
-export * from './execution.repo'
-export * from './budget.repo'
+export {
+  openDatabase,
+  getDatabase,
+  persistDatabase,
+  closeDatabase,
+  transaction,
+} from "./connection";
+export * from "./workflow.repo";
+export * from "./node.repo";
+export * from "./edge.repo";
+export * from "./execution.repo";
+export * from "./budget.repo";
diff --git a/electron/workflow/db/node.repo.ts b/electron/workflow/db/node.repo.ts
index 6aa426f4..e46d8a9f 100644
--- a/electron/workflow/db/node.repo.ts
+++ b/electron/workflow/db/node.repo.ts
@@ -1,31 +1,46 @@
 /**
  * Node repository — CRUD operations for nodes table.
  */
-import { getDatabase, persistDatabase } from './connection'
-import type { WorkflowNode } from '../../../src/workflow/types/workflow'
+import { getDatabase, persistDatabase } from "./connection";
+import type { WorkflowNode } from "../../../src/workflow/types/workflow";
 
 export function getNodesByWorkflowId(workflowId: string): WorkflowNode[] {
-  const db = getDatabase()
+  const db = getDatabase();
   const result = db.exec(
-    'SELECT id, workflow_id, node_type, position_x, position_y, params, current_output_id FROM nodes WHERE workflow_id = ?',
-    [workflowId]
-  )
-  if (!result.length) return []
-  return result[0].values.map(row => ({
-    id: row[0] as string, workflowId: row[1] as string, nodeType: row[2] as string,
+    "SELECT id, workflow_id, node_type, position_x, position_y, params, current_output_id FROM nodes WHERE workflow_id = ?",
+    [workflowId],
+  );
+  if (!result.length) return [];
+  return result[0].values.map((row) => ({
+    id: row[0] as string,
+    workflowId: row[1] as string,
+    nodeType: row[2] as string,
     position: { x: row[3] as number, y: row[4] as number },
-    params: JSON.parse(row[5] as string), currentOutputId: row[6] as string | null
-  }))
+    params: JSON.parse(row[5] as string),
+    currentOutputId: row[6] as string | null,
+  }));
 }
 
-export function updateNodeParams(nodeId: string, params: Record<string, unknown>): void {
-  const db = getDatabase()
-  db.run('UPDATE nodes SET params = ? WHERE id = ?', [JSON.stringify(params), nodeId])
-  persistDatabase()
+export function updateNodeParams(
+  nodeId: string,
+  params: Record<string, unknown>,
+): void {
+  const db = getDatabase();
+  db.run("UPDATE nodes SET params = ? WHERE id = ?", [
+    JSON.stringify(params),
+    nodeId,
+  ]);
+  persistDatabase();
 }
 
-export function updateNodeCurrentOutputId(nodeId: string, executionId: string | null): void {
-  const db = getDatabase()
-  db.run('UPDATE nodes SET current_output_id = ? WHERE id = ?', [executionId, nodeId])
-  persistDatabase()
+export function updateNodeCurrentOutputId(
+  nodeId: string,
+  executionId: string | null,
+): void {
+  const db = getDatabase();
+  db.run("UPDATE nodes SET current_output_id = ? WHERE id = ?", [
+    executionId,
+    nodeId,
+  ]);
+  persistDatabase();
 }
diff --git a/electron/workflow/db/schema.ts b/electron/workflow/db/schema.ts
index d2395f6d..7e190fa2 100644
--- a/electron/workflow/db/schema.ts
+++ b/electron/workflow/db/schema.ts
@@ -2,16 +2,16 @@
  * SQLite database schema definitions and migrations (sql.js version).
  */
 
-import type { Database as SqlJsDatabase } from 'sql.js'
+import type { Database as SqlJsDatabase } from "sql.js";
 
-const DEFAULT_PER_EXECUTION_LIMIT = 10.0
-const DEFAULT_DAILY_LIMIT = 100.0
+const DEFAULT_PER_EXECUTION_LIMIT = 10.0;
+const DEFAULT_DAILY_LIMIT = 100.0;
 
 export function initializeSchema(db: SqlJsDatabase): void {
   db.run(`CREATE TABLE IF NOT EXISTS schema_version (
     version INTEGER PRIMARY KEY,
     applied_at TEXT NOT NULL DEFAULT (datetime('now'))
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS workflows (
     id TEXT PRIMARY KEY,
@@ -20,7 +20,7 @@ export function initializeSchema(db: SqlJsDatabase): void {
     updated_at TEXT NOT NULL DEFAULT (datetime('now')),
     graph_definition TEXT NOT NULL,
     status TEXT NOT NULL DEFAULT 'draft' CHECK (status IN ('draft', 'ready', 'archived'))
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS nodes (
     id TEXT PRIMARY KEY,
@@ -31,7 +31,7 @@ export function initializeSchema(db: SqlJsDatabase): void {
     params TEXT NOT NULL DEFAULT '{}',
     current_output_id TEXT,
     FOREIGN KEY (current_output_id) REFERENCES node_executions(id) ON DELETE SET NULL
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS node_executions (
     id TEXT PRIMARY KEY,
@@ -47,7 +47,7 @@ export function initializeSchema(db: SqlJsDatabase): void {
     created_at TEXT NOT NULL DEFAULT (datetime('now')),
     score REAL,
     starred INTEGER NOT NULL DEFAULT 0 CHECK (starred IN (0, 1))
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS edges (
     id TEXT PRIMARY KEY,
@@ -57,25 +57,25 @@ export function initializeSchema(db: SqlJsDatabase): void {
     target_node_id TEXT NOT NULL REFERENCES nodes(id) ON DELETE CASCADE,
     target_input_key TEXT NOT NULL,
     UNIQUE(source_node_id, source_output_key, target_node_id, target_input_key)
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS budget_config (
     id INTEGER PRIMARY KEY CHECK (id = 1),
     per_execution_limit REAL NOT NULL DEFAULT ${DEFAULT_PER_EXECUTION_LIMIT},
     daily_limit REAL NOT NULL DEFAULT ${DEFAULT_DAILY_LIMIT}
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS daily_spend (
     date TEXT PRIMARY KEY,
     total_cost REAL NOT NULL DEFAULT 0
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS api_keys (
     id INTEGER PRIMARY KEY CHECK (id = 1),
     wavespeed_key TEXT,
     llm_key TEXT,
     updated_at TEXT NOT NULL DEFAULT (datetime('now'))
-  )`)
+  )`);
 
   db.run(`CREATE TABLE IF NOT EXISTS templates (
     id TEXT PRIMARY KEY,
@@ -92,42 +92,75 @@ export function initializeSchema(db: SqlJsDatabase): void {
     thumbnail TEXT,
     playground_data TEXT,
     workflow_data TEXT
-  )`)
+  )`);
 
   // Indexes
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_nodes_workflow ON nodes(workflow_id)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_edges_workflow ON edges(workflow_id)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_executions_node ON node_executions(node_id)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_executions_workflow ON node_executions(workflow_id)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_executions_created ON node_executions(created_at DESC)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_executions_cache ON node_executions(node_id, input_hash, params_hash, status)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_edges_source ON edges(source_node_id)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_edges_target ON edges(target_node_id)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_wf_daily_spend_date ON daily_spend(date)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_templates_type ON templates(type)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_templates_template_type ON templates(template_type)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_templates_favorite ON templates(is_favorite)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_templates_created ON templates(created_at DESC)')
-  db.run('CREATE INDEX IF NOT EXISTS idx_templates_use_count ON templates(use_count DESC)')
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_nodes_workflow ON nodes(workflow_id)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_edges_workflow ON edges(workflow_id)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_executions_node ON node_executions(node_id)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_executions_workflow ON node_executions(workflow_id)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_executions_created ON node_executions(created_at DESC)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_executions_cache ON node_executions(node_id, input_hash, params_hash, status)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_edges_source ON edges(source_node_id)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_edges_target ON edges(target_node_id)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_wf_daily_spend_date ON daily_spend(date)",
+  );
+  db.run("CREATE INDEX IF NOT EXISTS idx_templates_type ON templates(type)");
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_templates_template_type ON templates(template_type)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_templates_favorite ON templates(is_favorite)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_templates_created ON templates(created_at DESC)",
+  );
+  db.run(
+    "CREATE INDEX IF NOT EXISTS idx_templates_use_count ON templates(use_count DESC)",
+  );
 
   // Default config
-  db.run('INSERT OR IGNORE INTO budget_config (id, per_execution_limit, daily_limit) VALUES (1, ?, ?)',
-    [DEFAULT_PER_EXECUTION_LIMIT, DEFAULT_DAILY_LIMIT])
-  db.run('INSERT OR IGNORE INTO api_keys (id, wavespeed_key, llm_key) VALUES (1, NULL, NULL)')
-  db.run('INSERT OR IGNORE INTO schema_version (version) VALUES (1)')
+  db.run(
+    "INSERT OR IGNORE INTO budget_config (id, per_execution_limit, daily_limit) VALUES (1, ?, ?)",
+    [DEFAULT_PER_EXECUTION_LIMIT, DEFAULT_DAILY_LIMIT],
+  );
+  db.run(
+    "INSERT OR IGNORE INTO api_keys (id, wavespeed_key, llm_key) VALUES (1, NULL, NULL)",
+  );
+  db.run("INSERT OR IGNORE INTO schema_version (version) VALUES (1)");
 }
 
 export function runMigrations(db: SqlJsDatabase): void {
-  const result = db.exec('SELECT MAX(version) as version FROM schema_version')
-  const currentVersion = (result[0]?.values?.[0]?.[0] as number) ?? 0
+  const result = db.exec("SELECT MAX(version) as version FROM schema_version");
+  const currentVersion = (result[0]?.values?.[0]?.[0] as number) ?? 0;
 
-  const migrations: Array<{ version: number; apply: (db: SqlJsDatabase) => void }> = [
+  const migrations: Array<{
+    version: number;
+    apply: (db: SqlJsDatabase) => void;
+  }> = [
     // Migration 2: Add templates table
     {
       version: 2,
       apply: (db: SqlJsDatabase) => {
-        console.log('[Schema] Applying migration 2: Add templates table')
-        
+        console.log("[Schema] Applying migration 2: Add templates table");
+
         db.run(`CREATE TABLE IF NOT EXISTS templates (
           id TEXT PRIMARY KEY,
           name TEXT NOT NULL,
@@ -143,22 +176,32 @@ export function runMigrations(db: SqlJsDatabase): void {
           thumbnail TEXT,
           playground_data TEXT,
           workflow_data TEXT
-        )`)
-        
-        db.run('CREATE INDEX IF NOT EXISTS idx_templates_type ON templates(type)')
-        db.run('CREATE INDEX IF NOT EXISTS idx_templates_template_type ON templates(template_type)')
-        db.run('CREATE INDEX IF NOT EXISTS idx_templates_favorite ON templates(is_favorite)')
-        db.run('CREATE INDEX IF NOT EXISTS idx_templates_created ON templates(created_at DESC)')
-        db.run('CREATE INDEX IF NOT EXISTS idx_templates_use_count ON templates(use_count DESC)')
-        
-        db.run('INSERT INTO schema_version (version) VALUES (2)')
-      }
-    }
-  ]
+        )`);
+
+        db.run(
+          "CREATE INDEX IF NOT EXISTS idx_templates_type ON templates(type)",
+        );
+        db.run(
+          "CREATE INDEX IF NOT EXISTS idx_templates_template_type ON templates(template_type)",
+        );
+        db.run(
+          "CREATE INDEX IF NOT EXISTS idx_templates_favorite ON templates(is_favorite)",
+        );
+        db.run(
+          "CREATE INDEX IF NOT EXISTS idx_templates_created ON templates(created_at DESC)",
+        );
+        db.run(
+          "CREATE INDEX IF NOT EXISTS idx_templates_use_count ON templates(use_count DESC)",
+        );
+
+        db.run("INSERT INTO schema_version (version) VALUES (2)");
+      },
+    },
+  ];
 
   for (const m of migrations) {
     if (m.version > currentVersion) {
-      m.apply(db)
+      m.apply(db);
     }
   }
 }
diff --git a/electron/workflow/db/sql-js.d.ts b/electron/workflow/db/sql-js.d.ts
index 22db0d48..ac470099 100644
--- a/electron/workflow/db/sql-js.d.ts
+++ b/electron/workflow/db/sql-js.d.ts
@@ -2,22 +2,24 @@
  * Type declarations for sql.js (WASM SQLite).
  * sql.js doesn't ship its own .d.ts, so we provide a minimal shim.
  */
-declare module 'sql.js' {
+declare module "sql.js" {
   export interface QueryExecResult {
-    columns: string[]
-    values: unknown[][]
+    columns: string[];
+    values: unknown[][];
   }
 
   export interface Database {
-    run(sql: string, params?: unknown[]): Database
-    exec(sql: string, params?: unknown[]): QueryExecResult[]
-    export(): Uint8Array
-    close(): void
+    run(sql: string, params?: unknown[]): Database;
+    exec(sql: string, params?: unknown[]): QueryExecResult[];
+    export(): Uint8Array;
+    close(): void;
   }
 
   export interface SqlJsStatic {
-    Database: new (data?: ArrayLike<number> | Buffer | null) => Database
+    Database: new (data?: ArrayLike<number> | Buffer | null) => Database;
   }
 
-  export default function initSqlJs(config?: Record<string, unknown>): Promise<SqlJsStatic>
+  export default function initSqlJs(
+    config?: Record<string, unknown>,
+  ): Promise<SqlJsStatic>;
 }
diff --git a/electron/workflow/db/template.repo.ts b/electron/workflow/db/template.repo.ts
index ec17a601..694a4637 100644
--- a/electron/workflow/db/template.repo.ts
+++ b/electron/workflow/db/template.repo.ts
@@ -1,23 +1,29 @@
 /**
  * Template repository — CRUD operations for templates table.
  */
-import { v4 as uuid } from 'uuid'
-import { getDatabase, persistDatabase } from './connection'
-import type { Template, TemplateFilter, CreateTemplateInput } from '../../../src/types/template'
+import { v4 as uuid } from "uuid";
+import { getDatabase, persistDatabase } from "./connection";
+import type {
+  Template,
+  TemplateFilter,
+  CreateTemplateInput,
+} from "../../../src/types/template";
 
 export function createTemplate(input: CreateTemplateInput): Template {
-  const db = getDatabase()
-  const id = uuid()
-  const now = new Date().toISOString()
-  
-  const tags = input.tags ? JSON.stringify(input.tags) : null
-  const playgroundData = input.templateType === 'playground' && input.playgroundData
-    ? JSON.stringify(input.playgroundData) 
-    : null
-  const workflowData = input.templateType === 'workflow' && input.workflowData
-    ? JSON.stringify(input.workflowData)
-    : null
-  
+  const db = getDatabase();
+  const id = uuid();
+  const now = new Date().toISOString();
+
+  const tags = input.tags ? JSON.stringify(input.tags) : null;
+  const playgroundData =
+    input.templateType === "playground" && input.playgroundData
+      ? JSON.stringify(input.playgroundData)
+      : null;
+  const workflowData =
+    input.templateType === "workflow" && input.workflowData
+      ? JSON.stringify(input.workflowData)
+      : null;
+
   db.run(
     `INSERT INTO templates (
       id, name, description, tags, type, template_type, is_favorite,
@@ -25,161 +31,179 @@ export function createTemplate(input: CreateTemplateInput): Template {
       playground_data, workflow_data
     ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
     [
-      id, input.name, input.description || null, tags, input.type,
-      input.templateType, 0, now, now, input.author || null, 0,
-      input.thumbnail || null, playgroundData, workflowData
-    ]
-  )
-  
-  persistDatabase()
-  return getTemplateById(id)!
+      id,
+      input.name,
+      input.description || null,
+      tags,
+      input.type,
+      input.templateType,
+      0,
+      now,
+      now,
+      input.author || null,
+      0,
+      input.thumbnail || null,
+      playgroundData,
+      workflowData,
+    ],
+  );
+
+  persistDatabase();
+  return getTemplateById(id)!;
 }
 
 export function getTemplateById(id: string): Template | null {
-  const db = getDatabase()
+  const db = getDatabase();
   const result = db.exec(
     `SELECT id, name, description, tags, type, template_type, is_favorite,
             created_at, updated_at, author, use_count, thumbnail,
             playground_data, workflow_data
      FROM templates WHERE id = ?`,
-    [id]
-  )
-  
-  if (!result.length || !result[0].values.length) return null
-  return rowToTemplate(result[0].values[0])
+    [id],
+  );
+
+  if (!result.length || !result[0].values.length) return null;
+  return rowToTemplate(result[0].values[0]);
 }
 
 export function queryTemplates(filter?: TemplateFilter): Template[] {
-  const db = getDatabase()
-  const conditions: string[] = []
-  const params: any[] = []
-  
+  const db = getDatabase();
+  const conditions: string[] = [];
+  const params: any[] = [];
+
   if (filter?.templateType) {
-    conditions.push('template_type = ?')
-    params.push(filter.templateType)
+    conditions.push("template_type = ?");
+    params.push(filter.templateType);
   }
-  
+
   if (filter?.type) {
-    conditions.push('type = ?')
-    params.push(filter.type)
+    conditions.push("type = ?");
+    params.push(filter.type);
   }
-  
+
   if (filter?.isFavorite !== undefined) {
-    conditions.push('is_favorite = ?')
-    params.push(filter.isFavorite ? 1 : 0)
+    conditions.push("is_favorite = ?");
+    params.push(filter.isFavorite ? 1 : 0);
   }
-  
-  if (filter?.category && filter.templateType === 'workflow') {
-    conditions.push("json_extract(workflow_data, '$.category') = ?")
-    params.push(filter.category)
+
+  if (filter?.category && filter.templateType === "workflow") {
+    conditions.push("json_extract(workflow_data, '$.category') = ?");
+    params.push(filter.category);
   }
-  
+
   if (filter?.search) {
-    const searchPattern = `%${filter.search}%`
-    conditions.push('(name LIKE ? OR description LIKE ? OR tags LIKE ?)')
-    params.push(searchPattern, searchPattern, searchPattern)
+    const searchPattern = `%${filter.search}%`;
+    conditions.push("(name LIKE ? OR description LIKE ? OR tags LIKE ?)");
+    params.push(searchPattern, searchPattern, searchPattern);
   }
-  
-  const whereClause = conditions.length > 0 ? `WHERE ${conditions.join(' AND ')}` : ''
-  const orderBy = filter?.sortBy === 'useCount' 
-    ? 'ORDER BY use_count DESC, updated_at DESC'
-    : 'ORDER BY updated_at DESC'
-  
+
+  const whereClause =
+    conditions.length > 0 ? `WHERE ${conditions.join(" AND ")}` : "";
+  const orderBy =
+    filter?.sortBy === "useCount"
+      ? "ORDER BY use_count DESC, updated_at DESC"
+      : "ORDER BY updated_at DESC";
+
   const query = `SELECT id, name, description, tags, type, template_type, is_favorite,
                         created_at, updated_at, author, use_count, thumbnail,
                         playground_data, workflow_data
-                 FROM templates ${whereClause} ${orderBy}`
-  const result = db.exec(query, params)
-  
-  if (!result.length) return []
-  return result[0].values.map(rowToTemplate)
+                 FROM templates ${whereClause} ${orderBy}`;
+  const result = db.exec(query, params);
+
+  if (!result.length) return [];
+  return result[0].values.map(rowToTemplate);
 }
 
 export function updateTemplate(id: string, updates: Partial<Template>): void {
-  const db = getDatabase()
-  const now = new Date().toISOString()
-  const setClauses: string[] = ['updated_at = ?']
-  const params: any[] = [now]
-  
+  const db = getDatabase();
+  const now = new Date().toISOString();
+  const setClauses: string[] = ["updated_at = ?"];
+  const params: any[] = [now];
+
   if (updates.name !== undefined) {
-    setClauses.push('name = ?')
-    params.push(updates.name)
+    setClauses.push("name = ?");
+    params.push(updates.name);
   }
-  
+
   if (updates.description !== undefined) {
-    setClauses.push('description = ?')
-    params.push(updates.description)
+    setClauses.push("description = ?");
+    params.push(updates.description);
   }
-  
+
   if (updates.tags !== undefined) {
-    setClauses.push('tags = ?')
-    params.push(JSON.stringify(updates.tags))
+    setClauses.push("tags = ?");
+    params.push(JSON.stringify(updates.tags));
   }
-  
+
   if (updates.thumbnail !== undefined) {
-    setClauses.push('thumbnail = ?')
-    params.push(updates.thumbnail)
+    setClauses.push("thumbnail = ?");
+    params.push(updates.thumbnail);
   }
-  
+
   if (updates.playgroundData !== undefined) {
-    setClauses.push('playground_data = ?')
-    params.push(JSON.stringify(updates.playgroundData))
+    setClauses.push("playground_data = ?");
+    params.push(JSON.stringify(updates.playgroundData));
   }
-  
+
   if (updates.workflowData !== undefined) {
-    setClauses.push('workflow_data = ?')
-    params.push(JSON.stringify(updates.workflowData))
+    setClauses.push("workflow_data = ?");
+    params.push(JSON.stringify(updates.workflowData));
   }
-  
-  params.push(id)
-  db.run(`UPDATE templates SET ${setClauses.join(', ')} WHERE id = ?`, params)
-  persistDatabase()
+
+  params.push(id);
+  db.run(`UPDATE templates SET ${setClauses.join(", ")} WHERE id = ?`, params);
+  persistDatabase();
 }
 
 export function toggleFavorite(id: string): boolean {
-  const db = getDatabase()
-  const template = getTemplateById(id)
-  if (!template) throw new Error(`Template ${id} not found`)
-  
-  const newValue = template.isFavorite ? 0 : 1
-  db.run('UPDATE templates SET is_favorite = ?, updated_at = ? WHERE id = ?',
-    [newValue, new Date().toISOString(), id])
-  persistDatabase()
-  return newValue === 1
+  const db = getDatabase();
+  const template = getTemplateById(id);
+  if (!template) throw new Error(`Template ${id} not found`);
+
+  const newValue = template.isFavorite ? 0 : 1;
+  db.run("UPDATE templates SET is_favorite = ?, updated_at = ? WHERE id = ?", [
+    newValue,
+    new Date().toISOString(),
+    id,
+  ]);
+  persistDatabase();
+  return newValue === 1;
 }
 
 export function incrementUseCount(id: string): void {
-  const db = getDatabase()
-  db.run('UPDATE templates SET use_count = use_count + 1, updated_at = ? WHERE id = ?',
-    [new Date().toISOString(), id])
-  persistDatabase()
+  const db = getDatabase();
+  db.run(
+    "UPDATE templates SET use_count = use_count + 1, updated_at = ? WHERE id = ?",
+    [new Date().toISOString(), id],
+  );
+  persistDatabase();
 }
 
 export function deleteTemplate(id: string): void {
-  const db = getDatabase()
-  db.run('DELETE FROM templates WHERE id = ?', [id])
-  persistDatabase()
+  const db = getDatabase();
+  db.run("DELETE FROM templates WHERE id = ?", [id]);
+  persistDatabase();
 }
 
 export function deleteTemplates(ids: string[]): void {
-  const db = getDatabase()
-  const placeholders = ids.map(() => '?').join(',')
-  db.run(`DELETE FROM templates WHERE id IN (${placeholders})`, ids)
-  persistDatabase()
+  const db = getDatabase();
+  const placeholders = ids.map(() => "?").join(",");
+  db.run(`DELETE FROM templates WHERE id IN (${placeholders})`, ids);
+  persistDatabase();
 }
 
 function rowToTemplate(row: any[]): Template {
-  const tags = row[3] ? JSON.parse(row[3] as string) : []
-  const playgroundData = row[12] ? JSON.parse(row[12] as string) : null
-  const workflowData = row[13] ? JSON.parse(row[13] as string) : null
-  
+  const tags = row[3] ? JSON.parse(row[3] as string) : [];
+  const playgroundData = row[12] ? JSON.parse(row[12] as string) : null;
+  const workflowData = row[13] ? JSON.parse(row[13] as string) : null;
+
   return {
     id: row[0] as string,
     name: row[1] as string,
     description: row[2] as string | null,
     tags,
-    type: row[4] as 'public' | 'custom',
-    templateType: row[5] as 'playground' | 'workflow',
+    type: row[4] as "public" | "custom",
+    templateType: row[5] as "playground" | "workflow",
     isFavorite: row[6] === 1,
     createdAt: row[7] as string,
     updatedAt: row[8] as string,
@@ -187,6 +211,6 @@ function rowToTemplate(row: any[]): Template {
     useCount: row[10] as number,
     thumbnail: row[11] as string | null,
     playgroundData,
-    workflowData
-  }
+    workflowData,
+  };
 }
diff --git a/electron/workflow/db/workflow.repo.ts b/electron/workflow/db/workflow.repo.ts
index 28552802..c52ba7c8 100644
--- a/electron/workflow/db/workflow.repo.ts
+++ b/electron/workflow/db/workflow.repo.ts
@@ -1,178 +1,249 @@
 /**
  * Workflow repository — CRUD operations for workflows table.
  */
-import { v4 as uuid } from 'uuid'
-import { getDatabase, persistDatabase } from './connection'
-import { getFileStorageInstance } from '../utils/file-storage'
-import type { Workflow, GraphDefinition } from '../../../src/workflow/types/workflow'
+import { v4 as uuid } from "uuid";
+import { getDatabase, persistDatabase } from "./connection";
+import { getFileStorageInstance } from "../utils/file-storage";
+import type {
+  Workflow,
+  GraphDefinition,
+} from "../../../src/workflow/types/workflow";
 
-function getFileStorage() { return getFileStorageInstance() }
+function getFileStorage() {
+  return getFileStorageInstance();
+}
 
 /**
  * Ensure a workflow name is unique across all workflows.
  * If a collision is found (excluding the workflow with `excludeId`),
  * appends (2), (3), etc. until unique.
  */
-function ensureUniqueName(db: ReturnType<typeof getDatabase>, name: string, excludeId: string | null): string {
-  const trimmed = name.trim() || 'Untitled Workflow'
-  const existingNames = new Set<string>()
+function ensureUniqueName(
+  db: ReturnType<typeof getDatabase>,
+  name: string,
+  excludeId: string | null,
+): string {
+  const trimmed = name.trim() || "Untitled Workflow";
+  const existingNames = new Set<string>();
   const result = excludeId
-    ? db.exec('SELECT name FROM workflows WHERE id != ?', [excludeId])
-    : db.exec('SELECT name FROM workflows')
+    ? db.exec("SELECT name FROM workflows WHERE id != ?", [excludeId])
+    : db.exec("SELECT name FROM workflows");
   if (result.length > 0) {
     for (const row of result[0].values) {
-      existingNames.add(row[0] as string)
+      existingNames.add(row[0] as string);
     }
   }
 
-  if (!existingNames.has(trimmed)) return trimmed
+  if (!existingNames.has(trimmed)) return trimmed;
 
-  let counter = 2
-  while (existingNames.has(`${trimmed} (${counter})`)) counter++
-  return `${trimmed} (${counter})`
+  let counter = 2;
+  while (existingNames.has(`${trimmed} (${counter})`)) counter++;
+  return `${trimmed} (${counter})`;
 }
 
 export function createWorkflow(name: string): Workflow {
-  const db = getDatabase()
-  const id = uuid()
-  const now = new Date().toISOString()
-  const graphDef: GraphDefinition = { nodes: [], edges: [] }
+  const db = getDatabase();
+  const id = uuid();
+  const now = new Date().toISOString();
+  const graphDef: GraphDefinition = { nodes: [], edges: [] };
 
   // Ensure unique name — append (2), (3), etc. if needed
-  const finalName = ensureUniqueName(db, name, null)
+  const finalName = ensureUniqueName(db, name, null);
 
   db.run(
     `INSERT INTO workflows (id, name, created_at, updated_at, graph_definition, status) VALUES (?, ?, ?, ?, ?, ?)`,
-    [id, finalName, now, now, JSON.stringify(graphDef), 'draft']
-  )
-  persistDatabase()
+    [id, finalName, now, now, JSON.stringify(graphDef), "draft"],
+  );
+  persistDatabase();
   // Also create the workflow directory and initial snapshot on disk
-  getFileStorage().saveWorkflowSnapshot(id, finalName, graphDef)
-  return { id, name: finalName, createdAt: now, updatedAt: now, graphDefinition: graphDef, status: 'draft' }
+  getFileStorage().saveWorkflowSnapshot(id, finalName, graphDef);
+  return {
+    id,
+    name: finalName,
+    createdAt: now,
+    updatedAt: now,
+    graphDefinition: graphDef,
+    status: "draft",
+  };
 }
 
 export function getWorkflowById(id: string): Workflow | null {
-  const db = getDatabase()
+  const db = getDatabase();
   const result = db.exec(
-    'SELECT id, name, created_at, updated_at, graph_definition, status FROM workflows WHERE id = ?', [id]
-  )
-  if (!result.length || !result[0].values.length) return null
-  const row = result[0].values[0]
+    "SELECT id, name, created_at, updated_at, graph_definition, status FROM workflows WHERE id = ?",
+    [id],
+  );
+  if (!result.length || !result[0].values.length) return null;
+  const row = result[0].values[0];
   return {
-    id: row[0] as string, name: row[1] as string, createdAt: row[2] as string,
-    updatedAt: row[3] as string, graphDefinition: JSON.parse(row[4] as string),
-    status: row[5] as Workflow['status']
-  }
+    id: row[0] as string,
+    name: row[1] as string,
+    createdAt: row[2] as string,
+    updatedAt: row[3] as string,
+    graphDefinition: JSON.parse(row[4] as string),
+    status: row[5] as Workflow["status"],
+  };
 }
 
-export function listWorkflows(): Array<{ id: string; name: string; createdAt: string; updatedAt: string; status: string; nodeCount: number }> {
-  const db = getDatabase()
+export function listWorkflows(): Array<{
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  status: string;
+  nodeCount: number;
+}> {
+  const db = getDatabase();
   const result = db.exec(
     `SELECT w.id, w.name, w.created_at, w.updated_at, w.status,
             (SELECT COUNT(*) FROM nodes n WHERE n.workflow_id = w.id) as node_count
-     FROM workflows w ORDER BY w.updated_at DESC`
-  )
-  if (!result.length) return []
-  return result[0].values.map(row => ({
-    id: row[0] as string, name: row[1] as string, createdAt: row[2] as string,
-    updatedAt: row[3] as string, status: row[4] as string, nodeCount: row[5] as number
-  }))
+     FROM workflows w ORDER BY w.updated_at DESC`,
+  );
+  if (!result.length) return [];
+  return result[0].values.map((row) => ({
+    id: row[0] as string,
+    name: row[1] as string,
+    createdAt: row[2] as string,
+    updatedAt: row[3] as string,
+    status: row[4] as string,
+    nodeCount: row[5] as number,
+  }));
 }
 
-export function updateWorkflow(id: string, name: string, graphDefinition: GraphDefinition, status?: Workflow['status']): void {
-  const db = getDatabase()
-  const now = new Date().toISOString()
+export function updateWorkflow(
+  id: string,
+  name: string,
+  graphDefinition: GraphDefinition,
+  status?: Workflow["status"],
+): void {
+  const db = getDatabase();
+  const now = new Date().toISOString();
 
   // Get old name to detect rename
-  const existing = getWorkflowById(id)
-  const oldName = existing?.name ?? name
+  const existing = getWorkflowById(id);
+  const oldName = existing?.name ?? name;
 
   // Ensure unique name if it changed
-  const finalName = (name !== oldName) ? ensureUniqueName(db, name, id) : name
+  const finalName = name !== oldName ? ensureUniqueName(db, name, id) : name;
 
   if (status) {
-    db.run('UPDATE workflows SET name = ?, graph_definition = ?, updated_at = ?, status = ? WHERE id = ?',
-      [finalName, JSON.stringify(graphDefinition), now, status, id])
+    db.run(
+      "UPDATE workflows SET name = ?, graph_definition = ?, updated_at = ?, status = ? WHERE id = ?",
+      [finalName, JSON.stringify(graphDefinition), now, status, id],
+    );
   } else {
-    db.run('UPDATE workflows SET name = ?, graph_definition = ?, updated_at = ? WHERE id = ?',
-      [finalName, JSON.stringify(graphDefinition), now, id])
+    db.run(
+      "UPDATE workflows SET name = ?, graph_definition = ?, updated_at = ? WHERE id = ?",
+      [finalName, JSON.stringify(graphDefinition), now, id],
+    );
   }
   // Preserve existing currentOutputId for nodes that already have execution results
-  const existingOutputIds = new Map<string, string | null>()
-  const existingNodes = db.exec('SELECT id, current_output_id FROM nodes WHERE workflow_id = ?', [id])
+  const existingOutputIds = new Map<string, string | null>();
+  const existingNodes = db.exec(
+    "SELECT id, current_output_id FROM nodes WHERE workflow_id = ?",
+    [id],
+  );
   if (existingNodes.length > 0) {
     for (const row of existingNodes[0].values) {
-      existingOutputIds.set(row[0] as string, row[1] as string | null)
+      existingOutputIds.set(row[0] as string, row[1] as string | null);
     }
   }
 
   // Temporarily disable FK checks: DELETE FROM nodes cascades to node_executions,
   // which would destroy execution history. Instead, detach nodes first, then re-insert.
-  db.run('PRAGMA foreign_keys = OFF')
+  db.run("PRAGMA foreign_keys = OFF");
   try {
-    db.run('DELETE FROM nodes WHERE workflow_id = ?', [id])
-    db.run('DELETE FROM edges WHERE workflow_id = ?', [id])
+    db.run("DELETE FROM nodes WHERE workflow_id = ?", [id]);
+    db.run("DELETE FROM edges WHERE workflow_id = ?", [id]);
     for (const node of graphDefinition.nodes) {
       // Insert with NULL first (safe), then restore outputId
-      db.run(`INSERT INTO nodes (id, workflow_id, node_type, position_x, position_y, params, current_output_id) VALUES (?, ?, ?, ?, ?, ?, NULL)`,
-        [node.id, id, node.nodeType, node.position.x, node.position.y, JSON.stringify(node.params)])
+      db.run(
+        `INSERT INTO nodes (id, workflow_id, node_type, position_x, position_y, params, current_output_id) VALUES (?, ?, ?, ?, ?, ?, NULL)`,
+        [
+          node.id,
+          id,
+          node.nodeType,
+          node.position.x,
+          node.position.y,
+          JSON.stringify(node.params),
+        ],
+      );
     }
     for (const edge of graphDefinition.edges) {
-      db.run(`INSERT INTO edges (id, workflow_id, source_node_id, source_output_key, target_node_id, target_input_key) VALUES (?, ?, ?, ?, ?, ?)`,
-        [edge.id, id, edge.sourceNodeId, edge.sourceOutputKey, edge.targetNodeId, edge.targetInputKey])
+      db.run(
+        `INSERT INTO edges (id, workflow_id, source_node_id, source_output_key, target_node_id, target_input_key) VALUES (?, ?, ?, ?, ?, ?)`,
+        [
+          edge.id,
+          id,
+          edge.sourceNodeId,
+          edge.sourceOutputKey,
+          edge.targetNodeId,
+          edge.targetInputKey,
+        ],
+      );
     }
     // Restore currentOutputId where the execution record still exists
     for (const node of graphDefinition.nodes) {
-      const outputId = node.currentOutputId ?? existingOutputIds.get(node.id) ?? null
+      const outputId =
+        node.currentOutputId ?? existingOutputIds.get(node.id) ?? null;
       if (outputId) {
         // Only set if the execution record actually exists
-        const exists = db.exec('SELECT 1 FROM node_executions WHERE id = ?', [outputId])
+        const exists = db.exec("SELECT 1 FROM node_executions WHERE id = ?", [
+          outputId,
+        ]);
         if (exists.length > 0 && exists[0].values.length > 0) {
-          db.run('UPDATE nodes SET current_output_id = ? WHERE id = ?', [outputId, node.id])
+          db.run("UPDATE nodes SET current_output_id = ? WHERE id = ?", [
+            outputId,
+            node.id,
+          ]);
         }
       }
     }
   } finally {
-    db.run('PRAGMA foreign_keys = ON')
+    db.run("PRAGMA foreign_keys = ON");
   }
-  persistDatabase()
+  persistDatabase();
 
   // Rename directory on disk if name changed
   if (finalName !== oldName) {
-    getFileStorage().renameWorkflowDir(id, oldName, finalName)
+    getFileStorage().renameWorkflowDir(id, oldName, finalName);
   }
-  getFileStorage().saveWorkflowSnapshot(id, finalName, graphDefinition)
+  getFileStorage().saveWorkflowSnapshot(id, finalName, graphDefinition);
 }
 
 export function renameWorkflow(id: string, newName: string): void {
-  const db = getDatabase()
-  const now = new Date().toISOString()
+  const db = getDatabase();
+  const now = new Date().toISOString();
 
   // Get old name before rename (needed for directory rename)
-  const existing = getWorkflowById(id)
-  if (!existing) return
+  const existing = getWorkflowById(id);
+  if (!existing) return;
 
-  const oldName = existing.name
+  const oldName = existing.name;
 
   // Ensure unique name — append (2), (3), etc. if collides with another workflow
-  const finalName = ensureUniqueName(db, newName, id)
+  const finalName = ensureUniqueName(db, newName, id);
 
-  db.run('UPDATE workflows SET name = ?, updated_at = ? WHERE id = ?', [finalName, now, id])
-  persistDatabase()
+  db.run("UPDATE workflows SET name = ?, updated_at = ? WHERE id = ?", [
+    finalName,
+    now,
+    id,
+  ]);
+  persistDatabase();
 
   // Rename the data directory on disk (handles collision cleanup)
-  const fs = getFileStorage()
-  fs.renameWorkflowDir(id, oldName, finalName)
+  const fs = getFileStorage();
+  fs.renameWorkflowDir(id, oldName, finalName);
 
   // Update the snapshot file with the new name
-  fs.saveWorkflowSnapshot(id, finalName, existing.graphDefinition)
+  fs.saveWorkflowSnapshot(id, finalName, existing.graphDefinition);
 }
 
 export function deleteWorkflow(id: string): void {
-  const db = getDatabase()
-  db.run('DELETE FROM workflows WHERE id = ?', [id])
-  persistDatabase()
-  getFileStorage().deleteWorkflowFiles(id)
+  const db = getDatabase();
+  db.run("DELETE FROM workflows WHERE id = ?", [id]);
+  persistDatabase();
+  getFileStorage().deleteWorkflowFiles(id);
 }
 
 /**
@@ -180,37 +251,44 @@ export function deleteWorkflow(id: string): void {
  * Execution history (currentOutputId) is not copied.
  */
 export function duplicateWorkflow(sourceId: string): Workflow {
-  const wf = getWorkflowById(sourceId)
-  if (!wf) throw new Error(`Workflow ${sourceId} not found`)
+  const wf = getWorkflowById(sourceId);
+  if (!wf) throw new Error(`Workflow ${sourceId} not found`);
 
-  const db = getDatabase()
-  const copyName = ensureUniqueName(db, `${wf.name} (copy)`, null)
-  const newWf = createWorkflow(copyName)
+  const db = getDatabase();
+  const copyName = ensureUniqueName(db, `${wf.name} (copy)`, null);
+  const newWf = createWorkflow(copyName);
 
-  const nodeIdMap = new Map<string, string>()
+  const nodeIdMap = new Map<string, string>();
   for (const n of wf.graphDefinition.nodes) {
-    nodeIdMap.set(n.id, uuid())
+    nodeIdMap.set(n.id, uuid());
   }
 
-  const clonedNodes: GraphDefinition['nodes'] = wf.graphDefinition.nodes.map((n) => ({
-    ...n,
-    id: nodeIdMap.get(n.id)!,
-    workflowId: newWf.id,
-    currentOutputId: null
-  }))
-
-  const clonedEdges: GraphDefinition['edges'] = wf.graphDefinition.edges.map((e) => ({
-    ...e,
-    id: uuid(),
-    workflowId: newWf.id,
-    sourceNodeId: nodeIdMap.get(e.sourceNodeId)!,
-    targetNodeId: nodeIdMap.get(e.targetNodeId)!
-  }))
-
-  const clonedGraph: GraphDefinition = { nodes: clonedNodes, edges: clonedEdges }
-  updateWorkflow(newWf.id, newWf.name, clonedGraph)
-
-  const out = getWorkflowById(newWf.id)
-  if (!out) throw new Error('Failed to load duplicated workflow')
-  return out
+  const clonedNodes: GraphDefinition["nodes"] = wf.graphDefinition.nodes.map(
+    (n) => ({
+      ...n,
+      id: nodeIdMap.get(n.id)!,
+      workflowId: newWf.id,
+      currentOutputId: null,
+    }),
+  );
+
+  const clonedEdges: GraphDefinition["edges"] = wf.graphDefinition.edges.map(
+    (e) => ({
+      ...e,
+      id: uuid(),
+      workflowId: newWf.id,
+      sourceNodeId: nodeIdMap.get(e.sourceNodeId)!,
+      targetNodeId: nodeIdMap.get(e.targetNodeId)!,
+    }),
+  );
+
+  const clonedGraph: GraphDefinition = {
+    nodes: clonedNodes,
+    edges: clonedEdges,
+  };
+  updateWorkflow(newWf.id, newWf.name, clonedGraph);
+
+  const out = getWorkflowById(newWf.id);
+  if (!out) throw new Error("Failed to load duplicated workflow");
+  return out;
 }
diff --git a/electron/workflow/engine/cache.ts b/electron/workflow/engine/cache.ts
index fcbdfe8d..50c67972 100644
--- a/electron/workflow/engine/cache.ts
+++ b/electron/workflow/engine/cache.ts
@@ -1,11 +1,15 @@
 /**
  * Cache service — lookup execution results by hash.
  */
-import { findByCache } from '../db/execution.repo'
-import type { NodeExecutionRecord } from '../../../src/workflow/types/execution'
+import { findByCache } from "../db/execution.repo";
+import type { NodeExecutionRecord } from "../../../src/workflow/types/execution";
 
 export class CacheService {
-  lookup(nodeId: string, inputHash: string, paramsHash: string): NodeExecutionRecord | null {
-    return findByCache(nodeId, inputHash, paramsHash)
+  lookup(
+    nodeId: string,
+    inputHash: string,
+    paramsHash: string,
+  ): NodeExecutionRecord | null {
+    return findByCache(nodeId, inputHash, paramsHash);
   }
 }
diff --git a/electron/workflow/engine/circuit-breaker.ts b/electron/workflow/engine/circuit-breaker.ts
index 4fb474b4..474a4f03 100644
--- a/electron/workflow/engine/circuit-breaker.ts
+++ b/electron/workflow/engine/circuit-breaker.ts
@@ -2,19 +2,23 @@
  * Circuit breaker — halt execution after too many retries.
  */
 export class CircuitBreaker {
-  private retryCountMap = new Map<string, number>()
+  private retryCountMap = new Map<string, number>();
   constructor(private maxRetries: number = 3) {}
 
   recordRetry(nodeId: string): boolean {
-    const count = (this.retryCountMap.get(nodeId) ?? 0) + 1
-    this.retryCountMap.set(nodeId, count)
-    return count >= this.maxRetries
+    const count = (this.retryCountMap.get(nodeId) ?? 0) + 1;
+    this.retryCountMap.set(nodeId, count);
+    return count >= this.maxRetries;
   }
 
   isTripped(nodeId: string): boolean {
-    return (this.retryCountMap.get(nodeId) ?? 0) >= this.maxRetries
+    return (this.retryCountMap.get(nodeId) ?? 0) >= this.maxRetries;
   }
 
-  reset(nodeId: string): void { this.retryCountMap.delete(nodeId) }
-  getRetryCount(nodeId: string): number { return this.retryCountMap.get(nodeId) ?? 0 }
+  reset(nodeId: string): void {
+    this.retryCountMap.delete(nodeId);
+  }
+  getRetryCount(nodeId: string): number {
+    return this.retryCountMap.get(nodeId) ?? 0;
+  }
 }
diff --git a/electron/workflow/engine/cost.ts b/electron/workflow/engine/cost.ts
index 30fa6358..96b4d817 100644
--- a/electron/workflow/engine/cost.ts
+++ b/electron/workflow/engine/cost.ts
@@ -1,29 +1,49 @@
 /**
  * Cost control service — estimate costs and enforce budgets.
  */
-import { getBudgetConfig, setBudgetConfig, getDailySpend, addDailySpend } from '../db/budget.repo'
-import type { BudgetConfig, CostEstimate } from '../../../src/workflow/types/ipc'
+import {
+  getBudgetConfig,
+  setBudgetConfig,
+  getDailySpend,
+  addDailySpend,
+} from "../db/budget.repo";
+import type {
+  BudgetConfig,
+  CostEstimate,
+} from "../../../src/workflow/types/ipc";
 
 export class CostService {
-  estimate(nodeIds: string[], nodeTypes: Map<string, string>, costByNodeId: Map<string, number>): CostEstimate {
-    const breakdown = nodeIds.map(nodeId => {
-      const nodeType = nodeTypes.get(nodeId) ?? 'unknown'
-      const estimated = costByNodeId.get(nodeId) ?? 0
-      return { nodeId, nodeType, estimated }
-    })
-    const totalEstimated = breakdown.reduce((sum, b) => sum + b.estimated, 0)
-    const budget = this.getBudget()
-    const withinPerExecution = totalEstimated <= budget.perExecutionLimit
-    const dailySpend = getDailySpend()
-    const withinDaily = (dailySpend + totalEstimated) <= budget.dailyLimit
-    const withinBudget = withinPerExecution && withinDaily
+  estimate(
+    nodeIds: string[],
+    nodeTypes: Map<string, string>,
+    costByNodeId: Map<string, number>,
+  ): CostEstimate {
+    const breakdown = nodeIds.map((nodeId) => {
+      const nodeType = nodeTypes.get(nodeId) ?? "unknown";
+      const estimated = costByNodeId.get(nodeId) ?? 0;
+      return { nodeId, nodeType, estimated };
+    });
+    const totalEstimated = breakdown.reduce((sum, b) => sum + b.estimated, 0);
+    const budget = this.getBudget();
+    const withinPerExecution = totalEstimated <= budget.perExecutionLimit;
+    const dailySpend = getDailySpend();
+    const withinDaily = dailySpend + totalEstimated <= budget.dailyLimit;
+    const withinBudget = withinPerExecution && withinDaily;
     const reason = !withinPerExecution
       ? `Exceeds per-execution limit (${totalEstimated} > ${budget.perExecutionLimit})`
-      : !withinDaily ? `Exceeds daily limit (${dailySpend + totalEstimated} > ${budget.dailyLimit})` : undefined
-    return { totalEstimated, breakdown, withinBudget, reason }
+      : !withinDaily
+        ? `Exceeds daily limit (${dailySpend + totalEstimated} > ${budget.dailyLimit})`
+        : undefined;
+    return { totalEstimated, breakdown, withinBudget, reason };
   }
 
-  recordSpend(cost: number): void { addDailySpend(cost) }
-  getBudget(): BudgetConfig { return getBudgetConfig() }
-  setBudget(config: BudgetConfig): void { setBudgetConfig(config) }
+  recordSpend(cost: number): void {
+    addDailySpend(cost);
+  }
+  getBudget(): BudgetConfig {
+    return getBudgetConfig();
+  }
+  setBudget(config: BudgetConfig): void {
+    setBudgetConfig(config);
+  }
 }
diff --git a/electron/workflow/engine/dag-utils.ts b/electron/workflow/engine/dag-utils.ts
index 0bbf0870..52957af1 100644
--- a/electron/workflow/engine/dag-utils.ts
+++ b/electron/workflow/engine/dag-utils.ts
@@ -1,29 +1,40 @@
 /**
  * DAG validation — cycle detection using DFS.
  */
-interface SimpleEdge { sourceNodeId: string; targetNodeId: string }
+interface SimpleEdge {
+  sourceNodeId: string;
+  targetNodeId: string;
+}
 
 export function hasCycle(nodeIds: string[], edges: SimpleEdge[]): boolean {
-  const adj = new Map<string, string[]>()
-  for (const id of nodeIds) adj.set(id, [])
-  for (const e of edges) adj.get(e.sourceNodeId)?.push(e.targetNodeId)
-  const WHITE = 0, GRAY = 1, BLACK = 2
-  const color = new Map<string, number>()
-  for (const id of nodeIds) color.set(id, WHITE)
+  const adj = new Map<string, string[]>();
+  for (const id of nodeIds) adj.set(id, []);
+  for (const e of edges) adj.get(e.sourceNodeId)?.push(e.targetNodeId);
+  const WHITE = 0,
+    GRAY = 1,
+    BLACK = 2;
+  const color = new Map<string, number>();
+  for (const id of nodeIds) color.set(id, WHITE);
   function dfs(node: string): boolean {
-    color.set(node, GRAY)
+    color.set(node, GRAY);
     for (const neighbor of adj.get(node) ?? []) {
-      const c = color.get(neighbor)
-      if (c === GRAY) return true
-      if (c === WHITE && dfs(neighbor)) return true
+      const c = color.get(neighbor);
+      if (c === GRAY) return true;
+      if (c === WHITE && dfs(neighbor)) return true;
     }
-    color.set(node, BLACK)
-    return false
+    color.set(node, BLACK);
+    return false;
+  }
+  for (const id of nodeIds) {
+    if (color.get(id) === WHITE && dfs(id)) return true;
   }
-  for (const id of nodeIds) { if (color.get(id) === WHITE && dfs(id)) return true }
-  return false
+  return false;
 }
 
-export function wouldCreateCycle(nodeIds: string[], edges: SimpleEdge[], newEdge: SimpleEdge): boolean {
-  return hasCycle(nodeIds, [...edges, newEdge])
+export function wouldCreateCycle(
+  nodeIds: string[],
+  edges: SimpleEdge[],
+  newEdge: SimpleEdge,
+): boolean {
+  return hasCycle(nodeIds, [...edges, newEdge]);
 }
diff --git a/electron/workflow/engine/executor.ts b/electron/workflow/engine/executor.ts
index 09a12971..2c917cea 100644
--- a/electron/workflow/engine/executor.ts
+++ b/electron/workflow/engine/executor.ts
@@ -1,187 +1,239 @@
 /**
  * Execution engine orchestrator — coordinates node execution across the workflow.
  */
-import { v4 as uuid } from 'uuid'
-import { topologicalLevels, downstreamNodes } from './scheduler'
-import { CacheService } from './cache'
-import { CostService } from './cost'
-import { CircuitBreaker } from './circuit-breaker'
-import { NodeRegistry } from '../nodes/registry'
-import { computeInputHash, computeParamsHash } from '../utils/hash'
-import { insertExecution, getExecutionById } from '../db/execution.repo'
-import { getNodesByWorkflowId, updateNodeCurrentOutputId } from '../db/node.repo'
-import { getEdgesByWorkflowId } from '../db/edge.repo'
-import { getDatabase, persistDatabase } from '../db/connection'
-import { getFileStorageInstance } from '../utils/file-storage'
-import { saveWorkflowResultToAssets } from '../utils/save-to-assets'
-import { getWorkflowById } from '../db/workflow.repo'
-import type { NodeExecutionContext, NodeExecutionResult } from '../nodes/base'
-import type { NodeStatus } from '../../../src/workflow/types/execution'
-import type { WorkflowNode, WorkflowEdge } from '../../../src/workflow/types/workflow'
-import { MAX_PARALLEL_EXECUTIONS } from '../../../src/workflow/constants'
-
-function getFileStorage() { return getFileStorageInstance() }
+import { v4 as uuid } from "uuid";
+import { topologicalLevels, downstreamNodes } from "./scheduler";
+import { CacheService } from "./cache";
+import { CostService } from "./cost";
+import { CircuitBreaker } from "./circuit-breaker";
+import { NodeRegistry } from "../nodes/registry";
+import { computeInputHash, computeParamsHash } from "../utils/hash";
+import { insertExecution, getExecutionById } from "../db/execution.repo";
+import {
+  getNodesByWorkflowId,
+  updateNodeCurrentOutputId,
+} from "../db/node.repo";
+import { getEdgesByWorkflowId } from "../db/edge.repo";
+import { getDatabase, persistDatabase } from "../db/connection";
+import { getFileStorageInstance } from "../utils/file-storage";
+import { saveWorkflowResultToAssets } from "../utils/save-to-assets";
+import { getWorkflowById } from "../db/workflow.repo";
+import type { NodeExecutionContext, NodeExecutionResult } from "../nodes/base";
+import type { NodeStatus } from "../../../src/workflow/types/execution";
+import type {
+  WorkflowNode,
+  WorkflowEdge,
+} from "../../../src/workflow/types/workflow";
+import { MAX_PARALLEL_EXECUTIONS } from "../../../src/workflow/constants";
+
+function getFileStorage() {
+  return getFileStorageInstance();
+}
 
 export interface ExecutionCallbacks {
-  onNodeStatus: (workflowId: string, nodeId: string, status: NodeStatus, errorMessage?: string) => void
-  onProgress: (workflowId: string, nodeId: string, progress: number, message?: string) => void
-  onEdgeStatus?: (workflowId: string, edgeId: string, status: 'no-data' | 'has-data') => void
+  onNodeStatus: (
+    workflowId: string,
+    nodeId: string,
+    status: NodeStatus,
+    errorMessage?: string,
+  ) => void;
+  onProgress: (
+    workflowId: string,
+    nodeId: string,
+    progress: number,
+    message?: string,
+  ) => void;
+  onEdgeStatus?: (
+    workflowId: string,
+    edgeId: string,
+    status: "no-data" | "has-data",
+  ) => void;
 }
 
 export class ExecutionEngine {
-  private abortControllers = new Map<string, AbortController>()
+  private abortControllers = new Map<string, AbortController>();
 
   constructor(
     private registry: NodeRegistry,
     private cache: CacheService,
     private costService: CostService,
     private circuitBreaker: CircuitBreaker,
-    private callbacks: ExecutionCallbacks
+    private callbacks: ExecutionCallbacks,
   ) {}
 
   /** Run all nodes in topological order. */
   async runAll(workflowId: string): Promise<void> {
-    const nodes = getNodesByWorkflowId(workflowId)
-    const edges = getEdgesByWorkflowId(workflowId)
-    const nodeIds = nodes.map(n => n.id)
-    const simpleEdges = edges.map(e => ({ sourceNodeId: e.sourceNodeId, targetNodeId: e.targetNodeId }))
+    const nodes = getNodesByWorkflowId(workflowId);
+    const edges = getEdgesByWorkflowId(workflowId);
+    const nodeIds = nodes.map((n) => n.id);
+    const simpleEdges = edges.map((e) => ({
+      sourceNodeId: e.sourceNodeId,
+      targetNodeId: e.targetNodeId,
+    }));
 
     // Cost estimate (for UI only) is done via cost:estimate IPC; we don't block runs on budget since actual API cost varies by inputs.
-    const levels = topologicalLevels(nodeIds, simpleEdges)
-    const nodeMap = new Map(nodes.map(n => [n.id, n]))
-    const failedNodes = new Set<string>()
+    const levels = topologicalLevels(nodeIds, simpleEdges);
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const failedNodes = new Set<string>();
 
     // Build upstream dependency map for quick lookup
-    const upstreamMap = new Map<string, string[]>()
+    const upstreamMap = new Map<string, string[]>();
     for (const e of simpleEdges) {
-      const deps = upstreamMap.get(e.targetNodeId) ?? []
-      deps.push(e.sourceNodeId)
-      upstreamMap.set(e.targetNodeId, deps)
+      const deps = upstreamMap.get(e.targetNodeId) ?? [];
+      deps.push(e.sourceNodeId);
+      upstreamMap.set(e.targetNodeId, deps);
     }
 
     for (const level of levels) {
       // Stop the entire workflow if any node has failed
-      if (failedNodes.size > 0) break
-      const batch = level.slice(0, MAX_PARALLEL_EXECUTIONS)
-      await Promise.all(batch.map(async nodeId => {
-        // If another node in this batch failed, skip remaining
-        if (failedNodes.size > 0) return
-        // Skip if any upstream node failed
-        const upstreams = upstreamMap.get(nodeId) ?? []
-        if (upstreams.some(uid => failedNodes.has(uid))) {
-          failedNodes.add(nodeId)
-          this.callbacks.onNodeStatus(workflowId, nodeId, 'error', 'Skipped: upstream node failed')
-          return
-        }
-        const success = await this.executeNode(workflowId, nodeId, nodeMap, edges, true)
-        if (!success) failedNodes.add(nodeId)
-      }))
+      if (failedNodes.size > 0) break;
+      const batch = level.slice(0, MAX_PARALLEL_EXECUTIONS);
+      await Promise.all(
+        batch.map(async (nodeId) => {
+          // If another node in this batch failed, skip remaining
+          if (failedNodes.size > 0) return;
+          // Skip if any upstream node failed
+          const upstreams = upstreamMap.get(nodeId) ?? [];
+          if (upstreams.some((uid) => failedNodes.has(uid))) {
+            failedNodes.add(nodeId);
+            this.callbacks.onNodeStatus(
+              workflowId,
+              nodeId,
+              "error",
+              "Skipped: upstream node failed",
+            );
+            return;
+          }
+          const success = await this.executeNode(
+            workflowId,
+            nodeId,
+            nodeMap,
+            edges,
+            true,
+          );
+          if (!success) failedNodes.add(nodeId);
+        }),
+      );
     }
   }
 
   /** Run a single node, resolving upstream inputs. Always skips cache (user explicitly re-runs). */
   async runNode(workflowId: string, nodeId: string): Promise<void> {
-    const nodes = getNodesByWorkflowId(workflowId)
-    const edges = getEdgesByWorkflowId(workflowId)
+    const nodes = getNodesByWorkflowId(workflowId);
+    const edges = getEdgesByWorkflowId(workflowId);
 
     if (nodes.length === 0) {
-      throw new Error(`No nodes found in workflow ${workflowId}. Please ensure the workflow is saved before running nodes.`)
+      throw new Error(
+        `No nodes found in workflow ${workflowId}. Please ensure the workflow is saved before running nodes.`,
+      );
     }
 
-    const nodeMap = new Map(nodes.map(n => [n.id, n]))
-    const node = nodeMap.get(nodeId)
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const node = nodeMap.get(nodeId);
 
     if (!node) {
-      const availableIds = nodes.map(n => `${n.id} (${n.nodeType})`).join(', ')
-      throw new Error(`Node ${nodeId} not found in workflow ${workflowId}. Available nodes: ${availableIds}`)
+      const availableIds = nodes
+        .map((n) => `${n.id} (${n.nodeType})`)
+        .join(", ");
+      throw new Error(
+        `Node ${nodeId} not found in workflow ${workflowId}. Available nodes: ${availableIds}`,
+      );
     }
 
     // skipCache=true: user clicked Run, they want a fresh execution
-    await this.executeNode(workflowId, nodeId, nodeMap, edges, true)
+    await this.executeNode(workflowId, nodeId, nodeMap, edges, true);
   }
 
   /** Continue from a node — execute it and all downstream nodes. */
   async continueFrom(workflowId: string, nodeId: string): Promise<void> {
-    const nodes = getNodesByWorkflowId(workflowId)
-    const edges = getEdgesByWorkflowId(workflowId)
-    const nodeIds = nodes.map(n => n.id)
-    const simpleEdges = edges.map(e => ({ sourceNodeId: e.sourceNodeId, targetNodeId: e.targetNodeId }))
-    const downstream = downstreamNodes(nodeId, nodeIds, simpleEdges)
-    const nodeMap = new Map(nodes.map(n => [n.id, n]))
-
-    const levels = topologicalLevels(nodeIds, simpleEdges)
-    let stopped = false
+    const nodes = getNodesByWorkflowId(workflowId);
+    const edges = getEdgesByWorkflowId(workflowId);
+    const nodeIds = nodes.map((n) => n.id);
+    const simpleEdges = edges.map((e) => ({
+      sourceNodeId: e.sourceNodeId,
+      targetNodeId: e.targetNodeId,
+    }));
+    const downstream = downstreamNodes(nodeId, nodeIds, simpleEdges);
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+
+    const levels = topologicalLevels(nodeIds, simpleEdges);
+    let stopped = false;
     for (const level of levels) {
-      if (stopped) break
-      const toRun = level.filter(id => downstream.includes(id))
-      if (toRun.length === 0) continue
-      const results = await Promise.all(toRun.map(id => this.executeNode(workflowId, id, nodeMap, edges)))
-      if (results.some(ok => !ok)) stopped = true
+      if (stopped) break;
+      const toRun = level.filter((id) => downstream.includes(id));
+      if (toRun.length === 0) continue;
+      const results = await Promise.all(
+        toRun.map((id) => this.executeNode(workflowId, id, nodeMap, edges)),
+      );
+      if (results.some((ok) => !ok)) stopped = true;
     }
   }
 
   /** Retry a node with a perturbed seed. */
   async retryNode(workflowId: string, nodeId: string): Promise<void> {
     if (this.circuitBreaker.isTripped(nodeId)) {
-      throw new Error(`Circuit breaker tripped for node ${nodeId}`)
+      throw new Error(`Circuit breaker tripped for node ${nodeId}`);
     }
 
-    const nodes = getNodesByWorkflowId(workflowId)
-    const edges = getEdgesByWorkflowId(workflowId)
-    const nodeMap = new Map(nodes.map(n => [n.id, n]))
-    const node = nodeMap.get(nodeId)
-    if (!node) throw new Error(`Node ${nodeId} not found`)
+    const nodes = getNodesByWorkflowId(workflowId);
+    const edges = getEdgesByWorkflowId(workflowId);
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+    const node = nodeMap.get(nodeId);
+    if (!node) throw new Error(`Node ${nodeId} not found`);
 
-    const perturbedParams = this.perturbSeed(node.params)
-    const originalParams = { ...node.params }
-    node.params = perturbedParams
+    const perturbedParams = this.perturbSeed(node.params);
+    const originalParams = { ...node.params };
+    node.params = perturbedParams;
 
     try {
-      await this.executeNode(workflowId, nodeId, nodeMap, edges, true)
+      await this.executeNode(workflowId, nodeId, nodeMap, edges, true);
     } finally {
-      node.params = originalParams
+      node.params = originalParams;
     }
 
-    const tripped = this.circuitBreaker.recordRetry(nodeId)
+    const tripped = this.circuitBreaker.recordRetry(nodeId);
     if (tripped) {
-      this.callbacks.onNodeStatus(workflowId, nodeId, 'idle')
+      this.callbacks.onNodeStatus(workflowId, nodeId, "idle");
     }
   }
 
   /** Cancel a running node execution. */
   cancel(workflowId: string, nodeId: string): void {
-    const key = `${workflowId}:${nodeId}`
-    const controller = this.abortControllers.get(key)
+    const key = `${workflowId}:${nodeId}`;
+    const controller = this.abortControllers.get(key);
     if (controller) {
-      controller.abort()
-      this.abortControllers.delete(key)
-      this.callbacks.onNodeStatus(workflowId, nodeId, 'idle')
+      controller.abort();
+      this.abortControllers.delete(key);
+      this.callbacks.onNodeStatus(workflowId, nodeId, "idle");
     }
   }
 
   /** Mark all downstream nodes as needing re-execution. */
   markDownstreamStale(workflowId: string, nodeId: string): string[] {
-    const nodes = getNodesByWorkflowId(workflowId)
-    const edges = getEdgesByWorkflowId(workflowId)
-    const nodeIds = nodes.map(n => n.id)
-    const simpleEdges = edges.map(e => ({ sourceNodeId: e.sourceNodeId, targetNodeId: e.targetNodeId }))
-    const downstream = downstreamNodes(nodeId, nodeIds, simpleEdges)
-    const staleNodes = downstream.filter(id => id !== nodeId)
+    const nodes = getNodesByWorkflowId(workflowId);
+    const edges = getEdgesByWorkflowId(workflowId);
+    const nodeIds = nodes.map((n) => n.id);
+    const simpleEdges = edges.map((e) => ({
+      sourceNodeId: e.sourceNodeId,
+      targetNodeId: e.targetNodeId,
+    }));
+    const downstream = downstreamNodes(nodeId, nodeIds, simpleEdges);
+    const staleNodes = downstream.filter((id) => id !== nodeId);
     for (const id of staleNodes) {
-      this.callbacks.onNodeStatus(workflowId, id, 'idle')
+      this.callbacks.onNodeStatus(workflowId, id, "idle");
     }
-    return staleNodes
+    return staleNodes;
   }
 
   /** Perturb seed parameter for retry diversity. */
   perturbSeed(params: Record<string, unknown>): Record<string, unknown> {
-    const newParams = { ...params }
-    if (typeof newParams.seed === 'number') {
-      newParams.seed = newParams.seed + Math.floor(Math.random() * 1000) + 1
+    const newParams = { ...params };
+    if (typeof newParams.seed === "number") {
+      newParams.seed = newParams.seed + Math.floor(Math.random() * 1000) + 1;
     } else {
-      newParams.seed = Math.floor(Math.random() * 2147483647)
+      newParams.seed = Math.floor(Math.random() * 2147483647);
     }
-    return newParams
+    return newParams;
   }
 
   /** Core execution logic for a single node. Returns true on success. */
@@ -190,59 +242,62 @@ export class ExecutionEngine {
     nodeId: string,
     nodeMap: Map<string, WorkflowNode>,
     edges: WorkflowEdge[],
-    skipCache = false
+    skipCache = false,
   ): Promise<boolean> {
-    const node = nodeMap.get(nodeId)
-    if (!node) return false
+    const node = nodeMap.get(nodeId);
+    if (!node) return false;
 
-    const handler = this.registry.getHandler(node.nodeType)
+    const handler = this.registry.getHandler(node.nodeType);
     if (!handler) {
-      throw new Error(`No handler for node type: ${node.nodeType}`)
+      throw new Error(`No handler for node type: ${node.nodeType}`);
     }
 
-    const inputs = this.resolveInputs(nodeId, nodeMap, edges)
-    console.log(`[Executor] Node ${nodeId} (${node.nodeType}) resolved inputs:`, JSON.stringify(inputs).slice(0, 200))
-    const inputHash = computeInputHash(inputs)
-    const paramsHash = computeParamsHash(node.params)
+    const inputs = this.resolveInputs(nodeId, nodeMap, edges);
+    console.log(
+      `[Executor] Node ${nodeId} (${node.nodeType}) resolved inputs:`,
+      JSON.stringify(inputs).slice(0, 200),
+    );
+    const inputHash = computeInputHash(inputs);
+    const paramsHash = computeParamsHash(node.params);
 
     if (!skipCache) {
-      const cached = this.cache.lookup(nodeId, inputHash, paramsHash)
+      const cached = this.cache.lookup(nodeId, inputHash, paramsHash);
       if (cached) {
         // Brief visual feedback before confirming cache hit
-        this.callbacks.onNodeStatus(workflowId, nodeId, 'running')
-        await new Promise(r => setTimeout(r, 300))
-        updateNodeCurrentOutputId(nodeId, cached.id)
-        node.currentOutputId = cached.id
-        this.callbacks.onNodeStatus(workflowId, nodeId, 'confirmed')
-        return true
+        this.callbacks.onNodeStatus(workflowId, nodeId, "running");
+        await new Promise((r) => setTimeout(r, 300));
+        updateNodeCurrentOutputId(nodeId, cached.id);
+        node.currentOutputId = cached.id;
+        this.callbacks.onNodeStatus(workflowId, nodeId, "confirmed");
+        return true;
       }
     }
 
-    const abortKey = `${workflowId}:${nodeId}`
-    const abortController = new AbortController()
-    this.abortControllers.set(abortKey, abortController)
+    const abortKey = `${workflowId}:${nodeId}`;
+    const abortController = new AbortController();
+    this.abortControllers.set(abortKey, abortController);
 
-    this.callbacks.onNodeStatus(workflowId, nodeId, 'running')
+    this.callbacks.onNodeStatus(workflowId, nodeId, "running");
 
-    const executionId = uuid()
+    const executionId = uuid();
     insertExecution({
       id: executionId,
       nodeId,
       workflowId,
       inputHash,
       paramsHash,
-      status: 'pending',
+      status: "pending",
       resultPath: null,
       resultMetadata: null,
       durationMs: null,
       cost: 0,
       score: null,
-      starred: false
-    })
+      starred: false,
+    });
 
-    const startTime = Date.now()
-    let result: NodeExecutionResult
-    let cancelledByUser = false
+    const startTime = Date.now();
+    let result: NodeExecutionResult;
+    let cancelledByUser = false;
 
     try {
       const context: NodeExecutionContext = {
@@ -253,91 +308,114 @@ export class ExecutionEngine {
         workflowId,
         abortSignal: abortController.signal,
         onProgress: (progress, message) => {
-          this.callbacks.onProgress(workflowId, nodeId, progress, message)
-        }
-      }
+          this.callbacks.onProgress(workflowId, nodeId, progress, message);
+        },
+      };
 
-      result = await handler.execute(context)
+      result = await handler.execute(context);
     } catch (error) {
       const isAbort = (err: unknown) =>
-        err instanceof DOMException && err.name === 'AbortError' ||
-        (err instanceof Error && err.message?.toLowerCase().includes('abort'))
-      cancelledByUser = isAbort(error)
+        (err instanceof DOMException && err.name === "AbortError") ||
+        (err instanceof Error && err.message?.toLowerCase().includes("abort"));
+      cancelledByUser = isAbort(error);
       result = {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - startTime,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     } finally {
-      this.abortControllers.delete(abortKey)
+      this.abortControllers.delete(abortKey);
     }
 
-    const durationMs = result.durationMs || (Date.now() - startTime)
+    const durationMs = result.durationMs || Date.now() - startTime;
     const resultMetadata =
       result.resultMetadata ??
-      (result.status === 'error' && result.error ? { error: result.error } : null)
-    const dbConn = getDatabase()
+      (result.status === "error" && result.error
+        ? { error: result.error }
+        : null);
+    const dbConn = getDatabase();
     dbConn.run(
       `UPDATE node_executions SET status = ?, result_path = ?, result_metadata = ?, duration_ms = ?, cost = ? WHERE id = ?`,
-      [result.status, result.resultPath ?? null, resultMetadata ? JSON.stringify(resultMetadata) : null,
-       durationMs, result.cost, executionId]
-    )
-    persistDatabase()
+      [
+        result.status,
+        result.resultPath ?? null,
+        resultMetadata ? JSON.stringify(resultMetadata) : null,
+        durationMs,
+        result.cost,
+        executionId,
+      ],
+    );
+    persistDatabase();
 
     try {
-      const storage = getFileStorage()
-      storage.saveExecutionInput(workflowId, nodeId, executionId, inputs)
-      storage.saveExecutionParams(workflowId, nodeId, executionId, node.params)
+      const storage = getFileStorage();
+      storage.saveExecutionInput(workflowId, nodeId, executionId, inputs);
+      storage.saveExecutionParams(workflowId, nodeId, executionId, node.params);
       storage.saveExecutionMetadata(workflowId, nodeId, executionId, {
         status: result.status,
         durationMs,
         cost: result.cost,
         createdAt: new Date().toISOString(),
-        resultMetadata: resultMetadata ?? result.resultMetadata ?? {}
-      })
+        resultMetadata: resultMetadata ?? result.resultMetadata ?? {},
+      });
     } catch (error) {
-      console.error('[Executor] Failed to save execution snapshot:', error)
+      console.error("[Executor] Failed to save execution snapshot:", error);
     }
 
     if (result.cost > 0) {
-      this.costService.recordSpend(result.cost)
+      this.costService.recordSpend(result.cost);
     }
 
-    if (result.status === 'success') {
-      updateNodeCurrentOutputId(nodeId, executionId)
+    if (result.status === "success") {
+      updateNodeCurrentOutputId(nodeId, executionId);
       // CRITICAL: Also update the in-memory nodeMap so downstream nodes can resolve this output
-      node.currentOutputId = executionId
+      node.currentOutputId = executionId;
 
       // Auto-download result media files to media_output/ directory
       try {
-        const storage = getFileStorage()
-        const modelId = String(node.params?.modelId ?? '')
-        const resultUrls = result.resultMetadata?.resultUrls as string[] | undefined
-        const urls = resultUrls ?? (result.resultPath ? [result.resultPath] : [])
+        const storage = getFileStorage();
+        const modelId = String(node.params?.modelId ?? "");
+        const resultUrls = result.resultMetadata?.resultUrls as
+          | string[]
+          | undefined;
+        const urls =
+          resultUrls ?? (result.resultPath ? [result.resultPath] : []);
         for (const url of urls) {
-          if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
-            const localPath = await storage.downloadResult(workflowId, url, modelId)
-            console.log(`[Executor] Downloaded result to: ${localPath}`)
+          if (
+            url &&
+            (url.startsWith("http://") || url.startsWith("https://"))
+          ) {
+            const localPath = await storage.downloadResult(
+              workflowId,
+              url,
+              modelId,
+            );
+            console.log(`[Executor] Downloaded result to: ${localPath}`);
           }
         }
       } catch (dlErr) {
-        console.error('[Executor] Failed to download result:', dlErr)
+        console.error("[Executor] Failed to download result:", dlErr);
       }
 
       // Save to My Assets (only for nodes that produce meaningful media output)
-      const SAVEABLE_NODE_TYPES = ['ai-task/run']
-      const isSaveableNode = SAVEABLE_NODE_TYPES.includes(node.nodeType) || node.nodeType.startsWith('free-tool/')
+      const SAVEABLE_NODE_TYPES = ["ai-task/run"];
+      const isSaveableNode =
+        SAVEABLE_NODE_TYPES.includes(node.nodeType) ||
+        node.nodeType.startsWith("free-tool/");
       if (isSaveableNode) {
         try {
-          const workflow = getWorkflowById(workflowId)
-          const wfName = workflow?.name ?? 'Workflow'
-          const modelId = String(node.params?.modelId ?? node.nodeType)
-          const resultUrls = result.resultMetadata?.resultUrls as string[] | undefined
-          const urls = resultUrls ?? (result.resultPath ? [result.resultPath] : [])
+          const workflow = getWorkflowById(workflowId);
+          const wfName = workflow?.name ?? "Workflow";
+          const modelId = String(node.params?.modelId ?? node.nodeType);
+          const resultUrls = result.resultMetadata?.resultUrls as
+            | string[]
+            | undefined;
+          const urls =
+            resultUrls ?? (result.resultPath ? [result.resultPath] : []);
           for (let i = 0; i < urls.length; i++) {
-            const url = urls[i]
+            const url = urls[i];
             if (url) {
               await saveWorkflowResultToAssets({
                 url,
@@ -346,36 +424,36 @@ export class ExecutionEngine {
                 workflowName: wfName,
                 nodeId,
                 executionId,
-                resultIndex: i
-              })
+                resultIndex: i,
+              });
             }
           }
         } catch (assetErr) {
-          console.error('[Executor] Failed to save to My Assets:', assetErr)
+          console.error("[Executor] Failed to save to My Assets:", assetErr);
         }
       }
 
       // Always set to confirmed after successful execution
-      this.callbacks.onNodeStatus(workflowId, nodeId, 'confirmed')
+      this.callbacks.onNodeStatus(workflowId, nodeId, "confirmed");
 
-      const outgoingEdges = edges.filter(e => e.sourceNodeId === nodeId)
+      const outgoingEdges = edges.filter((e) => e.sourceNodeId === nodeId);
       for (const edge of outgoingEdges) {
-        this.callbacks.onEdgeStatus?.(workflowId, edge.id, 'has-data')
+        this.callbacks.onEdgeStatus?.(workflowId, edge.id, "has-data");
       }
-      return true
+      return true;
     } else {
-      const errorMsg = result.error || 'Unknown error'
+      const errorMsg = result.error || "Unknown error";
       if (!cancelledByUser) {
-        console.error('[Executor] Node execution failed:', errorMsg)
-        this.callbacks.onNodeStatus(workflowId, nodeId, 'error', errorMsg)
+        console.error("[Executor] Node execution failed:", errorMsg);
+        this.callbacks.onNodeStatus(workflowId, nodeId, "error", errorMsg);
       }
       // cancelledByUser: cancel() already set node to idle; don't overwrite with error
 
-      const outgoingEdges = edges.filter(e => e.sourceNodeId === nodeId)
+      const outgoingEdges = edges.filter((e) => e.sourceNodeId === nodeId);
       for (const edge of outgoingEdges) {
-        this.callbacks.onEdgeStatus?.(workflowId, edge.id, 'no-data')
+        this.callbacks.onEdgeStatus?.(workflowId, edge.id, "no-data");
       }
-      return false
+      return false;
     }
   }
 
@@ -396,57 +474,62 @@ export class ExecutionEngine {
   private resolveInputs(
     nodeId: string,
     nodeMap: Map<string, WorkflowNode>,
-    edges: WorkflowEdge[]
+    edges: WorkflowEdge[],
   ): Record<string, unknown> {
-    const inputs: Record<string, unknown> = {}
-    const incomingEdges = edges.filter(e => e.targetNodeId === nodeId)
+    const inputs: Record<string, unknown> = {};
+    const incomingEdges = edges.filter((e) => e.targetNodeId === nodeId);
 
     for (const edge of incomingEdges) {
-      const sourceNode = nodeMap.get(edge.sourceNodeId)
-      if (!sourceNode || !sourceNode.currentOutputId) continue
+      const sourceNode = nodeMap.get(edge.sourceNodeId);
+      if (!sourceNode || !sourceNode.currentOutputId) continue;
 
-      const execution = getExecutionById(sourceNode.currentOutputId)
-      if (!execution) continue
+      const execution = getExecutionById(sourceNode.currentOutputId);
+      if (!execution) continue;
 
       // Get output value: try resultMetadata by handle key, then fallback to resultPath
-      let outputValue: unknown
+      let outputValue: unknown;
       if (execution.resultMetadata) {
-        const meta = typeof execution.resultMetadata === 'string'
-          ? JSON.parse(execution.resultMetadata)
-          : execution.resultMetadata
-        outputValue = meta[edge.sourceOutputKey]
+        const meta =
+          typeof execution.resultMetadata === "string"
+            ? JSON.parse(execution.resultMetadata)
+            : execution.resultMetadata;
+        outputValue = meta[edge.sourceOutputKey];
         // Fallback: if not found by handle key, try 'resultUrl' (common pattern)
-        if (outputValue === undefined) outputValue = meta.resultUrl
+        if (outputValue === undefined) outputValue = meta.resultUrl;
       }
-      if (outputValue === undefined) outputValue = execution.resultPath
-      if (outputValue === undefined) continue
+      if (outputValue === undefined) outputValue = execution.resultPath;
+      if (outputValue === undefined) continue;
 
       // Parse target handle ID to get the actual param name and optional array index
-      const targetKey = edge.targetInputKey
-      const arrayMatch = targetKey.match(/^(.+)\[(\d+)\]$/)
+      const targetKey = edge.targetInputKey;
+      const arrayMatch = targetKey.match(/^(.+)\[(\d+)\]$/);
 
       if (arrayMatch) {
         // Array handle: "images[0]" → set inputs.images[0] = value
         // Store as a map so we can merge with node params later without sparse nulls
-        const paramName = arrayMatch[1]
-        const index = parseInt(arrayMatch[2])
-        const mapKey = `__arrayInput_${paramName}`
-        if (!inputs[mapKey]) inputs[mapKey] = {} as Record<number, string>
-        ;(inputs[mapKey] as Record<number, string>)[index] = String(outputValue)
-      } else if (targetKey.startsWith('param-')) {
+        const paramName = arrayMatch[1];
+        const index = parseInt(arrayMatch[2]);
+        const mapKey = `__arrayInput_${paramName}`;
+        if (!inputs[mapKey]) inputs[mapKey] = {} as Record<number, string>;
+        (inputs[mapKey] as Record<number, string>)[index] = String(outputValue);
+      } else if (targetKey.startsWith("param-")) {
         // Single param handle: "param-image" → set inputs.image = value
-        const paramName = targetKey.slice(6) // remove "param-"
-        inputs[paramName] = Array.isArray(outputValue) ? outputValue : String(outputValue)
-      } else if (targetKey.startsWith('input-')) {
+        const paramName = targetKey.slice(6); // remove "param-"
+        inputs[paramName] = Array.isArray(outputValue)
+          ? outputValue
+          : String(outputValue);
+      } else if (targetKey.startsWith("input-")) {
         // Input port handle: "input-media" → set inputs.media = value (pass arrays through for e.g. Select node)
-        const inputName = targetKey.slice(6) // remove "input-"
-        inputs[inputName] = Array.isArray(outputValue) ? outputValue : String(outputValue)
+        const inputName = targetKey.slice(6); // remove "input-"
+        inputs[inputName] = Array.isArray(outputValue)
+          ? outputValue
+          : String(outputValue);
       } else {
         // Unknown format, use as-is
-        inputs[targetKey] = outputValue
+        inputs[targetKey] = outputValue;
       }
     }
 
-    return inputs
+    return inputs;
   }
 }
diff --git a/electron/workflow/engine/scheduler.ts b/electron/workflow/engine/scheduler.ts
index b5876135..b63e8a23 100644
--- a/electron/workflow/engine/scheduler.ts
+++ b/electron/workflow/engine/scheduler.ts
@@ -1,46 +1,59 @@
 /**
  * Topological sort and parallel scheduling.
  */
-interface SimpleEdge { sourceNodeId: string; targetNodeId: string }
+interface SimpleEdge {
+  sourceNodeId: string;
+  targetNodeId: string;
+}
 
-export function topologicalLevels(nodeIds: string[], edges: SimpleEdge[]): string[][] {
-  const inDegree = new Map<string, number>()
-  const adj = new Map<string, string[]>()
-  for (const id of nodeIds) { inDegree.set(id, 0); adj.set(id, []) }
+export function topologicalLevels(
+  nodeIds: string[],
+  edges: SimpleEdge[],
+): string[][] {
+  const inDegree = new Map<string, number>();
+  const adj = new Map<string, string[]>();
+  for (const id of nodeIds) {
+    inDegree.set(id, 0);
+    adj.set(id, []);
+  }
   for (const e of edges) {
-    adj.get(e.sourceNodeId)?.push(e.targetNodeId)
-    inDegree.set(e.targetNodeId, (inDegree.get(e.targetNodeId) ?? 0) + 1)
+    adj.get(e.sourceNodeId)?.push(e.targetNodeId);
+    inDegree.set(e.targetNodeId, (inDegree.get(e.targetNodeId) ?? 0) + 1);
   }
-  const levels: string[][] = []
-  let queue = nodeIds.filter(id => inDegree.get(id) === 0)
+  const levels: string[][] = [];
+  let queue = nodeIds.filter((id) => inDegree.get(id) === 0);
   while (queue.length > 0) {
-    levels.push([...queue])
-    const nextQueue: string[] = []
+    levels.push([...queue]);
+    const nextQueue: string[] = [];
     for (const node of queue) {
       for (const neighbor of adj.get(node) ?? []) {
-        const deg = (inDegree.get(neighbor) ?? 1) - 1
-        inDegree.set(neighbor, deg)
-        if (deg === 0) nextQueue.push(neighbor)
+        const deg = (inDegree.get(neighbor) ?? 1) - 1;
+        inDegree.set(neighbor, deg);
+        if (deg === 0) nextQueue.push(neighbor);
       }
     }
-    queue = nextQueue
+    queue = nextQueue;
   }
-  return levels
+  return levels;
 }
 
-export function downstreamNodes(startNodeId: string, nodeIds: string[], edges: SimpleEdge[]): string[] {
-  const adj = new Map<string, string[]>()
-  for (const id of nodeIds) adj.set(id, [])
-  for (const e of edges) adj.get(e.sourceNodeId)?.push(e.targetNodeId)
-  const visited = new Set<string>()
-  const queue = [startNodeId]
+export function downstreamNodes(
+  startNodeId: string,
+  nodeIds: string[],
+  edges: SimpleEdge[],
+): string[] {
+  const adj = new Map<string, string[]>();
+  for (const id of nodeIds) adj.set(id, []);
+  for (const e of edges) adj.get(e.sourceNodeId)?.push(e.targetNodeId);
+  const visited = new Set<string>();
+  const queue = [startNodeId];
   while (queue.length > 0) {
-    const node = queue.shift()!
-    if (visited.has(node)) continue
-    visited.add(node)
+    const node = queue.shift()!;
+    if (visited.has(node)) continue;
+    visited.add(node);
     for (const neighbor of adj.get(node) ?? []) {
-      if (!visited.has(neighbor)) queue.push(neighbor)
+      if (!visited.has(neighbor)) queue.push(neighbor);
     }
   }
-  return Array.from(visited)
+  return Array.from(visited);
 }
diff --git a/electron/workflow/index.ts b/electron/workflow/index.ts
index 5547b447..996ba31c 100644
--- a/electron/workflow/index.ts
+++ b/electron/workflow/index.ts
@@ -2,107 +2,117 @@
  * Workflow module entry point — initializes DB, nodes, engine, and IPC handlers.
  * Called from electron/main.ts during app.whenReady().
  */
-import { openDatabase, closeDatabase } from './db/connection'
-import { getFileStorageInstance } from './utils/file-storage'
-import { listWorkflows } from './db/workflow.repo'
-import { registerAllNodes } from './nodes/register-all'
-import { nodeRegistry } from './nodes/registry'
-import { ExecutionEngine } from './engine/executor'
-import { CacheService } from './engine/cache'
-import { CostService } from './engine/cost'
-import { CircuitBreaker } from './engine/circuit-breaker'
+import { openDatabase, closeDatabase } from "./db/connection";
+import { getFileStorageInstance } from "./utils/file-storage";
+import { listWorkflows } from "./db/workflow.repo";
+import { registerAllNodes } from "./nodes/register-all";
+import { nodeRegistry } from "./nodes/registry";
+import { ExecutionEngine } from "./engine/executor";
+import { CacheService } from "./engine/cache";
+import { CostService } from "./engine/cost";
+import { CircuitBreaker } from "./engine/circuit-breaker";
 import {
   setExecutionEngine,
   registerExecutionIpc,
   emitNodeStatus,
   emitProgress,
-  emitEdgeStatus
-} from './ipc/execution.ipc'
-import { registerWorkflowIpc } from './ipc/workflow.ipc'
-import { registerHistoryIpc, setMarkDownstreamStale } from './ipc/history.ipc'
-import { registerCostIpc, setCostDeps } from './ipc/cost.ipc'
-import { registerModelsIpc } from './ipc/models.ipc'
-import { registerStorageIpc } from './ipc/storage.ipc'
-import { registerUploadIpc } from './ipc/upload.ipc'
-import { registerSettingsIpc } from './ipc/settings.ipc'
-import { registerFreeToolIpc } from './ipc/free-tool.ipc'
-import { registerTemplateIpc } from './ipc/template.ipc'
-import { migrateTemplatesFromLocalStorage } from './services/template-migration'
-import { initializeDefaultTemplates } from './services/template-init'
+  emitEdgeStatus,
+} from "./ipc/execution.ipc";
+import { registerWorkflowIpc } from "./ipc/workflow.ipc";
+import { registerHistoryIpc, setMarkDownstreamStale } from "./ipc/history.ipc";
+import { registerCostIpc, setCostDeps } from "./ipc/cost.ipc";
+import { registerModelsIpc } from "./ipc/models.ipc";
+import { registerStorageIpc } from "./ipc/storage.ipc";
+import { registerUploadIpc } from "./ipc/upload.ipc";
+import { registerSettingsIpc } from "./ipc/settings.ipc";
+import { registerFreeToolIpc } from "./ipc/free-tool.ipc";
+import { registerTemplateIpc } from "./ipc/template.ipc";
+import { migrateTemplatesFromLocalStorage } from "./services/template-migration";
+import { initializeDefaultTemplates } from "./services/template-init";
 
 export async function initWorkflowModule(): Promise<void> {
-  console.log('[Workflow] Initializing workflow module...')
+  console.log("[Workflow] Initializing workflow module...");
 
   // Register lightweight model IPC first to avoid startup race:
   // renderer may call models:sync before DB initialization completes.
-  registerModelsIpc()
+  registerModelsIpc();
 
   // 1. Open database and ensure storage directories
-  await openDatabase()
-  const fileStorage = getFileStorageInstance()
-  fileStorage.ensureBaseDir()
-  console.log('[Workflow] Storage root:', fileStorage.getRootPath())
+  await openDatabase();
+  const fileStorage = getFileStorageInstance();
+  fileStorage.ensureBaseDir();
+  console.log("[Workflow] Storage root:", fileStorage.getRootPath());
 
   // Load all workflow names into the name map so file paths resolve correctly
   try {
-    const workflows = listWorkflows()
+    const workflows = listWorkflows();
     for (const wf of workflows) {
-      fileStorage.registerWorkflowName(wf.id, wf.name)
+      fileStorage.registerWorkflowName(wf.id, wf.name);
     }
-    console.log(`[Workflow] Registered ${workflows.length} workflow name mappings`)
+    console.log(
+      `[Workflow] Registered ${workflows.length} workflow name mappings`,
+    );
   } catch (err) {
-    console.error('[Workflow] Failed to load workflow names:', err)
+    console.error("[Workflow] Failed to load workflow names:", err);
   }
 
   // 2. Register node types
-  registerAllNodes()
+  registerAllNodes();
 
   // 3. Create engine dependencies
-  const cache = new CacheService()
-  const costService = new CostService()
-  const circuitBreaker = new CircuitBreaker()
+  const cache = new CacheService();
+  const costService = new CostService();
+  const circuitBreaker = new CircuitBreaker();
 
   // 4. Create execution engine with IPC callbacks
-  const engine = new ExecutionEngine(nodeRegistry, cache, costService, circuitBreaker, {
-    onNodeStatus: emitNodeStatus,
-    onProgress: emitProgress,
-    onEdgeStatus: emitEdgeStatus
-  })
+  const engine = new ExecutionEngine(
+    nodeRegistry,
+    cache,
+    costService,
+    circuitBreaker,
+    {
+      onNodeStatus: emitNodeStatus,
+      onProgress: emitProgress,
+      onEdgeStatus: emitEdgeStatus,
+    },
+  );
 
   // 5. Wire up singletons
-  setExecutionEngine(engine)
-  setCostDeps(costService, nodeRegistry)
-  setMarkDownstreamStale((workflowId, nodeId) => engine.markDownstreamStale(workflowId, nodeId))
+  setExecutionEngine(engine);
+  setCostDeps(costService, nodeRegistry);
+  setMarkDownstreamStale((workflowId, nodeId) =>
+    engine.markDownstreamStale(workflowId, nodeId),
+  );
 
   // 6. Register all IPC handlers
-  registerWorkflowIpc()
-  registerExecutionIpc()
-  registerHistoryIpc()
-  registerCostIpc()
-  registerStorageIpc()
-  registerUploadIpc()
-  registerSettingsIpc()
-  registerFreeToolIpc()
-  registerTemplateIpc()
+  registerWorkflowIpc();
+  registerExecutionIpc();
+  registerHistoryIpc();
+  registerCostIpc();
+  registerStorageIpc();
+  registerUploadIpc();
+  registerSettingsIpc();
+  registerFreeToolIpc();
+  registerTemplateIpc();
 
   // 7. Migrate templates from localStorage (if needed)
   try {
-    await migrateTemplatesFromLocalStorage()
+    await migrateTemplatesFromLocalStorage();
   } catch (err) {
-    console.error('[Workflow] Template migration failed (non-fatal):', err)
+    console.error("[Workflow] Template migration failed (non-fatal):", err);
   }
 
   // 8. Initialize default templates from data/templates directory
   try {
-    initializeDefaultTemplates()
+    initializeDefaultTemplates();
   } catch (err) {
-    console.error('[Workflow] Default template init failed (non-fatal):', err)
+    console.error("[Workflow] Default template init failed (non-fatal):", err);
   }
 
-  console.log('[Workflow] Module initialized successfully')
+  console.log("[Workflow] Module initialized successfully");
 }
 
 export function closeWorkflowDatabase(): void {
-  closeDatabase()
-  console.log('[Workflow] Database closed')
+  closeDatabase();
+  console.log("[Workflow] Database closed");
 }
diff --git a/electron/workflow/ipc/cost.ipc.ts b/electron/workflow/ipc/cost.ipc.ts
index 8cc1f15c..8516a71b 100644
--- a/electron/workflow/ipc/cost.ipc.ts
+++ b/electron/workflow/ipc/cost.ipc.ts
@@ -1,48 +1,58 @@
 /**
  * Cost IPC handlers — budget management and cost estimation.
  */
-import { ipcMain } from 'electron'
-import { CostService } from '../engine/cost'
-import { NodeRegistry } from '../nodes/registry'
-import { getNodesByWorkflowId } from '../db/node.repo'
-import { getDailySpend } from '../db/budget.repo'
-import type { BudgetConfig, CostEstimate } from '../../../src/workflow/types/ipc'
+import { ipcMain } from "electron";
+import { CostService } from "../engine/cost";
+import { NodeRegistry } from "../nodes/registry";
+import { getNodesByWorkflowId } from "../db/node.repo";
+import { getDailySpend } from "../db/budget.repo";
+import type {
+  BudgetConfig,
+  CostEstimate,
+} from "../../../src/workflow/types/ipc";
 
-let costService: CostService | null = null
-let registry: NodeRegistry | null = null
+let costService: CostService | null = null;
+let registry: NodeRegistry | null = null;
 
 export function setCostDeps(cost: CostService, reg: NodeRegistry): void {
-  costService = cost
-  registry = reg
+  costService = cost;
+  registry = reg;
 }
 
 export function registerCostIpc(): void {
-  ipcMain.handle('cost:estimate', async (_event, args: { workflowId: string; nodeIds: string[] }): Promise<CostEstimate> => {
-    if (!costService || !registry) throw new Error('Cost service not initialized')
-    const nodes = getNodesByWorkflowId(args.workflowId)
-    const nodeTypes = new Map(nodes.map(n => [n.id, n.nodeType]))
-    const costByNodeId = new Map<string, number>()
-    for (const n of nodes) {
-      const handler = registry.getHandler(n.nodeType)
-      if (handler) {
-        // Must estimate per node (not per nodeType), because same type may use different modelId/cost.
-        costByNodeId.set(n.id, handler.estimateCost(n.params))
+  ipcMain.handle(
+    "cost:estimate",
+    async (
+      _event,
+      args: { workflowId: string; nodeIds: string[] },
+    ): Promise<CostEstimate> => {
+      if (!costService || !registry)
+        throw new Error("Cost service not initialized");
+      const nodes = getNodesByWorkflowId(args.workflowId);
+      const nodeTypes = new Map(nodes.map((n) => [n.id, n.nodeType]));
+      const costByNodeId = new Map<string, number>();
+      for (const n of nodes) {
+        const handler = registry.getHandler(n.nodeType);
+        if (handler) {
+          // Must estimate per node (not per nodeType), because same type may use different modelId/cost.
+          costByNodeId.set(n.id, handler.estimateCost(n.params));
+        }
       }
-    }
-    return costService.estimate(args.nodeIds, nodeTypes, costByNodeId)
-  })
+      return costService.estimate(args.nodeIds, nodeTypes, costByNodeId);
+    },
+  );
 
-  ipcMain.handle('cost:get-budget', async (): Promise<BudgetConfig> => {
-    if (!costService) throw new Error('Cost service not initialized')
-    return costService.getBudget()
-  })
+  ipcMain.handle("cost:get-budget", async (): Promise<BudgetConfig> => {
+    if (!costService) throw new Error("Cost service not initialized");
+    return costService.getBudget();
+  });
 
-  ipcMain.handle('cost:set-budget', async (_event, config: BudgetConfig) => {
-    if (!costService) throw new Error('Cost service not initialized')
-    costService.setBudget(config)
-  })
+  ipcMain.handle("cost:set-budget", async (_event, config: BudgetConfig) => {
+    if (!costService) throw new Error("Cost service not initialized");
+    costService.setBudget(config);
+  });
 
-  ipcMain.handle('cost:get-daily-spend', async (): Promise<number> => {
-    return getDailySpend()
-  })
+  ipcMain.handle("cost:get-daily-spend", async (): Promise<number> => {
+    return getDailySpend();
+  });
 }
diff --git a/electron/workflow/ipc/execution.ipc.ts b/electron/workflow/ipc/execution.ipc.ts
index 6b3d4443..15b53358 100644
--- a/electron/workflow/ipc/execution.ipc.ts
+++ b/electron/workflow/ipc/execution.ipc.ts
@@ -1,57 +1,100 @@
 /**
  * Execution IPC handlers — run, retry, continue, cancel.
  */
-import { ipcMain, BrowserWindow } from 'electron'
-import { ExecutionEngine } from '../engine/executor'
-import type { NodeStatus } from '../../../src/workflow/types/execution'
+import { ipcMain, BrowserWindow } from "electron";
+import { ExecutionEngine } from "../engine/executor";
+import type { NodeStatus } from "../../../src/workflow/types/execution";
 
-let engine: ExecutionEngine | null = null
+let engine: ExecutionEngine | null = null;
 
 export function setExecutionEngine(e: ExecutionEngine): void {
-  engine = e
+  engine = e;
 }
 
 function getEngine(): ExecutionEngine {
-  if (!engine) throw new Error('ExecutionEngine not initialized')
-  return engine
+  if (!engine) throw new Error("ExecutionEngine not initialized");
+  return engine;
 }
 
 export function registerExecutionIpc(): void {
-  ipcMain.handle('execution:run-all', async (_event, args: { workflowId: string }) => {
-    await getEngine().runAll(args.workflowId)
-  })
+  ipcMain.handle(
+    "execution:run-all",
+    async (_event, args: { workflowId: string }) => {
+      await getEngine().runAll(args.workflowId);
+    },
+  );
 
-  ipcMain.handle('execution:run-node', async (_event, args: { workflowId: string; nodeId: string }) => {
-    await getEngine().runNode(args.workflowId, args.nodeId)
-  })
+  ipcMain.handle(
+    "execution:run-node",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      await getEngine().runNode(args.workflowId, args.nodeId);
+    },
+  );
 
-  ipcMain.handle('execution:continue-from', async (_event, args: { workflowId: string; nodeId: string }) => {
-    await getEngine().continueFrom(args.workflowId, args.nodeId)
-  })
+  ipcMain.handle(
+    "execution:continue-from",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      await getEngine().continueFrom(args.workflowId, args.nodeId);
+    },
+  );
 
-  ipcMain.handle('execution:retry', async (_event, args: { workflowId: string; nodeId: string }) => {
-    await getEngine().retryNode(args.workflowId, args.nodeId)
-  })
+  ipcMain.handle(
+    "execution:retry",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      await getEngine().retryNode(args.workflowId, args.nodeId);
+    },
+  );
 
-  ipcMain.handle('execution:cancel', async (_event, args: { workflowId: string; nodeId: string }) => {
-    getEngine().cancel(args.workflowId, args.nodeId)
-  })
+  ipcMain.handle(
+    "execution:cancel",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      getEngine().cancel(args.workflowId, args.nodeId);
+    },
+  );
 }
 
-export function emitNodeStatus(workflowId: string, nodeId: string, status: NodeStatus, errorMessage?: string): void {
+export function emitNodeStatus(
+  workflowId: string,
+  nodeId: string,
+  status: NodeStatus,
+  errorMessage?: string,
+): void {
   for (const win of BrowserWindow.getAllWindows()) {
-    win.webContents.send('execution:node-status', { workflowId, nodeId, status, errorMessage })
+    win.webContents.send("execution:node-status", {
+      workflowId,
+      nodeId,
+      status,
+      errorMessage,
+    });
   }
 }
 
-export function emitProgress(workflowId: string, nodeId: string, progress: number, message?: string): void {
+export function emitProgress(
+  workflowId: string,
+  nodeId: string,
+  progress: number,
+  message?: string,
+): void {
   for (const win of BrowserWindow.getAllWindows()) {
-    win.webContents.send('execution:progress', { workflowId, nodeId, progress, message })
+    win.webContents.send("execution:progress", {
+      workflowId,
+      nodeId,
+      progress,
+      message,
+    });
   }
 }
 
-export function emitEdgeStatus(workflowId: string, edgeId: string, status: 'no-data' | 'has-data'): void {
+export function emitEdgeStatus(
+  workflowId: string,
+  edgeId: string,
+  status: "no-data" | "has-data",
+): void {
   for (const win of BrowserWindow.getAllWindows()) {
-    win.webContents.send('execution:edge-status', { workflowId, edgeId, status })
+    win.webContents.send("execution:edge-status", {
+      workflowId,
+      edgeId,
+      status,
+    });
   }
 }
diff --git a/electron/workflow/ipc/free-tool.ipc.ts b/electron/workflow/ipc/free-tool.ipc.ts
index c4eb407c..64f9b303 100644
--- a/electron/workflow/ipc/free-tool.ipc.ts
+++ b/electron/workflow/ipc/free-tool.ipc.ts
@@ -2,141 +2,188 @@
  * IPC bridge for renderer-based free-tool execution.
  * Main sends execute request to renderer; renderer runs Web Worker and responds.
  */
-import { ipcMain, BrowserWindow } from 'electron'
-import { v4 as uuid } from 'uuid'
-import { getFileStorageInstance } from '../utils/file-storage'
-import type { NodeExecutionResult } from '../nodes/base'
+import { ipcMain, BrowserWindow } from "electron";
+import { v4 as uuid } from "uuid";
+import { getFileStorageInstance } from "../utils/file-storage";
+import type { NodeExecutionResult } from "../nodes/base";
 
 export interface FreeToolExecuteRequest {
-  requestId: string
-  nodeType: string
-  workflowId: string
-  nodeId: string
+  requestId: string;
+  nodeType: string;
+  workflowId: string;
+  nodeId: string;
   /** Input URLs by port key (e.g. { input: url } or { source: url1, target: url2 }) */
-  inputs: Record<string, string>
-  params: Record<string, unknown>
+  inputs: Record<string, string>;
+  params: Record<string, unknown>;
 }
 
 export interface FreeToolCompletePayload {
-  requestId: string
-  workflowId: string
-  nodeId: string
-  outputData: string
-  outputExt: string
-  outputPrefix: string
+  requestId: string;
+  workflowId: string;
+  nodeId: string;
+  outputData: string;
+  outputExt: string;
+  outputPrefix: string;
 }
 
 export interface FreeToolErrorPayload {
-  requestId: string
-  error: string
+  requestId: string;
+  error: string;
 }
 
-const pending = new Map<string, { resolve: (r: NodeExecutionResult) => void; reject: (e: Error) => void; startTime: number }>()
+const pending = new Map<
+  string,
+  {
+    resolve: (r: NodeExecutionResult) => void;
+    reject: (e: Error) => void;
+    startTime: number;
+  }
+>();
 
 function toLocalAssetUrl(filePath: string): string {
-  return `local-asset://${encodeURIComponent(filePath)}`
+  return `local-asset://${encodeURIComponent(filePath)}`;
 }
 
 export function registerFreeToolIpc(): void {
-  ipcMain.handle('free-tool:complete', async (_event, payload: FreeToolCompletePayload) => {
-    const { requestId, workflowId, nodeId, outputData, outputExt, outputPrefix } = payload
-    const entry = pending.get(requestId)
-    if (!entry) {
-      console.warn('[FreeTool] Unknown requestId:', requestId)
-      return
-    }
-    pending.delete(requestId)
-    const { resolve, startTime } = entry
-    try {
-      const storage = getFileStorageInstance()
-      const buffer = Buffer.from(outputData, 'base64')
-      const filePath = storage.saveNodeOutput(workflowId, nodeId, outputPrefix, outputExt, buffer)
-      const outputUrl = toLocalAssetUrl(filePath)
-      const result: NodeExecutionResult = {
-        status: 'success',
-        outputs: { output: outputUrl },
-        resultPath: outputUrl,
-        resultMetadata: {
-          output: outputUrl,
-          resultUrl: outputUrl,
-          resultUrls: [outputUrl],
-          outputPath: filePath
-        },
-        durationMs: Date.now() - startTime,
-        cost: 0
+  ipcMain.handle(
+    "free-tool:complete",
+    async (_event, payload: FreeToolCompletePayload) => {
+      const {
+        requestId,
+        workflowId,
+        nodeId,
+        outputData,
+        outputExt,
+        outputPrefix,
+      } = payload;
+      const entry = pending.get(requestId);
+      if (!entry) {
+        console.warn("[FreeTool] Unknown requestId:", requestId);
+        return;
       }
-      resolve(result)
-    } catch (err) {
-      entry.reject(err instanceof Error ? err : new Error(String(err)))
-    }
-  })
+      pending.delete(requestId);
+      const { resolve, startTime } = entry;
+      try {
+        const storage = getFileStorageInstance();
+        const buffer = Buffer.from(outputData, "base64");
+        const filePath = storage.saveNodeOutput(
+          workflowId,
+          nodeId,
+          outputPrefix,
+          outputExt,
+          buffer,
+        );
+        const outputUrl = toLocalAssetUrl(filePath);
+        const result: NodeExecutionResult = {
+          status: "success",
+          outputs: { output: outputUrl },
+          resultPath: outputUrl,
+          resultMetadata: {
+            output: outputUrl,
+            resultUrl: outputUrl,
+            resultUrls: [outputUrl],
+            outputPath: filePath,
+          },
+          durationMs: Date.now() - startTime,
+          cost: 0,
+        };
+        resolve(result);
+      } catch (err) {
+        entry.reject(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+  );
 
-  ipcMain.handle('free-tool:error', async (_event, payload: FreeToolErrorPayload) => {
-    const { requestId, error } = payload
-    const entry = pending.get(requestId)
-    if (!entry) {
-      console.warn('[FreeTool] Invalid requestId:', requestId)
-      return
-    }
-    pending.delete(requestId)
-    entry.reject(new Error(error))
-  })
+  ipcMain.handle(
+    "free-tool:error",
+    async (_event, payload: FreeToolErrorPayload) => {
+      const { requestId, error } = payload;
+      const entry = pending.get(requestId);
+      if (!entry) {
+        console.warn("[FreeTool] Invalid requestId:", requestId);
+        return;
+      }
+      pending.delete(requestId);
+      entry.reject(new Error(error));
+    },
+  );
 
   // Detect renderer reload/navigation — fail all pending requests immediately
   // so the user sees an error right away instead of waiting for timeout
-  const onWebContentsCreated = (_event: Electron.Event, webContents: Electron.WebContents) => {
-    webContents.on('did-start-navigation', () => {
+  const onWebContentsCreated = (
+    _event: Electron.Event,
+    webContents: Electron.WebContents,
+  ) => {
+    webContents.on("did-start-navigation", () => {
       if (pending.size > 0) {
-        console.warn(`[FreeTool] Renderer reloading — failing ${pending.size} pending request(s)`)
+        console.warn(
+          `[FreeTool] Renderer reloading — failing ${pending.size} pending request(s)`,
+        );
         for (const [reqId, entry] of pending) {
-          pending.delete(reqId)
-          entry.reject(new Error('Renderer reloaded during execution. Please retry.'))
+          pending.delete(reqId);
+          entry.reject(
+            new Error("Renderer reloaded during execution. Please retry."),
+          );
         }
       }
-    })
-  }
-  const { app } = require('electron')
-  app.on('web-contents-created', onWebContentsCreated)
+    });
+  };
+  const { app } = require("electron");
+  app.on("web-contents-created", onWebContentsCreated);
 }
 
 /**
  * Execute a free-tool in the renderer process and wait for the result.
  */
-export function executeFreeToolInRenderer(req: Omit<FreeToolExecuteRequest, 'requestId'>): Promise<NodeExecutionResult> {
+export function executeFreeToolInRenderer(
+  req: Omit<FreeToolExecuteRequest, "requestId">,
+): Promise<NodeExecutionResult> {
   return new Promise((resolve, reject) => {
-    const requestId = uuid()
-    const startTime = Date.now()
+    const requestId = uuid();
+    const startTime = Date.now();
 
-    const timeoutMs = (req.nodeType === 'free-tool/video-enhancer') ? 600_000
-      : (req.nodeType === 'free-tool/face-swapper' || req.nodeType === 'free-tool/image-eraser' || req.nodeType === 'free-tool/face-enhancer') ? 300_000
-      : 120_000
+    const timeoutMs =
+      req.nodeType === "free-tool/video-enhancer"
+        ? 600_000
+        : req.nodeType === "free-tool/face-swapper" ||
+            req.nodeType === "free-tool/image-eraser" ||
+            req.nodeType === "free-tool/face-enhancer"
+          ? 300_000
+          : 120_000;
     const timeout = setTimeout(() => {
-      const entry = pending.get(requestId)
+      const entry = pending.get(requestId);
       if (entry) {
-        pending.delete(requestId)
-        entry.reject(new Error(`Free-tool execution timed out (${timeoutMs / 1000}s)`))
+        pending.delete(requestId);
+        entry.reject(
+          new Error(`Free-tool execution timed out (${timeoutMs / 1000}s)`),
+        );
       }
-    }, timeoutMs)
+    }, timeoutMs);
 
     const wrapResolve = (r: NodeExecutionResult) => {
-      clearTimeout(timeout)
-      resolve(r)
-    }
+      clearTimeout(timeout);
+      resolve(r);
+    };
     const wrapReject = (e: Error) => {
-      clearTimeout(timeout)
-      reject(e)
-    }
+      clearTimeout(timeout);
+      reject(e);
+    };
 
-    pending.set(requestId, { resolve: wrapResolve, reject: wrapReject, startTime })
+    pending.set(requestId, {
+      resolve: wrapResolve,
+      reject: wrapReject,
+      startTime,
+    });
 
-    const win = BrowserWindow.getFocusedWindow() ?? BrowserWindow.getAllWindows()[0]
+    const win =
+      BrowserWindow.getFocusedWindow() ?? BrowserWindow.getAllWindows()[0];
     if (!win?.webContents) {
-      pending.delete(requestId)
-      clearTimeout(timeout)
-      reject(new Error('No browser window available for free-tool execution'))
-      return
+      pending.delete(requestId);
+      clearTimeout(timeout);
+      reject(new Error("No browser window available for free-tool execution"));
+      return;
     }
 
-    win.webContents.send('free-tool:execute', { ...req, requestId })
-  })
+    win.webContents.send("free-tool:execute", { ...req, requestId });
+  });
 }
diff --git a/electron/workflow/ipc/history.ipc.ts b/electron/workflow/ipc/history.ipc.ts
index 4cf53709..b04e9be2 100644
--- a/electron/workflow/ipc/history.ipc.ts
+++ b/electron/workflow/ipc/history.ipc.ts
@@ -1,16 +1,20 @@
 /**
  * History IPC handlers — execution history management.
  */
-import { ipcMain } from 'electron'
-import * as fs from 'fs'
-import * as executionRepo from '../db/execution.repo'
-import { updateNodeCurrentOutputId } from '../db/node.repo'
-import type { NodeExecutionRecord } from '../../../src/workflow/types/execution'
+import { ipcMain } from "electron";
+import * as fs from "fs";
+import * as executionRepo from "../db/execution.repo";
+import { updateNodeCurrentOutputId } from "../db/node.repo";
+import type { NodeExecutionRecord } from "../../../src/workflow/types/execution";
 
-let markDownstreamStaleFn: ((workflowId: string, nodeId: string) => void) | null = null
+let markDownstreamStaleFn:
+  | ((workflowId: string, nodeId: string) => void)
+  | null = null;
 
-export function setMarkDownstreamStale(fn: (workflowId: string, nodeId: string) => void): void {
-  markDownstreamStaleFn = fn
+export function setMarkDownstreamStale(
+  fn: (workflowId: string, nodeId: string) => void,
+): void {
+  markDownstreamStaleFn = fn;
 }
 
 /**
@@ -19,60 +23,87 @@ export function setMarkDownstreamStale(fn: (workflowId: string, nodeId: string)
  * Remote URLs are ignored. Failures are silently swallowed.
  */
 function deleteResultFiles(record: NodeExecutionRecord): void {
-  const urls: string[] = []
+  const urls: string[] = [];
   // Collect all result URLs
-  if (record.resultPath) urls.push(record.resultPath)
-  const meta = record.resultMetadata as Record<string, unknown> | null
-  const metaUrls = meta?.resultUrls as string[] | undefined
+  if (record.resultPath) urls.push(record.resultPath);
+  const meta = record.resultMetadata as Record<string, unknown> | null;
+  const metaUrls = meta?.resultUrls as string[] | undefined;
   if (Array.isArray(metaUrls)) {
-    for (const u of metaUrls) { if (u && typeof u === 'string') urls.push(u) }
+    for (const u of metaUrls) {
+      if (u && typeof u === "string") urls.push(u);
+    }
   }
 
   for (const url of urls) {
-    if (!/^local-asset:\/\//i.test(url)) continue
+    if (!/^local-asset:\/\//i.test(url)) continue;
     try {
-      const filePath = decodeURIComponent(url.replace(/^local-asset:\/\//i, ''))
-      if (fs.existsSync(filePath)) fs.unlinkSync(filePath)
-    } catch { /* best-effort */ }
+      const filePath = decodeURIComponent(
+        url.replace(/^local-asset:\/\//i, ""),
+      );
+      if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+    } catch {
+      /* best-effort */
+    }
   }
 }
 
 export function registerHistoryIpc(): void {
-  ipcMain.handle('history:list', async (_event, args: { nodeId: string }): Promise<NodeExecutionRecord[]> => {
-    return executionRepo.getExecutionsByNodeId(args.nodeId)
-  })
+  ipcMain.handle(
+    "history:list",
+    async (
+      _event,
+      args: { nodeId: string },
+    ): Promise<NodeExecutionRecord[]> => {
+      return executionRepo.getExecutionsByNodeId(args.nodeId);
+    },
+  );
 
-  ipcMain.handle('history:set-current', async (_event, args: { nodeId: string; executionId: string }) => {
-    updateNodeCurrentOutputId(args.nodeId, args.executionId)
-    if (markDownstreamStaleFn) {
-      const exec = executionRepo.getExecutionById(args.executionId)
-      if (exec) markDownstreamStaleFn(exec.workflowId, args.nodeId)
-    }
-  })
+  ipcMain.handle(
+    "history:set-current",
+    async (_event, args: { nodeId: string; executionId: string }) => {
+      updateNodeCurrentOutputId(args.nodeId, args.executionId);
+      if (markDownstreamStaleFn) {
+        const exec = executionRepo.getExecutionById(args.executionId);
+        if (exec) markDownstreamStaleFn(exec.workflowId, args.nodeId);
+      }
+    },
+  );
 
-  ipcMain.handle('history:star', async (_event, args: { executionId: string; starred: boolean }) => {
-    executionRepo.updateExecutionStarred(args.executionId, args.starred)
-  })
+  ipcMain.handle(
+    "history:star",
+    async (_event, args: { executionId: string; starred: boolean }) => {
+      executionRepo.updateExecutionStarred(args.executionId, args.starred);
+    },
+  );
 
-  ipcMain.handle('history:score', async (_event, args: { executionId: string; score: number }) => {
-    executionRepo.updateExecutionScore(args.executionId, args.score)
-  })
+  ipcMain.handle(
+    "history:score",
+    async (_event, args: { executionId: string; score: number }) => {
+      executionRepo.updateExecutionScore(args.executionId, args.score);
+    },
+  );
 
   /** Delete a single execution record and its local result files */
-  ipcMain.handle('history:delete', async (_event, args: { executionId: string }) => {
-    const record = executionRepo.getExecutionById(args.executionId)
-    if (record) {
-      deleteResultFiles(record)
-      executionRepo.deleteExecution(args.executionId)
-    }
-  })
+  ipcMain.handle(
+    "history:delete",
+    async (_event, args: { executionId: string }) => {
+      const record = executionRepo.getExecutionById(args.executionId);
+      if (record) {
+        deleteResultFiles(record);
+        executionRepo.deleteExecution(args.executionId);
+      }
+    },
+  );
 
   /** Delete ALL execution records for a node and their local result files */
-  ipcMain.handle('history:delete-all', async (_event, args: { nodeId: string }) => {
-    const records = executionRepo.getExecutionsByNodeId(args.nodeId)
-    for (const record of records) {
-      deleteResultFiles(record)
-    }
-    executionRepo.deleteExecutionsByNodeId(args.nodeId)
-  })
+  ipcMain.handle(
+    "history:delete-all",
+    async (_event, args: { nodeId: string }) => {
+      const records = executionRepo.getExecutionsByNodeId(args.nodeId);
+      for (const record of records) {
+        deleteResultFiles(record);
+      }
+      executionRepo.deleteExecutionsByNodeId(args.nodeId);
+    },
+  );
 }
diff --git a/electron/workflow/ipc/models.ipc.ts b/electron/workflow/ipc/models.ipc.ts
index 78ec7e0c..eb64efb6 100644
--- a/electron/workflow/ipc/models.ipc.ts
+++ b/electron/workflow/ipc/models.ipc.ts
@@ -5,39 +5,58 @@
  * to main process when it loads. This reuses Desktop's existing apiClient and
  * modelsStore, avoiding duplicate API calls and API key management.
  */
-import { ipcMain } from 'electron'
-import { getModels, searchModels, getModelById, syncModelsFromRenderer } from '../services/model-list'
-import type { WaveSpeedModel } from '../../../src/workflow/types/node-defs'
-import type { Model } from '../../../src/types/model'
+import { ipcMain } from "electron";
+import {
+  getModels,
+  searchModels,
+  getModelById,
+  syncModelsFromRenderer,
+} from "../services/model-list";
+import type { WaveSpeedModel } from "../../../src/workflow/types/node-defs";
+import type { Model } from "../../../src/types/model";
 
 export function registerModelsIpc(): void {
   /**
    * Renderer calls this after modelsStore.fetchModels() completes,
    * syncing the full model list to main process for workflow execution.
    */
-  ipcMain.handle('models:sync', async (_event, models: Model[]): Promise<void> => {
-    syncModelsFromRenderer(models)
-  })
+  ipcMain.handle(
+    "models:sync",
+    async (_event, models: Model[]): Promise<void> => {
+      syncModelsFromRenderer(models);
+    },
+  );
 
   /** Get cached models (must be synced first via models:sync). */
-  ipcMain.handle('models:list', async (): Promise<WaveSpeedModel[]> => {
+  ipcMain.handle("models:list", async (): Promise<WaveSpeedModel[]> => {
     try {
-      return getModels()
+      return getModels();
     } catch (err) {
-      console.error('models:list error:', err)
-      return []
+      console.error("models:list error:", err);
+      return [];
     }
-  })
+  });
 
-  ipcMain.handle('models:search', async (
-    _event, args: { query: string; category?: string; provider?: string }
-  ): Promise<WaveSpeedModel[]> => {
-    return searchModels(args.query, { category: args.category, provider: args.provider })
-  })
+  ipcMain.handle(
+    "models:search",
+    async (
+      _event,
+      args: { query: string; category?: string; provider?: string },
+    ): Promise<WaveSpeedModel[]> => {
+      return searchModels(args.query, {
+        category: args.category,
+        provider: args.provider,
+      });
+    },
+  );
 
-  ipcMain.handle('models:get-schema', async (
-    _event, args: { modelId: string }
-  ): Promise<WaveSpeedModel | null> => {
-    return getModelById(args.modelId)
-  })
+  ipcMain.handle(
+    "models:get-schema",
+    async (
+      _event,
+      args: { modelId: string },
+    ): Promise<WaveSpeedModel | null> => {
+      return getModelById(args.modelId);
+    },
+  );
 }
diff --git a/electron/workflow/ipc/settings.ipc.ts b/electron/workflow/ipc/settings.ipc.ts
index 6aaafb8f..0d7a74fb 100644
--- a/electron/workflow/ipc/settings.ipc.ts
+++ b/electron/workflow/ipc/settings.ipc.ts
@@ -2,52 +2,58 @@
  * Settings IPC handlers — reads API key from Desktop's existing settings + node registry.
  * Unlike improver, we don't have a separate api_keys table. We read from Desktop's settings.json.
  */
-import { ipcMain, app } from 'electron'
-import { join } from 'path'
-import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs'
-import { nodeRegistry } from '../nodes/registry'
-import { resetClients } from '../services/service-locator'
-import type { ApiKeyConfig } from '../../../src/workflow/types/ipc'
-import type { NodeTypeDefinition } from '../../../src/workflow/types/node-defs'
+import { ipcMain, app } from "electron";
+import { join } from "path";
+import { existsSync, readFileSync, writeFileSync, mkdirSync } from "fs";
+import { nodeRegistry } from "../nodes/registry";
+import { resetClients } from "../services/service-locator";
+import type { ApiKeyConfig } from "../../../src/workflow/types/ipc";
+import type { NodeTypeDefinition } from "../../../src/workflow/types/node-defs";
 
 function getDesktopSettingsPath(): string {
-  return join(app.getPath('userData'), 'settings.json')
+  return join(app.getPath("userData"), "settings.json");
 }
 
 export function registerSettingsIpc(): void {
   // Read API key from Desktop's settings
-  ipcMain.handle('settings:get-api-keys', async (): Promise<ApiKeyConfig> => {
+  ipcMain.handle("settings:get-api-keys", async (): Promise<ApiKeyConfig> => {
     try {
-      const settingsPath = getDesktopSettingsPath()
+      const settingsPath = getDesktopSettingsPath();
       if (existsSync(settingsPath)) {
-        const data = JSON.parse(readFileSync(settingsPath, 'utf-8'))
-        return { wavespeedKey: data.apiKey || '' }
+        const data = JSON.parse(readFileSync(settingsPath, "utf-8"));
+        return { wavespeedKey: data.apiKey || "" };
       }
     } catch {}
-    return { wavespeedKey: '' }
-  })
+    return { wavespeedKey: "" };
+  });
 
   // When workflow settings panel saves keys, update Desktop's settings
-  ipcMain.handle('settings:set-api-keys', async (_event, config: ApiKeyConfig) => {
-    try {
-      const settingsPath = getDesktopSettingsPath()
-      let data: Record<string, unknown> = {}
-      if (existsSync(settingsPath)) {
-        data = JSON.parse(readFileSync(settingsPath, 'utf-8'))
-      }
-      if (config.wavespeedKey !== undefined) {
-        data.apiKey = config.wavespeedKey
+  ipcMain.handle(
+    "settings:set-api-keys",
+    async (_event, config: ApiKeyConfig) => {
+      try {
+        const settingsPath = getDesktopSettingsPath();
+        let data: Record<string, unknown> = {};
+        if (existsSync(settingsPath)) {
+          data = JSON.parse(readFileSync(settingsPath, "utf-8"));
+        }
+        if (config.wavespeedKey !== undefined) {
+          data.apiKey = config.wavespeedKey;
+        }
+        const dir = app.getPath("userData");
+        if (!existsSync(dir)) mkdirSync(dir, { recursive: true });
+        writeFileSync(settingsPath, JSON.stringify(data, null, 2));
+        resetClients();
+      } catch (error) {
+        console.error("[Settings] Failed to save API keys:", error);
       }
-      const dir = app.getPath('userData')
-      if (!existsSync(dir)) mkdirSync(dir, { recursive: true })
-      writeFileSync(settingsPath, JSON.stringify(data, null, 2))
-      resetClients()
-    } catch (error) {
-      console.error('[Settings] Failed to save API keys:', error)
-    }
-  })
+    },
+  );
 
-  ipcMain.handle('registry:get-all', async (): Promise<NodeTypeDefinition[]> => {
-    return nodeRegistry.getAll()
-  })
+  ipcMain.handle(
+    "registry:get-all",
+    async (): Promise<NodeTypeDefinition[]> => {
+      return nodeRegistry.getAll();
+    },
+  );
 }
diff --git a/electron/workflow/ipc/storage.ipc.ts b/electron/workflow/ipc/storage.ipc.ts
index 0b005353..7ab17963 100644
--- a/electron/workflow/ipc/storage.ipc.ts
+++ b/electron/workflow/ipc/storage.ipc.ts
@@ -1,163 +1,277 @@
 /**
  * Storage IPC handlers — file storage and workflow snapshot management.
  */
-import { ipcMain, dialog, shell } from 'electron'
-import { getFileStorageInstance } from '../utils/file-storage'
-import { writeFileSync, readFileSync, existsSync, mkdirSync } from 'fs'
-import { v4 as uuid } from 'uuid'
-import { createWorkflow, updateWorkflow } from '../db/workflow.repo'
-import { getModelById } from '../services/model-list'
+import { ipcMain, dialog, shell } from "electron";
+import { getFileStorageInstance } from "../utils/file-storage";
+import { writeFileSync, readFileSync, existsSync, mkdirSync } from "fs";
+import { v4 as uuid } from "uuid";
+import { createWorkflow, updateWorkflow } from "../db/workflow.repo";
+import { getModelById } from "../services/model-list";
 
-function getStorage() { return getFileStorageInstance() }
+function getStorage() {
+  return getFileStorageInstance();
+}
 
 export function registerStorageIpc(): void {
-  ipcMain.handle('storage:get-workflow-snapshot', async (_event, args: { workflowId: string }) => {
-    return getStorage().loadWorkflowSnapshot(args.workflowId)
-  })
-
-  ipcMain.handle('storage:get-execution-cache', async (_event, args: { workflowId: string; nodeId: string; executionId: string }) => {
-    return null // simplified — execution cache not used in new structure
-  })
-
-  ipcMain.handle('storage:list-node-executions', async (_event, args: { workflowId: string; nodeId: string }) => {
-    return getStorage().listNodeExecutions(args.workflowId, args.nodeId)
-  })
-
-  ipcMain.handle('storage:list-uploaded-files', async (_event, args: { workflowId: string; nodeId: string }) => {
-    return getStorage().listUploadedFiles(args.workflowId, args.nodeId)
-  })
-
-  ipcMain.handle('storage:save-uploaded-file', async (_event, args: { workflowId: string; nodeId: string; filename: string; data: Buffer }) => {
-    return getStorage().saveUploadedFile(args.workflowId, args.nodeId, args.filename, Buffer.from(args.data))
-  })
-
-  ipcMain.handle('storage:save-node-output', async (_event, args: { workflowId: string; nodeId: string; prefix: string; ext: string; data: Buffer }) => {
-    return getStorage().saveNodeOutput(args.workflowId, args.nodeId, args.prefix, args.ext, Buffer.from(args.data))
-  })
-
-  ipcMain.handle('storage:copy-uploaded-file', async (_event, args: { workflowId: string; nodeId: string; sourcePath: string }) => {
-    return getStorage().copyUploadedFile(args.workflowId, args.nodeId, args.sourcePath)
-  })
-
-  ipcMain.handle('storage:get-workflow-disk-usage', async (_event, args: { workflowId: string }) => {
-    return getStorage().getWorkflowDiskUsage(args.workflowId)
-  })
-
-  ipcMain.handle('storage:delete-workflow-files', async (_event, args: { workflowId: string }) => {
-    getStorage().deleteWorkflowFiles(args.workflowId)
-  })
-
-  ipcMain.handle('storage:artifact-exists', async (_event, args: { artifactPath: string }) => {
-    return getStorage().artifactExists(args.artifactPath)
-  })
-
-  ipcMain.handle('storage:export-workflow-json', async (_event, args: { workflowId: string; workflowName: string; graphDefinition: unknown }) => {
-    const result = await dialog.showSaveDialog({
-      title: 'Save Workflow',
-      defaultPath: `${args.workflowName}.json`,
-      filters: [{ name: 'JSON', extensions: ['json'] }, { name: 'All Files', extensions: ['*'] }]
-    })
-    if (result.canceled || !result.filePath) return null
-    const data = { version: '1.0', id: args.workflowId, name: args.workflowName, exportedAt: new Date().toISOString(), graphDefinition: args.graphDefinition }
-    writeFileSync(result.filePath, JSON.stringify(data, null, 2), 'utf-8')
-    return result.filePath
-  })
-
-  ipcMain.handle('storage:open-artifacts-folder', async () => {
-    const rootPath = getStorage().getRootPath()
-    if (!existsSync(rootPath)) mkdirSync(rootPath, { recursive: true })
-    shell.openPath(rootPath)
-  })
-
-  ipcMain.handle('storage:open-workflow-folder', async (_event, args: { workflowId: string }) => {
-    const workflowPath = getStorage().getWorkflowDir(args.workflowId)
-    if (!existsSync(workflowPath)) mkdirSync(workflowPath, { recursive: true })
-    shell.openPath(workflowPath)
-  })
-
-  ipcMain.handle('storage:import-workflow-json', async () => {
+  ipcMain.handle(
+    "storage:get-workflow-snapshot",
+    async (_event, args: { workflowId: string }) => {
+      return getStorage().loadWorkflowSnapshot(args.workflowId);
+    },
+  );
+
+  ipcMain.handle(
+    "storage:get-execution-cache",
+    async (
+      _event,
+      args: { workflowId: string; nodeId: string; executionId: string },
+    ) => {
+      return null; // simplified — execution cache not used in new structure
+    },
+  );
+
+  ipcMain.handle(
+    "storage:list-node-executions",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      return getStorage().listNodeExecutions(args.workflowId, args.nodeId);
+    },
+  );
+
+  ipcMain.handle(
+    "storage:list-uploaded-files",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      return getStorage().listUploadedFiles(args.workflowId, args.nodeId);
+    },
+  );
+
+  ipcMain.handle(
+    "storage:save-uploaded-file",
+    async (
+      _event,
+      args: {
+        workflowId: string;
+        nodeId: string;
+        filename: string;
+        data: Buffer;
+      },
+    ) => {
+      return getStorage().saveUploadedFile(
+        args.workflowId,
+        args.nodeId,
+        args.filename,
+        Buffer.from(args.data),
+      );
+    },
+  );
+
+  ipcMain.handle(
+    "storage:save-node-output",
+    async (
+      _event,
+      args: {
+        workflowId: string;
+        nodeId: string;
+        prefix: string;
+        ext: string;
+        data: Buffer;
+      },
+    ) => {
+      return getStorage().saveNodeOutput(
+        args.workflowId,
+        args.nodeId,
+        args.prefix,
+        args.ext,
+        Buffer.from(args.data),
+      );
+    },
+  );
+
+  ipcMain.handle(
+    "storage:copy-uploaded-file",
+    async (
+      _event,
+      args: { workflowId: string; nodeId: string; sourcePath: string },
+    ) => {
+      return getStorage().copyUploadedFile(
+        args.workflowId,
+        args.nodeId,
+        args.sourcePath,
+      );
+    },
+  );
+
+  ipcMain.handle(
+    "storage:get-workflow-disk-usage",
+    async (_event, args: { workflowId: string }) => {
+      return getStorage().getWorkflowDiskUsage(args.workflowId);
+    },
+  );
+
+  ipcMain.handle(
+    "storage:delete-workflow-files",
+    async (_event, args: { workflowId: string }) => {
+      getStorage().deleteWorkflowFiles(args.workflowId);
+    },
+  );
+
+  ipcMain.handle(
+    "storage:artifact-exists",
+    async (_event, args: { artifactPath: string }) => {
+      return getStorage().artifactExists(args.artifactPath);
+    },
+  );
+
+  ipcMain.handle(
+    "storage:export-workflow-json",
+    async (
+      _event,
+      args: {
+        workflowId: string;
+        workflowName: string;
+        graphDefinition: unknown;
+      },
+    ) => {
+      const result = await dialog.showSaveDialog({
+        title: "Save Workflow",
+        defaultPath: `${args.workflowName}.json`,
+        filters: [
+          { name: "JSON", extensions: ["json"] },
+          { name: "All Files", extensions: ["*"] },
+        ],
+      });
+      if (result.canceled || !result.filePath) return null;
+      const data = {
+        version: "1.0",
+        id: args.workflowId,
+        name: args.workflowName,
+        exportedAt: new Date().toISOString(),
+        graphDefinition: args.graphDefinition,
+      };
+      writeFileSync(result.filePath, JSON.stringify(data, null, 2), "utf-8");
+      return result.filePath;
+    },
+  );
+
+  ipcMain.handle("storage:open-artifacts-folder", async () => {
+    const rootPath = getStorage().getRootPath();
+    if (!existsSync(rootPath)) mkdirSync(rootPath, { recursive: true });
+    shell.openPath(rootPath);
+  });
+
+  ipcMain.handle(
+    "storage:open-workflow-folder",
+    async (_event, args: { workflowId: string }) => {
+      const workflowPath = getStorage().getWorkflowDir(args.workflowId);
+      if (!existsSync(workflowPath))
+        mkdirSync(workflowPath, { recursive: true });
+      shell.openPath(workflowPath);
+    },
+  );
+
+  ipcMain.handle("storage:import-workflow-json", async () => {
     const result = await dialog.showOpenDialog({
-      title: 'Import Workflow',
-      filters: [{ name: 'JSON', extensions: ['json'] }, { name: 'All Files', extensions: ['*'] }],
-      properties: ['openFile']
-    })
-    if (result.canceled || result.filePaths.length === 0) return null
+      title: "Import Workflow",
+      filters: [
+        { name: "JSON", extensions: ["json"] },
+        { name: "All Files", extensions: ["*"] },
+      ],
+      properties: ["openFile"],
+    });
+    if (result.canceled || result.filePaths.length === 0) return null;
     try {
-      const raw = readFileSync(result.filePaths[0], 'utf-8')
-      const data = JSON.parse(raw)
+      const raw = readFileSync(result.filePaths[0], "utf-8");
+      const data = JSON.parse(raw);
       // Support both formats: { graphDefinition: {nodes, edges} } or { nodes, edges }
-      const rawGraphDef = data.graphDefinition ?? (data.nodes ? { nodes: data.nodes, edges: data.edges ?? [] } : null)
-      const name = data.name ?? 'Imported Workflow'
-      if (!rawGraphDef || !Array.isArray(rawGraphDef.nodes)) throw new Error('Invalid workflow file')
+      const rawGraphDef =
+        data.graphDefinition ??
+        (data.nodes ? { nodes: data.nodes, edges: data.edges ?? [] } : null);
+      const name = data.name ?? "Imported Workflow";
+      if (!rawGraphDef || !Array.isArray(rawGraphDef.nodes))
+        throw new Error("Invalid workflow file");
 
       // createWorkflow now auto-deduplicates names, so no need for manual conflict check
-      const importName = name + ' (imported)'
-      const wf = createWorkflow(importName)
-      const idMap = new Map<string, string>() // old ID → new UUID
+      const importName = name + " (imported)";
+      const wf = createWorkflow(importName);
+      const idMap = new Map<string, string>(); // old ID → new UUID
       for (const n of rawGraphDef.nodes) {
-        idMap.set(String((n as Record<string, unknown>).id), uuid())
+        idMap.set(String((n as Record<string, unknown>).id), uuid());
       }
 
-      const enrichedNodes = rawGraphDef.nodes.map((n: Record<string, unknown>) => {
-        const oldId = String(n.id)
-        const newId = idMap.get(oldId)!
-        const params = (n.params ?? {}) as Record<string, unknown>
-        const nodeType = String(n.nodeType ?? 'ai-task/run')
-        const position = (n.position as { x: number; y: number }) ?? { x: 200, y: 200 }
-
-        let label = nodeType
-        let modelInputSchema: unknown[] = []
-        if (nodeType === 'ai-task/run' && params.modelId) {
-          const model = getModelById(String(params.modelId))
-          if (model) {
-            label = `🤖 ${model.displayName}`
-            modelInputSchema = model.inputSchema
-          } else {
-            label = `🤖 ${String(params.modelId)}`
+      const enrichedNodes = rawGraphDef.nodes.map(
+        (n: Record<string, unknown>) => {
+          const oldId = String(n.id);
+          const newId = idMap.get(oldId)!;
+          const params = (n.params ?? {}) as Record<string, unknown>;
+          const nodeType = String(n.nodeType ?? "ai-task/run");
+          const position = (n.position as { x: number; y: number }) ?? {
+            x: 200,
+            y: 200,
+          };
+
+          let label = nodeType;
+          let modelInputSchema: unknown[] = [];
+          if (nodeType === "ai-task/run" && params.modelId) {
+            const model = getModelById(String(params.modelId));
+            if (model) {
+              label = `🤖 ${model.displayName}`;
+              modelInputSchema = model.inputSchema;
+            } else {
+              label = `🤖 ${String(params.modelId)}`;
+            }
+          } else if (nodeType === "input/media-upload") {
+            label = "📁 Upload";
+          } else if (nodeType === "input/text-input") {
+            label = "✏️ Text";
           }
-        } else if (nodeType === 'input/media-upload') {
-          label = '📁 Upload'
-        } else if (nodeType === 'input/text-input') {
-          label = '✏️ Text'
-        }
-
-        return {
-          id: newId,
+
+          return {
+            id: newId,
+            workflowId: wf.id,
+            nodeType,
+            position,
+            params: { ...params, __meta: { label, modelInputSchema } },
+            currentOutputId: null,
+          };
+        },
+      );
+
+      const enrichedEdges = (rawGraphDef.edges ?? []).map(
+        (e: Record<string, unknown>) => ({
+          id: uuid(),
           workflowId: wf.id,
-          nodeType,
-          position,
-          params: { ...params, __meta: { label, modelInputSchema } },
-          currentOutputId: null
-        }
-      })
-
-      const enrichedEdges = (rawGraphDef.edges ?? []).map((e: Record<string, unknown>) => ({
-        id: uuid(),
-        workflowId: wf.id,
-        sourceNodeId: idMap.get(String(e.sourceNodeId)) ?? String(e.sourceNodeId),
-        sourceOutputKey: String(e.sourceOutputKey ?? 'output'),
-        targetNodeId: idMap.get(String(e.targetNodeId)) ?? String(e.targetNodeId),
-        targetInputKey: String(e.targetInputKey ?? 'input')
-      }))
-
-      const graphDef = { nodes: enrichedNodes, edges: enrichedEdges }
-      updateWorkflow(wf.id, wf.name, graphDef)
-      getStorage().saveWorkflowSnapshot(wf.id, wf.name, graphDef)
-      return { id: wf.id, name: wf.name }
+          sourceNodeId:
+            idMap.get(String(e.sourceNodeId)) ?? String(e.sourceNodeId),
+          sourceOutputKey: String(e.sourceOutputKey ?? "output"),
+          targetNodeId:
+            idMap.get(String(e.targetNodeId)) ?? String(e.targetNodeId),
+          targetInputKey: String(e.targetInputKey ?? "input"),
+        }),
+      );
+
+      const graphDef = { nodes: enrichedNodes, edges: enrichedEdges };
+      updateWorkflow(wf.id, wf.name, graphDef);
+      getStorage().saveWorkflowSnapshot(wf.id, wf.name, graphDef);
+      return { id: wf.id, name: wf.name };
     } catch (err) {
-      console.error('[Storage] Import failed:', err)
-      return { error: err instanceof Error ? err.message : 'Import failed' }
+      console.error("[Storage] Import failed:", err);
+      return { error: err instanceof Error ? err.message : "Import failed" };
     }
-  })
+  });
 
-  ipcMain.handle('storage:delete-node-outputs', async (_event, args: { workflowId: string; nodeId: string }) => {
-    getStorage().deleteNodeOutputs(args.workflowId, args.nodeId)
-  })
+  ipcMain.handle(
+    "storage:delete-node-outputs",
+    async (_event, args: { workflowId: string; nodeId: string }) => {
+      getStorage().deleteNodeOutputs(args.workflowId, args.nodeId);
+    },
+  );
 
-  ipcMain.handle('storage:clean-workflow-outputs', async (_event, args: { workflowId: string }) => {
-    const mediaDir = getStorage().getMediaOutputDir(args.workflowId)
-    if (existsSync(mediaDir)) {
-      require('fs').rmSync(mediaDir, { recursive: true, force: true })
-    }
-  })
+  ipcMain.handle(
+    "storage:clean-workflow-outputs",
+    async (_event, args: { workflowId: string }) => {
+      const mediaDir = getStorage().getMediaOutputDir(args.workflowId);
+      if (existsSync(mediaDir)) {
+        require("fs").rmSync(mediaDir, { recursive: true, force: true });
+      }
+    },
+  );
 }
diff --git a/electron/workflow/ipc/template.ipc.ts b/electron/workflow/ipc/template.ipc.ts
index ea068efc..48e08aec 100644
--- a/electron/workflow/ipc/template.ipc.ts
+++ b/electron/workflow/ipc/template.ipc.ts
@@ -1,144 +1,196 @@
-import { ipcMain } from 'electron'
-import * as templateRepo from '../db/template.repo'
-import { migrateTemplatesSync } from '../services/template-migration'
-import { getFileTemplates, getFileTemplateById } from '../services/template-init'
-import type { 
-  Template, 
-  TemplateFilter, 
+import { ipcMain } from "electron";
+import * as templateRepo from "../db/template.repo";
+import { migrateTemplatesSync } from "../services/template-migration";
+import {
+  getFileTemplates,
+  getFileTemplateById,
+} from "../services/template-init";
+import type {
+  Template,
+  TemplateFilter,
   CreateTemplateInput,
-  TemplateExport 
-} from '../../../src/types/template'
+  TemplateExport,
+} from "../../../src/types/template";
 
 export function registerTemplateIpc(): void {
-  ipcMain.handle('template:migrate', async (_event, args: { legacyTemplatesJson: string; migrationComplete: boolean }) => {
-    return migrateTemplatesSync(args.legacyTemplatesJson, args.migrationComplete)
-  })
-  
-  ipcMain.handle('template:create', async (_event, input: CreateTemplateInput): Promise<Template> => {
-    validateCreateInput(input)
-    return templateRepo.createTemplate(input)
-  })
-  
-  ipcMain.handle('template:get', async (_event, args: { id: string }): Promise<Template | null> => {
-    // Check file templates first, then database
-    return getFileTemplateById(args.id) || templateRepo.getTemplateById(args.id)
-  })
-  
-  ipcMain.handle('template:query', async (_event, filter?: TemplateFilter): Promise<Template[]> => {
-    const dbTemplates = templateRepo.queryTemplates(filter)
-    const fileTemps = getFileTemplates(filter)
-    // Deduplicate: file templates take priority over DB templates with the same name
-    const fileNames = new Set(fileTemps.map(t => t.name))
-    const dedupedDb = dbTemplates.filter(t => !fileNames.has(t.name))
-    return [...fileTemps, ...dedupedDb]
-  })
-  
-  ipcMain.handle('template:update', async (_event, args: { id: string; updates: Partial<Template> }): Promise<void> => {
-    return templateRepo.updateTemplate(args.id, args.updates)
-  })
-  
-  ipcMain.handle('template:toggleFavorite', async (_event, args: { id: string }): Promise<boolean> => {
-    return templateRepo.toggleFavorite(args.id)
-  })
-  
-  ipcMain.handle('template:incrementUseCount', async (_event, args: { id: string }): Promise<void> => {
-    return templateRepo.incrementUseCount(args.id)
-  })
-  
-  ipcMain.handle('template:delete', async (_event, args: { id: string }): Promise<void> => {
-    if (args.id.startsWith('file-')) return // file templates cannot be deleted
-    return templateRepo.deleteTemplate(args.id)
-  })
-  
-  ipcMain.handle('template:deleteMany', async (_event, args: { ids: string[] }): Promise<void> => {
-    const deletable = args.ids.filter(id => !id.startsWith('file-'))
-    if (deletable.length === 0) return
-    return templateRepo.deleteTemplates(deletable)
-  })
-  
-  ipcMain.handle('template:export', async (_event, args: { ids?: string[] }): Promise<TemplateExport> => {
-    const templates = args.ids 
-      ? args.ids.map(id => templateRepo.getTemplateById(id)).filter(Boolean) as Template[]
-      : templateRepo.queryTemplates()
-    
-    return {
-      version: '1.0',
-      exportedAt: new Date().toISOString(),
-      templates
-    }
-  })
-  
-  ipcMain.handle('template:import', async (_event, args: { data: TemplateExport; mode: 'merge' | 'replace' }): Promise<{ imported: number; skipped: number }> => {
-    validateImportData(args.data)
-    
-    if (args.mode === 'replace') {
-      const existing = templateRepo.queryTemplates({ type: 'custom' })
-      templateRepo.deleteTemplates(existing.map(t => t.id))
-    }
-    
-    let imported = 0
-    let skipped = 0
-    
-    const existingKeys = new Set(
-      templateRepo.queryTemplates().map(t => `${t.templateType}:${t.name}`)
-    )
-    
-    for (const template of args.data.templates) {
-      const key = `${template.templateType}:${template.name}`
-      if (args.mode === 'merge' && existingKeys.has(key)) {
-        skipped++
-      } else {
-        templateRepo.createTemplate({
-          name: template.name,
-          description: template.description,
-          tags: template.tags,
-          type: 'custom',
-          templateType: template.templateType,
-          author: template.author,
-          thumbnail: template.thumbnail,
-          playgroundData: template.playgroundData,
-          workflowData: template.workflowData
-        })
-        imported++
+  ipcMain.handle(
+    "template:migrate",
+    async (
+      _event,
+      args: { legacyTemplatesJson: string; migrationComplete: boolean },
+    ) => {
+      return migrateTemplatesSync(
+        args.legacyTemplatesJson,
+        args.migrationComplete,
+      );
+    },
+  );
+
+  ipcMain.handle(
+    "template:create",
+    async (_event, input: CreateTemplateInput): Promise<Template> => {
+      validateCreateInput(input);
+      return templateRepo.createTemplate(input);
+    },
+  );
+
+  ipcMain.handle(
+    "template:get",
+    async (_event, args: { id: string }): Promise<Template | null> => {
+      // Check file templates first, then database
+      return (
+        getFileTemplateById(args.id) || templateRepo.getTemplateById(args.id)
+      );
+    },
+  );
+
+  ipcMain.handle(
+    "template:query",
+    async (_event, filter?: TemplateFilter): Promise<Template[]> => {
+      const dbTemplates = templateRepo.queryTemplates(filter);
+      const fileTemps = getFileTemplates(filter);
+      // Deduplicate: file templates take priority over DB templates with the same name
+      const fileNames = new Set(fileTemps.map((t) => t.name));
+      const dedupedDb = dbTemplates.filter((t) => !fileNames.has(t.name));
+      return [...fileTemps, ...dedupedDb];
+    },
+  );
+
+  ipcMain.handle(
+    "template:update",
+    async (
+      _event,
+      args: { id: string; updates: Partial<Template> },
+    ): Promise<void> => {
+      return templateRepo.updateTemplate(args.id, args.updates);
+    },
+  );
+
+  ipcMain.handle(
+    "template:toggleFavorite",
+    async (_event, args: { id: string }): Promise<boolean> => {
+      return templateRepo.toggleFavorite(args.id);
+    },
+  );
+
+  ipcMain.handle(
+    "template:incrementUseCount",
+    async (_event, args: { id: string }): Promise<void> => {
+      return templateRepo.incrementUseCount(args.id);
+    },
+  );
+
+  ipcMain.handle(
+    "template:delete",
+    async (_event, args: { id: string }): Promise<void> => {
+      if (args.id.startsWith("file-")) return; // file templates cannot be deleted
+      return templateRepo.deleteTemplate(args.id);
+    },
+  );
+
+  ipcMain.handle(
+    "template:deleteMany",
+    async (_event, args: { ids: string[] }): Promise<void> => {
+      const deletable = args.ids.filter((id) => !id.startsWith("file-"));
+      if (deletable.length === 0) return;
+      return templateRepo.deleteTemplates(deletable);
+    },
+  );
+
+  ipcMain.handle(
+    "template:export",
+    async (_event, args: { ids?: string[] }): Promise<TemplateExport> => {
+      const templates = args.ids
+        ? (args.ids
+            .map((id) => templateRepo.getTemplateById(id))
+            .filter(Boolean) as Template[])
+        : templateRepo.queryTemplates();
+
+      return {
+        version: "1.0",
+        exportedAt: new Date().toISOString(),
+        templates,
+      };
+    },
+  );
+
+  ipcMain.handle(
+    "template:import",
+    async (
+      _event,
+      args: { data: TemplateExport; mode: "merge" | "replace" },
+    ): Promise<{ imported: number; skipped: number }> => {
+      validateImportData(args.data);
+
+      if (args.mode === "replace") {
+        const existing = templateRepo.queryTemplates({ type: "custom" });
+        templateRepo.deleteTemplates(existing.map((t) => t.id));
       }
-    }
-    
-    return { imported, skipped }
-  })
+
+      let imported = 0;
+      let skipped = 0;
+
+      const existingKeys = new Set(
+        templateRepo.queryTemplates().map((t) => `${t.templateType}:${t.name}`),
+      );
+
+      for (const template of args.data.templates) {
+        const key = `${template.templateType}:${template.name}`;
+        if (args.mode === "merge" && existingKeys.has(key)) {
+          skipped++;
+        } else {
+          templateRepo.createTemplate({
+            name: template.name,
+            description: template.description,
+            tags: template.tags,
+            type: "custom",
+            templateType: template.templateType,
+            author: template.author,
+            thumbnail: template.thumbnail,
+            playgroundData: template.playgroundData,
+            workflowData: template.workflowData,
+          });
+          imported++;
+        }
+      }
+
+      return { imported, skipped };
+    },
+  );
 }
 
 function validateCreateInput(input: CreateTemplateInput): void {
-  if (!input.name || input.name.trim() === '') {
-    throw new Error('Template name is required')
+  if (!input.name || input.name.trim() === "") {
+    throw new Error("Template name is required");
   }
-  
-  if (!['playground', 'workflow'].includes(input.templateType)) {
-    throw new Error('Invalid templateType')
+
+  if (!["playground", "workflow"].includes(input.templateType)) {
+    throw new Error("Invalid templateType");
   }
-  
-  if (!['public', 'custom'].includes(input.type)) {
-    throw new Error('Invalid type')
+
+  if (!["public", "custom"].includes(input.type)) {
+    throw new Error("Invalid type");
   }
-  
-  if (input.templateType === 'playground' && !input.playgroundData) {
-    throw new Error('playgroundData is required for playground templates')
+
+  if (input.templateType === "playground" && !input.playgroundData) {
+    throw new Error("playgroundData is required for playground templates");
   }
-  
-  if (input.templateType === 'workflow' && !input.workflowData) {
-    throw new Error('workflowData is required for workflow templates')
+
+  if (input.templateType === "workflow" && !input.workflowData) {
+    throw new Error("workflowData is required for workflow templates");
   }
-  
+
   if (input.tags && !Array.isArray(input.tags)) {
-    throw new Error('tags must be an array')
+    throw new Error("tags must be an array");
   }
 }
 
 function validateImportData(data: TemplateExport): void {
   if (!data.templates || !Array.isArray(data.templates)) {
-    throw new Error('Invalid import data: missing templates array')
+    throw new Error("Invalid import data: missing templates array");
   }
-  
+
   if (!data.version) {
-    throw new Error('Invalid import data: missing version')
+    throw new Error("Invalid import data: missing version");
   }
 }
diff --git a/electron/workflow/ipc/upload.ipc.ts b/electron/workflow/ipc/upload.ipc.ts
index b9963556..dfdf0ae9 100644
--- a/electron/workflow/ipc/upload.ipc.ts
+++ b/electron/workflow/ipc/upload.ipc.ts
@@ -1,16 +1,22 @@
 /**
  * Upload IPC handlers — file upload to WaveSpeed CDN.
  */
-import { ipcMain } from 'electron'
-import { getWaveSpeedClient } from '../services/service-locator'
+import { ipcMain } from "electron";
+import { getWaveSpeedClient } from "../services/service-locator";
 
 export function registerUploadIpc(): void {
-  ipcMain.handle('upload:file', async (_event, args: { fileData: ArrayBuffer; filename: string }): Promise<string> => {
-    const ws = getWaveSpeedClient()
-    const buffer = Buffer.from(args.fileData)
-    const blob = new Blob([buffer])
-    const file = new File([blob], args.filename)
-    const url = await ws.uploadFile(file, args.filename)
-    return url
-  })
+  ipcMain.handle(
+    "upload:file",
+    async (
+      _event,
+      args: { fileData: ArrayBuffer; filename: string },
+    ): Promise<string> => {
+      const ws = getWaveSpeedClient();
+      const buffer = Buffer.from(args.fileData);
+      const blob = new Blob([buffer]);
+      const file = new File([blob], args.filename);
+      const url = await ws.uploadFile(file, args.filename);
+      return url;
+    },
+  );
 }
diff --git a/electron/workflow/ipc/workflow.ipc.ts b/electron/workflow/ipc/workflow.ipc.ts
index 818e990f..cfe70b81 100644
--- a/electron/workflow/ipc/workflow.ipc.ts
+++ b/electron/workflow/ipc/workflow.ipc.ts
@@ -1,43 +1,68 @@
 /**
  * Workflow IPC handlers — CRUD operations.
  */
-import { ipcMain } from 'electron'
-import * as workflowRepo from '../db/workflow.repo'
-import type { CreateWorkflowInput, SaveWorkflowInput, WorkflowSummary } from '../../../src/workflow/types/ipc'
-import type { Workflow } from '../../../src/workflow/types/workflow'
+import { ipcMain } from "electron";
+import * as workflowRepo from "../db/workflow.repo";
+import type {
+  CreateWorkflowInput,
+  SaveWorkflowInput,
+  WorkflowSummary,
+} from "../../../src/workflow/types/ipc";
+import type { Workflow } from "../../../src/workflow/types/workflow";
 
 export function registerWorkflowIpc(): void {
-  ipcMain.handle('workflow:create', async (_event, input: CreateWorkflowInput): Promise<Workflow> => {
-    return workflowRepo.createWorkflow(input.name)
-  })
+  ipcMain.handle(
+    "workflow:create",
+    async (_event, input: CreateWorkflowInput): Promise<Workflow> => {
+      return workflowRepo.createWorkflow(input.name);
+    },
+  );
 
-  ipcMain.handle('workflow:save', async (_event, input: SaveWorkflowInput): Promise<void> => {
-    const graphDef = { nodes: input.nodes, edges: input.edges }
-    workflowRepo.updateWorkflow(input.id, input.name, graphDef, input.status)
-  })
+  ipcMain.handle(
+    "workflow:save",
+    async (_event, input: SaveWorkflowInput): Promise<void> => {
+      const graphDef = { nodes: input.nodes, edges: input.edges };
+      workflowRepo.updateWorkflow(input.id, input.name, graphDef, input.status);
+    },
+  );
 
-  ipcMain.handle('workflow:load', async (_event, args: { id: string }): Promise<Workflow> => {
-    const wf = workflowRepo.getWorkflowById(args.id)
-    if (!wf) throw new Error(`Workflow ${args.id} not found`)
-    return wf
-  })
+  ipcMain.handle(
+    "workflow:load",
+    async (_event, args: { id: string }): Promise<Workflow> => {
+      const wf = workflowRepo.getWorkflowById(args.id);
+      if (!wf) throw new Error(`Workflow ${args.id} not found`);
+      return wf;
+    },
+  );
 
-  ipcMain.handle('workflow:list', async (): Promise<WorkflowSummary[]> => {
-    return workflowRepo.listWorkflows()
-  })
+  ipcMain.handle("workflow:list", async (): Promise<WorkflowSummary[]> => {
+    return workflowRepo.listWorkflows();
+  });
 
-  ipcMain.handle('workflow:rename', async (_event, args: { id: string; name: string }): Promise<{ finalName: string }> => {
-    workflowRepo.renameWorkflow(args.id, args.name)
-    // Return the actual name (may have been deduplicated)
-    const wf = workflowRepo.getWorkflowById(args.id)
-    return { finalName: wf?.name ?? args.name }
-  })
+  ipcMain.handle(
+    "workflow:rename",
+    async (
+      _event,
+      args: { id: string; name: string },
+    ): Promise<{ finalName: string }> => {
+      workflowRepo.renameWorkflow(args.id, args.name);
+      // Return the actual name (may have been deduplicated)
+      const wf = workflowRepo.getWorkflowById(args.id);
+      return { finalName: wf?.name ?? args.name };
+    },
+  );
 
-  ipcMain.handle('workflow:delete', async (_event, args: { id: string }): Promise<void> => {
-    workflowRepo.deleteWorkflow(args.id)
-  })
+  ipcMain.handle(
+    "workflow:delete",
+    async (_event, args: { id: string }): Promise<void> => {
+      workflowRepo.deleteWorkflow(args.id);
+    },
+  );
 
-  ipcMain.handle('workflow:duplicate', async (_event, args: { id: string }): Promise<Workflow> => {
-    return workflowRepo.duplicateWorkflow(args.id)
-  })
+  ipcMain.handle(
+    "workflow:duplicate",
+    async (_event, args: { id: string }): Promise<Workflow> => {
+      return workflowRepo.duplicateWorkflow(args.id);
+    },
+  );
 }
diff --git a/electron/workflow/nodes/ai-task/run.ts b/electron/workflow/nodes/ai-task/run.ts
index 96da497a..88ade344 100644
--- a/electron/workflow/nodes/ai-task/run.ts
+++ b/electron/workflow/nodes/ai-task/run.ts
@@ -2,63 +2,96 @@
  * AI Task node — universal node for all WaveSpeed AI models.
  * Uses Desktop's API client instead of improver's WaveSpeedClient.
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
-import { getWaveSpeedClient } from '../../services/service-locator'
-import { getModelById } from '../../services/model-list'
-import { normalizePayloadArrays } from '../../../../src/lib/schemaToForm'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
+import { getWaveSpeedClient } from "../../services/service-locator";
+import { getModelById } from "../../services/model-list";
+import { normalizePayloadArrays } from "../../../../src/lib/schemaToForm";
 
 export const aiTaskDef: NodeTypeDefinition = {
-  type: 'ai-task/run',
-  category: 'ai-task',
-  label: 'Generate',
+  type: "ai-task/run",
+  category: "ai-task",
+  label: "Generate",
   inputs: [],
   outputs: [
-    { key: 'output', label: 'Output', dataType: 'url', required: true }
+    { key: "output", label: "Output", dataType: "url", required: true },
   ],
   params: [
-    { key: 'modelId', label: 'Model', type: 'string', dataType: 'text', connectable: false, default: '' }
-  ]
-}
+    {
+      key: "modelId",
+      label: "Model",
+      type: "string",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+  ],
+};
 
 export class AITaskHandler extends BaseNodeHandler {
-  constructor() { super(aiTaskDef) }
+  constructor() {
+    super(aiTaskDef);
+  }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const modelId = String(ctx.params.modelId ?? '')
+    const start = Date.now();
+    const modelId = String(ctx.params.modelId ?? "");
 
     if (!modelId) {
-      return { status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0, error: 'No model selected.' }
+      return {
+        status: "error",
+        outputs: {},
+        durationMs: Date.now() - start,
+        cost: 0,
+        error: "No model selected.",
+      };
     }
 
-    const apiParams = this.buildApiParams(ctx)
-    ctx.onProgress(5, `Running ${modelId}...`)
+    const apiParams = this.buildApiParams(ctx);
+    ctx.onProgress(5, `Running ${modelId}...`);
 
     try {
-      const client = getWaveSpeedClient()
+      const client = getWaveSpeedClient();
       // Use Desktop's apiClient.run() which handles submit + poll; pass abortSignal so Stop cancels in-flight request/polling
-      const result = await client.run(modelId, apiParams, { signal: ctx.abortSignal })
+      const result = await client.run(modelId, apiParams, {
+        signal: ctx.abortSignal,
+      });
 
       // Normalize first output to URL string (API may return string or { url: "..." })
-      const firstOutput = Array.isArray(result.outputs) && result.outputs.length > 0 ? result.outputs[0] : null
-      const outputUrl = firstOutput == null ? '' : (typeof firstOutput === 'object' && firstOutput !== null && typeof (firstOutput as { url?: string }).url === 'string'
-        ? (firstOutput as { url: string }).url
-        : String(firstOutput))
+      const firstOutput =
+        Array.isArray(result.outputs) && result.outputs.length > 0
+          ? result.outputs[0]
+          : null;
+      const outputUrl =
+        firstOutput == null
+          ? ""
+          : typeof firstOutput === "object" &&
+              firstOutput !== null &&
+              typeof (firstOutput as { url?: string }).url === "string"
+            ? (firstOutput as { url: string }).url
+            : String(firstOutput);
 
       // Build resultUrls array with same normalization for each item (e.g. z-image/turbo)
-      const rawOutputs = Array.isArray(result.outputs) ? result.outputs : []
-      const resultUrls = rawOutputs.map((o: unknown) =>
-        typeof o === 'object' && o !== null && typeof (o as { url?: string }).url === 'string'
-          ? (o as { url: string }).url
-          : String(o)
-      ).filter((u: string) => u && u !== '[object Object]')
+      const rawOutputs = Array.isArray(result.outputs) ? result.outputs : [];
+      const resultUrls = rawOutputs
+        .map((o: unknown) =>
+          typeof o === "object" &&
+          o !== null &&
+          typeof (o as { url?: string }).url === "string"
+            ? (o as { url: string }).url
+            : String(o),
+        )
+        .filter((u: string) => u && u !== "[object Object]");
 
-      const model = getModelById(modelId)
-      const cost = model?.costPerRun ?? 0
+      const model = getModelById(modelId);
+      const cost = model?.costPerRun ?? 0;
 
       return {
-        status: 'success',
+        status: "success",
         outputs: { output: outputUrl },
         resultPath: outputUrl,
         resultMetadata: {
@@ -67,67 +100,85 @@ export class AITaskHandler extends BaseNodeHandler {
           resultUrl: outputUrl,
           resultUrls: resultUrls.length > 0 ? resultUrls : [outputUrl],
           modelId,
-          raw: result
+          raw: result,
         },
         durationMs: Date.now() - start,
-        cost
-      }
+        cost,
+      };
     } catch (error) {
       return {
-        status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        status: "error",
+        outputs: {},
+        durationMs: Date.now() - start,
+        cost: 0,
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 
   estimateCost(params: Record<string, unknown>): number {
-    const modelId = String(params.modelId ?? '')
-    if (!modelId) return 0
-    const model = getModelById(modelId)
-    return model?.costPerRun ?? 0
+    const modelId = String(params.modelId ?? "");
+    if (!modelId) return 0;
+    const model = getModelById(modelId);
+    return model?.costPerRun ?? 0;
   }
 
   private buildApiParams(ctx: NodeExecutionContext): Record<string, unknown> {
-    const params: Record<string, unknown> = {}
+    const params: Record<string, unknown> = {};
     // Internal keys to skip
-    const skipKeys = new Set(['modelId', '__meta', '__locks', '__nodeWidth', '__nodeHeight'])
+    const skipKeys = new Set([
+      "modelId",
+      "__meta",
+      "__locks",
+      "__nodeWidth",
+      "__nodeHeight",
+    ]);
 
     // First, fill in schema defaults so params that the user never touched
     // (but are visible in the UI with their default value) are still sent.
-    const meta = ctx.params.__meta as Record<string, unknown> | undefined
-    const schema = (meta?.modelInputSchema ?? []) as Array<{ name: string; default?: unknown; enum?: string[] }>
+    const meta = ctx.params.__meta as Record<string, unknown> | undefined;
+    const schema = (meta?.modelInputSchema ?? []) as Array<{
+      name: string;
+      default?: unknown;
+      enum?: string[];
+    }>;
     for (const s of schema) {
-      if (skipKeys.has(s.name) || s.name.startsWith('__')) continue
-      if (s.default !== undefined && s.default !== null && s.default !== '') {
-        params[s.name] = s.default
+      if (skipKeys.has(s.name) || s.name.startsWith("__")) continue;
+      if (s.default !== undefined && s.default !== null && s.default !== "") {
+        params[s.name] = s.default;
       } else if (s.enum && s.enum.length > 0) {
         // Select/enum fields show the first option by default in the UI
-        params[s.name] = s.enum[0]
+        params[s.name] = s.enum[0];
       }
     }
 
     // Then overlay with actual user-set params (these take priority)
     for (const [key, value] of Object.entries(ctx.params)) {
-      if (skipKeys.has(key) || key.startsWith('__')) continue
-      if (value !== undefined && value !== null && value !== '') params[key] = value
+      if (skipKeys.has(key) || key.startsWith("__")) continue;
+      if (value !== undefined && value !== null && value !== "")
+        params[key] = value;
     }
     // Merge resolved inputs (from upstream connections) — these override local params
     for (const [key, value] of Object.entries(ctx.inputs)) {
-      if (key.startsWith('__arrayInput_')) {
+      if (key.startsWith("__arrayInput_")) {
         // Array input map: merge connected items into the existing param array
-        const paramName = key.slice('__arrayInput_'.length)
-        const indexMap = value as Record<number, string>
-        const existing = Array.isArray(params[paramName]) ? [...params[paramName] as unknown[]] : []
+        const paramName = key.slice("__arrayInput_".length);
+        const indexMap = value as Record<number, string>;
+        const existing = Array.isArray(params[paramName])
+          ? [...(params[paramName] as unknown[])]
+          : [];
         for (const [idx, val] of Object.entries(indexMap)) {
-          existing[Number(idx)] = val
+          existing[Number(idx)] = val;
         }
         // Filter out empty/null entries — API expects only valid values
-        params[paramName] = existing.filter(v => v !== undefined && v !== null && v !== '')
-      } else if (value !== undefined && value !== null && value !== '') {
-        params[key] = Array.isArray(value) ? value : String(value)
+        params[paramName] = existing.filter(
+          (v) => v !== undefined && v !== null && v !== "",
+        );
+      } else if (value !== undefined && value !== null && value !== "") {
+        params[key] = Array.isArray(value) ? value : String(value);
       }
     }
-    if (typeof params.seed === 'number' && params.seed < 0) delete params.seed
-    return normalizePayloadArrays(params, [])
+    if (typeof params.seed === "number" && params.seed < 0) delete params.seed;
+    return normalizePayloadArrays(params, []);
   }
 }
diff --git a/electron/workflow/nodes/base.ts b/electron/workflow/nodes/base.ts
index 1e44fbda..346c6e88 100644
--- a/electron/workflow/nodes/base.ts
+++ b/electron/workflow/nodes/base.ts
@@ -1,61 +1,73 @@
 /**
  * Node handler interface and base class.
  */
-import type { NodeTypeDefinition } from '../../../src/workflow/types/node-defs'
+import type { NodeTypeDefinition } from "../../../src/workflow/types/node-defs";
 
 export interface NodeExecutionContext {
-  nodeId: string
-  nodeType: string
-  params: Record<string, unknown>
-  inputs: Record<string, unknown>
-  workflowId: string
-  abortSignal: AbortSignal
-  onProgress: (progress: number, message?: string) => void
+  nodeId: string;
+  nodeType: string;
+  params: Record<string, unknown>;
+  inputs: Record<string, unknown>;
+  workflowId: string;
+  abortSignal: AbortSignal;
+  onProgress: (progress: number, message?: string) => void;
 }
 
 export interface NodeExecutionResult {
-  status: 'success' | 'error'
-  outputs: Record<string, unknown>
-  resultPath?: string
-  resultMetadata?: Record<string, unknown>
-  durationMs: number
-  cost: number
-  error?: string
+  status: "success" | "error";
+  outputs: Record<string, unknown>;
+  resultPath?: string;
+  resultMetadata?: Record<string, unknown>;
+  durationMs: number;
+  cost: number;
+  error?: string;
 }
 
 export interface ValidationResult {
-  valid: boolean
-  errors: string[]
+  valid: boolean;
+  errors: string[];
 }
 
 export interface NodeHandler {
-  execute(context: NodeExecutionContext): Promise<NodeExecutionResult>
-  estimateCost(params: Record<string, unknown>): number
-  validate(params: Record<string, unknown>): ValidationResult
+  execute(context: NodeExecutionContext): Promise<NodeExecutionResult>;
+  estimateCost(params: Record<string, unknown>): number;
+  validate(params: Record<string, unknown>): ValidationResult;
 }
 
 export abstract class BaseNodeHandler implements NodeHandler {
   constructor(public readonly definition: NodeTypeDefinition) {}
 
-  abstract execute(context: NodeExecutionContext): Promise<NodeExecutionResult>
+  abstract execute(context: NodeExecutionContext): Promise<NodeExecutionResult>;
 
   estimateCost(_params: Record<string, unknown>): number {
-    return this.definition.costPerExecution ?? 0
+    return this.definition.costPerExecution ?? 0;
   }
 
   validate(params: Record<string, unknown>): ValidationResult {
-    const errors: string[] = []
+    const errors: string[] = [];
     for (const paramDef of this.definition.params) {
       if (paramDef.validation) {
-        const val = params[paramDef.key]
-        if (paramDef.validation.min !== undefined && typeof val === 'number' && val < paramDef.validation.min) {
-          errors.push(`${paramDef.label}: minimum is ${paramDef.validation.min}`)
+        const val = params[paramDef.key];
+        if (
+          paramDef.validation.min !== undefined &&
+          typeof val === "number" &&
+          val < paramDef.validation.min
+        ) {
+          errors.push(
+            `${paramDef.label}: minimum is ${paramDef.validation.min}`,
+          );
         }
-        if (paramDef.validation.max !== undefined && typeof val === 'number' && val > paramDef.validation.max) {
-          errors.push(`${paramDef.label}: maximum is ${paramDef.validation.max}`)
+        if (
+          paramDef.validation.max !== undefined &&
+          typeof val === "number" &&
+          val > paramDef.validation.max
+        ) {
+          errors.push(
+            `${paramDef.label}: maximum is ${paramDef.validation.max}`,
+          );
         }
       }
     }
-    return { valid: errors.length === 0, errors }
+    return { valid: errors.length === 0, errors };
   }
 }
diff --git a/electron/workflow/nodes/free-tool/audio-converter/index.ts b/electron/workflow/nodes/free-tool/audio-converter/index.ts
index 14ebe0ca..b78f3efa 100644
--- a/electron/workflow/nodes/free-tool/audio-converter/index.ts
+++ b/electron/workflow/nodes/free-tool/audio-converter/index.ts
@@ -1,81 +1,100 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { createOutputPath, resolveInputToLocalFile, runFfmpeg, toLocalAssetUrl } from '../shared/media-utils'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import {
+  createOutputPath,
+  resolveInputToLocalFile,
+  runFfmpeg,
+  toLocalAssetUrl,
+} from "../shared/media-utils";
 
-const AUDIO_FORMATS = ['mp3', 'wav', 'flac', 'm4a', 'ogg'] as const
+const AUDIO_FORMATS = ["mp3", "wav", "flac", "m4a", "ogg"] as const;
 
 export const audioConverterDef: NodeTypeDefinition = {
-  type: 'free-tool/audio-converter',
-  category: 'free-tool',
-  label: 'Audio Converter',
-  inputs: [{ key: 'input', label: 'Audio', dataType: 'audio', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'audio', required: true }],
+  type: "free-tool/audio-converter",
+  category: "free-tool",
+  label: "Audio Converter",
+  inputs: [{ key: "input", label: "Audio", dataType: "audio", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "audio", required: true },
+  ],
   params: [
     {
-      key: 'format',
-      label: 'Format',
-      type: 'select',
-      default: 'mp3',
-      dataType: 'text',
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "mp3",
+      dataType: "text",
       connectable: false,
-      options: AUDIO_FORMATS.map(v => ({ label: v.toUpperCase(), value: v }))
-    }
-  ]
-}
+      options: AUDIO_FORMATS.map((v) => ({ label: v.toUpperCase(), value: v })),
+    },
+  ],
+};
 
 export class AudioConverterHandler extends BaseNodeHandler {
   constructor() {
-    super(audioConverterDef)
+    super(audioConverterDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const format = String(ctx.params.format ?? 'mp3').toLowerCase()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const format = String(ctx.params.format ?? "mp3").toLowerCase();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!AUDIO_FORMATS.includes(format as (typeof AUDIO_FORMATS)[number])) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: `Unsupported audio format: ${format}`
-      }
+        error: `Unsupported audio format: ${format}`,
+      };
     }
 
-    const resolved = await resolveInputToLocalFile(input, ctx.workflowId, ctx.nodeId)
-    const outputPath = createOutputPath(ctx.workflowId, ctx.nodeId, 'audio_converter', format)
+    const resolved = await resolveInputToLocalFile(
+      input,
+      ctx.workflowId,
+      ctx.nodeId,
+    );
+    const outputPath = createOutputPath(
+      ctx.workflowId,
+      ctx.nodeId,
+      "audio_converter",
+      format,
+    );
 
     try {
-      ctx.onProgress(10, 'Preparing audio conversion...')
-      await runFfmpeg(['-y', '-i', resolved.localPath, outputPath])
-      ctx.onProgress(100, 'Audio conversion completed.')
-      const outputUrl = toLocalAssetUrl(outputPath)
+      ctx.onProgress(10, "Preparing audio conversion...");
+      await runFfmpeg(["-y", "-i", resolved.localPath, outputPath]);
+      ctx.onProgress(100, "Audio conversion completed.");
+      const outputUrl = toLocalAssetUrl(outputPath);
 
       return {
-        status: 'success',
+        status: "success",
         outputs: { output: outputUrl },
         resultPath: outputUrl,
         resultMetadata: {
           output: outputUrl,
           resultUrl: outputUrl,
           resultUrls: [outputUrl],
-          outputPath
+          outputPath,
         },
         durationMs: Date.now() - start,
-        cost: 0
-      }
+        cost: 0,
+      };
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     } finally {
-      resolved.cleanup()
+      resolved.cleanup();
     }
   }
 }
-
diff --git a/electron/workflow/nodes/free-tool/background-remover/index.ts b/electron/workflow/nodes/free-tool/background-remover/index.ts
index b443a8e3..cd32f36c 100644
--- a/electron/workflow/nodes/free-tool/background-remover/index.ts
+++ b/electron/workflow/nodes/free-tool/background-remover/index.ts
@@ -1,70 +1,76 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 const MODEL_OPTIONS = [
-  { label: 'ISNet Quint8 (fast)', value: 'isnet_quint8' },
-  { label: 'ISNet FP16', value: 'isnet_fp16' },
-  { label: 'ISNet (quality)', value: 'isnet' }
-]
+  { label: "ISNet Quint8 (fast)", value: "isnet_quint8" },
+  { label: "ISNet FP16", value: "isnet_fp16" },
+  { label: "ISNet (quality)", value: "isnet" },
+];
 
 export const backgroundRemoverDef: NodeTypeDefinition = {
-  type: 'free-tool/background-remover',
-  category: 'free-tool',
-  label: 'Background Remover',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
+  type: "free-tool/background-remover",
+  category: "free-tool",
+  label: "Background Remover",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
   params: [
     {
-      key: 'model',
-      label: 'Model',
-      type: 'select',
-      default: 'isnet_fp16',
-      dataType: 'text',
+      key: "model",
+      label: "Model",
+      type: "select",
+      default: "isnet_fp16",
+      dataType: "text",
       connectable: false,
-      options: MODEL_OPTIONS
-    }
-  ]
-}
+      options: MODEL_OPTIONS,
+    },
+  ],
+};
 
 export class BackgroundRemoverHandler extends BaseNodeHandler {
   constructor() {
-    super(backgroundRemoverDef)
+    super(backgroundRemoverDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input provided.'
-      }
+        error: "No input provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running background remover in renderer...')
+      ctx.onProgress(0, "Running background remover in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/background-remover',
+        nodeType: "free-tool/background-remover",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { input },
-        params: { model: ctx.params.model ?? 'isnet_fp16' }
-      })
-      ctx.onProgress(100, 'Background removal completed.')
-      return result
+        params: { model: ctx.params.model ?? "isnet_fp16" },
+      });
+      ctx.onProgress(100, "Background removal completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/face-enhancer/index.ts b/electron/workflow/nodes/free-tool/face-enhancer/index.ts
index 2bacf6ab..2519129b 100644
--- a/electron/workflow/nodes/free-tool/face-enhancer/index.ts
+++ b/electron/workflow/nodes/free-tool/face-enhancer/index.ts
@@ -1,54 +1,60 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 export const faceEnhancerDef: NodeTypeDefinition = {
-  type: 'free-tool/face-enhancer',
-  category: 'free-tool',
-  label: 'Face Enhancer',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
-  params: []
-}
+  type: "free-tool/face-enhancer",
+  category: "free-tool",
+  label: "Face Enhancer",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
+  params: [],
+};
 
 export class FaceEnhancerHandler extends BaseNodeHandler {
   constructor() {
-    super(faceEnhancerDef)
+    super(faceEnhancerDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input provided.'
-      }
+        error: "No input provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running face enhancer in renderer...')
+      ctx.onProgress(0, "Running face enhancer in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/face-enhancer',
+        nodeType: "free-tool/face-enhancer",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { input },
-        params: {}
-      })
-      ctx.onProgress(100, 'Face enhancement completed.')
-      return result
+        params: {},
+      });
+      ctx.onProgress(100, "Face enhancement completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/face-swapper/index.ts b/electron/workflow/nodes/free-tool/face-swapper/index.ts
index c179edad..c80a272c 100644
--- a/electron/workflow/nodes/free-tool/face-swapper/index.ts
+++ b/electron/workflow/nodes/free-tool/face-swapper/index.ts
@@ -1,67 +1,73 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 export const faceSwapperDef: NodeTypeDefinition = {
-  type: 'free-tool/face-swapper',
-  category: 'free-tool',
-  label: 'Face Swapper',
+  type: "free-tool/face-swapper",
+  category: "free-tool",
+  label: "Face Swapper",
   inputs: [
-    { key: 'source', label: 'Source Face', dataType: 'image', required: true },
-    { key: 'target', label: 'Target Image', dataType: 'image', required: true }
+    { key: "source", label: "Source Face", dataType: "image", required: true },
+    { key: "target", label: "Target Image", dataType: "image", required: true },
   ],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
-  params: []
-}
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
+  params: [],
+};
 
 export class FaceSwapperHandler extends BaseNodeHandler {
   constructor() {
-    super(faceSwapperDef)
+    super(faceSwapperDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const source = String(ctx.inputs.source ?? ctx.params.source ?? '')
-    const target = String(ctx.inputs.target ?? ctx.params.target ?? '')
+    const start = Date.now();
+    const source = String(ctx.inputs.source ?? ctx.params.source ?? "");
+    const target = String(ctx.inputs.target ?? ctx.params.target ?? "");
 
     if (!source) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No source image provided.'
-      }
+        error: "No source image provided.",
+      };
     }
     if (!target) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No target image provided.'
-      }
+        error: "No target image provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running face swapper in renderer...')
+      ctx.onProgress(0, "Running face swapper in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/face-swapper',
+        nodeType: "free-tool/face-swapper",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { source, target },
-        params: {}
-      })
-      ctx.onProgress(100, 'Face swap completed.')
-      return result
+        params: {},
+      });
+      ctx.onProgress(100, "Face swap completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/image-converter/index.ts b/electron/workflow/nodes/free-tool/image-converter/index.ts
index e6a3681f..8805f75e 100644
--- a/electron/workflow/nodes/free-tool/image-converter/index.ts
+++ b/electron/workflow/nodes/free-tool/image-converter/index.ts
@@ -1,81 +1,107 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { createOutputPath, resolveInputToLocalFile, runFfmpeg, toLocalAssetUrl } from '../shared/media-utils'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import {
+  createOutputPath,
+  resolveInputToLocalFile,
+  runFfmpeg,
+  toLocalAssetUrl,
+} from "../shared/media-utils";
 
-const IMAGE_FORMATS = ['png', 'jpg', 'webp', 'gif', 'bmp'] as const
+const IMAGE_FORMATS = ["png", "jpg", "webp", "gif", "bmp"] as const;
 
 export const imageConverterDef: NodeTypeDefinition = {
-  type: 'free-tool/image-converter',
-  category: 'free-tool',
-  label: 'Image Converter',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
+  type: "free-tool/image-converter",
+  category: "free-tool",
+  label: "Image Converter",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
   params: [
     {
-      key: 'format',
-      label: 'Format',
-      type: 'select',
-      default: 'png',
-      dataType: 'text',
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "png",
+      dataType: "text",
       connectable: false,
-      options: IMAGE_FORMATS.map(v => ({ label: v.toUpperCase(), value: v }))
-    }
-  ]
-}
+      options: IMAGE_FORMATS.map((v) => ({ label: v.toUpperCase(), value: v })),
+    },
+  ],
+};
 
 export class ImageConverterHandler extends BaseNodeHandler {
   constructor() {
-    super(imageConverterDef)
+    super(imageConverterDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const format = String(ctx.params.format ?? 'png').toLowerCase()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const format = String(ctx.params.format ?? "png").toLowerCase();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!IMAGE_FORMATS.includes(format as (typeof IMAGE_FORMATS)[number])) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: `Unsupported image format: ${format}`
-      }
+        error: `Unsupported image format: ${format}`,
+      };
     }
 
-    const resolved = await resolveInputToLocalFile(input, ctx.workflowId, ctx.nodeId)
-    const outputPath = createOutputPath(ctx.workflowId, ctx.nodeId, 'image_converter', format)
+    const resolved = await resolveInputToLocalFile(
+      input,
+      ctx.workflowId,
+      ctx.nodeId,
+    );
+    const outputPath = createOutputPath(
+      ctx.workflowId,
+      ctx.nodeId,
+      "image_converter",
+      format,
+    );
 
     try {
-      ctx.onProgress(10, 'Preparing image conversion...')
-      await runFfmpeg(['-y', '-i', resolved.localPath, '-frames:v', '1', outputPath])
-      ctx.onProgress(100, 'Image conversion completed.')
-      const outputUrl = toLocalAssetUrl(outputPath)
+      ctx.onProgress(10, "Preparing image conversion...");
+      await runFfmpeg([
+        "-y",
+        "-i",
+        resolved.localPath,
+        "-frames:v",
+        "1",
+        outputPath,
+      ]);
+      ctx.onProgress(100, "Image conversion completed.");
+      const outputUrl = toLocalAssetUrl(outputPath);
 
       return {
-        status: 'success',
+        status: "success",
         outputs: { output: outputUrl },
         resultPath: outputUrl,
         resultMetadata: {
           output: outputUrl,
           resultUrl: outputUrl,
           resultUrls: [outputUrl],
-          outputPath
+          outputPath,
         },
         durationMs: Date.now() - start,
-        cost: 0
-      }
+        cost: 0,
+      };
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     } finally {
-      resolved.cleanup()
+      resolved.cleanup();
     }
   }
 }
-
diff --git a/electron/workflow/nodes/free-tool/image-enhancer/index.ts b/electron/workflow/nodes/free-tool/image-enhancer/index.ts
index 4ed25c2d..28d45089 100644
--- a/electron/workflow/nodes/free-tool/image-enhancer/index.ts
+++ b/electron/workflow/nodes/free-tool/image-enhancer/index.ts
@@ -1,87 +1,93 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 const MODEL_OPTIONS = [
-  { label: 'Slim (fast)', value: 'slim' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'Thick (quality)', value: 'thick' }
-]
+  { label: "Slim (fast)", value: "slim" },
+  { label: "Medium", value: "medium" },
+  { label: "Thick (quality)", value: "thick" },
+];
 const SCALE_OPTIONS = [
-  { label: '2×', value: '2x' },
-  { label: '3×', value: '3x' },
-  { label: '4×', value: '4x' }
-]
+  { label: "2×", value: "2x" },
+  { label: "3×", value: "3x" },
+  { label: "4×", value: "4x" },
+];
 
 export const imageEnhancerDef: NodeTypeDefinition = {
-  type: 'free-tool/image-enhancer',
-  category: 'free-tool',
-  label: 'Image Enhancer',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
+  type: "free-tool/image-enhancer",
+  category: "free-tool",
+  label: "Image Enhancer",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
   params: [
     {
-      key: 'model',
-      label: 'Model',
-      type: 'select',
-      default: 'slim',
-      dataType: 'text',
+      key: "model",
+      label: "Model",
+      type: "select",
+      default: "slim",
+      dataType: "text",
       connectable: false,
-      options: MODEL_OPTIONS
+      options: MODEL_OPTIONS,
     },
     {
-      key: 'scale',
-      label: 'Scale',
-      type: 'select',
-      default: '2x',
-      dataType: 'text',
+      key: "scale",
+      label: "Scale",
+      type: "select",
+      default: "2x",
+      dataType: "text",
       connectable: false,
-      options: SCALE_OPTIONS
-    }
-  ]
-}
+      options: SCALE_OPTIONS,
+    },
+  ],
+};
 
 export class ImageEnhancerHandler extends BaseNodeHandler {
   constructor() {
-    super(imageEnhancerDef)
+    super(imageEnhancerDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input provided.'
-      }
+        error: "No input provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running image enhancer in renderer...')
+      ctx.onProgress(0, "Running image enhancer in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/image-enhancer',
+        nodeType: "free-tool/image-enhancer",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { input },
         params: {
-          model: ctx.params.model ?? 'slim',
-          scale: ctx.params.scale ?? '2x'
-        }
-      })
-      ctx.onProgress(100, 'Image enhancement completed.')
-      return result
+          model: ctx.params.model ?? "slim",
+          scale: ctx.params.scale ?? "2x",
+        },
+      });
+      ctx.onProgress(100, "Image enhancement completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/image-eraser/index.ts b/electron/workflow/nodes/free-tool/image-eraser/index.ts
index e6a13810..3567a4fa 100644
--- a/electron/workflow/nodes/free-tool/image-eraser/index.ts
+++ b/electron/workflow/nodes/free-tool/image-eraser/index.ts
@@ -1,67 +1,75 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 export const imageEraserDef: NodeTypeDefinition = {
-  type: 'free-tool/image-eraser',
-  category: 'free-tool',
-  label: 'Image Eraser',
+  type: "free-tool/image-eraser",
+  category: "free-tool",
+  label: "Image Eraser",
   inputs: [
-    { key: 'input', label: 'Image', dataType: 'image', required: true },
-    { key: 'mask_image', label: 'Mask', dataType: 'image', required: true }
+    { key: "input", label: "Image", dataType: "image", required: true },
+    { key: "mask_image", label: "Mask", dataType: "image", required: true },
   ],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
-  params: []
-}
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
+  params: [],
+};
 
 export class ImageEraserHandler extends BaseNodeHandler {
   constructor() {
-    super(imageEraserDef)
+    super(imageEraserDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
-    const mask_image = String(ctx.inputs.mask_image ?? ctx.params.mask_image ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
+    const mask_image = String(
+      ctx.inputs.mask_image ?? ctx.params.mask_image ?? "",
+    );
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input image provided.'
-      }
+        error: "No input image provided.",
+      };
     }
     if (!mask_image) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No mask image provided.'
-      }
+        error: "No mask image provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running image eraser in renderer...')
+      ctx.onProgress(0, "Running image eraser in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/image-eraser',
+        nodeType: "free-tool/image-eraser",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { input, mask_image },
-        params: {}
-      })
-      ctx.onProgress(100, 'Image eraser completed.')
-      return result
+        params: {},
+      });
+      ctx.onProgress(100, "Image eraser completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/media-merger/index.ts b/electron/workflow/nodes/free-tool/media-merger/index.ts
index 3ae0401e..82ca1b78 100644
--- a/electron/workflow/nodes/free-tool/media-merger/index.ts
+++ b/electron/workflow/nodes/free-tool/media-merger/index.ts
@@ -1,120 +1,147 @@
-import * as fs from 'fs'
-import * as path from 'path'
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { createOutputPath, resolveInputToLocalFile, runFfmpeg, toLocalAssetUrl } from '../shared/media-utils'
+import * as fs from "fs";
+import * as path from "path";
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import {
+  createOutputPath,
+  resolveInputToLocalFile,
+  runFfmpeg,
+  toLocalAssetUrl,
+} from "../shared/media-utils";
 
 export const mediaMergerDef: NodeTypeDefinition = {
-  type: 'free-tool/media-merger',
-  category: 'free-tool',
-  label: 'Media Merger',
+  type: "free-tool/media-merger",
+  category: "free-tool",
+  label: "Media Merger",
   inputs: [
-    { key: 'input1', label: 'Input 1', dataType: 'video', required: true },
-    { key: 'input2', label: 'Input 2', dataType: 'video', required: true },
-    { key: 'input3', label: 'Input 3', dataType: 'video', required: false },
-    { key: 'input4', label: 'Input 4', dataType: 'video', required: false },
-    { key: 'input5', label: 'Input 5', dataType: 'video', required: false },
+    { key: "input1", label: "Input 1", dataType: "video", required: true },
+    { key: "input2", label: "Input 2", dataType: "video", required: true },
+    { key: "input3", label: "Input 3", dataType: "video", required: false },
+    { key: "input4", label: "Input 4", dataType: "video", required: false },
+    { key: "input5", label: "Input 5", dataType: "video", required: false },
+  ],
+  outputs: [
+    { key: "output", label: "Output", dataType: "video", required: true },
   ],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'video', required: true }],
   params: [
     {
-      key: 'format',
-      label: 'Output Format',
-      type: 'select',
-      dataType: 'text',
-      default: 'mp4',
+      key: "format",
+      label: "Output Format",
+      type: "select",
+      dataType: "text",
+      default: "mp4",
       connectable: false,
       options: [
-        { label: 'MP4', value: 'mp4' },
-        { label: 'WebM', value: 'webm' },
-        { label: 'MOV', value: 'mov' },
-        { label: 'MKV', value: 'mkv' },
-      ]
-    }
-  ]
-}
+        { label: "MP4", value: "mp4" },
+        { label: "WebM", value: "webm" },
+        { label: "MOV", value: "mov" },
+        { label: "MKV", value: "mkv" },
+      ],
+    },
+  ],
+};
 
 export class MediaMergerHandler extends BaseNodeHandler {
   constructor() {
-    super(mediaMergerDef)
+    super(mediaMergerDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const format = String(ctx.params.format ?? 'mp4').toLowerCase()
+    const start = Date.now();
+    const format = String(ctx.params.format ?? "mp4").toLowerCase();
 
     // Collect all non-empty inputs
-    const inputKeys = ['input1', 'input2', 'input3', 'input4', 'input5']
-    const inputUrls: string[] = []
+    const inputKeys = ["input1", "input2", "input3", "input4", "input5"];
+    const inputUrls: string[] = [];
     for (const key of inputKeys) {
-      const val = String(ctx.inputs[key] ?? ctx.params[key] ?? '')
-      if (val) inputUrls.push(val)
+      const val = String(ctx.inputs[key] ?? ctx.params[key] ?? "");
+      if (val) inputUrls.push(val);
     }
 
     if (inputUrls.length < 2) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'Media merger requires at least two inputs.'
-      }
+        error: "Media merger requires at least two inputs.",
+      };
     }
 
     const resolvedInputs = await Promise.all(
-      inputUrls.map(url => resolveInputToLocalFile(url, ctx.workflowId, ctx.nodeId))
-    )
-    const outputPath = createOutputPath(ctx.workflowId, ctx.nodeId, 'media_merger', format)
-    const concatListPath = path.join(path.dirname(outputPath), `concat_${Date.now()}.txt`)
+      inputUrls.map((url) =>
+        resolveInputToLocalFile(url, ctx.workflowId, ctx.nodeId),
+      ),
+    );
+    const outputPath = createOutputPath(
+      ctx.workflowId,
+      ctx.nodeId,
+      "media_merger",
+      format,
+    );
+    const concatListPath = path.join(
+      path.dirname(outputPath),
+      `concat_${Date.now()}.txt`,
+    );
 
     try {
-      ctx.onProgress(10, 'Preparing merge...')
+      ctx.onProgress(10, "Preparing merge...");
 
-      const lines = resolvedInputs.map(r => {
-        const escaped = r.localPath.replace(/'/g, "'\\''")
-        return `file '${escaped}'`
-      })
-      fs.writeFileSync(concatListPath, lines.join('\n') + '\n', 'utf-8')
+      const lines = resolvedInputs.map((r) => {
+        const escaped = r.localPath.replace(/'/g, "'\\''");
+        return `file '${escaped}'`;
+      });
+      fs.writeFileSync(concatListPath, lines.join("\n") + "\n", "utf-8");
 
       // Re-encode to ensure correct timestamps and duration
       await runFfmpeg([
-        '-y',
-        '-f', 'concat',
-        '-safe', '0',
-        '-i', concatListPath,
-        '-c', 'copy',
-        outputPath
-      ])
+        "-y",
+        "-f",
+        "concat",
+        "-safe",
+        "0",
+        "-i",
+        concatListPath,
+        "-c",
+        "copy",
+        outputPath,
+      ]);
 
-      ctx.onProgress(100, 'Merge completed.')
-      const outputUrl = toLocalAssetUrl(outputPath)
+      ctx.onProgress(100, "Merge completed.");
+      const outputUrl = toLocalAssetUrl(outputPath);
 
       return {
-        status: 'success',
+        status: "success",
         outputs: { output: outputUrl },
         resultPath: outputUrl,
         resultMetadata: {
           output: outputUrl,
           resultUrl: outputUrl,
           resultUrls: [outputUrl],
-          outputPath
+          outputPath,
         },
         durationMs: Date.now() - start,
-        cost: 0
-      }
+        cost: 0,
+      };
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     } finally {
       try {
-        if (fs.existsSync(concatListPath)) fs.unlinkSync(concatListPath)
-      } catch { /* ignore */ }
-      resolvedInputs.forEach(r => r.cleanup())
+        if (fs.existsSync(concatListPath)) fs.unlinkSync(concatListPath);
+      } catch {
+        /* ignore */
+      }
+      resolvedInputs.forEach((r) => r.cleanup());
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/media-trimmer/index.ts b/electron/workflow/nodes/free-tool/media-trimmer/index.ts
index 05ff782b..5f4e345e 100644
--- a/electron/workflow/nodes/free-tool/media-trimmer/index.ts
+++ b/electron/workflow/nodes/free-tool/media-trimmer/index.ts
@@ -1,61 +1,112 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { createOutputPath, resolveInputToLocalFile, runFfmpeg, toLocalAssetUrl } from '../shared/media-utils'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import {
+  createOutputPath,
+  resolveInputToLocalFile,
+  runFfmpeg,
+  toLocalAssetUrl,
+} from "../shared/media-utils";
 
 export const mediaTrimmerDef: NodeTypeDefinition = {
-  type: 'free-tool/media-trimmer',
-  category: 'free-tool',
-  label: 'Media Trimmer',
-  inputs: [{ key: 'input', label: 'Media', dataType: 'video', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'url', required: true }],
+  type: "free-tool/media-trimmer",
+  category: "free-tool",
+  label: "Media Trimmer",
+  inputs: [{ key: "input", label: "Media", dataType: "video", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "url", required: true },
+  ],
   params: [
-    { key: 'startTime', label: 'Start (s)', type: 'number', dataType: 'text', default: 0, connectable: false, validation: { min: 0, step: 0.1 } },
-    { key: 'endTime', label: 'End (s)', type: 'number', dataType: 'text', default: 10, connectable: false, validation: { min: 0, step: 0.1 } },
-    { key: 'format', label: 'Output Format', type: 'string', dataType: 'text', default: 'mp4', connectable: false }
-  ]
-}
+    {
+      key: "startTime",
+      label: "Start (s)",
+      type: "number",
+      dataType: "text",
+      default: 0,
+      connectable: false,
+      validation: { min: 0, step: 0.1 },
+    },
+    {
+      key: "endTime",
+      label: "End (s)",
+      type: "number",
+      dataType: "text",
+      default: 10,
+      connectable: false,
+      validation: { min: 0, step: 0.1 },
+    },
+    {
+      key: "format",
+      label: "Output Format",
+      type: "string",
+      dataType: "text",
+      default: "mp4",
+      connectable: false,
+    },
+  ],
+};
 
 export class MediaTrimmerHandler extends BaseNodeHandler {
   constructor() {
-    super(mediaTrimmerDef)
+    super(mediaTrimmerDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
-    const startTime = Number(ctx.params.startTime ?? 0)
-    const endTime = Number(ctx.params.endTime ?? 10)
-    const format = String(ctx.params.format ?? 'mp4').toLowerCase()
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
+    const startTime = Number(ctx.params.startTime ?? 0);
+    const endTime = Number(ctx.params.endTime ?? 10);
+    const format = String(ctx.params.format ?? "mp4").toLowerCase();
 
-    if (!Number.isFinite(startTime) || !Number.isFinite(endTime) || endTime <= startTime) {
+    if (
+      !Number.isFinite(startTime) ||
+      !Number.isFinite(endTime) ||
+      endTime <= startTime
+    ) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'Invalid trim range: endTime must be greater than startTime.'
-      }
+        error: "Invalid trim range: endTime must be greater than startTime.",
+      };
     }
 
-    const duration = endTime - startTime
-    const resolved = await resolveInputToLocalFile(input, ctx.workflowId, ctx.nodeId)
-    const outputPath = createOutputPath(ctx.workflowId, ctx.nodeId, 'media_trimmer', format)
+    const duration = endTime - startTime;
+    const resolved = await resolveInputToLocalFile(
+      input,
+      ctx.workflowId,
+      ctx.nodeId,
+    );
+    const outputPath = createOutputPath(
+      ctx.workflowId,
+      ctx.nodeId,
+      "media_trimmer",
+      format,
+    );
 
     try {
-      ctx.onProgress(10, 'Preparing trim...')
+      ctx.onProgress(10, "Preparing trim...");
       await runFfmpeg([
-        '-y',
-        '-ss', String(startTime),
-        '-i', resolved.localPath,
-        '-t', String(duration),
-        '-c', 'copy',
-        outputPath
-      ])
-      ctx.onProgress(100, 'Trim completed.')
-      const outputUrl = toLocalAssetUrl(outputPath)
+        "-y",
+        "-ss",
+        String(startTime),
+        "-i",
+        resolved.localPath,
+        "-t",
+        String(duration),
+        "-c",
+        "copy",
+        outputPath,
+      ]);
+      ctx.onProgress(100, "Trim completed.");
+      const outputUrl = toLocalAssetUrl(outputPath);
 
       return {
-        status: 'success',
+        status: "success",
         outputs: { output: outputUrl },
         resultPath: outputUrl,
         resultMetadata: {
@@ -64,22 +115,21 @@ export class MediaTrimmerHandler extends BaseNodeHandler {
           resultUrls: [outputUrl],
           outputPath,
           startTime,
-          endTime
+          endTime,
         },
         durationMs: Date.now() - start,
-        cost: 0
-      }
+        cost: 0,
+      };
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     } finally {
-      resolved.cleanup()
+      resolved.cleanup();
     }
   }
 }
-
diff --git a/electron/workflow/nodes/free-tool/register.ts b/electron/workflow/nodes/free-tool/register.ts
index 34a31701..618891d9 100644
--- a/electron/workflow/nodes/free-tool/register.ts
+++ b/electron/workflow/nodes/free-tool/register.ts
@@ -1,109 +1,118 @@
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import { nodeRegistry } from '../registry'
-import { videoConverterDef, VideoConverterHandler } from './video-converter'
-import { audioConverterDef, AudioConverterHandler } from './audio-converter'
-import { imageConverterDef, ImageConverterHandler } from './image-converter'
-import { mediaTrimmerDef, MediaTrimmerHandler } from './media-trimmer'
-import { mediaMergerDef, MediaMergerHandler } from './media-merger'
-import { imageEnhancerDef, ImageEnhancerHandler } from './image-enhancer'
-import { backgroundRemoverDef, BackgroundRemoverHandler } from './background-remover'
-import { faceEnhancerDef, FaceEnhancerHandler } from './face-enhancer'
-import { videoEnhancerDef, VideoEnhancerHandler } from './video-enhancer'
-import { faceSwapperDef, FaceSwapperHandler } from './face-swapper'
-import { imageEraserDef, ImageEraserHandler } from './image-eraser'
-import { segmentAnythingDef, SegmentAnythingHandler } from './segment-anything'
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import { nodeRegistry } from "../registry";
+import { videoConverterDef, VideoConverterHandler } from "./video-converter";
+import { audioConverterDef, AudioConverterHandler } from "./audio-converter";
+import { imageConverterDef, ImageConverterHandler } from "./image-converter";
+import { mediaTrimmerDef, MediaTrimmerHandler } from "./media-trimmer";
+import { mediaMergerDef, MediaMergerHandler } from "./media-merger";
+import { imageEnhancerDef, ImageEnhancerHandler } from "./image-enhancer";
+import {
+  backgroundRemoverDef,
+  BackgroundRemoverHandler,
+} from "./background-remover";
+import { faceEnhancerDef, FaceEnhancerHandler } from "./face-enhancer";
+import { videoEnhancerDef, VideoEnhancerHandler } from "./video-enhancer";
+import { faceSwapperDef, FaceSwapperHandler } from "./face-swapper";
+import { imageEraserDef, ImageEraserHandler } from "./image-eraser";
+import { segmentAnythingDef, SegmentAnythingHandler } from "./segment-anything";
 
 type FreeToolSpec = {
-  type: string
-  label: string
-  inputType?: 'image' | 'video' | 'audio' | 'url'
-  outputType?: 'image' | 'video' | 'audio' | 'url'
-}
+  type: string;
+  label: string;
+  inputType?: "image" | "video" | "audio" | "url";
+  outputType?: "image" | "video" | "audio" | "url";
+};
 
-const FREE_TOOL_SPECS: FreeToolSpec[] = []
+const FREE_TOOL_SPECS: FreeToolSpec[] = [];
 
 const INPUT_LABEL_BY_TYPE: Record<string, string> = {
-  image: 'Image',
-  video: 'Video',
-  audio: 'Audio',
-  url: 'URL'
-}
+  image: "Image",
+  video: "Video",
+  audio: "Audio",
+  url: "URL",
+};
 
 function toDefinition(spec: FreeToolSpec): NodeTypeDefinition {
-  const inputType = spec.inputType ?? 'url'
-  const inputLabel = INPUT_LABEL_BY_TYPE[inputType] ?? 'Input'
+  const inputType = spec.inputType ?? "url";
+  const inputLabel = INPUT_LABEL_BY_TYPE[inputType] ?? "Input";
   return {
     type: spec.type,
-    category: 'free-tool',
+    category: "free-tool",
     label: spec.label,
     inputs: [
       {
-        key: 'input',
+        key: "input",
         label: inputLabel,
         dataType: inputType,
-        required: true
-      }
+        required: true,
+      },
     ],
     outputs: [
       {
-        key: 'output',
-        label: 'Output',
-        dataType: spec.outputType ?? 'url',
-        required: true
-      }
+        key: "output",
+        label: "Output",
+        dataType: spec.outputType ?? "url",
+        required: true,
+      },
     ],
-    params: []
-  }
+    params: [],
+  };
 }
 
 class UnsupportedFreeToolHandler extends BaseNodeHandler {
   constructor(definition: NodeTypeDefinition) {
-    super(definition)
+    super(definition);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? "");
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input provided.'
-      }
+        error: "No input provided.",
+      };
     }
 
     return {
-      status: 'error',
+      status: "error",
       outputs: {},
       durationMs: Date.now() - start,
       cost: 0,
-      error: `Node "${this.definition.label}" is registered, but executor is not implemented yet.`
-    }
+      error: `Node "${this.definition.label}" is registered, but executor is not implemented yet.`,
+    };
   }
 }
 
 export function registerFreeToolNodes(): void {
-  nodeRegistry.register(videoConverterDef, new VideoConverterHandler())
-  nodeRegistry.register(audioConverterDef, new AudioConverterHandler())
-  nodeRegistry.register(imageConverterDef, new ImageConverterHandler())
-  nodeRegistry.register(mediaTrimmerDef, new MediaTrimmerHandler())
-  nodeRegistry.register(mediaMergerDef, new MediaMergerHandler())
-  nodeRegistry.register(imageEnhancerDef, new ImageEnhancerHandler())
-  nodeRegistry.register(backgroundRemoverDef, new BackgroundRemoverHandler())
-  nodeRegistry.register(faceEnhancerDef, new FaceEnhancerHandler())
-  nodeRegistry.register(videoEnhancerDef, new VideoEnhancerHandler())
-  nodeRegistry.register(faceSwapperDef, new FaceSwapperHandler())
-  nodeRegistry.register(imageEraserDef, new ImageEraserHandler())
-  nodeRegistry.register(segmentAnythingDef, new SegmentAnythingHandler())
+  nodeRegistry.register(videoConverterDef, new VideoConverterHandler());
+  nodeRegistry.register(audioConverterDef, new AudioConverterHandler());
+  nodeRegistry.register(imageConverterDef, new ImageConverterHandler());
+  nodeRegistry.register(mediaTrimmerDef, new MediaTrimmerHandler());
+  nodeRegistry.register(mediaMergerDef, new MediaMergerHandler());
+  nodeRegistry.register(imageEnhancerDef, new ImageEnhancerHandler());
+  nodeRegistry.register(backgroundRemoverDef, new BackgroundRemoverHandler());
+  nodeRegistry.register(faceEnhancerDef, new FaceEnhancerHandler());
+  nodeRegistry.register(videoEnhancerDef, new VideoEnhancerHandler());
+  nodeRegistry.register(faceSwapperDef, new FaceSwapperHandler());
+  nodeRegistry.register(imageEraserDef, new ImageEraserHandler());
+  nodeRegistry.register(segmentAnythingDef, new SegmentAnythingHandler());
 
   // Placeholder for any future free-tool nodes
   for (const spec of FREE_TOOL_SPECS) {
-    const definition = toDefinition(spec)
-    nodeRegistry.register(definition, new UnsupportedFreeToolHandler(definition))
+    const definition = toDefinition(spec);
+    nodeRegistry.register(
+      definition,
+      new UnsupportedFreeToolHandler(definition),
+    );
   }
 }
-
diff --git a/electron/workflow/nodes/free-tool/segment-anything/index.ts b/electron/workflow/nodes/free-tool/segment-anything/index.ts
index ab18c8d9..985c36b4 100644
--- a/electron/workflow/nodes/free-tool/segment-anything/index.ts
+++ b/electron/workflow/nodes/free-tool/segment-anything/index.ts
@@ -1,41 +1,52 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 export const segmentAnythingDef: NodeTypeDefinition = {
-  type: 'free-tool/segment-anything',
-  category: 'free-tool',
-  label: 'Segment Anything',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Mask', dataType: 'image', required: true }],
+  type: "free-tool/segment-anything",
+  category: "free-tool",
+  label: "Segment Anything",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Mask", dataType: "image", required: true },
+  ],
   params: [
-    { key: 'invertMask', label: 'Invert Mask', type: 'boolean', default: false }
-  ]
-}
+    {
+      key: "invertMask",
+      label: "Invert Mask",
+      type: "boolean",
+      default: false,
+    },
+  ],
+};
 
 export class SegmentAnythingHandler extends BaseNodeHandler {
   constructor() {
-    super(segmentAnythingDef)
+    super(segmentAnythingDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input image provided.'
-      }
+        error: "No input image provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running segment anything in renderer...')
+      ctx.onProgress(0, "Running segment anything in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/segment-anything',
+        nodeType: "free-tool/segment-anything",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { input },
@@ -44,19 +55,19 @@ export class SegmentAnythingHandler extends BaseNodeHandler {
           pointY: ctx.params.pointY ?? 0.5,
           __segmentPoints: ctx.params.__segmentPoints,
           __previewMask: ctx.params.__previewMask,
-          invertMask: ctx.params.invertMask ?? false
-        }
-      })
-      ctx.onProgress(100, 'Segmentation completed.')
-      return result
+          invertMask: ctx.params.invertMask ?? false,
+        },
+      });
+      ctx.onProgress(100, "Segmentation completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/shared/media-utils.ts b/electron/workflow/nodes/free-tool/shared/media-utils.ts
index 37a4ffea..00c45115 100644
--- a/electron/workflow/nodes/free-tool/shared/media-utils.ts
+++ b/electron/workflow/nodes/free-tool/shared/media-utils.ts
@@ -1,167 +1,181 @@
-import * as fs from 'fs'
-import * as path from 'path'
-import http from 'http'
-import https from 'https'
-import { spawn } from 'child_process'
-import { getFileStorageInstance } from '../../../utils/file-storage'
+import * as fs from "fs";
+import * as path from "path";
+import http from "http";
+import https from "https";
+import { spawn } from "child_process";
+import { getFileStorageInstance } from "../../../utils/file-storage";
 
 type DownloadedInput = {
-  localPath: string
-  cleanup: () => void
-}
+  localPath: string;
+  cleanup: () => void;
+};
 
-let ffmpegChecked = false
-let hasFfmpegBinary = false
+let ffmpegChecked = false;
+let hasFfmpegBinary = false;
 
 function ensureDir(dir: string): void {
-  fs.mkdirSync(dir, { recursive: true })
+  fs.mkdirSync(dir, { recursive: true });
 }
 
 function safeExt(ext: string): string {
-  if (!ext) return '.bin'
-  const normalized = ext.startsWith('.') ? ext : `.${ext}`
-  return normalized.length <= 10 ? normalized : '.bin'
+  if (!ext) return ".bin";
+  const normalized = ext.startsWith(".") ? ext : `.${ext}`;
+  return normalized.length <= 10 ? normalized : ".bin";
 }
 
 function extFromUrl(input: string): string {
   try {
-    const pathname = new URL(input).pathname
-    return safeExt(path.extname(pathname))
+    const pathname = new URL(input).pathname;
+    return safeExt(path.extname(pathname));
   } catch {
-    return '.bin'
+    return ".bin";
   }
 }
 
-function tempFilePath(workflowId: string, nodeId: string, suffix: string): string {
-  const storage = getFileStorageInstance()
-  const dir = path.join(storage.getNodeOutputDir(workflowId, nodeId), '_tmp')
-  ensureDir(dir)
-  return path.join(dir, `${Date.now()}_${Math.random().toString(36).slice(2, 8)}${suffix}`)
+function tempFilePath(
+  workflowId: string,
+  nodeId: string,
+  suffix: string,
+): string {
+  const storage = getFileStorageInstance();
+  const dir = path.join(storage.getNodeOutputDir(workflowId, nodeId), "_tmp");
+  ensureDir(dir);
+  return path.join(
+    dir,
+    `${Date.now()}_${Math.random().toString(36).slice(2, 8)}${suffix}`,
+  );
 }
 
 function downloadToFile(url: string, filePath: string): Promise<void> {
   return new Promise((resolve, reject) => {
-    const proto = url.startsWith('https://') ? https : http
-    const file = fs.createWriteStream(filePath)
+    const proto = url.startsWith("https://") ? https : http;
+    const file = fs.createWriteStream(filePath);
     const req = proto.get(url, (res) => {
-      if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
-        file.close()
+      if (
+        res.statusCode &&
+        res.statusCode >= 300 &&
+        res.statusCode < 400 &&
+        res.headers.location
+      ) {
+        file.close();
         try {
-          if (fs.existsSync(filePath)) fs.unlinkSync(filePath)
+          if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
         } catch {
           // ignore
         }
-        downloadToFile(res.headers.location, filePath).then(resolve).catch(reject)
-        return
+        downloadToFile(res.headers.location, filePath)
+          .then(resolve)
+          .catch(reject);
+        return;
       }
       if (res.statusCode && res.statusCode >= 400) {
-        file.close()
-        reject(new Error(`Failed to download file: HTTP ${res.statusCode}`))
-        return
+        file.close();
+        reject(new Error(`Failed to download file: HTTP ${res.statusCode}`));
+        return;
       }
-      res.pipe(file)
-      file.on('finish', () => {
-        file.close()
-        resolve()
-      })
-      file.on('error', (err) => {
-        file.close()
-        reject(err)
-      })
-    })
-
-    req.on('error', reject)
-  })
+      res.pipe(file);
+      file.on("finish", () => {
+        file.close();
+        resolve();
+      });
+      file.on("error", (err) => {
+        file.close();
+        reject(err);
+      });
+    });
+
+    req.on("error", reject);
+  });
 }
 
 export async function resolveInputToLocalFile(
   input: string,
   workflowId: string,
-  nodeId: string
+  nodeId: string,
 ): Promise<DownloadedInput> {
-  if (!input) throw new Error('Input is empty.')
+  if (!input) throw new Error("Input is empty.");
 
-  if (input.startsWith('local-asset://')) {
-    const localPath = decodeURIComponent(input.replace('local-asset://', ''))
+  if (input.startsWith("local-asset://")) {
+    const localPath = decodeURIComponent(input.replace("local-asset://", ""));
     if (!fs.existsSync(localPath)) {
-      throw new Error('Local input file not found.')
+      throw new Error("Local input file not found.");
     }
-    return { localPath, cleanup: () => {} }
+    return { localPath, cleanup: () => {} };
   }
 
-  if (input.startsWith('http://') || input.startsWith('https://')) {
-    const targetPath = tempFilePath(workflowId, nodeId, extFromUrl(input))
-    await downloadToFile(input, targetPath)
+  if (input.startsWith("http://") || input.startsWith("https://")) {
+    const targetPath = tempFilePath(workflowId, nodeId, extFromUrl(input));
+    await downloadToFile(input, targetPath);
     return {
       localPath: targetPath,
       cleanup: () => {
         try {
-          if (fs.existsSync(targetPath)) fs.unlinkSync(targetPath)
+          if (fs.existsSync(targetPath)) fs.unlinkSync(targetPath);
         } catch {
           // ignore cleanup errors
         }
-      }
-    }
+      },
+    };
   }
 
   if (fs.existsSync(input)) {
-    return { localPath: input, cleanup: () => {} }
+    return { localPath: input, cleanup: () => {} };
   }
 
-  throw new Error('Unsupported input URL/path.')
+  throw new Error("Unsupported input URL/path.");
 }
 
 export function createOutputPath(
   workflowId: string,
   nodeId: string,
   prefix: string,
-  ext: string
+  ext: string,
 ): string {
-  const storage = getFileStorageInstance()
-  const outDir = storage.getNodeOutputDir(workflowId, nodeId)
-  ensureDir(outDir)
-  const fileName = `${prefix}_${Date.now()}${safeExt(ext)}`
-  return path.join(outDir, fileName)
+  const storage = getFileStorageInstance();
+  const outDir = storage.getNodeOutputDir(workflowId, nodeId);
+  ensureDir(outDir);
+  const fileName = `${prefix}_${Date.now()}${safeExt(ext)}`;
+  return path.join(outDir, fileName);
 }
 
 export function toLocalAssetUrl(filePath: string): string {
-  return `local-asset://${encodeURIComponent(filePath)}`
+  return `local-asset://${encodeURIComponent(filePath)}`;
 }
 
 export async function ensureFfmpegAvailable(): Promise<void> {
   if (ffmpegChecked) {
-    if (!hasFfmpegBinary) throw new Error('ffmpeg is not installed or not available in PATH.')
-    return
+    if (!hasFfmpegBinary)
+      throw new Error("ffmpeg is not installed or not available in PATH.");
+    return;
   }
 
-  ffmpegChecked = true
+  ffmpegChecked = true;
   hasFfmpegBinary = await new Promise<boolean>((resolve) => {
-    const proc = spawn('ffmpeg', ['-version'])
-    proc.on('error', () => resolve(false))
-    proc.on('exit', (code) => resolve(code === 0))
-  })
+    const proc = spawn("ffmpeg", ["-version"]);
+    proc.on("error", () => resolve(false));
+    proc.on("exit", (code) => resolve(code === 0));
+  });
 
   if (!hasFfmpegBinary) {
-    throw new Error('ffmpeg is not installed or not available in PATH.')
+    throw new Error("ffmpeg is not installed or not available in PATH.");
   }
 }
 
 export async function runFfmpeg(args: string[]): Promise<void> {
-  await ensureFfmpegAvailable()
+  await ensureFfmpegAvailable();
   await new Promise<void>((resolve, reject) => {
-    const proc = spawn('ffmpeg', args)
-    let stderr = ''
-    proc.stderr.on('data', (chunk: Buffer) => {
-      stderr += chunk.toString('utf-8')
-    })
-    proc.on('error', reject)
-    proc.on('exit', (code) => {
+    const proc = spawn("ffmpeg", args);
+    let stderr = "";
+    proc.stderr.on("data", (chunk: Buffer) => {
+      stderr += chunk.toString("utf-8");
+    });
+    proc.on("error", reject);
+    proc.on("exit", (code) => {
       if (code === 0) {
-        resolve()
+        resolve();
       } else {
-        reject(new Error(stderr || `ffmpeg failed with exit code ${code}`))
+        reject(new Error(stderr || `ffmpeg failed with exit code ${code}`));
       }
-    })
-  })
+    });
+  });
 }
-
diff --git a/electron/workflow/nodes/free-tool/video-converter/index.ts b/electron/workflow/nodes/free-tool/video-converter/index.ts
index 6a9e39d7..0498f2f1 100644
--- a/electron/workflow/nodes/free-tool/video-converter/index.ts
+++ b/electron/workflow/nodes/free-tool/video-converter/index.ts
@@ -1,161 +1,184 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { createOutputPath, resolveInputToLocalFile, runFfmpeg, toLocalAssetUrl } from '../shared/media-utils'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import {
+  createOutputPath,
+  resolveInputToLocalFile,
+  runFfmpeg,
+  toLocalAssetUrl,
+} from "../shared/media-utils";
 
 const VIDEO_FORMATS = [
-  { label: 'MP4 (H.264)', value: 'mp4-h264' },
-  { label: 'MP4 (H.265/HEVC)', value: 'mp4-h265' },
-  { label: 'WebM (VP9)', value: 'webm-vp9' },
-  { label: 'WebM (VP8)', value: 'webm-vp8' },
-  { label: 'MOV', value: 'mov' },
-  { label: 'AVI', value: 'avi' },
-  { label: 'MKV', value: 'mkv' },
-] as const
+  { label: "MP4 (H.264)", value: "mp4-h264" },
+  { label: "MP4 (H.265/HEVC)", value: "mp4-h265" },
+  { label: "WebM (VP9)", value: "webm-vp9" },
+  { label: "WebM (VP8)", value: "webm-vp8" },
+  { label: "MOV", value: "mov" },
+  { label: "AVI", value: "avi" },
+  { label: "MKV", value: "mkv" },
+] as const;
 
 const QUALITY_PRESETS = [
-  { label: 'Low (Fast)', value: 'low' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'High', value: 'high' },
-  { label: 'Ultra', value: 'ultra' },
-] as const
+  { label: "Low (Fast)", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high" },
+  { label: "Ultra", value: "ultra" },
+] as const;
 
 const RESOLUTION_PRESETS = [
-  { label: 'Original', value: 'original' },
-  { label: '1080p', value: '1920:1080' },
-  { label: '720p', value: '1280:720' },
-  { label: '480p', value: '854:480' },
-] as const
+  { label: "Original", value: "original" },
+  { label: "1080p", value: "1920:1080" },
+  { label: "720p", value: "1280:720" },
+  { label: "480p", value: "854:480" },
+] as const;
 
 interface FormatConfig {
-  ext: string
-  videoCodec: string
-  audioCodec: string
+  ext: string;
+  videoCodec: string;
+  audioCodec: string;
 }
 
 const FORMAT_MAP: Record<string, FormatConfig> = {
-  'mp4-h264': { ext: 'mp4', videoCodec: 'libx264', audioCodec: 'aac' },
-  'mp4-h265': { ext: 'mp4', videoCodec: 'libx265', audioCodec: 'aac' },
-  'webm-vp9': { ext: 'webm', videoCodec: 'libvpx-vp9', audioCodec: 'libopus' },
-  'webm-vp8': { ext: 'webm', videoCodec: 'libvpx', audioCodec: 'libvorbis' },
-  'mov': { ext: 'mov', videoCodec: 'libx264', audioCodec: 'aac' },
-  'avi': { ext: 'avi', videoCodec: 'libx264', audioCodec: 'aac' },
-  'mkv': { ext: 'mkv', videoCodec: 'libx264', audioCodec: 'aac' },
+  "mp4-h264": { ext: "mp4", videoCodec: "libx264", audioCodec: "aac" },
+  "mp4-h265": { ext: "mp4", videoCodec: "libx265", audioCodec: "aac" },
+  "webm-vp9": { ext: "webm", videoCodec: "libvpx-vp9", audioCodec: "libopus" },
+  "webm-vp8": { ext: "webm", videoCodec: "libvpx", audioCodec: "libvorbis" },
+  mov: { ext: "mov", videoCodec: "libx264", audioCodec: "aac" },
+  avi: { ext: "avi", videoCodec: "libx264", audioCodec: "aac" },
+  mkv: { ext: "mkv", videoCodec: "libx264", audioCodec: "aac" },
   // Backward compat: old format values
-  'mp4': { ext: 'mp4', videoCodec: 'libx264', audioCodec: 'aac' },
-  'webm': { ext: 'webm', videoCodec: 'libvpx-vp9', audioCodec: 'libopus' },
-}
+  mp4: { ext: "mp4", videoCodec: "libx264", audioCodec: "aac" },
+  webm: { ext: "webm", videoCodec: "libvpx-vp9", audioCodec: "libopus" },
+};
 
 const BITRATE_MAP: Record<string, { video: string; audio: string }> = {
-  low: { video: '1M', audio: '96k' },
-  medium: { video: '5M', audio: '128k' },
-  high: { video: '10M', audio: '192k' },
-  ultra: { video: '20M', audio: '320k' },
-}
+  low: { video: "1M", audio: "96k" },
+  medium: { video: "5M", audio: "128k" },
+  high: { video: "10M", audio: "192k" },
+  ultra: { video: "20M", audio: "320k" },
+};
 
 export const videoConverterDef: NodeTypeDefinition = {
-  type: 'free-tool/video-converter',
-  category: 'free-tool',
-  label: 'Video Converter',
-  inputs: [{ key: 'input', label: 'Video', dataType: 'video', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'video', required: true }],
+  type: "free-tool/video-converter",
+  category: "free-tool",
+  label: "Video Converter",
+  inputs: [{ key: "input", label: "Video", dataType: "video", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "video", required: true },
+  ],
   params: [
     {
-      key: 'format',
-      label: 'Format',
-      type: 'select',
-      default: 'mp4-h264',
-      dataType: 'text',
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "mp4-h264",
+      dataType: "text",
       connectable: false,
-      options: VIDEO_FORMATS.map(f => ({ label: f.label, value: f.value }))
+      options: VIDEO_FORMATS.map((f) => ({ label: f.label, value: f.value })),
     },
     {
-      key: 'quality',
-      label: 'Quality',
-      type: 'select',
-      default: 'medium',
-      dataType: 'text',
+      key: "quality",
+      label: "Quality",
+      type: "select",
+      default: "medium",
+      dataType: "text",
       connectable: false,
-      options: QUALITY_PRESETS.map(q => ({ label: q.label, value: q.value }))
+      options: QUALITY_PRESETS.map((q) => ({ label: q.label, value: q.value })),
     },
     {
-      key: 'resolution',
-      label: 'Resolution',
-      type: 'select',
-      default: 'original',
-      dataType: 'text',
+      key: "resolution",
+      label: "Resolution",
+      type: "select",
+      default: "original",
+      dataType: "text",
       connectable: false,
-      options: RESOLUTION_PRESETS.map(r => ({ label: r.label, value: r.value }))
-    }
-  ]
-}
+      options: RESOLUTION_PRESETS.map((r) => ({
+        label: r.label,
+        value: r.value,
+      })),
+    },
+  ],
+};
 
 export class VideoConverterHandler extends BaseNodeHandler {
   constructor() {
-    super(videoConverterDef)
+    super(videoConverterDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const formatId = String(ctx.params.format ?? 'mp4-h264')
-    const qualityId = String(ctx.params.quality ?? 'medium')
-    const resolution = String(ctx.params.resolution ?? 'original')
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const formatId = String(ctx.params.format ?? "mp4-h264");
+    const qualityId = String(ctx.params.quality ?? "medium");
+    const resolution = String(ctx.params.resolution ?? "original");
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
-    const formatCfg = FORMAT_MAP[formatId]
+    const formatCfg = FORMAT_MAP[formatId];
     if (!formatCfg) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: `Unsupported video format: ${formatId}`
-      }
+        error: `Unsupported video format: ${formatId}`,
+      };
     }
 
-    const bitrate = BITRATE_MAP[qualityId] ?? BITRATE_MAP.medium
-    const resolved = await resolveInputToLocalFile(input, ctx.workflowId, ctx.nodeId)
-    const outputPath = createOutputPath(ctx.workflowId, ctx.nodeId, 'video_converter', formatCfg.ext)
+    const bitrate = BITRATE_MAP[qualityId] ?? BITRATE_MAP.medium;
+    const resolved = await resolveInputToLocalFile(
+      input,
+      ctx.workflowId,
+      ctx.nodeId,
+    );
+    const outputPath = createOutputPath(
+      ctx.workflowId,
+      ctx.nodeId,
+      "video_converter",
+      formatCfg.ext,
+    );
 
     try {
-      ctx.onProgress(10, 'Preparing video conversion...')
+      ctx.onProgress(10, "Preparing video conversion...");
 
-      const args = ['-y', '-i', resolved.localPath]
-      args.push('-c:v', formatCfg.videoCodec, '-b:v', bitrate.video)
-      args.push('-c:a', formatCfg.audioCodec, '-b:a', bitrate.audio)
+      const args = ["-y", "-i", resolved.localPath];
+      args.push("-c:v", formatCfg.videoCodec, "-b:v", bitrate.video);
+      args.push("-c:a", formatCfg.audioCodec, "-b:a", bitrate.audio);
 
-      if (resolution !== 'original') {
-        args.push('-vf', `scale=${resolution}`)
+      if (resolution !== "original") {
+        args.push("-vf", `scale=${resolution}`);
       }
 
-      args.push(outputPath)
-      await runFfmpeg(args)
+      args.push(outputPath);
+      await runFfmpeg(args);
 
-      ctx.onProgress(100, 'Video conversion completed.')
-      const outputUrl = toLocalAssetUrl(outputPath)
+      ctx.onProgress(100, "Video conversion completed.");
+      const outputUrl = toLocalAssetUrl(outputPath);
 
       return {
-        status: 'success',
+        status: "success",
         outputs: { output: outputUrl },
         resultPath: outputUrl,
         resultMetadata: {
           output: outputUrl,
           resultUrl: outputUrl,
           resultUrls: [outputUrl],
-          outputPath
+          outputPath,
         },
         durationMs: Date.now() - start,
-        cost: 0
-      }
+        cost: 0,
+      };
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     } finally {
-      resolved.cleanup()
+      resolved.cleanup();
     }
   }
 }
diff --git a/electron/workflow/nodes/free-tool/video-enhancer/index.ts b/electron/workflow/nodes/free-tool/video-enhancer/index.ts
index a1ca2209..3625aa6b 100644
--- a/electron/workflow/nodes/free-tool/video-enhancer/index.ts
+++ b/electron/workflow/nodes/free-tool/video-enhancer/index.ts
@@ -1,71 +1,93 @@
-import type { NodeTypeDefinition } from '../../../../../src/workflow/types/node-defs'
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../../base'
-import { executeFreeToolInRenderer } from '../../../ipc/free-tool.ipc'
+import type { NodeTypeDefinition } from "../../../../../src/workflow/types/node-defs";
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../../base";
+import { executeFreeToolInRenderer } from "../../../ipc/free-tool.ipc";
 
 const MODEL_OPTIONS = [
-  { label: 'Slim (fast)', value: 'slim' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'Thick (quality)', value: 'thick' }
-]
+  { label: "Slim (fast)", value: "slim" },
+  { label: "Medium", value: "medium" },
+  { label: "Thick (quality)", value: "thick" },
+];
 const SCALE_OPTIONS = [
-  { label: '2×', value: '2x' },
-  { label: '3×', value: '3x' },
-  { label: '4×', value: '4x' }
-]
+  { label: "2×", value: "2x" },
+  { label: "3×", value: "3x" },
+  { label: "4×", value: "4x" },
+];
 
 export const videoEnhancerDef: NodeTypeDefinition = {
-  type: 'free-tool/video-enhancer',
-  category: 'free-tool',
-  label: 'Video Enhancer',
-  inputs: [{ key: 'input', label: 'Video', dataType: 'video', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'video', required: true }],
+  type: "free-tool/video-enhancer",
+  category: "free-tool",
+  label: "Video Enhancer",
+  inputs: [{ key: "input", label: "Video", dataType: "video", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "video", required: true },
+  ],
   params: [
-    { key: 'model', label: 'Model', type: 'select', default: 'slim', dataType: 'text', connectable: false, options: MODEL_OPTIONS },
-    { key: 'scale', label: 'Scale', type: 'select', default: '2x', dataType: 'text', connectable: false, options: SCALE_OPTIONS }
-  ]
-}
+    {
+      key: "model",
+      label: "Model",
+      type: "select",
+      default: "slim",
+      dataType: "text",
+      connectable: false,
+      options: MODEL_OPTIONS,
+    },
+    {
+      key: "scale",
+      label: "Scale",
+      type: "select",
+      default: "2x",
+      dataType: "text",
+      connectable: false,
+      options: SCALE_OPTIONS,
+    },
+  ],
+};
 
 export class VideoEnhancerHandler extends BaseNodeHandler {
   constructor() {
-    super(videoEnhancerDef)
+    super(videoEnhancerDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const input = String(ctx.inputs.input ?? ctx.params.input ?? '')
+    const start = Date.now();
+    const input = String(ctx.inputs.input ?? ctx.params.input ?? "");
 
     if (!input) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No input provided.'
-      }
+        error: "No input provided.",
+      };
     }
 
     try {
-      ctx.onProgress(0, 'Running video enhancer in renderer...')
+      ctx.onProgress(0, "Running video enhancer in renderer...");
       const result = await executeFreeToolInRenderer({
-        nodeType: 'free-tool/video-enhancer',
+        nodeType: "free-tool/video-enhancer",
         workflowId: ctx.workflowId,
         nodeId: ctx.nodeId,
         inputs: { input },
         params: {
-          model: ctx.params.model ?? 'slim',
-          scale: ctx.params.scale ?? '2x'
-        }
-      })
-      ctx.onProgress(100, 'Video enhancement completed.')
-      return result
+          model: ctx.params.model ?? "slim",
+          scale: ctx.params.scale ?? "2x",
+        },
+      });
+      ctx.onProgress(100, "Video enhancement completed.");
+      return result;
     } catch (error) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: error instanceof Error ? error.message : String(error)
-      }
+        error: error instanceof Error ? error.message : String(error),
+      };
     }
   }
 }
diff --git a/electron/workflow/nodes/input/media-upload.ts b/electron/workflow/nodes/input/media-upload.ts
index 1dbcbbb0..89ba6835 100644
--- a/electron/workflow/nodes/input/media-upload.ts
+++ b/electron/workflow/nodes/input/media-upload.ts
@@ -11,40 +11,70 @@
  * - If input is a local-asset:// path (from upstream free-tool), read the
  *   file from disk and upload it to CDN first.
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
-import { getWaveSpeedClient } from '../../services/service-locator'
-import { existsSync, readFileSync } from 'fs'
-import { basename } from 'path'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
+import { getWaveSpeedClient } from "../../services/service-locator";
+import { existsSync, readFileSync } from "fs";
+import { basename } from "path";
 
 export const mediaUploadDef: NodeTypeDefinition = {
-  type: 'input/media-upload',
-  category: 'input',
-  label: 'Upload',
-  inputs: [
-    { key: 'media', label: 'Media', dataType: 'url', required: false }
-  ],
-  outputs: [
-    { key: 'output', label: 'URL', dataType: 'url', required: true }
-  ],
+  type: "input/media-upload",
+  category: "input",
+  label: "Upload",
+  inputs: [{ key: "media", label: "Media", dataType: "url", required: false }],
+  outputs: [{ key: "output", label: "URL", dataType: "url", required: true }],
   params: [
     // uploadedUrl is set by the renderer after file upload completes
-    { key: 'uploadedUrl', label: 'URL', type: 'string', dataType: 'url', connectable: false, default: '' },
-    { key: 'mediaType', label: 'Type', type: 'string', dataType: 'text', connectable: false, default: '' },
-    { key: 'fileName', label: 'File', type: 'string', dataType: 'text', connectable: false, default: '' }
-  ]
-}
+    {
+      key: "uploadedUrl",
+      label: "URL",
+      type: "string",
+      dataType: "url",
+      connectable: false,
+      default: "",
+    },
+    {
+      key: "mediaType",
+      label: "Type",
+      type: "string",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+    {
+      key: "fileName",
+      label: "File",
+      type: "string",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+  ],
+};
 
 export class MediaUploadHandler extends BaseNodeHandler {
-  constructor() { super(mediaUploadDef) }
+  constructor() {
+    super(mediaUploadDef);
+  }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
+    const start = Date.now();
     // Prefer connected input over manually uploaded URL
-    let url = String(ctx.inputs.media ?? ctx.params.uploadedUrl ?? '')
+    let url = String(ctx.inputs.media ?? ctx.params.uploadedUrl ?? "");
 
     if (!url) {
-      return { status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0, error: 'No file uploaded or connected. Please upload a file or connect a media source.' }
+      return {
+        status: "error",
+        outputs: {},
+        durationMs: Date.now() - start,
+        cost: 0,
+        error:
+          "No file uploaded or connected. Please upload a file or connect a media source.",
+      };
     }
 
     // If the URL is a local-asset:// path (from upstream free-tool nodes),
@@ -52,36 +82,50 @@ export class MediaUploadHandler extends BaseNodeHandler {
     // receive a proper HTTP URL.
     if (/^local-asset:\/\//i.test(url)) {
       try {
-        ctx.onProgress(10, 'Uploading local file to CDN...')
-        const localPath = decodeURIComponent(url.replace(/^local-asset:\/\//i, ''))
+        ctx.onProgress(10, "Uploading local file to CDN...");
+        const localPath = decodeURIComponent(
+          url.replace(/^local-asset:\/\//i, ""),
+        );
         if (!existsSync(localPath)) {
-          return { status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0, error: `Local file not found: ${localPath}` }
+          return {
+            status: "error",
+            outputs: {},
+            durationMs: Date.now() - start,
+            cost: 0,
+            error: `Local file not found: ${localPath}`,
+          };
         }
-        const buffer = readFileSync(localPath)
-        const filename = basename(localPath)
-        const blob = new Blob([buffer])
-        const file = new File([blob], filename)
-        const client = getWaveSpeedClient()
-        url = await client.uploadFile(file, filename)
-        ctx.onProgress(90, 'Upload complete')
+        const buffer = readFileSync(localPath);
+        const filename = basename(localPath);
+        const blob = new Blob([buffer]);
+        const file = new File([blob], filename);
+        const client = getWaveSpeedClient();
+        url = await client.uploadFile(file, filename);
+        ctx.onProgress(90, "Upload complete");
       } catch (error) {
-        return { status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0, error: `Failed to upload local file: ${error instanceof Error ? error.message : String(error)}` }
+        return {
+          status: "error",
+          outputs: {},
+          durationMs: Date.now() - start,
+          cost: 0,
+          error: `Failed to upload local file: ${error instanceof Error ? error.message : String(error)}`,
+        };
       }
     }
 
     return {
-      status: 'success',
+      status: "success",
       outputs: { output: url },
       resultPath: url,
       resultMetadata: {
         output: url,
         resultUrl: url,
         resultUrls: [url],
-        mediaType: ctx.params.mediaType ?? 'image',
-        fileName: ctx.params.fileName ?? ''
+        mediaType: ctx.params.mediaType ?? "image",
+        fileName: ctx.params.fileName ?? "",
       },
       durationMs: Date.now() - start,
-      cost: 0
-    }
+      cost: 0,
+    };
   }
 }
diff --git a/electron/workflow/nodes/input/text-input.ts b/electron/workflow/nodes/input/text-input.ts
index 6fc620ad..c338ac11 100644
--- a/electron/workflow/nodes/input/text-input.ts
+++ b/electron/workflow/nodes/input/text-input.ts
@@ -11,77 +11,105 @@
  * Output is a text string that can connect to AI Task nodes' prompt
  * or any other text parameter handle.
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
-import { getWaveSpeedClient } from '../../services/service-locator'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
+import { getWaveSpeedClient } from "../../services/service-locator";
 
-const OPTIMIZER_MODEL = 'wavespeed-ai/prompt-optimizer'
+const OPTIMIZER_MODEL = "wavespeed-ai/prompt-optimizer";
 
 export const textInputDef: NodeTypeDefinition = {
-  type: 'input/text-input',
-  category: 'input',
-  label: 'Text',
+  type: "input/text-input",
+  category: "input",
+  label: "Text",
   inputs: [],
-  outputs: [
-    { key: 'output', label: 'Text', dataType: 'text', required: true }
-  ],
+  outputs: [{ key: "output", label: "Text", dataType: "text", required: true }],
   params: [
-    { key: 'text', label: 'Text', type: 'textarea', dataType: 'text', connectable: false, default: '' }
-  ]
-}
+    {
+      key: "text",
+      label: "Text",
+      type: "textarea",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+  ],
+};
 
 export class TextInputHandler extends BaseNodeHandler {
-  constructor() { super(textInputDef) }
+  constructor() {
+    super(textInputDef);
+  }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const text = String(ctx.params.text ?? '')
+    const start = Date.now();
+    const text = String(ctx.params.text ?? "");
 
     if (!text.trim()) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'No text provided. Please enter some text.'
-      }
+        error: "No text provided. Please enter some text.",
+      };
     }
 
     // ── "Optimize on Run" prompt optimization ──────────────────────────────
-    const settings = (ctx.params.__optimizerSettings ?? {}) as Record<string, unknown>
-    const optimizeOnRun = Boolean(settings.optimizeOnRun ?? settings.autoOptimize ?? false)
+    const settings = (ctx.params.__optimizerSettings ?? {}) as Record<
+      string,
+      unknown
+    >;
+    const optimizeOnRun = Boolean(
+      settings.optimizeOnRun ?? settings.autoOptimize ?? false,
+    );
 
     // Skip if manually optimized text matches current text (already optimized)
-    const lastManual = settings.lastManualOptimizedText
-    const alreadyOptimized = typeof lastManual === 'string' && lastManual === text
+    const lastManual = settings.lastManualOptimizedText;
+    const alreadyOptimized =
+      typeof lastManual === "string" && lastManual === text;
 
     if (optimizeOnRun && !alreadyOptimized) {
-      ctx.onProgress(10, 'Optimizing prompt...')
+      ctx.onProgress(10, "Optimizing prompt...");
       try {
-        const optimized = await this.optimizePrompt(text, settings, ctx.abortSignal)
-        ctx.onProgress(90, 'Prompt optimized')
+        const optimized = await this.optimizePrompt(
+          text,
+          settings,
+          ctx.abortSignal,
+        );
+        ctx.onProgress(90, "Prompt optimized");
         return {
-          status: 'success',
+          status: "success",
           outputs: { output: optimized },
           resultPath: optimized,
-          resultMetadata: { output: optimized, originalText: text, optimized: true },
+          resultMetadata: {
+            output: optimized,
+            originalText: text,
+            optimized: true,
+          },
           durationMs: Date.now() - start,
-          cost: 0 // optimizer cost is tracked by the optimizer model itself
-        }
+          cost: 0, // optimizer cost is tracked by the optimizer model itself
+        };
       } catch (error) {
         // Optimization failed — fall through and use original text
-        console.warn('[TextInput] Prompt optimization failed, using original text:', error)
+        console.warn(
+          "[TextInput] Prompt optimization failed, using original text:",
+          error,
+        );
       }
     }
 
     return {
-      status: 'success',
+      status: "success",
       outputs: { output: text },
       resultPath: text,
       resultMetadata: { output: text },
       durationMs: Date.now() - start,
-      cost: 0
-    }
+      cost: 0,
+    };
   }
 
   /**
@@ -91,32 +119,34 @@ export class TextInputHandler extends BaseNodeHandler {
   private async optimizePrompt(
     text: string,
     settings: Record<string, unknown>,
-    signal: AbortSignal
+    signal: AbortSignal,
   ): Promise<string> {
     // Build API params — pass through optimizer settings (mode, style, etc.)
     // but strip internal keys that aren't API params.
-    const apiParams: Record<string, unknown> = {}
+    const apiParams: Record<string, unknown> = {};
     const skipKeys = new Set([
-      'optimizeOnRun', 'autoOptimize', 'lastManualOptimizedText'
-    ])
+      "optimizeOnRun",
+      "autoOptimize",
+      "lastManualOptimizedText",
+    ]);
     for (const [key, value] of Object.entries(settings)) {
-      if (skipKeys.has(key) || key.startsWith('__')) continue
-      if (value !== undefined && value !== null && value !== '') {
-        apiParams[key] = value
+      if (skipKeys.has(key) || key.startsWith("__")) continue;
+      if (value !== undefined && value !== null && value !== "") {
+        apiParams[key] = value;
       }
     }
-    apiParams.text = text
+    apiParams.text = text;
 
-    if (signal.aborted) throw new Error('Aborted')
+    if (signal.aborted) throw new Error("Aborted");
 
-    const client = getWaveSpeedClient()
-    const result = await client.run(OPTIMIZER_MODEL, apiParams, { signal })
+    const client = getWaveSpeedClient();
+    const result = await client.run(OPTIMIZER_MODEL, apiParams, { signal });
 
     if (result.outputs && result.outputs.length > 0) {
-      const output = result.outputs[0]
-      return typeof output === 'string' ? output : JSON.stringify(output)
+      const output = result.outputs[0];
+      return typeof output === "string" ? output : JSON.stringify(output);
     }
 
-    throw new Error('No optimized prompt returned from optimizer')
+    throw new Error("No optimized prompt returned from optimizer");
   }
 }
diff --git a/electron/workflow/nodes/output/file.ts b/electron/workflow/nodes/output/file.ts
index d191cb84..10788832 100644
--- a/electron/workflow/nodes/output/file.ts
+++ b/electron/workflow/nodes/output/file.ts
@@ -1,152 +1,201 @@
 /**
  * File Export node — downloads a result URL to local disk.
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
-import { getFileStorageInstance } from '../../utils/file-storage'
-import * as path from 'path'
-import * as fs from 'fs'
-import https from 'https'
-import http from 'http'
-import { randomUUID } from 'crypto'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
+import { getFileStorageInstance } from "../../utils/file-storage";
+import * as path from "path";
+import * as fs from "fs";
+import https from "https";
+import http from "http";
+import { randomUUID } from "crypto";
 
 export const fileExportDef: NodeTypeDefinition = {
-  type: 'output/file', category: 'output', label: 'File Export',
-  inputs: [
-    { key: 'url', label: 'URL', dataType: 'url', required: true }
-  ],
+  type: "output/file",
+  category: "output",
+  label: "File Export",
+  inputs: [{ key: "url", label: "URL", dataType: "url", required: true }],
   outputs: [],
   params: [
-    { key: 'outputDir', label: 'Output Directory', type: 'string', default: '' },
-    { key: 'filename', label: 'Filename Prefix', type: 'string', default: 'output' },
-    { key: 'format', label: 'Format', type: 'select', default: 'auto', options: [
-      { label: 'Auto', value: 'auto' }, { label: 'MP4', value: 'mp4' },
-      { label: 'PNG', value: 'png' }, { label: 'JPG', value: 'jpg' },
-      { label: 'MP3', value: 'mp3' }, { label: 'WAV', value: 'wav' }
-    ]}
-  ]
-}
+    {
+      key: "outputDir",
+      label: "Output Directory",
+      type: "string",
+      default: "",
+    },
+    {
+      key: "filename",
+      label: "Filename Prefix",
+      type: "string",
+      default: "output",
+    },
+    {
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "auto",
+      options: [
+        { label: "Auto", value: "auto" },
+        { label: "MP4", value: "mp4" },
+        { label: "PNG", value: "png" },
+        { label: "JPG", value: "jpg" },
+        { label: "MP3", value: "mp3" },
+        { label: "WAV", value: "wav" },
+      ],
+    },
+  ],
+};
 
 export class FileExportHandler extends BaseNodeHandler {
-  constructor() { super(fileExportDef) }
+  constructor() {
+    super(fileExportDef);
+  }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const url = String(ctx.inputs.url ?? ctx.inputs.content ?? '')
-    const outputDir = String(ctx.params.outputDir ?? '').trim()
-    const filenamePrefix = sanitizeFilename(String(ctx.params.filename ?? 'output'))
-    const format = String(ctx.params.format ?? 'auto')
+    const start = Date.now();
+    const url = String(ctx.inputs.url ?? ctx.inputs.content ?? "");
+    const outputDir = String(ctx.params.outputDir ?? "").trim();
+    const filenamePrefix = sanitizeFilename(
+      String(ctx.params.filename ?? "output"),
+    );
+    const format = String(ctx.params.format ?? "auto");
 
     if (!url) {
-      return { status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0, error: 'No URL provided for export' }
+      return {
+        status: "error",
+        outputs: {},
+        durationMs: Date.now() - start,
+        cost: 0,
+        error: "No URL provided for export",
+      };
     }
 
-    const ext = sanitizeExtension(format === 'auto' ? guessExtension(url) : format)
-    const resolvedOutputDir = outputDir || getFileStorageInstance().getMediaOutputDir(ctx.workflowId)
-    fs.mkdirSync(resolvedOutputDir, { recursive: true })
-    const uniqueName = `${filenamePrefix}_${randomUUID()}`
-    const fullPath = path.join(resolvedOutputDir, `${uniqueName}.${ext}`)
+    const ext = sanitizeExtension(
+      format === "auto" ? guessExtension(url) : format,
+    );
+    const resolvedOutputDir =
+      outputDir || getFileStorageInstance().getMediaOutputDir(ctx.workflowId);
+    fs.mkdirSync(resolvedOutputDir, { recursive: true });
+    const uniqueName = `${filenamePrefix}_${randomUUID()}`;
+    const fullPath = path.join(resolvedOutputDir, `${uniqueName}.${ext}`);
 
-    await saveToPath(url, fullPath)
+    await saveToPath(url, fullPath);
 
     return {
-      status: 'success', outputs: {},
+      status: "success",
+      outputs: {},
       resultPath: fullPath,
       resultMetadata: {
         sourceUrl: url,
         exportPath: fullPath,
         outputDir: resolvedOutputDir,
         filenamePrefix,
-        generatedName: `${uniqueName}.${ext}`
+        generatedName: `${uniqueName}.${ext}`,
       },
-      durationMs: Date.now() - start, cost: 0
-    }
+      durationMs: Date.now() - start,
+      cost: 0,
+    };
   }
 }
 
 async function saveToPath(source: string, destPath: string): Promise<void> {
   // local-asset://<encoded absolute path>
   if (/^local-asset:\/\//i.test(source)) {
-    const localPath = decodeURIComponent(source.replace(/^local-asset:\/\//i, ''))
-    fs.copyFileSync(localPath, destPath)
-    return
+    const localPath = decodeURIComponent(
+      source.replace(/^local-asset:\/\//i, ""),
+    );
+    fs.copyFileSync(localPath, destPath);
+    return;
   }
 
   // file:// URL
   if (/^file:\/\//i.test(source)) {
-    const fileUrl = new URL(source)
-    fs.copyFileSync(fileUrl.pathname, destPath)
-    return
+    const fileUrl = new URL(source);
+    fs.copyFileSync(fileUrl.pathname, destPath);
+    return;
   }
 
   // data URL
   if (/^data:/i.test(source)) {
-    const m = source.match(/^data:.*?;base64,(.+)$/i)
-    if (!m) throw new Error('Unsupported data URL format')
-    fs.writeFileSync(destPath, Buffer.from(m[1], 'base64'))
-    return
+    const m = source.match(/^data:.*?;base64,(.+)$/i);
+    if (!m) throw new Error("Unsupported data URL format");
+    fs.writeFileSync(destPath, Buffer.from(m[1], "base64"));
+    return;
   }
 
   // http(s) URL
   if (/^https?:\/\//i.test(source)) {
-    await downloadToFile(source, destPath)
-    return
+    await downloadToFile(source, destPath);
+    return;
   }
 
   // Fallback: treat as local absolute/relative path
   if (fs.existsSync(source)) {
-    fs.copyFileSync(source, destPath)
-    return
+    fs.copyFileSync(source, destPath);
+    return;
   }
 
-  throw new Error('Unsupported export source URL')
+  throw new Error("Unsupported export source URL");
 }
 
 function downloadToFile(url: string, destPath: string): Promise<void> {
   return new Promise((resolve, reject) => {
-    const client = url.startsWith('https://') ? https : http
-    const out = fs.createWriteStream(destPath)
-    client.get(url, (res) => {
-      // Follow redirects
-      if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
-        out.close()
-        fs.rmSync(destPath, { force: true })
-        downloadToFile(res.headers.location, destPath).then(resolve).catch(reject)
-        return
-      }
-      if (res.statusCode && res.statusCode >= 400) {
-        out.close()
-        fs.rmSync(destPath, { force: true })
-        reject(new Error(`Download failed: HTTP ${res.statusCode}`))
-        return
-      }
-      res.pipe(out)
-      out.on('finish', () => {
-        out.close()
-        resolve()
+    const client = url.startsWith("https://") ? https : http;
+    const out = fs.createWriteStream(destPath);
+    client
+      .get(url, (res) => {
+        // Follow redirects
+        if (
+          res.statusCode &&
+          res.statusCode >= 300 &&
+          res.statusCode < 400 &&
+          res.headers.location
+        ) {
+          out.close();
+          fs.rmSync(destPath, { force: true });
+          downloadToFile(res.headers.location, destPath)
+            .then(resolve)
+            .catch(reject);
+          return;
+        }
+        if (res.statusCode && res.statusCode >= 400) {
+          out.close();
+          fs.rmSync(destPath, { force: true });
+          reject(new Error(`Download failed: HTTP ${res.statusCode}`));
+          return;
+        }
+        res.pipe(out);
+        out.on("finish", () => {
+          out.close();
+          resolve();
+        });
       })
-    }).on('error', (error) => {
-      out.close()
-      fs.rmSync(destPath, { force: true })
-      reject(error)
-    })
-  })
+      .on("error", (error) => {
+        out.close();
+        fs.rmSync(destPath, { force: true });
+        reject(error);
+      });
+  });
 }
 
 function sanitizeFilename(name: string): string {
-  const cleaned = name.replace(/[<>:"/\\|?*\u0000-\u001F]/g, '_').trim()
-  return cleaned || 'output'
+  const cleaned = name.replace(/[<>:"/\\|?*\u0000-\u001F]/g, "_").trim();
+  return cleaned || "output";
 }
 
 function sanitizeExtension(ext: string): string {
-  return ext.replace(/^\./, '').trim().toLowerCase() || 'png'
+  return ext.replace(/^\./, "").trim().toLowerCase() || "png";
 }
 
 function guessExtension(url: string): string {
-  const p = url.toLowerCase().split('?')[0]
-  const match = p.match(/\.(\w{2,4})$/)
-  if (match) return match[1]
-  if (p.includes('video') || p.includes('mp4')) return 'mp4'
-  if (p.includes('audio') || p.includes('mp3')) return 'mp3'
-  return 'png'
+  const p = url.toLowerCase().split("?")[0];
+  const match = p.match(/\.(\w{2,4})$/);
+  if (match) return match[1];
+  if (p.includes("video") || p.includes("mp4")) return "mp4";
+  if (p.includes("audio") || p.includes("mp3")) return "mp3";
+  return "png";
 }
diff --git a/electron/workflow/nodes/output/preview.ts b/electron/workflow/nodes/output/preview.ts
index 1b731b84..3ee4cc76 100644
--- a/electron/workflow/nodes/output/preview.ts
+++ b/electron/workflow/nodes/output/preview.ts
@@ -1,52 +1,85 @@
 /**
  * Preview Display node — URL-aware preview that auto-detects content type.
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
 
-export type PreviewContentType = 'image' | 'video' | 'audio' | '3d' | 'unknown'
+export type PreviewContentType = "image" | "video" | "audio" | "3d" | "unknown";
 
 export const previewDisplayDef: NodeTypeDefinition = {
-  type: 'output/preview', category: 'output', label: 'Preview',
-  inputs: [{ key: 'input', label: 'URL', dataType: 'url', required: true }],
+  type: "output/preview",
+  category: "output",
+  label: "Preview",
+  inputs: [{ key: "input", label: "URL", dataType: "url", required: true }],
   outputs: [],
   params: [
-    { key: 'autoDetect', label: 'Auto-detect Type', type: 'boolean', default: true },
-    { key: 'forceType', label: 'Force Type', type: 'select', default: 'auto', options: [
-      { label: 'Auto', value: 'auto' }, { label: 'Image', value: 'image' },
-      { label: 'Video', value: 'video' }, { label: 'Audio', value: 'audio' },
-      { label: '3D Model', value: '3d' }
-    ]}
-  ]
-}
+    {
+      key: "autoDetect",
+      label: "Auto-detect Type",
+      type: "boolean",
+      default: true,
+    },
+    {
+      key: "forceType",
+      label: "Force Type",
+      type: "select",
+      default: "auto",
+      options: [
+        { label: "Auto", value: "auto" },
+        { label: "Image", value: "image" },
+        { label: "Video", value: "video" },
+        { label: "Audio", value: "audio" },
+        { label: "3D Model", value: "3d" },
+      ],
+    },
+  ],
+};
 
 export class PreviewDisplayHandler extends BaseNodeHandler {
-  constructor() { super(previewDisplayDef) }
+  constructor() {
+    super(previewDisplayDef);
+  }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const url = String(ctx.inputs.input ?? '')
+    const start = Date.now();
+    const url = String(ctx.inputs.input ?? "");
     if (!url) {
-      return { status: 'error', outputs: {}, durationMs: Date.now() - start, cost: 0, error: 'No URL provided for preview' }
+      return {
+        status: "error",
+        outputs: {},
+        durationMs: Date.now() - start,
+        cost: 0,
+        error: "No URL provided for preview",
+      };
     }
-    const forceType = String(ctx.params.forceType ?? 'auto')
-    const contentType: PreviewContentType = forceType !== 'auto' ? forceType as PreviewContentType : detectContentType(url)
+    const forceType = String(ctx.params.forceType ?? "auto");
+    const contentType: PreviewContentType =
+      forceType !== "auto"
+        ? (forceType as PreviewContentType)
+        : detectContentType(url);
     return {
-      status: 'success', outputs: {},
+      status: "success",
+      outputs: {},
       resultMetadata: { previewUrl: url, contentType, preview: url },
-      durationMs: Date.now() - start, cost: 0
-    }
+      durationMs: Date.now() - start,
+      cost: 0,
+    };
   }
 }
 
 function detectContentType(url: string): PreviewContentType {
-  const p = url.toLowerCase().split('?')[0]
-  if (/\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(p)) return 'image'
-  if (/\.(mp4|webm|mov|avi|mkv)$/.test(p)) return 'video'
-  if (/\.(mp3|wav|ogg|flac|aac|m4a)$/.test(p)) return 'audio'
-  if (/\.(glb|gltf)$/.test(p)) return '3d'
-  if (p.includes('/image') || p.includes('img')) return 'image'
-  if (p.includes('/video') || p.includes('vid')) return 'video'
-  if (p.includes('/audio') || p.includes('/tts') || p.includes('/music')) return 'audio'
-  return 'unknown'
+  const p = url.toLowerCase().split("?")[0];
+  if (/\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(p)) return "image";
+  if (/\.(mp4|webm|mov|avi|mkv)$/.test(p)) return "video";
+  if (/\.(mp3|wav|ogg|flac|aac|m4a)$/.test(p)) return "audio";
+  if (/\.(glb|gltf)$/.test(p)) return "3d";
+  if (p.includes("/image") || p.includes("img")) return "image";
+  if (p.includes("/video") || p.includes("vid")) return "video";
+  if (p.includes("/audio") || p.includes("/tts") || p.includes("/music"))
+    return "audio";
+  return "unknown";
 }
diff --git a/electron/workflow/nodes/processing/concat.ts b/electron/workflow/nodes/processing/concat.ts
index 53ad7b4f..41c58843 100644
--- a/electron/workflow/nodes/processing/concat.ts
+++ b/electron/workflow/nodes/processing/concat.ts
@@ -2,66 +2,72 @@
  * Concat node — concatenate multiple values into one array.
  * Collects value1..value5 (from connections or params), skips empty, outputs array.
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
 
-const VALUE_KEYS = ['value1', 'value2', 'value3', 'value4', 'value5']
+const VALUE_KEYS = ["value1", "value2", "value3", "value4", "value5"];
 
 export const concatDef: NodeTypeDefinition = {
-  type: 'processing/concat',
-  category: 'processing',
-  label: 'Concat',
+  type: "processing/concat",
+  category: "processing",
+  label: "Concat",
   inputs: [
-    { key: 'value1', label: 'Value 1', dataType: 'any', required: true },
-    { key: 'value2', label: 'Value 2', dataType: 'any', required: true },
-    { key: 'value3', label: 'Value 3', dataType: 'any', required: false },
-    { key: 'value4', label: 'Value 4', dataType: 'any', required: false },
-    { key: 'value5', label: 'Value 5', dataType: 'any', required: false }
+    { key: "value1", label: "Value 1", dataType: "any", required: true },
+    { key: "value2", label: "Value 2", dataType: "any", required: true },
+    { key: "value3", label: "Value 3", dataType: "any", required: false },
+    { key: "value4", label: "Value 4", dataType: "any", required: false },
+    { key: "value5", label: "Value 5", dataType: "any", required: false },
   ],
-  outputs: [{ key: 'output', label: 'Array', dataType: 'any', required: true }],
-  params: []
-}
+  outputs: [{ key: "output", label: "Array", dataType: "any", required: true }],
+  params: [],
+};
 
 export class ConcatHandler extends BaseNodeHandler {
   constructor() {
-    super(concatDef)
+    super(concatDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const arr: string[] = []
+    const start = Date.now();
+    const arr: string[] = [];
     for (const key of VALUE_KEYS) {
-      const v = ctx.inputs[key] ?? ctx.params[key]
-      if (v === undefined || v === null) continue
+      const v = ctx.inputs[key] ?? ctx.params[key];
+      if (v === undefined || v === null) continue;
       if (Array.isArray(v)) {
         for (const item of v) {
-          if (item !== undefined && item !== null && item !== '') arr.push(String(item))
+          if (item !== undefined && item !== null && item !== "")
+            arr.push(String(item));
         }
       } else {
-        const s = String(v).trim()
-        if (s) arr.push(s)
+        const s = String(v).trim();
+        if (s) arr.push(s);
       }
     }
     if (arr.length === 0) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: 'Concat requires at least one non-empty value. Connect inputs or provide values.'
-      }
+        error:
+          "Concat requires at least one non-empty value. Connect inputs or provide values.",
+      };
     }
     return {
-      status: 'success',
+      status: "success",
       outputs: { output: arr },
       resultPath: arr[0],
       resultMetadata: {
         output: arr,
         resultUrl: arr[0],
-        resultUrls: arr
+        resultUrls: arr,
       },
       durationMs: Date.now() - start,
-      cost: 0
-    }
+      cost: 0,
+    };
   }
 }
diff --git a/electron/workflow/nodes/processing/select.ts b/electron/workflow/nodes/processing/select.ts
index 3b152282..4e6e194c 100644
--- a/electron/workflow/nodes/processing/select.ts
+++ b/electron/workflow/nodes/processing/select.ts
@@ -2,54 +2,70 @@
  * Select node — select one value from an array by index (0-based).
  * Input can be an array (from Concat or other nodes) or a single value (treated as [value]).
  */
-import { BaseNodeHandler, type NodeExecutionContext, type NodeExecutionResult } from '../base'
-import type { NodeTypeDefinition } from '../../../../src/workflow/types/node-defs'
+import {
+  BaseNodeHandler,
+  type NodeExecutionContext,
+  type NodeExecutionResult,
+} from "../base";
+import type { NodeTypeDefinition } from "../../../../src/workflow/types/node-defs";
 
 export const selectDef: NodeTypeDefinition = {
-  type: 'processing/select',
-  category: 'processing',
-  label: 'Select',
-  inputs: [{ key: 'input', label: 'Array', dataType: 'any', required: true }],
-  outputs: [{ key: 'output', label: 'Value', dataType: 'any', required: true }],
+  type: "processing/select",
+  category: "processing",
+  label: "Select",
+  inputs: [{ key: "input", label: "Array", dataType: "any", required: true }],
+  outputs: [{ key: "output", label: "Value", dataType: "any", required: true }],
   params: [
-    { key: 'index', label: 'Index', type: 'number', default: 0, connectable: false, validation: { min: 0, step: 1 } }
-  ]
-}
+    {
+      key: "index",
+      label: "Index",
+      type: "number",
+      default: 0,
+      connectable: false,
+      validation: { min: 0, step: 1 },
+    },
+  ],
+};
 
 export class SelectHandler extends BaseNodeHandler {
   constructor() {
-    super(selectDef)
+    super(selectDef);
   }
 
   async execute(ctx: NodeExecutionContext): Promise<NodeExecutionResult> {
-    const start = Date.now()
-    const raw = ctx.inputs.input ?? ctx.params.input
-    let arr: string[]
+    const start = Date.now();
+    const raw = ctx.inputs.input ?? ctx.params.input;
+    let arr: string[];
     if (Array.isArray(raw)) {
-      arr = raw.filter((x): x is string => x !== undefined && x !== null).map(String)
-    } else if (raw !== undefined && raw !== null && raw !== '') {
-      const s = String(raw).trim()
-      if (s.includes(',')) {
-        arr = s.split(',').map(x => x.trim()).filter(Boolean)
+      arr = raw
+        .filter((x): x is string => x !== undefined && x !== null)
+        .map(String);
+    } else if (raw !== undefined && raw !== null && raw !== "") {
+      const s = String(raw).trim();
+      if (s.includes(",")) {
+        arr = s
+          .split(",")
+          .map((x) => x.trim())
+          .filter(Boolean);
       } else {
-        arr = [s]
+        arr = [s];
       }
     } else {
-      arr = []
+      arr = [];
     }
-    const index = Math.floor(Number(ctx.params.index ?? 0))
+    const index = Math.floor(Number(ctx.params.index ?? 0));
     if (index < 0 || index >= arr.length) {
       return {
-        status: 'error',
+        status: "error",
         outputs: {},
         durationMs: Date.now() - start,
         cost: 0,
-        error: `Index ${index} is out of range. Array has ${arr.length} item(s) (valid indices: 0–${Math.max(0, arr.length - 1)}).`
-      }
+        error: `Index ${index} is out of range. Array has ${arr.length} item(s) (valid indices: 0–${Math.max(0, arr.length - 1)}).`,
+      };
     }
-    const value = arr[index]
+    const value = arr[index];
     return {
-      status: 'success',
+      status: "success",
       outputs: { output: value },
       resultPath: value,
       resultMetadata: {
@@ -57,10 +73,10 @@ export class SelectHandler extends BaseNodeHandler {
         resultUrl: value,
         resultUrls: [value],
         index,
-        arrayLength: arr.length
+        arrayLength: arr.length,
       },
       durationMs: Date.now() - start,
-      cost: 0
-    }
+      cost: 0,
+    };
   }
 }
diff --git a/electron/workflow/nodes/register-all.ts b/electron/workflow/nodes/register-all.ts
index fe9be1ad..228c1974 100644
--- a/electron/workflow/nodes/register-all.ts
+++ b/electron/workflow/nodes/register-all.ts
@@ -1,21 +1,23 @@
-import { nodeRegistry } from './registry'
-import { mediaUploadDef, MediaUploadHandler } from './input/media-upload'
-import { textInputDef, TextInputHandler } from './input/text-input'
-import { aiTaskDef, AITaskHandler } from './ai-task/run'
-import { fileExportDef, FileExportHandler } from './output/file'
-import { previewDisplayDef, PreviewDisplayHandler } from './output/preview'
-import { registerFreeToolNodes } from './free-tool/register'
-import { concatDef, ConcatHandler } from './processing/concat'
-import { selectDef, SelectHandler } from './processing/select'
+import { nodeRegistry } from "./registry";
+import { mediaUploadDef, MediaUploadHandler } from "./input/media-upload";
+import { textInputDef, TextInputHandler } from "./input/text-input";
+import { aiTaskDef, AITaskHandler } from "./ai-task/run";
+import { fileExportDef, FileExportHandler } from "./output/file";
+import { previewDisplayDef, PreviewDisplayHandler } from "./output/preview";
+import { registerFreeToolNodes } from "./free-tool/register";
+import { concatDef, ConcatHandler } from "./processing/concat";
+import { selectDef, SelectHandler } from "./processing/select";
 
 export function registerAllNodes(): void {
-  nodeRegistry.register(mediaUploadDef, new MediaUploadHandler())
-  nodeRegistry.register(textInputDef, new TextInputHandler())
-  nodeRegistry.register(aiTaskDef, new AITaskHandler())
-  nodeRegistry.register(fileExportDef, new FileExportHandler())
-  nodeRegistry.register(previewDisplayDef, new PreviewDisplayHandler())
-  registerFreeToolNodes()
-  nodeRegistry.register(concatDef, new ConcatHandler())
-  nodeRegistry.register(selectDef, new SelectHandler())
-  console.log(`[Registry] Registered ${nodeRegistry.getAll().length} node types`)
+  nodeRegistry.register(mediaUploadDef, new MediaUploadHandler());
+  nodeRegistry.register(textInputDef, new TextInputHandler());
+  nodeRegistry.register(aiTaskDef, new AITaskHandler());
+  nodeRegistry.register(fileExportDef, new FileExportHandler());
+  nodeRegistry.register(previewDisplayDef, new PreviewDisplayHandler());
+  registerFreeToolNodes();
+  nodeRegistry.register(concatDef, new ConcatHandler());
+  nodeRegistry.register(selectDef, new SelectHandler());
+  console.log(
+    `[Registry] Registered ${nodeRegistry.getAll().length} node types`,
+  );
 }
diff --git a/electron/workflow/nodes/registry.ts b/electron/workflow/nodes/registry.ts
index 95087720..bf7da8a4 100644
--- a/electron/workflow/nodes/registry.ts
+++ b/electron/workflow/nodes/registry.ts
@@ -1,37 +1,40 @@
 /**
  * Node type registry — register and lookup node handlers.
  */
-import type { NodeTypeDefinition, NodeCategory } from '../../../src/workflow/types/node-defs'
-import type { NodeHandler } from './base'
+import type {
+  NodeTypeDefinition,
+  NodeCategory,
+} from "../../../src/workflow/types/node-defs";
+import type { NodeHandler } from "./base";
 
 export class NodeRegistry {
-  private handlers = new Map<string, NodeHandler>()
-  private definitions = new Map<string, NodeTypeDefinition>()
+  private handlers = new Map<string, NodeHandler>();
+  private definitions = new Map<string, NodeTypeDefinition>();
 
   register(definition: NodeTypeDefinition, handler: NodeHandler): void {
-    this.definitions.set(definition.type, definition)
-    this.handlers.set(definition.type, handler)
+    this.definitions.set(definition.type, definition);
+    this.handlers.set(definition.type, handler);
   }
 
   getHandler(type: string): NodeHandler | undefined {
-    return this.handlers.get(type)
+    return this.handlers.get(type);
   }
 
   getDefinition(type: string): NodeTypeDefinition | undefined {
-    return this.definitions.get(type)
+    return this.definitions.get(type);
   }
 
   getAll(): NodeTypeDefinition[] {
-    return Array.from(this.definitions.values())
+    return Array.from(this.definitions.values());
   }
 
   getByCategory(category: NodeCategory): NodeTypeDefinition[] {
-    return this.getAll().filter(d => d.category === category)
+    return this.getAll().filter((d) => d.category === category);
   }
 
   getAllTypes(): string[] {
-    return Array.from(this.definitions.keys())
+    return Array.from(this.definitions.keys());
   }
 }
 
-export const nodeRegistry = new NodeRegistry()
+export const nodeRegistry = new NodeRegistry();
diff --git a/electron/workflow/services/model-list.ts b/electron/workflow/services/model-list.ts
index 36dd2d90..dd8c25b2 100644
--- a/electron/workflow/services/model-list.ts
+++ b/electron/workflow/services/model-list.ts
@@ -6,70 +6,89 @@
  * Main process only needs models for execution lookups (inputSchema etc).
  * Conversion uses shared logic from src/workflow/lib/model-converter.
  */
-import type { WaveSpeedModel, ModelListCache } from '../../../src/workflow/types/node-defs'
-import type { Model } from '../../../src/types/model'
-import { convertDesktopModel } from '../../../src/workflow/lib/model-converter'
+import type {
+  WaveSpeedModel,
+  ModelListCache,
+} from "../../../src/workflow/types/node-defs";
+import type { Model } from "../../../src/types/model";
+import { convertDesktopModel } from "../../../src/workflow/lib/model-converter";
 
-let modelCache: ModelListCache | null = null
+let modelCache: ModelListCache | null = null;
 
 /**
  * Sync models from renderer's modelsStore into main process cache.
  * Called via IPC when renderer fetches/refreshes models.
  */
 export function syncModelsFromRenderer(desktopModels: Model[]): void {
-  const models = desktopModels.map(convertDesktopModel)
-  const categories = [...new Set(models.map(m => m.category))].sort()
-  const providers = [...new Set(models.map(m => m.provider))].sort()
+  const models = desktopModels.map(convertDesktopModel);
+  const categories = [...new Set(models.map((m) => m.category))].sort();
+  const providers = [...new Set(models.map((m) => m.provider))].sort();
   modelCache = {
     models,
     categories,
     providers,
     fetchedAt: new Date().toISOString(),
-    ttlMs: 24 * 60 * 60 * 1000
-  }
+    ttlMs: 24 * 60 * 60 * 1000,
+  };
 }
 
 /** Get cached models (synced from renderer). */
 export function getModels(): WaveSpeedModel[] {
-  return modelCache?.models ?? []
+  return modelCache?.models ?? [];
 }
 
-export function searchModels(query: string, filters?: { category?: string; provider?: string }): WaveSpeedModel[] {
-  if (!modelCache) return []
-  let results = modelCache.models
-  if (filters?.category) results = results.filter(m => m.category === filters.category)
-  if (filters?.provider) results = results.filter(m => m.provider === filters.provider)
+export function searchModels(
+  query: string,
+  filters?: { category?: string; provider?: string },
+): WaveSpeedModel[] {
+  if (!modelCache) return [];
+  let results = modelCache.models;
+  if (filters?.category)
+    results = results.filter((m) => m.category === filters.category);
+  if (filters?.provider)
+    results = results.filter((m) => m.provider === filters.provider);
   if (query.trim()) {
-    const q = query.toLowerCase().trim()
+    const q = query.toLowerCase().trim();
     results = results
-      .map(m => ({ model: m, score: fuzzyScore(m, q) }))
-      .filter(r => r.score > 0)
+      .map((m) => ({ model: m, score: fuzzyScore(m, q) }))
+      .filter((r) => r.score > 0)
       .sort((a, b) => b.score - a.score)
-      .map(r => r.model)
+      .map((r) => r.model);
   }
-  return results
+  return results;
 }
 
 export function getModelById(modelId: string): WaveSpeedModel | null {
-  return modelCache?.models.find(m => m.modelId === modelId) ?? null
+  return modelCache?.models.find((m) => m.modelId === modelId) ?? null;
 }
 
-export function getModelFilters(): { categories: string[]; providers: string[] } {
-  return { categories: modelCache?.categories ?? [], providers: modelCache?.providers ?? [] }
+export function getModelFilters(): {
+  categories: string[];
+  providers: string[];
+} {
+  return {
+    categories: modelCache?.categories ?? [],
+    providers: modelCache?.providers ?? [],
+  };
 }
 
 function fuzzyScore(model: WaveSpeedModel, query: string): number {
-  const fields = [model.modelId, model.displayName, model.provider, model.category].map(f => f.toLowerCase())
-  let score = 0
+  const fields = [
+    model.modelId,
+    model.displayName,
+    model.provider,
+    model.category,
+  ].map((f) => f.toLowerCase());
+  let score = 0;
   for (const field of fields) {
-    if (field === query) score += 100
-    else if (field.startsWith(query)) score += 50
-    else if (field.includes(query)) score += 20
+    if (field === query) score += 100;
+    else if (field.startsWith(query)) score += 50;
+    else if (field.includes(query)) score += 20;
   }
-  const words = query.split(/[\s\-_\/]+/).filter(Boolean)
+  const words = query.split(/[\s\-_\/]+/).filter(Boolean);
   if (words.length > 1) {
-    const allText = fields.join(' ')
-    score += words.filter(w => allText.includes(w)).length * 10
+    const allText = fields.join(" ");
+    score += words.filter((w) => allText.includes(w)).length * 10;
   }
-  return score
+  return score;
 }
diff --git a/electron/workflow/services/retry.ts b/electron/workflow/services/retry.ts
index e202ca45..d114b8fe 100644
--- a/electron/workflow/services/retry.ts
+++ b/electron/workflow/services/retry.ts
@@ -2,41 +2,53 @@
  * API retry with exponential backoff.
  */
 export interface RetryConfig {
-  maxRetries: number
-  baseDelayMs: number
-  skipClientErrors: boolean
+  maxRetries: number;
+  baseDelayMs: number;
+  skipClientErrors: boolean;
 }
 
-const DEFAULT_CONFIG: RetryConfig = { maxRetries: 3, baseDelayMs: 1000, skipClientErrors: true }
+const DEFAULT_CONFIG: RetryConfig = {
+  maxRetries: 3,
+  baseDelayMs: 1000,
+  skipClientErrors: true,
+};
 
 export class ApiError extends Error {
-  constructor(message: string, public statusCode: number) {
-    super(message)
-    this.name = 'ApiError'
+  constructor(
+    message: string,
+    public statusCode: number,
+  ) {
+    super(message);
+    this.name = "ApiError";
   }
 }
 
 export async function withRetry<T>(
   fn: () => Promise<T>,
-  config: Partial<RetryConfig> = {}
+  config: Partial<RetryConfig> = {},
 ): Promise<{ result: T; attempts: number; delays: number[] }> {
-  const cfg = { ...DEFAULT_CONFIG, ...config }
-  let attempts = 0
-  const delays: number[] = []
+  const cfg = { ...DEFAULT_CONFIG, ...config };
+  let attempts = 0;
+  const delays: number[] = [];
 
   while (true) {
-    attempts++
+    attempts++;
     try {
-      const result = await fn()
-      return { result, attempts, delays }
+      const result = await fn();
+      return { result, attempts, delays };
     } catch (error) {
-      if (error instanceof ApiError && cfg.skipClientErrors && error.statusCode >= 400 && error.statusCode < 500) {
-        throw error
+      if (
+        error instanceof ApiError &&
+        cfg.skipClientErrors &&
+        error.statusCode >= 400 &&
+        error.statusCode < 500
+      ) {
+        throw error;
       }
-      if (attempts >= cfg.maxRetries) throw error
-      const delay = cfg.baseDelayMs * Math.pow(2, attempts - 1)
-      delays.push(delay)
-      await new Promise(resolve => setTimeout(resolve, delay))
+      if (attempts >= cfg.maxRetries) throw error;
+      const delay = cfg.baseDelayMs * Math.pow(2, attempts - 1);
+      delays.push(delay);
+      await new Promise((resolve) => setTimeout(resolve, delay));
     }
   }
 }
diff --git a/electron/workflow/services/service-locator.ts b/electron/workflow/services/service-locator.ts
index 92e643c2..63fdf34d 100644
--- a/electron/workflow/services/service-locator.ts
+++ b/electron/workflow/services/service-locator.ts
@@ -2,29 +2,34 @@
  * Service locator — provides configured API clients to node handlers.
  * Reads API key from Desktop's existing settings (electron-store / settings.json).
  */
-import { app } from 'electron'
-import { join } from 'path'
-import { existsSync, readFileSync } from 'fs'
+import { app } from "electron";
+import { join } from "path";
+import { existsSync, readFileSync } from "fs";
 
 // We reuse Desktop's apiClient pattern but in main process we need to read the key directly
-let _apiKey: string = ''
+let _apiKey: string = "";
 
 function loadApiKeyFromDesktopSettings(): string {
-  if (_apiKey) return _apiKey
+  if (_apiKey) return _apiKey;
   try {
-    const userDataPath = app.getPath('userData')
-    const settingsPath = join(userDataPath, 'settings.json')
+    const userDataPath = app.getPath("userData");
+    const settingsPath = join(userDataPath, "settings.json");
     if (existsSync(settingsPath)) {
-      const data = JSON.parse(readFileSync(settingsPath, 'utf-8'))
+      const data = JSON.parse(readFileSync(settingsPath, "utf-8"));
       if (data.apiKey) {
-        _apiKey = data.apiKey
-        return _apiKey
+        _apiKey = data.apiKey;
+        return _apiKey;
       }
     }
   } catch (error) {
-    console.error('[ServiceLocator] Failed to load API key from Desktop settings:', error)
+    console.error(
+      "[ServiceLocator] Failed to load API key from Desktop settings:",
+      error,
+    );
   }
-  throw new Error('WaveSpeed API key not configured. Go to Settings to add it.')
+  throw new Error(
+    "WaveSpeed API key not configured. Go to Settings to add it.",
+  );
 }
 
 /**
@@ -33,102 +38,130 @@ function loadApiKeyFromDesktopSettings(): string {
  * run() accepts an optional AbortSignal so Stop can cancel in-flight requests and polling.
  */
 export interface WaveSpeedMainClient {
-  run(model: string, input: Record<string, unknown>, options?: { signal?: AbortSignal }): Promise<{ outputs: unknown[]; [key: string]: unknown }>
-  uploadFile(file: File, filename: string): Promise<string>
+  run(
+    model: string,
+    input: Record<string, unknown>,
+    options?: { signal?: AbortSignal },
+  ): Promise<{ outputs: unknown[]; [key: string]: unknown }>;
+  uploadFile(file: File, filename: string): Promise<string>;
 }
 
-let _wsClient: WaveSpeedMainClient | null = null
+let _wsClient: WaveSpeedMainClient | null = null;
 
 export function getWaveSpeedClient(): WaveSpeedMainClient {
-  if (_wsClient) return _wsClient
+  if (_wsClient) return _wsClient;
 
-  const apiKey = loadApiKeyFromDesktopSettings()
-  const BASE_URL = 'https://api.wavespeed.ai'
+  const apiKey = loadApiKeyFromDesktopSettings();
+  const BASE_URL = "https://api.wavespeed.ai";
 
   _wsClient = {
-    async run(model: string, input: Record<string, unknown>, options?: { signal?: AbortSignal }) {
-      const signal = options?.signal
+    async run(
+      model: string,
+      input: Record<string, unknown>,
+      options?: { signal?: AbortSignal },
+    ) {
+      const signal = options?.signal;
 
       /** Throw AbortError as soon as signal is aborted (works even if fetch ignores signal). */
       function throwIfAborted(): void {
-        if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError')
+        if (signal?.aborted) throw new DOMException("Cancelled", "AbortError");
       }
 
       /** Race a promise with the abort signal so we stop immediately on Stop. */
       async function withAbort<T>(p: Promise<T>): Promise<T> {
-        throwIfAborted()
-        if (!signal) return p
+        throwIfAborted();
+        if (!signal) return p;
         const abortPromise = new Promise<never>((_, reject) => {
-          signal.addEventListener('abort', () => reject(new DOMException('Cancelled', 'AbortError')), { once: true })
-        })
-        return Promise.race([p, abortPromise])
+          signal.addEventListener(
+            "abort",
+            () => reject(new DOMException("Cancelled", "AbortError")),
+            { once: true },
+          );
+        });
+        return Promise.race([p, abortPromise]);
       }
 
       // Submit prediction
       const submitRes = await withAbort(
         fetch(`${BASE_URL}/api/v3/${model}`, {
-          method: 'POST',
+          method: "POST",
           headers: {
-            'Content-Type': 'application/json',
-            'Authorization': `Bearer ${apiKey}`,
-            'X-Client-Name': 'wavespeed-desktop-workflow'
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${apiKey}`,
+            "X-Client-Name": "wavespeed-desktop-workflow",
           },
           body: JSON.stringify(input),
-          ...(signal && { signal })
-        })
-      )
-      const submitData = await submitRes.json() as { code: number; message: string; data: { id: string; status: string; outputs?: unknown[] } }
-      if (submitData.code !== 200) throw new Error(submitData.message || 'Failed to run prediction')
-
-      const requestId = submitData.data.id
-      if (!requestId) throw new Error('No request ID in response')
+          ...(signal && { signal }),
+        }),
+      );
+      const submitData = (await submitRes.json()) as {
+        code: number;
+        message: string;
+        data: { id: string; status: string; outputs?: unknown[] };
+      };
+      if (submitData.code !== 200)
+        throw new Error(submitData.message || "Failed to run prediction");
+
+      const requestId = submitData.data.id;
+      if (!requestId) throw new Error("No request ID in response");
 
       // Poll for result
-      const startTime = Date.now()
-      const timeout = 600000 // 10 min
+      const startTime = Date.now();
+      const timeout = 600000; // 10 min
       while (true) {
-        throwIfAborted()
-        if (Date.now() - startTime > timeout) throw new Error('Prediction timed out')
+        throwIfAborted();
+        if (Date.now() - startTime > timeout)
+          throw new Error("Prediction timed out");
 
         const pollRes = await withAbort(
           fetch(`${BASE_URL}/api/v3/predictions/${requestId}/result`, {
-            headers: { 'Authorization': `Bearer ${apiKey}` },
-            ...(signal && { signal })
-          })
-        )
-        const pollData = await pollRes.json() as { code: number; data: { status: string; outputs?: unknown[]; error?: string } }
-        if (pollData.code !== 200) throw new Error('Failed to get result')
-
-        if (pollData.data.status === 'completed') return pollData.data as { outputs: unknown[] }
-        if (pollData.data.status === 'failed') throw new Error(pollData.data.error || 'Prediction failed')
+            headers: { Authorization: `Bearer ${apiKey}` },
+            ...(signal && { signal }),
+          }),
+        );
+        const pollData = (await pollRes.json()) as {
+          code: number;
+          data: { status: string; outputs?: unknown[]; error?: string };
+        };
+        if (pollData.code !== 200) throw new Error("Failed to get result");
+
+        if (pollData.data.status === "completed")
+          return pollData.data as { outputs: unknown[] };
+        if (pollData.data.status === "failed")
+          throw new Error(pollData.data.error || "Prediction failed");
 
         // Wait 1s but bail out immediately if aborted
-        await withAbort(new Promise(r => setTimeout(r, 1000)))
+        await withAbort(new Promise((r) => setTimeout(r, 1000)));
       }
     },
 
     async uploadFile(file: File, filename: string) {
-      const formData = new FormData()
-      formData.append('file', file, filename)
+      const formData = new FormData();
+      formData.append("file", file, filename);
 
       const res = await fetch(`${BASE_URL}/api/v3/media/upload/binary`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Authorization': `Bearer ${apiKey}`
+          Authorization: `Bearer ${apiKey}`,
         },
-        body: formData
-      })
-      const data = await res.json() as { code: number; message: string; data: { download_url: string } }
-      if (data.code !== 200) throw new Error(data.message || 'Failed to upload file')
-      return data.data.download_url
-    }
-  }
+        body: formData,
+      });
+      const data = (await res.json()) as {
+        code: number;
+        message: string;
+        data: { download_url: string };
+      };
+      if (data.code !== 200)
+        throw new Error(data.message || "Failed to upload file");
+      return data.data.download_url;
+    },
+  };
 
-  return _wsClient
+  return _wsClient;
 }
 
 /** Reset cached clients (call when API keys change) */
 export function resetClients(): void {
-  _wsClient = null
-  _apiKey = null
+  _wsClient = null;
+  _apiKey = null;
 }
diff --git a/electron/workflow/services/template-init.ts b/electron/workflow/services/template-init.ts
index f2ff7998..2a33921c 100644
--- a/electron/workflow/services/template-init.ts
+++ b/electron/workflow/services/template-init.ts
@@ -2,46 +2,48 @@
  * Template initialization service — loads default templates from files into memory.
  * File-based templates are NOT written to the database.
  */
-import { v4 as uuid } from 'uuid'
-import type { Template, TemplateFilter } from '../../../src/types/template'
-import { loadTemplatesFromFiles } from './template-loader'
-import * as templateRepo from '../db/template.repo'
+import { v4 as uuid } from "uuid";
+import type { Template, TemplateFilter } from "../../../src/types/template";
+import { loadTemplatesFromFiles } from "./template-loader";
+import * as templateRepo from "../db/template.repo";
 
-let fileTemplates: Template[] = []
+let fileTemplates: Template[] = [];
 
 /**
  * Load file templates into memory (called once at startup)
  */
 export function initializeDefaultTemplates(): void {
   try {
-    const inputs = loadTemplatesFromFiles()
-    const now = new Date().toISOString()
+    const inputs = loadTemplatesFromFiles();
+    const now = new Date().toISOString();
 
-    fileTemplates = inputs.map(input => ({
+    fileTemplates = inputs.map((input) => ({
       id: `file-${uuid()}`,
       name: input.name,
       i18nKey: input.i18nKey || undefined,
-      _searchText: input._searchText || '',
+      _searchText: input._searchText || "",
       description: input.description || null,
       tags: input.tags || [],
-      type: 'public' as const,
-      templateType: 'workflow' as const,
+      type: "public" as const,
+      templateType: "workflow" as const,
       isFavorite: false,
       createdAt: now,
       updatedAt: now,
-      author: input.author || 'WaveSpeed',
+      author: input.author || "WaveSpeed",
       useCount: 0,
       thumbnail: input.thumbnail || null,
       playgroundData: null,
-      workflowData: input.workflowData || null
-    }))
+      workflowData: input.workflowData || null,
+    }));
 
-    console.log(`[TemplateInit] Loaded ${fileTemplates.length} file templates into memory`)
+    console.log(
+      `[TemplateInit] Loaded ${fileTemplates.length} file templates into memory`,
+    );
 
     // One-time cleanup: remove old public templates from DB that now exist as file templates
-    cleanupOldPublicTemplates()
+    cleanupOldPublicTemplates();
   } catch (error) {
-    console.error('[TemplateInit] Failed to load file templates:', error)
+    console.error("[TemplateInit] Failed to load file templates:", error);
   }
 }
 
@@ -51,15 +53,20 @@ export function initializeDefaultTemplates(): void {
  */
 function cleanupOldPublicTemplates(): void {
   try {
-    const fileNames = new Set(fileTemplates.map(t => t.name))
-    const dbPublic = templateRepo.queryTemplates({ type: 'public', templateType: 'workflow' })
-    const toDelete = dbPublic.filter(t => fileNames.has(t.name))
+    const fileNames = new Set(fileTemplates.map((t) => t.name));
+    const dbPublic = templateRepo.queryTemplates({
+      type: "public",
+      templateType: "workflow",
+    });
+    const toDelete = dbPublic.filter((t) => fileNames.has(t.name));
     if (toDelete.length > 0) {
-      templateRepo.deleteTemplates(toDelete.map(t => t.id))
-      console.log(`[TemplateInit] Cleaned up ${toDelete.length} old public templates from DB: [${toDelete.map(t => t.name).join(', ')}]`)
+      templateRepo.deleteTemplates(toDelete.map((t) => t.id));
+      console.log(
+        `[TemplateInit] Cleaned up ${toDelete.length} old public templates from DB: [${toDelete.map((t) => t.name).join(", ")}]`,
+      );
     }
   } catch (error) {
-    console.error('[TemplateInit] Cleanup failed (non-fatal):', error)
+    console.error("[TemplateInit] Cleanup failed (non-fatal):", error);
   }
 }
 
@@ -67,40 +74,43 @@ function cleanupOldPublicTemplates(): void {
  * Get all file-based templates, optionally filtered
  */
 export function getFileTemplates(filter?: TemplateFilter): Template[] {
-  let results = [...fileTemplates]
+  let results = [...fileTemplates];
 
-  if (filter?.templateType && filter.templateType !== 'workflow') {
-    return []
+  if (filter?.templateType && filter.templateType !== "workflow") {
+    return [];
   }
 
-  if (filter?.type === 'custom') {
-    return []
+  if (filter?.type === "custom") {
+    return [];
   }
 
   if (filter?.isFavorite) {
-    return []
+    return [];
   }
 
   if (filter?.category) {
-    results = results.filter(t => t.workflowData?.category === filter.category)
+    results = results.filter(
+      (t) => t.workflowData?.category === filter.category,
+    );
   }
 
   if (filter?.search) {
-    const s = filter.search.toLowerCase()
-    results = results.filter(t =>
-      t.name.toLowerCase().includes(s) ||
-      (t.description && t.description.toLowerCase().includes(s)) ||
-      t.tags.some(tag => tag.toLowerCase().includes(s)) ||
-      (t._searchText && t._searchText.toLowerCase().includes(s))
-    )
+    const s = filter.search.toLowerCase();
+    results = results.filter(
+      (t) =>
+        t.name.toLowerCase().includes(s) ||
+        (t.description && t.description.toLowerCase().includes(s)) ||
+        t.tags.some((tag) => tag.toLowerCase().includes(s)) ||
+        (t._searchText && t._searchText.toLowerCase().includes(s)),
+    );
   }
 
-  return results
+  return results;
 }
 
 /**
  * Get a file template by ID
  */
 export function getFileTemplateById(id: string): Template | null {
-  return fileTemplates.find(t => t.id === id) || null
+  return fileTemplates.find((t) => t.id === id) || null;
 }
diff --git a/electron/workflow/services/template-loader.ts b/electron/workflow/services/template-loader.ts
index 8c3cfe5a..cb272af7 100644
--- a/electron/workflow/services/template-loader.ts
+++ b/electron/workflow/services/template-loader.ts
@@ -1,75 +1,81 @@
 /**
  * Template loader — loads workflow templates from data/templates directory
  */
-import * as fs from 'fs'
-import * as path from 'path'
-import { app } from 'electron'
-import type { CreateTemplateInput } from '../../../src/types/template'
-import type { GraphDefinition } from '../../../src/workflow/types/workflow'
+import * as fs from "fs";
+import * as path from "path";
+import { app } from "electron";
+import type { CreateTemplateInput } from "../../../src/types/template";
+import type { GraphDefinition } from "../../../src/workflow/types/workflow";
 
 interface TemplateFileData {
   // Standard template format
-  name?: string
-  i18nKey?: string
-  description?: string
-  tags?: string[]
-  category?: string
-  author?: string
-  thumbnail?: string
-  graphDefinition: GraphDefinition
-  
+  name?: string;
+  i18nKey?: string;
+  description?: string;
+  tags?: string[];
+  category?: string;
+  author?: string;
+  thumbnail?: string;
+  graphDefinition: GraphDefinition;
+
   // Exported workflow format (alternative)
-  version?: string
-  id?: string
-  exportedAt?: string
+  version?: string;
+  id?: string;
+  exportedAt?: string;
 }
 
 // Category mapping from directory name to category identifier used in UI filters
 const CATEGORY_MAP: Record<string, string> = {
-  'image-processing': 'image-processing',
-  'video-processing': 'video-editing',
-  'audio-processing': 'audio-conversion',
-  'face-processing': 'image-processing',
-  'media-processing': 'video-editing',
-  'ai-generation': 'ai-generation'
-}
+  "image-processing": "image-processing",
+  "video-processing": "video-editing",
+  "audio-processing": "audio-conversion",
+  "face-processing": "image-processing",
+  "media-processing": "video-editing",
+  "ai-generation": "ai-generation",
+};
 
 // Cache: i18nKey → all translated names/descriptions concatenated for search
-let i18nSearchMap: Record<string, string> = {}
+let i18nSearchMap: Record<string, string> = {};
 
 /**
  * Load all locale files and build a search text map for preset templates.
  * Maps i18nKey → concatenated translated names + descriptions from all locales.
  */
 function loadI18nSearchMap(): Record<string, string> {
-  const map: Record<string, string> = {}
+  const map: Record<string, string> = {};
   const localesDir = app.isPackaged
-    ? path.join(process.resourcesPath, 'app.asar', 'out', 'renderer', 'locales')
-    : path.join(process.cwd(), 'src', 'i18n', 'locales')
+    ? path.join(process.resourcesPath, "app.asar", "out", "renderer", "locales")
+    : path.join(process.cwd(), "src", "i18n", "locales");
 
   try {
     if (!fs.existsSync(localesDir)) {
-      console.warn('[TemplateLoader] Locales directory not found:', localesDir)
-      return map
+      console.warn("[TemplateLoader] Locales directory not found:", localesDir);
+      return map;
     }
-    const localeFiles = fs.readdirSync(localesDir).filter(f => f.endsWith('.json'))
+    const localeFiles = fs
+      .readdirSync(localesDir)
+      .filter((f) => f.endsWith(".json"));
     for (const file of localeFiles) {
       try {
-        const content = fs.readFileSync(path.join(localesDir, file), 'utf-8')
-        const locale = JSON.parse(content)
-        const presets = locale?.presetTemplates
-        if (!presets) continue
+        const content = fs.readFileSync(path.join(localesDir, file), "utf-8");
+        const locale = JSON.parse(content);
+        const presets = locale?.presetTemplates;
+        if (!presets) continue;
         for (const [key, val] of Object.entries(presets) as [string, any][]) {
-          const text = [val.name || '', val.description || ''].join(' ')
-          map[key] = map[key] ? `${map[key]} ${text}` : text
+          const text = [val.name || "", val.description || ""].join(" ");
+          map[key] = map[key] ? `${map[key]} ${text}` : text;
         }
-      } catch { /* skip broken locale files */ }
+      } catch {
+        /* skip broken locale files */
+      }
     }
-    console.log(`[TemplateLoader] Built i18n search index for ${Object.keys(map).length} preset keys from ${localeFiles.length} locales`)
+    console.log(
+      `[TemplateLoader] Built i18n search index for ${Object.keys(map).length} preset keys from ${localeFiles.length} locales`,
+    );
   } catch (error) {
-    console.error('[TemplateLoader] Failed to load i18n search map:', error)
+    console.error("[TemplateLoader] Failed to load i18n search map:", error);
   }
-  return map
+  return map;
 }
 
 /**
@@ -78,117 +84,132 @@ function loadI18nSearchMap(): Record<string, string> {
 function getTemplatesDir(): string {
   // In development, use the project root
   if (!app.isPackaged) {
-    return path.join(process.cwd(), 'data', 'templates')
+    return path.join(process.cwd(), "data", "templates");
   }
   // In production, use the resources directory
-  return path.join(process.resourcesPath, 'data', 'templates')
+  return path.join(process.resourcesPath, "data", "templates");
 }
 
 /**
  * Load all workflow templates from the data/templates directory
  */
 export function loadTemplatesFromFiles(): CreateTemplateInput[] {
-  const templates: CreateTemplateInput[] = []
-  const templatesDir = getTemplatesDir()
+  const templates: CreateTemplateInput[] = [];
+  const templatesDir = getTemplatesDir();
 
   if (!fs.existsSync(templatesDir)) {
-    console.warn('[TemplateLoader] Templates directory not found:', templatesDir)
-    return templates
+    console.warn(
+      "[TemplateLoader] Templates directory not found:",
+      templatesDir,
+    );
+    return templates;
   }
-  console.log('[TemplateLoader] Reading templates from:', templatesDir)
+  console.log("[TemplateLoader] Reading templates from:", templatesDir);
 
   // Build i18n search index once
-  i18nSearchMap = loadI18nSearchMap()
+  i18nSearchMap = loadI18nSearchMap();
 
   try {
     // Read all category directories
-    const categories = fs.readdirSync(templatesDir, { withFileTypes: true })
-      .filter(dirent => dirent.isDirectory())
-      .map(dirent => dirent.name)
+    const categories = fs
+      .readdirSync(templatesDir, { withFileTypes: true })
+      .filter((dirent) => dirent.isDirectory())
+      .map((dirent) => dirent.name);
 
     for (const categoryDir of categories) {
-      const categoryPath = path.join(templatesDir, categoryDir)
-      const category = CATEGORY_MAP[categoryDir] || categoryDir
+      const categoryPath = path.join(templatesDir, categoryDir);
+      const category = CATEGORY_MAP[categoryDir] || categoryDir;
 
       // Read all JSON files in the category directory
-      const files = fs.readdirSync(categoryPath)
-        .filter(file => file.endsWith('.json'))
+      const files = fs
+        .readdirSync(categoryPath)
+        .filter((file) => file.endsWith(".json"));
 
       for (const file of files) {
         try {
-          const filePath = path.join(categoryPath, file)
-          const content = fs.readFileSync(filePath, 'utf-8')
-          const data: TemplateFileData = JSON.parse(content)
+          const filePath = path.join(categoryPath, file);
+          const content = fs.readFileSync(filePath, "utf-8");
+          const data: TemplateFileData = JSON.parse(content);
 
           // Determine template name (from name field or filename)
-          const templateName = data.name || path.basename(file, '.json')
-          
+          const templateName = data.name || path.basename(file, ".json");
+
           // Clean up graphDefinition - ensure workflowId is empty string
-          const cleanedNodes = data.graphDefinition.nodes.map(node => ({
+          const cleanedNodes = data.graphDefinition.nodes.map((node) => ({
             ...node,
-            workflowId: '',
-            currentOutputId: node.currentOutputId || null
-          }))
-          
-          const cleanedEdges = data.graphDefinition.edges.map(edge => ({
+            workflowId: "",
+            currentOutputId: node.currentOutputId || null,
+          }));
+
+          const cleanedEdges = data.graphDefinition.edges.map((edge) => ({
             ...edge,
-            workflowId: ''
-          }))
-          
+            workflowId: "",
+          }));
+
           const cleanedGraphDefinition: GraphDefinition = {
             nodes: cleanedNodes,
-            edges: cleanedEdges
-          }
-          
+            edges: cleanedEdges,
+          };
+
           // Count nodes and extract node types
-          const nodeCount = cleanedNodes.length
-          const nodeTypes = [...new Set(cleanedNodes.map(n => n.nodeType))]
-          
+          const nodeCount = cleanedNodes.length;
+          const nodeTypes = [...new Set(cleanedNodes.map((n) => n.nodeType))];
+
           // Extract use cases from tags or generate from category
-          const useCases = data.tags || [category.replace('-', ' ')]
+          const useCases = data.tags || [category.replace("-", " ")];
 
           // Resolve thumbnail: use explicit field, or auto-extract from first image upload node
-          let thumbnail = data.thumbnail || null
+          let thumbnail = data.thumbnail || null;
           if (!thumbnail) {
             const imageUploadNode = cleanedNodes.find(
-              (n: any) => n.nodeType === 'input/media-upload' && n.params?.mediaType === 'image' && n.params?.uploadedUrl
-            )
+              (n: any) =>
+                n.nodeType === "input/media-upload" &&
+                n.params?.mediaType === "image" &&
+                n.params?.uploadedUrl,
+            );
             if (imageUploadNode) {
-              thumbnail = (imageUploadNode as any).params.uploadedUrl
+              thumbnail = (imageUploadNode as any).params.uploadedUrl;
             }
           }
 
           const template: CreateTemplateInput = {
             name: templateName,
             i18nKey: data.i18nKey || undefined,
-            _searchText: data.i18nKey ? i18nSearchMap[data.i18nKey] || '' : '',
+            _searchText: data.i18nKey ? i18nSearchMap[data.i18nKey] || "" : "",
             description: data.description || null,
             tags: data.tags || [],
-            type: 'public',
-            templateType: 'workflow',
-            author: data.author || 'WaveSpeed',
+            type: "public",
+            templateType: "workflow",
+            author: data.author || "WaveSpeed",
             thumbnail,
             workflowData: {
               category: data.category || category,
               graphDefinition: cleanedGraphDefinition,
               nodeTypes,
               nodeCount,
-              useCases
-            }
-          }
-
-          templates.push(template)
-          console.log(`[TemplateLoader] Loaded template: ${templateName} from ${categoryDir}/${file}`)
+              useCases,
+            },
+          };
+
+          templates.push(template);
+          console.log(
+            `[TemplateLoader] Loaded template: ${templateName} from ${categoryDir}/${file}`,
+          );
         } catch (error) {
-          console.error(`[TemplateLoader] Failed to load template from ${categoryDir}/${file}:`, error)
+          console.error(
+            `[TemplateLoader] Failed to load template from ${categoryDir}/${file}:`,
+            error,
+          );
         }
       }
     }
 
-    console.log(`[TemplateLoader] Successfully loaded ${templates.length} templates from files`)
+    console.log(
+      `[TemplateLoader] Successfully loaded ${templates.length} templates from files`,
+    );
   } catch (error) {
-    console.error('[TemplateLoader] Failed to load templates:', error)
+    console.error("[TemplateLoader] Failed to load templates:", error);
   }
 
-  return templates
+  return templates;
 }
diff --git a/electron/workflow/services/template-migration.ts b/electron/workflow/services/template-migration.ts
index b6b97fdb..93ecdc75 100644
--- a/electron/workflow/services/template-migration.ts
+++ b/electron/workflow/services/template-migration.ts
@@ -1,43 +1,53 @@
-import * as templateRepo from '../db/template.repo'
+import * as templateRepo from "../db/template.repo";
 
-const TEMPLATES_STORAGE_KEY = 'wavespeed_templates'
-const MIGRATION_FLAG_KEY = 'wavespeed_templates_migrated'
+const TEMPLATES_STORAGE_KEY = "wavespeed_templates";
+const MIGRATION_FLAG_KEY = "wavespeed_templates_migrated";
 
 interface LegacyTemplate {
-  id: string
-  name: string
-  modelId: string
-  modelName: string
-  values: Record<string, unknown>
-  createdAt: string
-  updatedAt: string
+  id: string;
+  name: string;
+  modelId: string;
+  modelName: string;
+  values: Record<string, unknown>;
+  createdAt: string;
+  updatedAt: string;
 }
 
-export async function migrateTemplatesFromLocalStorage(): Promise<{ migrated: number; skipped: number }> {
+export async function migrateTemplatesFromLocalStorage(): Promise<{
+  migrated: number;
+  skipped: number;
+}> {
   // Note: This function runs in main process, so we can't access localStorage directly
   // Migration will be triggered from renderer process via IPC
-  console.log('[Template Migration] Migration should be triggered from renderer process')
-  return { migrated: 0, skipped: 0 }
+  console.log(
+    "[Template Migration] Migration should be triggered from renderer process",
+  );
+  return { migrated: 0, skipped: 0 };
 }
 
-export function migrateTemplatesSync(legacyTemplatesJson: string, migrationComplete: boolean): { migrated: number; skipped: number } {
+export function migrateTemplatesSync(
+  legacyTemplatesJson: string,
+  migrationComplete: boolean,
+): { migrated: number; skipped: number } {
   if (migrationComplete) {
-    console.log('[Template Migration] Already completed, skipping')
-    return { migrated: 0, skipped: 0 }
+    console.log("[Template Migration] Already completed, skipping");
+    return { migrated: 0, skipped: 0 };
   }
-  
-  let migrated = 0
-  let skipped = 0
-  
+
+  let migrated = 0;
+  let skipped = 0;
+
   try {
     if (!legacyTemplatesJson) {
-      console.log('[Template Migration] No legacy templates found')
-      return { migrated: 0, skipped: 0 }
+      console.log("[Template Migration] No legacy templates found");
+      return { migrated: 0, skipped: 0 };
     }
-    
-    const legacyTemplates: LegacyTemplate[] = JSON.parse(legacyTemplatesJson)
-    console.log(`[Template Migration] Found ${legacyTemplates.length} legacy templates`)
-    
+
+    const legacyTemplates: LegacyTemplate[] = JSON.parse(legacyTemplatesJson);
+    console.log(
+      `[Template Migration] Found ${legacyTemplates.length} legacy templates`,
+    );
+
     // Migrate each template
     for (const legacy of legacyTemplates) {
       try {
@@ -45,30 +55,34 @@ export function migrateTemplatesSync(legacyTemplatesJson: string, migrationCompl
           name: legacy.name,
           description: null,
           tags: [],
-          type: 'custom',
-          templateType: 'playground',
+          type: "custom",
+          templateType: "playground",
           author: null,
           thumbnail: null,
           playgroundData: {
             modelId: legacy.modelId,
             modelName: legacy.modelName,
-            values: legacy.values
+            values: legacy.values,
           },
-          workflowData: null
-        })
-        migrated++
+          workflowData: null,
+        });
+        migrated++;
       } catch (error) {
-        console.error(`[Template Migration] Failed to migrate template ${legacy.id}:`, error)
-        skipped++
+        console.error(
+          `[Template Migration] Failed to migrate template ${legacy.id}:`,
+          error,
+        );
+        skipped++;
       }
     }
-    
-    console.log(`[Template Migration] Complete: ${migrated} migrated, ${skipped} skipped`)
-    
+
+    console.log(
+      `[Template Migration] Complete: ${migrated} migrated, ${skipped} skipped`,
+    );
   } catch (error) {
-    console.error('[Template Migration] Migration failed:', error)
-    throw error
+    console.error("[Template Migration] Migration failed:", error);
+    throw error;
   }
-  
-  return { migrated, skipped }
+
+  return { migrated, skipped };
 }
diff --git a/electron/workflow/utils/file-storage.ts b/electron/workflow/utils/file-storage.ts
index a59dc8ad..6df758dc 100644
--- a/electron/workflow/utils/file-storage.ts
+++ b/electron/workflow/utils/file-storage.ts
@@ -13,69 +13,76 @@
  *
  * workflow.db sits at the root level.
  */
-import { app } from 'electron'
-import * as path from 'path'
-import * as fs from 'fs'
-import https from 'https'
-import http from 'http'
-import type { GraphDefinition } from '../../../src/workflow/types/workflow'
+import { app } from "electron";
+import * as path from "path";
+import * as fs from "fs";
+import https from "https";
+import http from "http";
+import type { GraphDefinition } from "../../../src/workflow/types/workflow";
 
-const ROOT_DIR_NAME = 'workflow-data'
+const ROOT_DIR_NAME = "workflow-data";
 
 function getWorkflowDataRoot(): string {
   // Packaged app runs inside app.asar (read-only); use userData for writes.
   if (app.isPackaged) {
-    return path.join(app.getPath('userData'), ROOT_DIR_NAME)
+    return path.join(app.getPath("userData"), ROOT_DIR_NAME);
   }
   // Keep dev behavior as-is for easier debugging.
-  return path.join(app.getAppPath(), ROOT_DIR_NAME)
+  return path.join(app.getAppPath(), ROOT_DIR_NAME);
 }
 
 function sanitizeName(name: string): string {
-  return name.replace(/[<>:"/\\|?*]/g, '_').replace(/\s+/g, '_').trim() || 'unnamed'
+  return (
+    name
+      .replace(/[<>:"/\\|?*]/g, "_")
+      .replace(/\s+/g, "_")
+      .trim() || "unnamed"
+  );
 }
 
 function timestamp(): string {
-  const d = new Date()
-  return `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}_${String(d.getHours()).padStart(2, '0')}${String(d.getMinutes()).padStart(2, '0')}${String(d.getSeconds()).padStart(2, '0')}`
+  const d = new Date();
+  return `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, "0")}${String(d.getDate()).padStart(2, "0")}_${String(d.getHours()).padStart(2, "0")}${String(d.getMinutes()).padStart(2, "0")}${String(d.getSeconds()).padStart(2, "0")}`;
 }
 
 function guessExtFromUrl(url: string): string {
   try {
-    const pathname = new URL(url).pathname
-    const ext = path.extname(pathname).toLowerCase()
-    if (ext && ext.length <= 5) return ext
-  } catch { /* ignore */ }
-  return '.png'
+    const pathname = new URL(url).pathname;
+    const ext = path.extname(pathname).toLowerCase();
+    if (ext && ext.length <= 5) return ext;
+  } catch {
+    /* ignore */
+  }
+  return ".png";
 }
 
 export interface WorkflowSnapshot {
-  workflowId: string
-  name: string
-  graphDefinition: GraphDefinition
-  savedAt: string
+  workflowId: string;
+  name: string;
+  graphDefinition: GraphDefinition;
+  savedAt: string;
 }
 
 /** Global singleton instance */
-let _instance: FileStorageService | null = null
+let _instance: FileStorageService | null = null;
 
 export function getFileStorageInstance(): FileStorageService {
-  if (!_instance) _instance = new FileStorageService()
-  return _instance
+  if (!_instance) _instance = new FileStorageService();
+  return _instance;
 }
 
 export class FileStorageService {
-  private rootPath: string
-  private nameMap = new Map<string, string>()
+  private rootPath: string;
+  private nameMap = new Map<string, string>();
 
   constructor(basePath?: string) {
     if (basePath) {
-      this.rootPath = basePath
+      this.rootPath = basePath;
     } else {
       try {
-        this.rootPath = getWorkflowDataRoot()
+        this.rootPath = getWorkflowDataRoot();
       } catch {
-        this.rootPath = path.join(process.cwd(), ROOT_DIR_NAME)
+        this.rootPath = path.join(process.cwd(), ROOT_DIR_NAME);
       }
     }
   }
@@ -83,11 +90,11 @@ export class FileStorageService {
   /* ─── Name mapping ──────────────────────────────────────────── */
 
   registerWorkflowName(workflowId: string, name: string): void {
-    this.nameMap.set(workflowId, sanitizeName(name))
+    this.nameMap.set(workflowId, sanitizeName(name));
   }
 
   private resolveDirName(workflowId: string): string {
-    return this.nameMap.get(workflowId) ?? workflowId
+    return this.nameMap.get(workflowId) ?? workflowId;
   }
 
   /**
@@ -97,107 +104,144 @@ export class FileStorageService {
    * remove the target first so the rename can proceed.
    * Returns true if rename succeeded, false if no old dir existed.
    */
-  renameWorkflowDir(workflowId: string, oldName: string, newName: string): boolean {
-    const oldSanitized = sanitizeName(oldName)
-    const newSanitized = sanitizeName(newName)
+  renameWorkflowDir(
+    workflowId: string,
+    oldName: string,
+    newName: string,
+  ): boolean {
+    const oldSanitized = sanitizeName(oldName);
+    const newSanitized = sanitizeName(newName);
 
     // No-op if sanitized names are the same
     if (oldSanitized === newSanitized) {
-      this.registerWorkflowName(workflowId, newName)
-      return true
+      this.registerWorkflowName(workflowId, newName);
+      return true;
     }
 
-    const oldDir = path.join(this.rootPath, oldSanitized)
-    const newDir = path.join(this.rootPath, newSanitized)
+    const oldDir = path.join(this.rootPath, oldSanitized);
+    const newDir = path.join(this.rootPath, newSanitized);
 
     if (!fs.existsSync(oldDir)) {
       // Old dir doesn't exist — just update the name mapping
-      this.registerWorkflowName(workflowId, newName)
-      return false
+      this.registerWorkflowName(workflowId, newName);
+      return false;
     }
 
     // If target directory already exists (orphaned from a deleted/renamed workflow),
     // remove it so we can rename cleanly
     if (fs.existsSync(newDir)) {
-      fs.rmSync(newDir, { recursive: true, force: true })
+      fs.rmSync(newDir, { recursive: true, force: true });
     }
 
-    fs.renameSync(oldDir, newDir)
-    this.registerWorkflowName(workflowId, newName)
-    return true
+    fs.renameSync(oldDir, newDir);
+    this.registerWorkflowName(workflowId, newName);
+    return true;
   }
 
   /* ─── Path helpers ──────────────────────────────────────────── */
 
   getWorkflowDir(workflowId: string): string {
-    return path.join(this.rootPath, this.resolveDirName(workflowId))
+    return path.join(this.rootPath, this.resolveDirName(workflowId));
   }
 
   getConfigDir(workflowId: string): string {
-    return path.join(this.getWorkflowDir(workflowId), 'config')
+    return path.join(this.getWorkflowDir(workflowId), "config");
   }
 
   getMediaOutputDir(workflowId: string): string {
-    return path.join(this.getWorkflowDir(workflowId), 'media_output')
+    return path.join(this.getWorkflowDir(workflowId), "media_output");
   }
 
   getWorkflowSnapshotPath(workflowId: string): string {
-    return path.join(this.getConfigDir(workflowId), 'workflow.json')
+    return path.join(this.getConfigDir(workflowId), "workflow.json");
   }
 
   /** Legacy aliases for backward compat */
   getNodeUploadDir(workflowId: string, nodeId: string): string {
-    return path.join(this.getConfigDir(workflowId), 'uploads', nodeId)
+    return path.join(this.getConfigDir(workflowId), "uploads", nodeId);
   }
   getNodeOutputDir(workflowId: string, nodeId: string): string {
-    return path.join(this.getMediaOutputDir(workflowId), nodeId)
-  }
-  getExecutionDir(workflowId: string, nodeId: string, executionId: string): string {
-    return path.join(this.getNodeOutputDir(workflowId, nodeId), executionId)
-  }
-  getArtifactPath(workflowId: string, nodeId: string, executionId: string, filename: string): string {
-    return path.join(this.getExecutionDir(workflowId, nodeId, executionId), filename)
+    return path.join(this.getMediaOutputDir(workflowId), nodeId);
+  }
+  getExecutionDir(
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+  ): string {
+    return path.join(this.getNodeOutputDir(workflowId, nodeId), executionId);
+  }
+  getArtifactPath(
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+    filename: string,
+  ): string {
+    return path.join(
+      this.getExecutionDir(workflowId, nodeId, executionId),
+      filename,
+    );
   }
   getCacheDir(workflowId: string): string {
-    return this.getMediaOutputDir(workflowId)
+    return this.getMediaOutputDir(workflowId);
   }
 
   /* ─── Directory management ──────────────────────────────────── */
 
   ensureDir(dir: string): string {
-    fs.mkdirSync(dir, { recursive: true })
-    return dir
+    fs.mkdirSync(dir, { recursive: true });
+    return dir;
   }
 
-  ensureExecutionDir(workflowId: string, nodeId: string, executionId: string): string {
-    return this.ensureDir(this.getExecutionDir(workflowId, nodeId, executionId))
+  ensureExecutionDir(
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+  ): string {
+    return this.ensureDir(
+      this.getExecutionDir(workflowId, nodeId, executionId),
+    );
   }
 
   ensureNodeUploadDir(workflowId: string, nodeId: string): string {
-    return this.ensureDir(this.getNodeUploadDir(workflowId, nodeId))
+    return this.ensureDir(this.getNodeUploadDir(workflowId, nodeId));
   }
 
   ensureBaseDir(): void {
-    this.ensureDir(this.rootPath)
+    this.ensureDir(this.rootPath);
   }
 
   /* ─── Workflow config ───────────────────────────────────────── */
 
-  saveWorkflowSnapshot(workflowId: string, name: string, graphDefinition: GraphDefinition): void {
-    this.registerWorkflowName(workflowId, name)
-    this.ensureDir(this.getConfigDir(workflowId))
-    const snapshot: WorkflowSnapshot = { workflowId, name, graphDefinition, savedAt: new Date().toISOString() }
-    fs.writeFileSync(this.getWorkflowSnapshotPath(workflowId), JSON.stringify(snapshot, null, 2), 'utf-8')
+  saveWorkflowSnapshot(
+    workflowId: string,
+    name: string,
+    graphDefinition: GraphDefinition,
+  ): void {
+    this.registerWorkflowName(workflowId, name);
+    this.ensureDir(this.getConfigDir(workflowId));
+    const snapshot: WorkflowSnapshot = {
+      workflowId,
+      name,
+      graphDefinition,
+      savedAt: new Date().toISOString(),
+    };
+    fs.writeFileSync(
+      this.getWorkflowSnapshotPath(workflowId),
+      JSON.stringify(snapshot, null, 2),
+      "utf-8",
+    );
   }
 
   loadWorkflowSnapshot(workflowId: string): WorkflowSnapshot | null {
-    const p = this.getWorkflowSnapshotPath(workflowId)
-    if (!fs.existsSync(p)) return null
+    const p = this.getWorkflowSnapshotPath(workflowId);
+    if (!fs.existsSync(p)) return null;
     try {
-      const snap = JSON.parse(fs.readFileSync(p, 'utf-8')) as WorkflowSnapshot
-      if (snap.name) this.registerWorkflowName(workflowId, snap.name)
-      return snap
-    } catch { return null }
+      const snap = JSON.parse(fs.readFileSync(p, "utf-8")) as WorkflowSnapshot;
+      if (snap.name) this.registerWorkflowName(workflowId, snap.name);
+      return snap;
+    } catch {
+      return null;
+    }
   }
 
   /* ─── Media output download ─────────────────────────────────── */
@@ -207,35 +251,59 @@ export class FileStorageService {
    * Naming: {workflow_name}_{YYYYMMDD}_{HHmmss}_{modelSlug}.{ext}
    * Returns the local file path.
    */
-  async downloadResult(workflowId: string, url: string, modelId?: string): Promise<string> {
-    const dir = this.ensureDir(this.getMediaOutputDir(workflowId))
-    const wfName = this.resolveDirName(workflowId)
-    const modelSlug = modelId ? sanitizeName(modelId.split('/').pop() || 'output') : 'output'
-    const ext = guessExtFromUrl(url)
-    const filename = `${wfName}_${timestamp()}_${modelSlug}${ext}`
-    const filePath = path.join(dir, filename)
-
-    await this.downloadFile(url, filePath)
-    return filePath
+  async downloadResult(
+    workflowId: string,
+    url: string,
+    modelId?: string,
+  ): Promise<string> {
+    const dir = this.ensureDir(this.getMediaOutputDir(workflowId));
+    const wfName = this.resolveDirName(workflowId);
+    const modelSlug = modelId
+      ? sanitizeName(modelId.split("/").pop() || "output")
+      : "output";
+    const ext = guessExtFromUrl(url);
+    const filename = `${wfName}_${timestamp()}_${modelSlug}${ext}`;
+    const filePath = path.join(dir, filename);
+
+    await this.downloadFile(url, filePath);
+    return filePath;
   }
 
   private downloadFile(url: string, dest: string): Promise<void> {
     return new Promise((resolve, reject) => {
-      const proto = url.startsWith('https') ? https : http
-      const file = fs.createWriteStream(dest)
-      proto.get(url, (response) => {
-        // Follow redirects
-        if (response.statusCode && response.statusCode >= 300 && response.statusCode < 400 && response.headers.location) {
-          file.close()
-          fs.unlinkSync(dest)
-          this.downloadFile(response.headers.location, dest).then(resolve).catch(reject)
-          return
-        }
-        response.pipe(file)
-        file.on('finish', () => { file.close(); resolve() })
-        file.on('error', (err) => { fs.unlinkSync(dest); reject(err) })
-      }).on('error', (err) => { fs.unlinkSync(dest); reject(err) })
-    })
+      const proto = url.startsWith("https") ? https : http;
+      const file = fs.createWriteStream(dest);
+      proto
+        .get(url, (response) => {
+          // Follow redirects
+          if (
+            response.statusCode &&
+            response.statusCode >= 300 &&
+            response.statusCode < 400 &&
+            response.headers.location
+          ) {
+            file.close();
+            fs.unlinkSync(dest);
+            this.downloadFile(response.headers.location, dest)
+              .then(resolve)
+              .catch(reject);
+            return;
+          }
+          response.pipe(file);
+          file.on("finish", () => {
+            file.close();
+            resolve();
+          });
+          file.on("error", (err) => {
+            fs.unlinkSync(dest);
+            reject(err);
+          });
+        })
+        .on("error", (err) => {
+          fs.unlinkSync(dest);
+          reject(err);
+        });
+    });
   }
 
   /* ─── User uploads ──────────────────────────────────────────── */
@@ -244,106 +312,179 @@ export class FileStorageService {
    * Save node output (e.g. from renderer-based free-tool) to media_output/nodeId/.
    * Returns the local file path.
    */
-  saveNodeOutput(workflowId: string, nodeId: string, prefix: string, ext: string, data: Buffer): string {
-    const dir = this.ensureDir(this.getNodeOutputDir(workflowId, nodeId))
-    const safeExt = ext.startsWith('.') ? ext : `.${ext}`
-    const filename = `${prefix}_${timestamp()}${safeExt}`
-    const filePath = path.join(dir, filename)
-    fs.writeFileSync(filePath, data)
-    return filePath
-  }
-
-  saveUploadedFile(workflowId: string, nodeId: string, filename: string, data: Buffer): string {
-    this.ensureNodeUploadDir(workflowId, nodeId)
-    let targetName = filename
-    const dir = this.getNodeUploadDir(workflowId, nodeId)
+  saveNodeOutput(
+    workflowId: string,
+    nodeId: string,
+    prefix: string,
+    ext: string,
+    data: Buffer,
+  ): string {
+    const dir = this.ensureDir(this.getNodeOutputDir(workflowId, nodeId));
+    const safeExt = ext.startsWith(".") ? ext : `.${ext}`;
+    const filename = `${prefix}_${timestamp()}${safeExt}`;
+    const filePath = path.join(dir, filename);
+    fs.writeFileSync(filePath, data);
+    return filePath;
+  }
+
+  saveUploadedFile(
+    workflowId: string,
+    nodeId: string,
+    filename: string,
+    data: Buffer,
+  ): string {
+    this.ensureNodeUploadDir(workflowId, nodeId);
+    let targetName = filename;
+    const dir = this.getNodeUploadDir(workflowId, nodeId);
     if (fs.existsSync(path.join(dir, targetName))) {
-      const ext = path.extname(filename)
-      const base = path.basename(filename, ext)
-      targetName = `${base}_${Date.now()}${ext}`
+      const ext = path.extname(filename);
+      const base = path.basename(filename, ext);
+      targetName = `${base}_${Date.now()}${ext}`;
     }
-    const filePath = path.join(dir, targetName)
-    fs.writeFileSync(filePath, data)
-    return filePath
-  }
-
-  copyUploadedFile(workflowId: string, nodeId: string, sourcePath: string): string {
-    const filename = path.basename(sourcePath)
-    this.ensureNodeUploadDir(workflowId, nodeId)
-    const destPath = path.join(this.getNodeUploadDir(workflowId, nodeId), filename)
-    fs.copyFileSync(sourcePath, destPath)
-    return destPath
+    const filePath = path.join(dir, targetName);
+    fs.writeFileSync(filePath, data);
+    return filePath;
+  }
+
+  copyUploadedFile(
+    workflowId: string,
+    nodeId: string,
+    sourcePath: string,
+  ): string {
+    const filename = path.basename(sourcePath);
+    this.ensureNodeUploadDir(workflowId, nodeId);
+    const destPath = path.join(
+      this.getNodeUploadDir(workflowId, nodeId),
+      filename,
+    );
+    fs.copyFileSync(sourcePath, destPath);
+    return destPath;
   }
 
   listUploadedFiles(workflowId: string, nodeId: string): string[] {
-    const dir = this.getNodeUploadDir(workflowId, nodeId)
-    if (!fs.existsSync(dir)) return []
-    return fs.readdirSync(dir).map(f => path.join(dir, f))
+    const dir = this.getNodeUploadDir(workflowId, nodeId);
+    if (!fs.existsSync(dir)) return [];
+    return fs.readdirSync(dir).map((f) => path.join(dir, f));
   }
 
   /* ─── Execution metadata (kept for DB cache lookups) ────────── */
 
-  saveExecutionInput(workflowId: string, nodeId: string, executionId: string, input: Record<string, unknown>): void {
-    this.ensureExecutionDir(workflowId, nodeId, executionId)
-    fs.writeFileSync(path.join(this.getExecutionDir(workflowId, nodeId, executionId), 'input.json'), JSON.stringify(input, null, 2), 'utf-8')
-  }
-
-  saveExecutionParams(workflowId: string, nodeId: string, executionId: string, params: Record<string, unknown>): void {
-    this.ensureExecutionDir(workflowId, nodeId, executionId)
-    fs.writeFileSync(path.join(this.getExecutionDir(workflowId, nodeId, executionId), 'params.json'), JSON.stringify(params, null, 2), 'utf-8')
-  }
-
-  saveExecutionMetadata(workflowId: string, nodeId: string, executionId: string, metadata: Record<string, unknown>): void {
-    this.ensureExecutionDir(workflowId, nodeId, executionId)
-    fs.writeFileSync(path.join(this.getExecutionDir(workflowId, nodeId, executionId), 'meta.json'), JSON.stringify(metadata, null, 2), 'utf-8')
+  saveExecutionInput(
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+    input: Record<string, unknown>,
+  ): void {
+    this.ensureExecutionDir(workflowId, nodeId, executionId);
+    fs.writeFileSync(
+      path.join(
+        this.getExecutionDir(workflowId, nodeId, executionId),
+        "input.json",
+      ),
+      JSON.stringify(input, null, 2),
+      "utf-8",
+    );
+  }
+
+  saveExecutionParams(
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+    params: Record<string, unknown>,
+  ): void {
+    this.ensureExecutionDir(workflowId, nodeId, executionId);
+    fs.writeFileSync(
+      path.join(
+        this.getExecutionDir(workflowId, nodeId, executionId),
+        "params.json",
+      ),
+      JSON.stringify(params, null, 2),
+      "utf-8",
+    );
+  }
+
+  saveExecutionMetadata(
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+    metadata: Record<string, unknown>,
+  ): void {
+    this.ensureExecutionDir(workflowId, nodeId, executionId);
+    fs.writeFileSync(
+      path.join(
+        this.getExecutionDir(workflowId, nodeId, executionId),
+        "meta.json",
+      ),
+      JSON.stringify(metadata, null, 2),
+      "utf-8",
+    );
   }
 
   listNodeExecutions(workflowId: string, nodeId: string): string[] {
-    const dir = this.getNodeOutputDir(workflowId, nodeId)
-    if (!fs.existsSync(dir)) return []
+    const dir = this.getNodeOutputDir(workflowId, nodeId);
+    if (!fs.existsSync(dir)) return [];
     try {
-      return fs.readdirSync(dir)
-        .filter(f => { try { return fs.statSync(path.join(dir, f)).isDirectory() } catch { return false } })
-        .sort((a, b) => {
+      return fs
+        .readdirSync(dir)
+        .filter((f) => {
           try {
-            return fs.statSync(path.join(dir, b)).mtimeMs - fs.statSync(path.join(dir, a)).mtimeMs
-          } catch { return 0 }
+            return fs.statSync(path.join(dir, f)).isDirectory();
+          } catch {
+            return false;
+          }
         })
-    } catch { return [] }
+        .sort((a, b) => {
+          try {
+            return (
+              fs.statSync(path.join(dir, b)).mtimeMs -
+              fs.statSync(path.join(dir, a)).mtimeMs
+            );
+          } catch {
+            return 0;
+          }
+        });
+    } catch {
+      return [];
+    }
   }
 
   /* ─── Cleanup ───────────────────────────────────────────────── */
 
   deleteWorkflowFiles(workflowId: string): void {
-    const dir = this.getWorkflowDir(workflowId)
-    if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true })
+    const dir = this.getWorkflowDir(workflowId);
+    if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true });
   }
 
   deleteNodeOutputs(workflowId: string, nodeId: string): void {
-    const dir = this.getNodeOutputDir(workflowId, nodeId)
-    if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true })
+    const dir = this.getNodeOutputDir(workflowId, nodeId);
+    if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true });
   }
 
   /* ─── Disk usage ────────────────────────────────────────────── */
 
   getWorkflowDiskUsage(workflowId: string): number {
-    return this.getDirSize(this.getWorkflowDir(workflowId))
+    return this.getDirSize(this.getWorkflowDir(workflowId));
   }
 
-  artifactExists(p: string): boolean { return fs.existsSync(p) }
-  getRootPath(): string { return this.rootPath }
+  artifactExists(p: string): boolean {
+    return fs.existsSync(p);
+  }
+  getRootPath(): string {
+    return this.rootPath;
+  }
 
   private getDirSize(dirPath: string): number {
-    if (!fs.existsSync(dirPath)) return 0
-    let total = 0
+    if (!fs.existsSync(dirPath)) return 0;
+    let total = 0;
     const walk = (d: string) => {
       for (const f of fs.readdirSync(d)) {
-        const fp = path.join(d, f)
-        const s = fs.statSync(fp)
-        if (s.isDirectory()) walk(fp); else total += s.size
+        const fp = path.join(d, f);
+        const s = fs.statSync(fp);
+        if (s.isDirectory()) walk(fp);
+        else total += s.size;
       }
-    }
-    walk(dirPath)
-    return total
+    };
+    walk(dirPath);
+    return total;
   }
 }
diff --git a/electron/workflow/utils/hash.ts b/electron/workflow/utils/hash.ts
index d9f4cf34..fa90651c 100644
--- a/electron/workflow/utils/hash.ts
+++ b/electron/workflow/utils/hash.ts
@@ -1,13 +1,17 @@
 /**
  * Hash utilities — SHA-256 of JSON-stable-stringify.
  */
-import { createHash } from 'crypto'
-import stringify from 'json-stable-stringify'
+import { createHash } from "crypto";
+import stringify from "json-stable-stringify";
 
 export function computeInputHash(inputs: Record<string, unknown>): string {
-  return createHash('sha256').update(stringify(inputs) || '{}').digest('hex')
+  return createHash("sha256")
+    .update(stringify(inputs) || "{}")
+    .digest("hex");
 }
 
 export function computeParamsHash(params: Record<string, unknown>): string {
-  return createHash('sha256').update(stringify(params) || '{}').digest('hex')
+  return createHash("sha256")
+    .update(stringify(params) || "{}")
+    .digest("hex");
 }
diff --git a/electron/workflow/utils/save-to-assets.ts b/electron/workflow/utils/save-to-assets.ts
index 1d2bead7..00d600ab 100644
--- a/electron/workflow/utils/save-to-assets.ts
+++ b/electron/workflow/utils/save-to-assets.ts
@@ -4,128 +4,148 @@
  * Reuses the same assets directory and metadata infrastructure as the
  * Playground's auto-save feature, so workflow outputs appear in My Assets.
  */
-import { app, BrowserWindow } from 'electron'
-import { existsSync, mkdirSync, copyFileSync, statSync, createWriteStream, readFileSync, writeFileSync } from 'fs'
-import { join, extname } from 'path'
-import https from 'https'
-import http from 'http'
+import { app, BrowserWindow } from "electron";
+import {
+  existsSync,
+  mkdirSync,
+  copyFileSync,
+  statSync,
+  createWriteStream,
+  readFileSync,
+  writeFileSync,
+} from "fs";
+import { join, extname } from "path";
+import https from "https";
+import http from "http";
 
 /* ─── Settings / metadata paths (mirrors electron/main.ts) ─────────── */
 
-const userDataPath = app.getPath('userData')
-const settingsPath = join(userDataPath, 'settings.json')
-const assetsMetadataPath = join(userDataPath, 'assets-metadata.json')
-const defaultAssetsDirectory = join(app.getPath('documents'), 'WaveSpeed')
+const userDataPath = app.getPath("userData");
+const settingsPath = join(userDataPath, "settings.json");
+const assetsMetadataPath = join(userDataPath, "assets-metadata.json");
+const defaultAssetsDirectory = join(app.getPath("documents"), "WaveSpeed");
 
 interface AssetMetadata {
-  id: string
-  filePath: string
-  fileName: string
-  type: 'image' | 'video' | 'audio'
-  modelId: string
-  createdAt: string
-  fileSize: number
-  tags: string[]
-  favorite: boolean
-  originalUrl?: string
-  source?: 'workflow' | 'playground' | 'free-tool' | 'z-image'
-  workflowId?: string
-  workflowName?: string
-  nodeId?: string
-  executionId?: string
+  id: string;
+  filePath: string;
+  fileName: string;
+  type: "image" | "video" | "audio";
+  modelId: string;
+  createdAt: string;
+  fileSize: number;
+  tags: string[];
+  favorite: boolean;
+  originalUrl?: string;
+  source?: "workflow" | "playground" | "free-tool" | "z-image";
+  workflowId?: string;
+  workflowName?: string;
+  nodeId?: string;
+  executionId?: string;
 }
 
 function loadSettings(): { autoSaveAssets: boolean; assetsDirectory: string } {
   try {
     if (existsSync(settingsPath)) {
-      const data = JSON.parse(readFileSync(settingsPath, 'utf-8'))
+      const data = JSON.parse(readFileSync(settingsPath, "utf-8"));
       return {
         autoSaveAssets: data.autoSaveAssets ?? true,
-        assetsDirectory: data.assetsDirectory || defaultAssetsDirectory
-      }
+        assetsDirectory: data.assetsDirectory || defaultAssetsDirectory,
+      };
     }
-  } catch { /* use defaults */ }
-  return { autoSaveAssets: true, assetsDirectory: defaultAssetsDirectory }
+  } catch {
+    /* use defaults */
+  }
+  return { autoSaveAssets: true, assetsDirectory: defaultAssetsDirectory };
 }
 
 function loadAssetsMetadata(): AssetMetadata[] {
   try {
     if (existsSync(assetsMetadataPath)) {
-      return JSON.parse(readFileSync(assetsMetadataPath, 'utf-8'))
+      return JSON.parse(readFileSync(assetsMetadataPath, "utf-8"));
     }
-  } catch { /* empty */ }
-  return []
+  } catch {
+    /* empty */
+  }
+  return [];
 }
 
 function saveAssetsMetadata(metadata: AssetMetadata[]): void {
   try {
-    if (!existsSync(userDataPath)) mkdirSync(userDataPath, { recursive: true })
-    writeFileSync(assetsMetadataPath, JSON.stringify(metadata, null, 2))
+    if (!existsSync(userDataPath)) mkdirSync(userDataPath, { recursive: true });
+    writeFileSync(assetsMetadataPath, JSON.stringify(metadata, null, 2));
   } catch (err) {
-    console.error('[save-to-assets] Failed to persist metadata:', err)
+    console.error("[save-to-assets] Failed to persist metadata:", err);
   }
 }
 
 function generateId(): string {
-  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8)
+  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
 }
 
-function getSubDir(type: 'image' | 'video' | 'audio'): string {
+function getSubDir(type: "image" | "video" | "audio"): string {
   switch (type) {
-    case 'image': return 'images'
-    case 'video': return 'videos'
-    case 'audio': return 'audio'
+    case "image":
+      return "images";
+    case "video":
+      return "videos";
+    case "audio":
+      return "audio";
   }
 }
 
-function detectAssetType(url: string): 'image' | 'video' | 'audio' | null {
-  const cleaned = url.split('?')[0].toLowerCase()
-  if (/\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(cleaned)) return 'image'
-  if (/\.(mp4|webm|mov|avi|mkv)$/.test(cleaned)) return 'video'
-  if (/\.(mp3|wav|ogg|flac|aac|m4a|wma)$/.test(cleaned)) return 'audio'
-  return null
+function detectAssetType(url: string): "image" | "video" | "audio" | null {
+  const cleaned = url.split("?")[0].toLowerCase();
+  if (/\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(cleaned)) return "image";
+  if (/\.(mp4|webm|mov|avi|mkv)$/.test(cleaned)) return "video";
+  if (/\.(mp3|wav|ogg|flac|aac|m4a|wma)$/.test(cleaned)) return "audio";
+  return null;
 }
 
 function guessExt(url: string): string {
   try {
-    const pathname = new URL(url).pathname
-    const ext = extname(pathname).toLowerCase()
-    if (ext && ext.length <= 5) return ext
-  } catch { /* ignore */ }
-  return '.png'
+    const pathname = new URL(url).pathname;
+    const ext = extname(pathname).toLowerCase();
+    if (ext && ext.length <= 5) return ext;
+  } catch {
+    /* ignore */
+  }
+  return ".png";
 }
 
 /** Download a remote URL to a local file path. Returns true on success. */
 function downloadToFile(url: string, destPath: string): Promise<boolean> {
-  return new Promise(resolve => {
-    const proto = url.startsWith('https') ? https : http
-    const file = createWriteStream(destPath)
+  return new Promise((resolve) => {
+    const proto = url.startsWith("https") ? https : http;
+    const file = createWriteStream(destPath);
     const handleResponse = (response: http.IncomingMessage) => {
       if (response.statusCode === 301 || response.statusCode === 302) {
-        const loc = response.headers.location
+        const loc = response.headers.location;
         if (loc) {
-          const rp = loc.startsWith('https') ? https : http
-          rp.get(loc, handleResponse).on('error', () => resolve(false))
-          return
+          const rp = loc.startsWith("https") ? https : http;
+          rp.get(loc, handleResponse).on("error", () => resolve(false));
+          return;
         }
       }
-      response.pipe(file)
-      file.on('finish', () => { file.close(); resolve(true) })
-    }
-    proto.get(url, handleResponse).on('error', () => resolve(false))
-  })
+      response.pipe(file);
+      file.on("finish", () => {
+        file.close();
+        resolve(true);
+      });
+    };
+    proto.get(url, handleResponse).on("error", () => resolve(false));
+  });
 }
 
 /* ─── Public API ───────────────────────────────────────────────────── */
 
 export interface SaveToAssetsOptions {
-  url: string
-  modelId: string
-  workflowId: string
-  workflowName: string
-  nodeId: string
-  executionId: string
-  resultIndex?: number
+  url: string;
+  modelId: string;
+  workflowId: string;
+  workflowName: string;
+  nodeId: string;
+  executionId: string;
+  resultIndex?: number;
 }
 
 /**
@@ -133,82 +153,98 @@ export interface SaveToAssetsOptions {
  * Respects the user's autoSaveAssets setting.
  * Notifies all renderer windows so the assets list refreshes.
  */
-export async function saveWorkflowResultToAssets(options: SaveToAssetsOptions): Promise<void> {
-  const settings = loadSettings()
-  if (!settings.autoSaveAssets) return
+export async function saveWorkflowResultToAssets(
+  options: SaveToAssetsOptions,
+): Promise<void> {
+  const settings = loadSettings();
+  if (!settings.autoSaveAssets) return;
 
-  const assetType = detectAssetType(options.url)
-  if (!assetType) return
+  const assetType = detectAssetType(options.url);
+  if (!assetType) return;
 
   // Check for duplicate by executionId + resultIndex
-  const existing = loadAssetsMetadata()
+  const existing = loadAssetsMetadata();
   const isDuplicate = existing.some(
-    a => a.executionId === options.executionId && a.source === 'workflow'
-  )
-  if (isDuplicate) return
+    (a) => a.executionId === options.executionId && a.source === "workflow",
+  );
+  if (isDuplicate) return;
 
-  const subDir = getSubDir(assetType)
-  const baseDir = settings.assetsDirectory || defaultAssetsDirectory
-  const targetDir = join(baseDir, subDir)
-  if (!existsSync(targetDir)) mkdirSync(targetDir, { recursive: true })
+  const subDir = getSubDir(assetType);
+  const baseDir = settings.assetsDirectory || defaultAssetsDirectory;
+  const targetDir = join(baseDir, subDir);
+  if (!existsSync(targetDir)) mkdirSync(targetDir, { recursive: true });
 
   // Build filename: workflow_{model-slug}_{executionId}_{index}.{ext}
-  const modelSlug = options.modelId
-    .replace(/\//g, '_')
-    .replace(/[^a-zA-Z0-9_]/g, '-')
-    .toLowerCase()
-    .replace(/-+/g, '-') || 'workflow'
-  const idx = options.resultIndex ?? 0
-  const ext = guessExt(options.url).replace(/^\./, '')
-  const fileName = `${modelSlug}_${options.executionId}_${idx}.${ext}`
-  const filePath = join(targetDir, fileName)
+  const modelSlug =
+    options.modelId
+      .replace(/\//g, "_")
+      .replace(/[^a-zA-Z0-9_]/g, "-")
+      .toLowerCase()
+      .replace(/-+/g, "-") || "workflow";
+  const idx = options.resultIndex ?? 0;
+  const ext = guessExt(options.url).replace(/^\./, "");
+  const fileName = `${modelSlug}_${options.executionId}_${idx}.${ext}`;
+  const filePath = join(targetDir, fileName);
 
   // Copy or download the file
-  let ok = false
+  let ok = false;
   if (/^local-asset:\/\//i.test(options.url)) {
     try {
-      const localPath = decodeURIComponent(options.url.replace(/^local-asset:\/\//i, ''))
+      const localPath = decodeURIComponent(
+        options.url.replace(/^local-asset:\/\//i, ""),
+      );
       if (existsSync(localPath)) {
-        copyFileSync(localPath, filePath)
-        ok = true
+        copyFileSync(localPath, filePath);
+        ok = true;
       }
-    } catch { /* best-effort */ }
-  } else if (options.url.startsWith('http://') || options.url.startsWith('https://')) {
-    ok = await downloadToFile(options.url, filePath)
+    } catch {
+      /* best-effort */
+    }
+  } else if (
+    options.url.startsWith("http://") ||
+    options.url.startsWith("https://")
+  ) {
+    ok = await downloadToFile(options.url, filePath);
   }
 
-  if (!ok || !existsSync(filePath)) return
+  if (!ok || !existsSync(filePath)) return;
 
-  let fileSize = 0
-  try { fileSize = statSync(filePath).size } catch { /* ignore */ }
+  let fileSize = 0;
+  try {
+    fileSize = statSync(filePath).size;
+  } catch {
+    /* ignore */
+  }
 
   const metadata: AssetMetadata = {
     id: generateId(),
     filePath,
     fileName,
     type: assetType,
-    modelId: options.modelId || 'workflow',
+    modelId: options.modelId || "workflow",
     createdAt: new Date().toISOString(),
     fileSize,
     tags: [],
     favorite: false,
     originalUrl: options.url,
-    source: 'workflow',
+    source: "workflow",
     workflowId: options.workflowId,
     workflowName: options.workflowName,
     nodeId: options.nodeId,
-    executionId: options.executionId
-  }
+    executionId: options.executionId,
+  };
 
   // Append to metadata file
-  const allMetadata = loadAssetsMetadata()
-  allMetadata.unshift(metadata)
-  saveAssetsMetadata(allMetadata)
+  const allMetadata = loadAssetsMetadata();
+  allMetadata.unshift(metadata);
+  saveAssetsMetadata(allMetadata);
 
   // Notify renderer windows so My Assets refreshes
   for (const win of BrowserWindow.getAllWindows()) {
     try {
-      win.webContents.send('assets:new-asset', metadata)
-    } catch { /* window may be destroyed */ }
+      win.webContents.send("assets:new-asset", metadata);
+    } catch {
+      /* window may be destroyed */
+    }
   }
 }
diff --git a/index.html b/index.html
index 9e4a7f97..273f30a5 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob: local-asset:; connect-src 'self' https://api.wavespeed.ai https://*.wavespeed.ai https://*.cloudfront.net https://raw.githubusercontent.com https://github.com https://*.github.com https://*.githubusercontent.com https://unpkg.com https://cdn.jsdelivr.net https://huggingface.co https://*.huggingface.co https://*.hf.co blob: data:; media-src 'self' https: blob: local-asset:; worker-src 'self' blob:" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob: local-asset:; connect-src 'self' https://api.wavespeed.ai https://*.wavespeed.ai https://*.cloudfront.net https://raw.githubusercontent.com https://github.com https://*.github.com https://*.githubusercontent.com https://unpkg.com https://cdn.jsdelivr.net https://huggingface.co https://*.huggingface.co https://*.hf.co blob: data:; media-src 'self' https: blob: local-asset:; worker-src 'self' blob:"
+    />
     <title>WaveSpeed Desktop</title>
   </head>
   <body>
diff --git a/mobile/MOBILE_DEV_GUIDE.md b/mobile/MOBILE_DEV_GUIDE.md
index 2c057471..e78ca3b1 100644
--- a/mobile/MOBILE_DEV_GUIDE.md
+++ b/mobile/MOBILE_DEV_GUIDE.md
@@ -116,6 +116,7 @@ sdk.dir=C:\\Users\\你的用户名\\AppData\\Local\\Android\\Sdk
 **原因**：Android WebView 需要实现 `WebChromeClient.onShowFileChooser`
 
 **解决**：修改 `MainActivity.java`，添加：
+
 - `fileChooserLauncher` - 文件选择器启动器
 - `onShowFileChooser` - 处理文件选择回调
 
@@ -145,6 +146,7 @@ sdk.dir=C:\\Users\\你的用户名\\AppData\\Local\\Android\\Sdk
 ## Capacitor 插件
 
 已安装的插件：
+
 - `@capacitor/camera` - 相机/相册访问
 - `@capacitor/filesystem` - 文件系统操作
 - `@capacitor/preferences` - 本地存储
@@ -159,36 +161,36 @@ sdk.dir=C:\\Users\\你的用户名\\AppData\\Local\\Android\\Sdk
 `mobile/src/platform/index.ts` 封装了平台相关 API：
 
 ```typescript
-const platformService = getPlatformService()
+const platformService = getPlatformService();
 
 // 存储
-await platformService.getApiKey()
-await platformService.setApiKey(key)
-await platformService.getSettings()
-await platformService.setSettings(settings)
+await platformService.getApiKey();
+await platformService.setApiKey(key);
+await platformService.getSettings();
+await platformService.setSettings(settings);
 
 // 文件
-await platformService.saveAsset(url, type, fileName, subDir)
-await platformService.deleteAsset(filePath)
-await platformService.downloadFile(url, filename)
+await platformService.saveAsset(url, type, fileName, subDir);
+await platformService.deleteAsset(filePath);
+await platformService.downloadFile(url, filename);
 
 // 外部链接
-await platformService.openExternal(url)
+await platformService.openExternal(url);
 
 // 平台信息
-platformService.getPlatform()  // 'capacitor' | 'web'
-platformService.isMobile()
+platformService.getPlatform(); // 'capacitor' | 'web'
+platformService.isMobile();
 ```
 
 ## 桌面端 vs 移动端功能差异
 
-| 功能 | 桌面端 | 移动端 |
-|------|--------|--------|
-| Face Enhancer 模型 | 有 | 无（内存限制） |
-| Background Remover | 有 | 有 |
-| SAM 分割 | 有 | 有 |
-| 批量生成 | 有 | 有 |
-| 本地模型推理 | 有 | 有（ONNX Runtime Web） |
+| 功能               | 桌面端 | 移动端                 |
+| ------------------ | ------ | ---------------------- |
+| Face Enhancer 模型 | 有     | 无（内存限制）         |
+| Background Remover | 有     | 有                     |
+| SAM 分割           | 有     | 有                     |
+| 批量生成           | 有     | 有                     |
+| 本地模型推理       | 有     | 有（ONNX Runtime Web） |
 
 ## 注意事项
 
@@ -220,14 +222,14 @@ adb logcat | grep -i capacitor
 
 ### Android vs iOS 对比
 
-| 项目 | Android | iOS |
-|------|---------|-----|
-| 开发者费用 | $25 一次性 | $99/年 |
-| 审核时间 | 几小时~2天 | 1~7天 |
-| 审核严格度 | 相对宽松 | 非常严格 |
-| 侧载安装 | ✅ 支持 APK | ❌ 不支持 |
-| 分发方式 | APK / Google Play | 仅 App Store |
-| 测试分发 | 直接分享 APK | 必须用 TestFlight |
+| 项目       | Android           | iOS               |
+| ---------- | ----------------- | ----------------- |
+| 开发者费用 | $25 一次性        | $99/年            |
+| 审核时间   | 几小时~2天        | 1~7天             |
+| 审核严格度 | 相对宽松          | 非常严格          |
+| 侧载安装   | ✅ 支持 APK       | ❌ 不支持         |
+| 分发方式   | APK / Google Play | 仅 App Store      |
+| 测试分发   | 直接分享 APK      | 必须用 TestFlight |
 
 ### App Store 常见拒绝原因
 
@@ -251,20 +253,20 @@ npx cap add ios
 
 #### 2. 原生配置文件
 
-| 配置项 | Android | iOS |
-|--------|---------|-----|
-| 应用名 | `strings.xml` | `Info.plist` |
-| 图标 | `res/mipmap-*` | `Assets.xcassets` |
-| 启动画面 | `SplashScreen` | `LaunchScreen.storyboard` |
-| 权限 | `AndroidManifest.xml` | `Info.plist` |
+| 配置项   | Android               | iOS                       |
+| -------- | --------------------- | ------------------------- |
+| 应用名   | `strings.xml`         | `Info.plist`              |
+| 图标     | `res/mipmap-*`        | `Assets.xcassets`         |
+| 启动画面 | `SplashScreen`        | `LaunchScreen.storyboard` |
+| 权限     | `AndroidManifest.xml` | `Info.plist`              |
 
 #### 3. 代码调整
 
 ```typescript
 // 平台检测
-import { Capacitor } from '@capacitor/core'
-const isIOS = Capacitor.getPlatform() === 'ios'
-const isAndroid = Capacitor.getPlatform() === 'android'
+import { Capacitor } from "@capacitor/core";
+const isIOS = Capacitor.getPlatform() === "ios";
+const isAndroid = Capacitor.getPlatform() === "android";
 
 // 文件路径差异
 // Android: Directory.Documents → /data/data/app/files/
@@ -296,12 +298,12 @@ build-ios:
 
 ### 本应用的特殊考虑
 
-| 问题 | 说明 |
-|------|------|
-| AI 生成内容 | 可能需要说明内容审核机制 |
+| 问题                | 说明                            |
+| ------------------- | ------------------------------- |
+| AI 生成内容         | 可能需要说明内容审核机制        |
 | 外部支付 (API 余额) | 可能需要走 Apple IAP (30% 抽成) |
-| 用户生成内容 | 可能需要举报机制 |
-| WebGPU 支持 | Safari/WebKit 支持有限 |
+| 用户生成内容        | 可能需要举报机制                |
+| WebGPU 支持         | Safari/WebKit 支持有限          |
 
 ### 建议
 
@@ -318,14 +320,14 @@ build-ios:
 
 经过评估，决定**暂不开发 iOS 版本**，原因如下：
 
-| 因素 | 说明 |
-|------|------|
-| **成本** | Apple Developer 年费 $99，Android 一次性 $25 |
-| **审核风险** | App Store 审核严格，AI 生成内容、外部支付可能被拒 |
-| **开发周期** | 需要额外配置签名、证书、CI/CD，预计增加 1-2 周 |
-| **用户覆盖** | 国内 Android 市场份额 >70%，优先覆盖主流用户 |
+| 因素         | 说明                                                   |
+| ------------ | ------------------------------------------------------ |
+| **成本**     | Apple Developer 年费 $99，Android 一次性 $25           |
+| **审核风险** | App Store 审核严格，AI 生成内容、外部支付可能被拒      |
+| **开发周期** | 需要额外配置签名、证书、CI/CD，预计增加 1-2 周         |
+| **用户覆盖** | 国内 Android 市场份额 >70%，优先覆盖主流用户           |
 | **分发限制** | iOS 无法侧载，必须走 App Store；Android 可直接分发 APK |
-| **技术风险** | WebGPU 在 iOS Safari 支持有限，部分 AI 功能可能受影响 |
+| **技术风险** | WebGPU 在 iOS Safari 支持有限，部分 AI 功能可能受影响  |
 
 **结论**：先把 Android 版本做稳定，积累用户反馈，再考虑 iOS。
 
@@ -347,20 +349,20 @@ build-ios:
 
 ### 不需要的东西
 
-| 项目 | 原因 |
-|------|------|
-| Google Play 上架 | 开源项目直接 GitHub 下载即可 |
-| 推送通知 | 用户 Watch 仓库即可收到更新 |
-| 复杂的崩溃监控 | GitHub Issues 收集反馈足够 |
-| 应用内更新 | 用户从 Releases 页面下载新版本 |
+| 项目             | 原因                           |
+| ---------------- | ------------------------------ |
+| Google Play 上架 | 开源项目直接 GitHub 下载即可   |
+| 推送通知         | 用户 Watch 仓库即可收到更新    |
+| 复杂的崩溃监控   | GitHub Issues 收集反馈足够     |
+| 应用内更新       | 用户从 Releases 页面下载新版本 |
 
 ### 可选优化
 
-| 项目 | 状态 | 说明 |
-|------|------|------|
+| 项目             | 状态    | 说明                                   |
+| ---------------- | ------- | -------------------------------------- |
 | Release APK 签名 | ⏳ 可选 | 签名后安装体验更好，但 unsigned 也能用 |
-| 性能优化 | ⏳ 持续 | 根据用户反馈优化 |
-| 翻译完善 | ⏳ 持续 | 社区可以贡献翻译 |
+| 性能优化         | ⏳ 持续 | 根据用户反馈优化                       |
+| 翻译完善         | ⏳ 持续 | 社区可以贡献翻译                       |
 
 ### 已完成
 
diff --git a/mobile/README.md b/mobile/README.md
index a3baebf2..8562a140 100644
--- a/mobile/README.md
+++ b/mobile/README.md
@@ -26,11 +26,13 @@ WaveSpeed Mobile is designed with a **mobile-first, responsive approach**:
 ### Core Features
 
 #### 1. Model Browser (Models)
+
 - Browse all available WaveSpeed AI models
 - Search and filter support
 - Tap a model to use it in Playground
 
 #### 2. AI Workshop (Playground)
+
 - **Input/Output Dual View**: Mobile-specific tab switching design for better screen utilization
 - **Dynamic Forms**: Auto-generated parameter forms based on model schema
 - **Supported Input Types**:
@@ -46,6 +48,7 @@ WaveSpeed Mobile is designed with a **mobile-first, responsive approach**:
 - **Auto Switch**: Automatically switch to output view when generation completes
 
 #### 3. Template Management (Templates)
+
 - Save frequently used parameter configurations as templates
 - Support template renaming
 - Batch export/import templates (JSON format)
@@ -53,6 +56,7 @@ WaveSpeed Mobile is designed with a **mobile-first, responsive approach**:
 - One-tap apply template to Playground
 
 #### 4. History
+
 - Grid view for historical generation records
 - Status filter: All, Completed, Failed, Archived
 - Long-press to enter batch selection mode
@@ -63,6 +67,7 @@ WaveSpeed Mobile is designed with a **mobile-first, responsive approach**:
 - Local input parameter cache (records with bookmark icon can be saved as templates)
 
 #### 5. Settings
+
 - API key management
 - Account balance inquiry
 - Theme switching (Auto/Dark/Light)
@@ -74,6 +79,7 @@ WaveSpeed Mobile is designed with a **mobile-first, responsive approach**:
 Local AI tools that work without API key:
 
 #### 1. Video Enhancer
+
 - Frame-by-frame AI super-resolution upscaling
 - Support 2x-4x upscaling
 - Three quality options (Fast/Balanced/High Quality)
@@ -81,12 +87,14 @@ Local AI tools that work without API key:
 - Output WebM format (30 FPS)
 
 #### 2. Image Enhancer
+
 - AI image super-resolution
 - Support 2x-4x upscaling
 - ESRGAN models (slim/medium/thick)
 - Download PNG/WebP format
 
 #### 3. Background Remover
+
 - AI automatic background removal
 - Three simultaneous outputs:
   - Foreground (transparent background)
@@ -95,6 +103,7 @@ Local AI tools that work without API key:
 - Auto GPU acceleration detection
 
 #### 4. Image Eraser
+
 - Paint to remove objects from images
 - LaMa inpainting model
 - Brush/Eraser/Fill tools
@@ -102,6 +111,7 @@ Local AI tools that work without API key:
 - Smart crop for large image optimization
 
 #### 5. Segment Anything
+
 - Tap to select objects to segment
 - Long-press to mark exclusion areas
 - Real-time segmentation preview
@@ -109,6 +119,7 @@ Local AI tools that work without API key:
 - Multiple download formats
 
 #### 6. Video Converter
+
 - Video format conversion
 - Support WebM (VP8/VP9/AV1) and MP4 (H.264)
 - Auto codec detection
@@ -221,17 +232,17 @@ Local AI tools that work without API key:
 
 ## Differences from Desktop
 
-| Feature | Desktop | Mobile |
-|---------|---------|--------|
-| Runtime Framework | Electron | Capacitor (Android) |
-| Navigation | Sidebar | Bottom Navigation |
-| Playground | Multi-tab | Single page + Input/Output switch |
-| Free Tools | Route switching | Persistent rendering |
-| File Storage | electron-store | Capacitor Preferences |
-| Drag & Drop | Full support | File picker |
-| Video Converter | No | Yes (new feature) |
-| Asset Management | Full page | Simplified |
-| History Inputs | API only | API + Local cache |
+| Feature           | Desktop         | Mobile                            |
+| ----------------- | --------------- | --------------------------------- |
+| Runtime Framework | Electron        | Capacitor (Android)               |
+| Navigation        | Sidebar         | Bottom Navigation                 |
+| Playground        | Multi-tab       | Single page + Input/Output switch |
+| Free Tools        | Route switching | Persistent rendering              |
+| File Storage      | electron-store  | Capacitor Preferences             |
+| Drag & Drop       | Full support    | File picker                       |
+| Video Converter   | No              | Yes (new feature)                 |
+| Asset Management  | Full page       | Simplified                        |
+| History Inputs    | API only        | API + Local cache                 |
 
 ### Mobile-Specific Features
 
@@ -304,6 +315,7 @@ mobile/
 ### Code Sharing
 
 Mobile shares code with desktop via Vite path aliases:
+
 - `@/` - Shared code (parent src/)
 - `@mobile/` - Mobile-specific code
 
@@ -316,6 +328,7 @@ Mobile shares code with desktop via Vite path aliases:
 ## Changelog
 
 ### v0.8.2
+
 - Add video preview thumbnails in History and Playground pages
 - Improve download functionality with proper file naming
 - Fix FlappyBird game text for mobile (remove Space key reference)
@@ -325,6 +338,7 @@ Mobile shares code with desktop via Vite path aliases:
 - Switch to Output view automatically when clicking Run
 
 ### v0.8.1
+
 - Add history delete feature (single/batch)
 - Add long-press selection mode
 - Add batch download feature
@@ -333,6 +347,7 @@ Mobile shares code with desktop via Vite path aliases:
 - Remove unused history status filters
 
 ### v0.8.0
+
 - Add video converter tool
 - Add history archive feature
 - Optimize Segment Anything interaction (long-press to exclude)
diff --git a/mobile/capacitor.config.ts b/mobile/capacitor.config.ts
index 070c9144..83850b9b 100644
--- a/mobile/capacitor.config.ts
+++ b/mobile/capacitor.config.ts
@@ -1,14 +1,14 @@
-import type { CapacitorConfig } from '@capacitor/cli'
+import type { CapacitorConfig } from "@capacitor/cli";
 
 // Only enable debugging in development builds
-const isDev = process.env.NODE_ENV === 'development'
+const isDev = process.env.NODE_ENV === "development";
 
 const config: CapacitorConfig = {
-  appId: 'ai.wavespeed.mobile',
-  appName: 'WaveSpeed',
-  webDir: 'dist',
+  appId: "ai.wavespeed.mobile",
+  appName: "WaveSpeed",
+  webDir: "dist",
   server: {
-    androidScheme: 'https',
+    androidScheme: "https",
     // Uncomment for live reload during development:
     // url: 'http://YOUR_LOCAL_IP:5173',
     // cleartext: true
@@ -17,27 +17,27 @@ const config: CapacitorConfig = {
     SplashScreen: {
       launchShowDuration: 2000,
       launchAutoHide: true,
-      backgroundColor: '#0f172a',
-      androidScaleType: 'CENTER_CROP',
-      showSpinner: false
+      backgroundColor: "#0f172a",
+      androidScaleType: "CENTER_CROP",
+      showSpinner: false,
     },
     Keyboard: {
-      resize: 'body',
-      resizeOnFullScreen: true
+      resize: "body",
+      resizeOnFullScreen: true,
     },
     StatusBar: {
-      style: 'DARK',
-      backgroundColor: '#0f172a'
+      style: "DARK",
+      backgroundColor: "#0f172a",
     },
     Camera: {
-      presentationStyle: 'fullscreen'
-    }
+      presentationStyle: "fullscreen",
+    },
   },
   android: {
     allowMixedContent: true,
     // SECURITY: Only enable debugging in development, disabled in production builds
-    webContentsDebuggingEnabled: isDev
-  }
-}
+    webContentsDebuggingEnabled: isDev,
+  },
+};
 
-export default config
+export default config;
diff --git a/mobile/index.html b/mobile/index.html
index 09832931..739d6688 100644
--- a/mobile/index.html
+++ b/mobile/index.html
@@ -1,18 +1,25 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/icon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, maximum-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, maximum-scale=1"
+    />
     <meta name="theme-color" content="#0f172a" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
     <title>WaveSpeed</title>
     <style>
       /* Prevent pull-to-refresh on mobile */
-      html, body {
+      html,
+      body {
         overscroll-behavior-y: contain;
       }
       /* Safe area support */
diff --git a/mobile/postcss.config.cjs b/mobile/postcss.config.cjs
index 33ad091d..12a703d9 100644
--- a/mobile/postcss.config.cjs
+++ b/mobile/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/mobile/src/App.tsx b/mobile/src/App.tsx
index 650d553e..cf3cca72 100644
--- a/mobile/src/App.tsx
+++ b/mobile/src/App.tsx
@@ -1,45 +1,46 @@
-import { useEffect } from 'react'
-import { Routes, Route } from 'react-router-dom'
-import { MobileLayout } from '@mobile/components/layout/MobileLayout'
-import { WelcomePage } from '@/pages/WelcomePage'
-import { FeaturedModelsPage } from '@/pages/FeaturedModelsPage'
-import { SmartPlaygroundPage } from '@/pages/SmartPlaygroundPage'
-import { MobileModelsPage } from '@mobile/pages/MobileModelsPage'
-import { MobilePlaygroundPage } from '@mobile/pages/MobilePlaygroundPage'
-import { MobileTemplatesPage } from '@mobile/pages/MobileTemplatesPage'
-import { MobileHistoryPage } from '@mobile/pages/MobileHistoryPage'
-import { MobileAssetsPage } from '@mobile/pages/MobileAssetsPage'
-import { SettingsPage } from '@/pages/SettingsPage'
-import { MobileFreeToolsPage } from '@mobile/pages/MobileFreeToolsPage'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useThemeStore } from '@/stores/themeStore'
+import { useEffect } from "react";
+import { Routes, Route } from "react-router-dom";
+import { MobileLayout } from "@mobile/components/layout/MobileLayout";
+import { WelcomePage } from "@/pages/WelcomePage";
+import { SmartPlaygroundPage } from "@/pages/SmartPlaygroundPage";
+import { MobileModelsPage } from "@mobile/pages/MobileModelsPage";
+import { MobilePlaygroundPage } from "@mobile/pages/MobilePlaygroundPage";
+import { MobileTemplatesPage } from "@mobile/pages/MobileTemplatesPage";
+import { MobileHistoryPage } from "@mobile/pages/MobileHistoryPage";
+import { MobileAssetsPage } from "@mobile/pages/MobileAssetsPage";
+import { SettingsPage } from "@/pages/SettingsPage";
+import { MobileFreeToolsPage } from "@mobile/pages/MobileFreeToolsPage";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { useModelsStore } from "@/stores/modelsStore";
+import { useThemeStore } from "@/stores/themeStore";
 
 // Placeholder for persistent pages (rendered in MobileLayout, not via router)
-const PersistentPagePlaceholder = () => null
+const PersistentPagePlaceholder = () => null;
 
 function App() {
-  const { loadApiKey, isValidated } = useApiKeyStore()
-  const { fetchModels } = useModelsStore()
-  const { initTheme } = useThemeStore()
+  const { loadApiKey, isValidated } = useApiKeyStore();
+  const { fetchModels } = useModelsStore();
+  const { initTheme } = useThemeStore();
 
   useEffect(() => {
-    initTheme()
-    loadApiKey()
-  }, [initTheme, loadApiKey])
+    initTheme();
+    loadApiKey();
+  }, [initTheme, loadApiKey]);
 
   useEffect(() => {
     if (isValidated) {
-      fetchModels()
+      fetchModels();
     }
-  }, [isValidated, fetchModels])
+  }, [isValidated, fetchModels]);
 
   return (
     <Routes>
       <Route path="/" element={<MobileLayout />}>
         <Route index element={<WelcomePage />} />
-        <Route path="featured-models" element={<FeaturedModelsPage />} />
-        <Route path="featured-models/:familyId" element={<SmartPlaygroundPage />} />
+        <Route
+          path="featured-models/:familyId"
+          element={<SmartPlaygroundPage />}
+        />
         <Route path="models" element={<MobileModelsPage />} />
         <Route path="playground" element={<MobilePlaygroundPage />} />
         <Route path="playground/*" element={<MobilePlaygroundPage />} />
@@ -48,21 +49,54 @@ function App() {
         <Route path="assets" element={<MobileAssetsPage />} />
         <Route path="free-tools" element={<MobileFreeToolsPage />} />
         {/* Free tools pages are rendered persistently in MobileLayout */}
-        <Route path="free-tools/video" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/image" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/face-enhancer" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/background-remover" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/image-eraser" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/segment-anything" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/video-converter" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/audio-converter" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/image-converter" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/media-trimmer" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/media-merger" element={<PersistentPagePlaceholder />} />
+        <Route
+          path="free-tools/video"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/image"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/face-enhancer"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/background-remover"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/image-eraser"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/segment-anything"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/video-converter"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/audio-converter"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/image-converter"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/media-trimmer"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/media-merger"
+          element={<PersistentPagePlaceholder />}
+        />
         <Route path="settings" element={<SettingsPage />} />
       </Route>
     </Routes>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/mobile/src/__tests__/ErrorBoundary.test.tsx b/mobile/src/__tests__/ErrorBoundary.test.tsx
index d74442ba..da298022 100644
--- a/mobile/src/__tests__/ErrorBoundary.test.tsx
+++ b/mobile/src/__tests__/ErrorBoundary.test.tsx
@@ -1,167 +1,170 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { ErrorBoundary, ErrorFallback, withErrorBoundary } from '@mobile/components/shared/ErrorBoundary'
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  ErrorBoundary,
+  ErrorFallback,
+  withErrorBoundary,
+} from "@mobile/components/shared/ErrorBoundary";
 
 // Component that throws an error
 function ThrowError({ shouldThrow = true }: { shouldThrow?: boolean }) {
   if (shouldThrow) {
-    throw new Error('Test error message')
+    throw new Error("Test error message");
   }
-  return <div>No error</div>
+  return <div>No error</div>;
 }
 
-describe('ErrorBoundary', () => {
+describe("ErrorBoundary", () => {
   beforeEach(() => {
     // Suppress console.error for cleaner test output
-    vi.spyOn(console, 'error').mockImplementation(() => {})
-  })
+    vi.spyOn(console, "error").mockImplementation(() => {});
+  });
 
-  it('should render children when no error occurs', () => {
+  it("should render children when no error occurs", () => {
     render(
       <ErrorBoundary>
         <div>Child content</div>
-      </ErrorBoundary>
-    )
+      </ErrorBoundary>,
+    );
 
-    expect(screen.getByText('Child content')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Child content")).toBeInTheDocument();
+  });
 
-  it('should render fallback UI when error occurs', () => {
+  it("should render fallback UI when error occurs", () => {
     render(
       <ErrorBoundary>
         <ThrowError />
-      </ErrorBoundary>
-    )
+      </ErrorBoundary>,
+    );
 
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
-    expect(screen.getByText('Test error message')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByText("Test error message")).toBeInTheDocument();
+  });
 
-  it('should render custom fallback when provided', () => {
+  it("should render custom fallback when provided", () => {
     render(
       <ErrorBoundary fallback={<div>Custom fallback</div>}>
         <ThrowError />
-      </ErrorBoundary>
-    )
+      </ErrorBoundary>,
+    );
 
-    expect(screen.getByText('Custom fallback')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Custom fallback")).toBeInTheDocument();
+  });
 
-  it('should call onError callback when error occurs', () => {
-    const onError = vi.fn()
+  it("should call onError callback when error occurs", () => {
+    const onError = vi.fn();
 
     render(
       <ErrorBoundary onError={onError}>
         <ThrowError />
-      </ErrorBoundary>
-    )
+      </ErrorBoundary>,
+    );
 
     expect(onError).toHaveBeenCalledWith(
       expect.any(Error),
-      expect.objectContaining({ componentStack: expect.any(String) })
-    )
-  })
+      expect.objectContaining({ componentStack: expect.any(String) }),
+    );
+  });
 
-  it('should reset error state when Try Again is clicked', () => {
-    const onReset = vi.fn()
-    let shouldThrow = true
+  it("should reset error state when Try Again is clicked", () => {
+    const onReset = vi.fn();
+    let shouldThrow = true;
 
     const { rerender } = render(
       <ErrorBoundary onReset={onReset}>
         <ThrowError shouldThrow={shouldThrow} />
-      </ErrorBoundary>
-    )
+      </ErrorBoundary>,
+    );
 
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
 
     // Change condition and click Try Again
-    shouldThrow = false
-    fireEvent.click(screen.getByText('Try Again'))
+    shouldThrow = false;
+    fireEvent.click(screen.getByText("Try Again"));
 
-    expect(onReset).toHaveBeenCalled()
-  })
-})
+    expect(onReset).toHaveBeenCalled();
+  });
+});
 
-describe('ErrorFallback', () => {
-  it('should render default error message', () => {
-    render(<ErrorFallback />)
+describe("ErrorFallback", () => {
+  it("should render default error message", () => {
+    render(<ErrorFallback />);
 
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
-    expect(screen.getByText('An unexpected error occurred')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(
+      screen.getByText("An unexpected error occurred"),
+    ).toBeInTheDocument();
+  });
 
-  it('should render custom title and description', () => {
+  it("should render custom title and description", () => {
     render(
-      <ErrorFallback
-        title="Custom Title"
-        description="Custom description"
-      />
-    )
+      <ErrorFallback title="Custom Title" description="Custom description" />,
+    );
 
-    expect(screen.getByText('Custom Title')).toBeInTheDocument()
-    expect(screen.getByText('Custom description')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Custom Title")).toBeInTheDocument();
+    expect(screen.getByText("Custom description")).toBeInTheDocument();
+  });
 
-  it('should render error message when provided', () => {
-    const error = new Error('Specific error')
+  it("should render error message when provided", () => {
+    const error = new Error("Specific error");
 
-    render(<ErrorFallback error={error} />)
+    render(<ErrorFallback error={error} />);
 
-    expect(screen.getByText('Specific error')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Specific error")).toBeInTheDocument();
+  });
 
-  it('should show Try Again button when resetError is provided', () => {
-    const resetError = vi.fn()
+  it("should show Try Again button when resetError is provided", () => {
+    const resetError = vi.fn();
 
-    render(<ErrorFallback resetError={resetError} />)
+    render(<ErrorFallback resetError={resetError} />);
 
-    const button = screen.getByText('Try Again')
-    expect(button).toBeInTheDocument()
+    const button = screen.getByText("Try Again");
+    expect(button).toBeInTheDocument();
 
-    fireEvent.click(button)
-    expect(resetError).toHaveBeenCalled()
-  })
+    fireEvent.click(button);
+    expect(resetError).toHaveBeenCalled();
+  });
 
-  it('should not show Try Again button when resetError is not provided', () => {
-    render(<ErrorFallback />)
+  it("should not show Try Again button when resetError is not provided", () => {
+    render(<ErrorFallback />);
 
-    expect(screen.queryByText('Try Again')).not.toBeInTheDocument()
-  })
-})
+    expect(screen.queryByText("Try Again")).not.toBeInTheDocument();
+  });
+});
 
-describe('withErrorBoundary HOC', () => {
-  it('should wrap component with ErrorBoundary', () => {
+describe("withErrorBoundary HOC", () => {
+  it("should wrap component with ErrorBoundary", () => {
     function TestComponent() {
-      return <div>Test component</div>
+      return <div>Test component</div>;
     }
 
-    const WrappedComponent = withErrorBoundary(TestComponent)
+    const WrappedComponent = withErrorBoundary(TestComponent);
 
-    render(<WrappedComponent />)
+    render(<WrappedComponent />);
 
-    expect(screen.getByText('Test component')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Test component")).toBeInTheDocument();
+  });
 
-  it('should catch errors from wrapped component', () => {
-    vi.spyOn(console, 'error').mockImplementation(() => {})
+  it("should catch errors from wrapped component", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
 
-    const WrappedComponent = withErrorBoundary(ThrowError)
+    const WrappedComponent = withErrorBoundary(ThrowError);
 
-    render(<WrappedComponent />)
+    render(<WrappedComponent />);
 
-    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
-  })
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+  });
 
-  it('should use custom fallback when provided', () => {
-    vi.spyOn(console, 'error').mockImplementation(() => {})
+  it("should use custom fallback when provided", () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
 
     const WrappedComponent = withErrorBoundary(
       ThrowError,
-      <div>Custom HOC fallback</div>
-    )
+      <div>Custom HOC fallback</div>,
+    );
 
-    render(<WrappedComponent />)
+    render(<WrappedComponent />);
 
-    expect(screen.getByText('Custom HOC fallback')).toBeInTheDocument()
-  })
-})
+    expect(screen.getByText("Custom HOC fallback")).toBeInTheDocument();
+  });
+});
diff --git a/mobile/src/__tests__/platform.test.ts b/mobile/src/__tests__/platform.test.ts
index 0ab17dcf..3cafe443 100644
--- a/mobile/src/__tests__/platform.test.ts
+++ b/mobile/src/__tests__/platform.test.ts
@@ -1,238 +1,244 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { Preferences } from '@capacitor/preferences'
-import { Filesystem, Directory } from '@capacitor/filesystem'
-import { Browser } from '@capacitor/browser'
-import { Share } from '@capacitor/share'
-import { getPlatformService } from '@mobile/platform'
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { Preferences } from "@capacitor/preferences";
+import { Filesystem, Directory } from "@capacitor/filesystem";
+import { Browser } from "@capacitor/browser";
+import { Share } from "@capacitor/share";
+import { getPlatformService } from "@mobile/platform";
 
-describe('CapacitorPlatformService', () => {
-  let service: ReturnType<typeof getPlatformService>
+describe("CapacitorPlatformService", () => {
+  let service: ReturnType<typeof getPlatformService>;
 
   beforeEach(() => {
-    vi.clearAllMocks()
-    service = getPlatformService()
-  })
+    vi.clearAllMocks();
+    service = getPlatformService();
+  });
 
-  describe('getApiKey / setApiKey', () => {
-    it('should get API key from Preferences', async () => {
-      vi.mocked(Preferences.get).mockResolvedValue({ value: 'test-api-key' })
+  describe("getApiKey / setApiKey", () => {
+    it("should get API key from Preferences", async () => {
+      vi.mocked(Preferences.get).mockResolvedValue({ value: "test-api-key" });
 
-      const apiKey = await service.getApiKey()
+      const apiKey = await service.getApiKey();
 
-      expect(apiKey).toBe('test-api-key')
-      expect(Preferences.get).toHaveBeenCalledWith({ key: 'wavespeed_api_key' })
-    })
+      expect(apiKey).toBe("test-api-key");
+      expect(Preferences.get).toHaveBeenCalledWith({
+        key: "wavespeed_api_key",
+      });
+    });
 
-    it('should return null when no API key stored', async () => {
-      vi.mocked(Preferences.get).mockResolvedValue({ value: null })
+    it("should return null when no API key stored", async () => {
+      vi.mocked(Preferences.get).mockResolvedValue({ value: null });
 
-      const apiKey = await service.getApiKey()
+      const apiKey = await service.getApiKey();
 
-      expect(apiKey).toBeNull()
-    })
+      expect(apiKey).toBeNull();
+    });
 
-    it('should set API key in Preferences', async () => {
-      vi.mocked(Preferences.set).mockResolvedValue()
+    it("should set API key in Preferences", async () => {
+      vi.mocked(Preferences.set).mockResolvedValue();
 
-      await service.setApiKey('new-api-key')
+      await service.setApiKey("new-api-key");
 
       expect(Preferences.set).toHaveBeenCalledWith({
-        key: 'wavespeed_api_key',
-        value: 'new-api-key'
-      })
-    })
-  })
+        key: "wavespeed_api_key",
+        value: "new-api-key",
+      });
+    });
+  });
 
-  describe('getSettings / setSettings', () => {
-    it('should return default settings when none stored', async () => {
-      vi.mocked(Preferences.get).mockResolvedValue({ value: null })
+  describe("getSettings / setSettings", () => {
+    it("should return default settings when none stored", async () => {
+      vi.mocked(Preferences.get).mockResolvedValue({ value: null });
 
-      const settings = await service.getSettings()
+      const settings = await service.getSettings();
 
       expect(settings).toEqual({
-        theme: 'auto',
-        language: 'en',
+        theme: "auto",
+        language: "en",
         autoSaveAssets: true,
-        assetsDirectory: 'WaveSpeed'
-      })
-    })
+        assetsDirectory: "WaveSpeed",
+      });
+    });
 
-    it('should merge stored settings with defaults', async () => {
+    it("should merge stored settings with defaults", async () => {
       vi.mocked(Preferences.get).mockResolvedValue({
-        value: JSON.stringify({ theme: 'dark', language: 'zh-CN' })
-      })
+        value: JSON.stringify({ theme: "dark", language: "zh-CN" }),
+      });
 
-      const settings = await service.getSettings()
+      const settings = await service.getSettings();
 
-      expect(settings.theme).toBe('dark')
-      expect(settings.language).toBe('zh-CN')
-      expect(settings.autoSaveAssets).toBe(true) // default
-    })
+      expect(settings.theme).toBe("dark");
+      expect(settings.language).toBe("zh-CN");
+      expect(settings.autoSaveAssets).toBe(true); // default
+    });
 
-    it('should update settings partially', async () => {
-      vi.mocked(Preferences.get).mockResolvedValue({ value: null })
-      vi.mocked(Preferences.set).mockResolvedValue()
+    it("should update settings partially", async () => {
+      vi.mocked(Preferences.get).mockResolvedValue({ value: null });
+      vi.mocked(Preferences.set).mockResolvedValue();
 
-      await service.setSettings({ theme: 'light' })
+      await service.setSettings({ theme: "light" });
 
       expect(Preferences.set).toHaveBeenCalledWith({
-        key: 'wavespeed_settings',
-        value: expect.stringContaining('"theme":"light"')
-      })
-    })
-  })
+        key: "wavespeed_settings",
+        value: expect.stringContaining('"theme":"light"'),
+      });
+    });
+  });
 
-  describe('clearAllData', () => {
-    it('should clear all Preferences', async () => {
-      vi.mocked(Preferences.clear).mockResolvedValue()
+  describe("clearAllData", () => {
+    it("should clear all Preferences", async () => {
+      vi.mocked(Preferences.clear).mockResolvedValue();
 
-      await service.clearAllData()
+      await service.clearAllData();
 
-      expect(Preferences.clear).toHaveBeenCalled()
-    })
-  })
+      expect(Preferences.clear).toHaveBeenCalled();
+    });
+  });
 
-  describe('deleteAsset', () => {
-    it('should delete file from Filesystem', async () => {
-      vi.mocked(Filesystem.deleteFile).mockResolvedValue()
+  describe("deleteAsset", () => {
+    it("should delete file from Filesystem", async () => {
+      vi.mocked(Filesystem.deleteFile).mockResolvedValue();
 
-      const result = await service.deleteAsset('WaveSpeed/images/test.jpg')
+      const result = await service.deleteAsset("WaveSpeed/images/test.jpg");
 
-      expect(result.success).toBe(true)
+      expect(result.success).toBe(true);
       expect(Filesystem.deleteFile).toHaveBeenCalledWith({
-        path: 'WaveSpeed/images/test.jpg',
-        directory: Directory.Documents
-      })
-    })
+        path: "WaveSpeed/images/test.jpg",
+        directory: Directory.Documents,
+      });
+    });
 
-    it('should return error on failure', async () => {
-      vi.mocked(Filesystem.deleteFile).mockRejectedValue(new Error('File not found'))
+    it("should return error on failure", async () => {
+      vi.mocked(Filesystem.deleteFile).mockRejectedValue(
+        new Error("File not found"),
+      );
 
-      const result = await service.deleteAsset('non-existent.jpg')
+      const result = await service.deleteAsset("non-existent.jpg");
 
-      expect(result.success).toBe(false)
-      expect(result.error).toBe('File not found')
-    })
-  })
+      expect(result.success).toBe(false);
+      expect(result.error).toBe("File not found");
+    });
+  });
 
-  describe('deleteAssetsBulk', () => {
-    it('should delete multiple files', async () => {
-      vi.mocked(Filesystem.deleteFile).mockResolvedValue()
+  describe("deleteAssetsBulk", () => {
+    it("should delete multiple files", async () => {
+      vi.mocked(Filesystem.deleteFile).mockResolvedValue();
 
-      const result = await service.deleteAssetsBulk(['file1.jpg', 'file2.jpg'])
+      const result = await service.deleteAssetsBulk(["file1.jpg", "file2.jpg"]);
 
-      expect(result.success).toBe(true)
-      expect(result.deletedCount).toBe(2)
-      expect(result.errors).toHaveLength(0)
-    })
+      expect(result.success).toBe(true);
+      expect(result.deletedCount).toBe(2);
+      expect(result.errors).toHaveLength(0);
+    });
 
-    it('should track errors for failed deletions', async () => {
+    it("should track errors for failed deletions", async () => {
       vi.mocked(Filesystem.deleteFile)
         .mockResolvedValueOnce()
-        .mockRejectedValueOnce(new Error('Permission denied'))
+        .mockRejectedValueOnce(new Error("Permission denied"));
 
-      const result = await service.deleteAssetsBulk(['file1.jpg', 'file2.jpg'])
+      const result = await service.deleteAssetsBulk(["file1.jpg", "file2.jpg"]);
 
-      expect(result.success).toBe(false)
-      expect(result.deletedCount).toBe(1)
-      expect(result.errors).toContain('Permission denied')
-    })
-  })
+      expect(result.success).toBe(false);
+      expect(result.deletedCount).toBe(1);
+      expect(result.errors).toContain("Permission denied");
+    });
+  });
 
-  describe('checkFileExists', () => {
-    it('should return true when file exists', async () => {
+  describe("checkFileExists", () => {
+    it("should return true when file exists", async () => {
       vi.mocked(Filesystem.stat).mockResolvedValue({
-        type: 'file',
+        type: "file",
         size: 1000,
         mtime: Date.now(),
         ctime: Date.now(),
-        uri: 'test-uri'
-      })
+        uri: "test-uri",
+      });
 
-      const exists = await service.checkFileExists('test.jpg')
+      const exists = await service.checkFileExists("test.jpg");
 
-      expect(exists).toBe(true)
-    })
+      expect(exists).toBe(true);
+    });
 
-    it('should return false when file does not exist', async () => {
-      vi.mocked(Filesystem.stat).mockRejectedValue(new Error('File not found'))
+    it("should return false when file does not exist", async () => {
+      vi.mocked(Filesystem.stat).mockRejectedValue(new Error("File not found"));
 
-      const exists = await service.checkFileExists('non-existent.jpg')
+      const exists = await service.checkFileExists("non-existent.jpg");
 
-      expect(exists).toBe(false)
-    })
-  })
+      expect(exists).toBe(false);
+    });
+  });
 
-  describe('openExternal', () => {
-    it('should open URL in browser', async () => {
-      vi.mocked(Browser.open).mockResolvedValue()
+  describe("openExternal", () => {
+    it("should open URL in browser", async () => {
+      vi.mocked(Browser.open).mockResolvedValue();
 
-      await service.openExternal('https://example.com')
+      await service.openExternal("https://example.com");
 
-      expect(Browser.open).toHaveBeenCalledWith({ url: 'https://example.com' })
-    })
-  })
+      expect(Browser.open).toHaveBeenCalledWith({ url: "https://example.com" });
+    });
+  });
 
-  describe('shareAsset', () => {
-    it('should share file using Share plugin', async () => {
-      vi.mocked(Filesystem.getUri).mockResolvedValue({ uri: 'file:///test.jpg' })
-      vi.mocked(Share.share).mockResolvedValue({ activityType: undefined })
+  describe("shareAsset", () => {
+    it("should share file using Share plugin", async () => {
+      vi.mocked(Filesystem.getUri).mockResolvedValue({
+        uri: "file:///test.jpg",
+      });
+      vi.mocked(Share.share).mockResolvedValue({ activityType: undefined });
 
-      await service.shareAsset('test.jpg')
+      await service.shareAsset("test.jpg");
 
-      expect(Filesystem.getUri).toHaveBeenCalled()
-      expect(Share.share).toHaveBeenCalledWith({ url: 'file:///test.jpg' })
-    })
-  })
+      expect(Filesystem.getUri).toHaveBeenCalled();
+      expect(Share.share).toHaveBeenCalledWith({ url: "file:///test.jpg" });
+    });
+  });
 
-  describe('getPlatform / isMobile', () => {
-    it('should return capacitor as platform', () => {
-      expect(service.getPlatform()).toBe('capacitor')
-    })
+  describe("getPlatform / isMobile", () => {
+    it("should return capacitor as platform", () => {
+      expect(service.getPlatform()).toBe("capacitor");
+    });
 
-    it('should return true for isMobile', () => {
-      expect(service.isMobile()).toBe(true)
-    })
-  })
+    it("should return true for isMobile", () => {
+      expect(service.isMobile()).toBe(true);
+    });
+  });
 
-  describe('getDefaultAssetsDirectory', () => {
-    it('should return default directory path', async () => {
-      const dir = await service.getDefaultAssetsDirectory()
+  describe("getDefaultAssetsDirectory", () => {
+    it("should return default directory path", async () => {
+      const dir = await service.getDefaultAssetsDirectory();
 
-      expect(dir).toBe('Documents/WaveSpeed')
-    })
-  })
+      expect(dir).toBe("Documents/WaveSpeed");
+    });
+  });
 
-  describe('getAssetsMetadata / saveAssetsMetadata', () => {
-    it('should return empty array when no metadata stored', async () => {
-      vi.mocked(Preferences.get).mockResolvedValue({ value: null })
+  describe("getAssetsMetadata / saveAssetsMetadata", () => {
+    it("should return empty array when no metadata stored", async () => {
+      vi.mocked(Preferences.get).mockResolvedValue({ value: null });
 
-      const metadata = await service.getAssetsMetadata()
+      const metadata = await service.getAssetsMetadata();
 
-      expect(metadata).toEqual([])
-    })
+      expect(metadata).toEqual([]);
+    });
 
-    it('should return stored metadata', async () => {
-      const mockMetadata = [{ id: '1', fileName: 'test.jpg' }]
+    it("should return stored metadata", async () => {
+      const mockMetadata = [{ id: "1", fileName: "test.jpg" }];
       vi.mocked(Preferences.get).mockResolvedValue({
-        value: JSON.stringify(mockMetadata)
-      })
+        value: JSON.stringify(mockMetadata),
+      });
 
-      const metadata = await service.getAssetsMetadata()
+      const metadata = await service.getAssetsMetadata();
 
-      expect(metadata).toEqual(mockMetadata)
-    })
+      expect(metadata).toEqual(mockMetadata);
+    });
 
-    it('should save metadata to Preferences', async () => {
-      vi.mocked(Preferences.set).mockResolvedValue()
-      const mockMetadata = [{ id: '1', fileName: 'test.jpg' }]
+    it("should save metadata to Preferences", async () => {
+      vi.mocked(Preferences.set).mockResolvedValue();
+      const mockMetadata = [{ id: "1", fileName: "test.jpg" }];
 
-      await service.saveAssetsMetadata(mockMetadata as any)
+      await service.saveAssetsMetadata(mockMetadata as any);
 
       expect(Preferences.set).toHaveBeenCalledWith({
-        key: 'wavespeed_assets_metadata',
-        value: JSON.stringify(mockMetadata)
-      })
-    })
-  })
-})
+        key: "wavespeed_assets_metadata",
+        value: JSON.stringify(mockMetadata),
+      });
+    });
+  });
+});
diff --git a/mobile/src/__tests__/predictionInputsStore.test.ts b/mobile/src/__tests__/predictionInputsStore.test.ts
index 468a9177..655f5096 100644
--- a/mobile/src/__tests__/predictionInputsStore.test.ts
+++ b/mobile/src/__tests__/predictionInputsStore.test.ts
@@ -1,166 +1,176 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { usePredictionInputsStore } from '@mobile/stores/predictionInputsStore'
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { usePredictionInputsStore } from "@mobile/stores/predictionInputsStore";
 
-describe('predictionInputsStore', () => {
+describe("predictionInputsStore", () => {
   beforeEach(() => {
     // Reset store state before each test
     usePredictionInputsStore.setState({
       entries: new Map(),
-      isLoaded: false
-    })
+      isLoaded: false,
+    });
     // Clear localStorage mock
-    vi.mocked(localStorage.getItem).mockReturnValue(null)
-    vi.mocked(localStorage.setItem).mockClear()
-    vi.mocked(localStorage.removeItem).mockClear()
-  })
+    vi.mocked(localStorage.getItem).mockReturnValue(null);
+    vi.mocked(localStorage.setItem).mockClear();
+    vi.mocked(localStorage.removeItem).mockClear();
+  });
 
-  describe('load', () => {
-    it('should load entries from localStorage', () => {
+  describe("load", () => {
+    it("should load entries from localStorage", () => {
       const mockEntries = [
         {
-          predictionId: 'pred-1',
-          modelId: 'model-1',
-          modelName: 'Test Model',
-          inputs: { prompt: 'test prompt' },
-          createdAt: new Date().toISOString()
-        }
-      ]
-      vi.mocked(localStorage.getItem).mockReturnValue(JSON.stringify(mockEntries))
-
-      const store = usePredictionInputsStore.getState()
-      store.load()
-
-      const state = usePredictionInputsStore.getState()
-      expect(state.isLoaded).toBe(true)
-      expect(state.entries.size).toBe(1)
-      expect(state.entries.get('pred-1')).toBeDefined()
-    })
-
-    it('should handle empty localStorage', () => {
-      vi.mocked(localStorage.getItem).mockReturnValue(null)
-
-      const store = usePredictionInputsStore.getState()
-      store.load()
-
-      const state = usePredictionInputsStore.getState()
-      expect(state.isLoaded).toBe(true)
-      expect(state.entries.size).toBe(0)
-    })
-
-    it('should handle invalid JSON in localStorage', () => {
-      vi.mocked(localStorage.getItem).mockReturnValue('invalid json')
-
-      const store = usePredictionInputsStore.getState()
-      store.load()
-
-      const state = usePredictionInputsStore.getState()
-      expect(state.isLoaded).toBe(true)
-      expect(state.entries.size).toBe(0)
-    })
-  })
-
-  describe('save', () => {
-    it('should save a new entry', () => {
-      const store = usePredictionInputsStore.getState()
-
-      store.save('pred-1', 'model-1', 'Test Model', { prompt: 'test' })
-
-      const state = usePredictionInputsStore.getState()
-      expect(state.entries.size).toBe(1)
-      expect(state.entries.get('pred-1')).toMatchObject({
-        predictionId: 'pred-1',
-        modelId: 'model-1',
-        modelName: 'Test Model',
-        inputs: { prompt: 'test' }
-      })
-    })
-
-    it('should persist to localStorage', () => {
-      const store = usePredictionInputsStore.getState()
-
-      store.save('pred-1', 'model-1', 'Test Model', { prompt: 'test' })
+          predictionId: "pred-1",
+          modelId: "model-1",
+          modelName: "Test Model",
+          inputs: { prompt: "test prompt" },
+          createdAt: new Date().toISOString(),
+        },
+      ];
+      vi.mocked(localStorage.getItem).mockReturnValue(
+        JSON.stringify(mockEntries),
+      );
+
+      const store = usePredictionInputsStore.getState();
+      store.load();
+
+      const state = usePredictionInputsStore.getState();
+      expect(state.isLoaded).toBe(true);
+      expect(state.entries.size).toBe(1);
+      expect(state.entries.get("pred-1")).toBeDefined();
+    });
+
+    it("should handle empty localStorage", () => {
+      vi.mocked(localStorage.getItem).mockReturnValue(null);
+
+      const store = usePredictionInputsStore.getState();
+      store.load();
+
+      const state = usePredictionInputsStore.getState();
+      expect(state.isLoaded).toBe(true);
+      expect(state.entries.size).toBe(0);
+    });
+
+    it("should handle invalid JSON in localStorage", () => {
+      vi.mocked(localStorage.getItem).mockReturnValue("invalid json");
+
+      const store = usePredictionInputsStore.getState();
+      store.load();
+
+      const state = usePredictionInputsStore.getState();
+      expect(state.isLoaded).toBe(true);
+      expect(state.entries.size).toBe(0);
+    });
+  });
+
+  describe("save", () => {
+    it("should save a new entry", () => {
+      const store = usePredictionInputsStore.getState();
+
+      store.save("pred-1", "model-1", "Test Model", { prompt: "test" });
+
+      const state = usePredictionInputsStore.getState();
+      expect(state.entries.size).toBe(1);
+      expect(state.entries.get("pred-1")).toMatchObject({
+        predictionId: "pred-1",
+        modelId: "model-1",
+        modelName: "Test Model",
+        inputs: { prompt: "test" },
+      });
+    });
+
+    it("should persist to localStorage", () => {
+      const store = usePredictionInputsStore.getState();
+
+      store.save("pred-1", "model-1", "Test Model", { prompt: "test" });
 
       expect(localStorage.setItem).toHaveBeenCalledWith(
-        'wavespeed_prediction_inputs',
-        expect.any(String)
-      )
-    })
+        "wavespeed_prediction_inputs",
+        expect.any(String),
+      );
+    });
 
-    it('should overwrite existing entry with same predictionId', () => {
-      const store = usePredictionInputsStore.getState()
+    it("should overwrite existing entry with same predictionId", () => {
+      const store = usePredictionInputsStore.getState();
 
-      store.save('pred-1', 'model-1', 'Test Model', { prompt: 'first' })
-      store.save('pred-1', 'model-1', 'Test Model', { prompt: 'second' })
+      store.save("pred-1", "model-1", "Test Model", { prompt: "first" });
+      store.save("pred-1", "model-1", "Test Model", { prompt: "second" });
 
-      const state = usePredictionInputsStore.getState()
-      expect(state.entries.size).toBe(1)
-      expect(state.entries.get('pred-1')?.inputs).toEqual({ prompt: 'second' })
-    })
-  })
+      const state = usePredictionInputsStore.getState();
+      expect(state.entries.size).toBe(1);
+      expect(state.entries.get("pred-1")?.inputs).toEqual({ prompt: "second" });
+    });
+  });
 
-  describe('get', () => {
-    it('should return entry by predictionId', () => {
-      const store = usePredictionInputsStore.getState()
-      store.save('pred-1', 'model-1', 'Test Model', { prompt: 'test' })
+  describe("get", () => {
+    it("should return entry by predictionId", () => {
+      const store = usePredictionInputsStore.getState();
+      store.save("pred-1", "model-1", "Test Model", { prompt: "test" });
 
-      const entry = store.get('pred-1')
-      expect(entry).toBeDefined()
-      expect(entry?.predictionId).toBe('pred-1')
-    })
+      const entry = store.get("pred-1");
+      expect(entry).toBeDefined();
+      expect(entry?.predictionId).toBe("pred-1");
+    });
 
-    it('should return undefined for non-existent predictionId', () => {
-      const store = usePredictionInputsStore.getState()
+    it("should return undefined for non-existent predictionId", () => {
+      const store = usePredictionInputsStore.getState();
 
-      const entry = store.get('non-existent')
-      expect(entry).toBeUndefined()
-    })
-  })
+      const entry = store.get("non-existent");
+      expect(entry).toBeUndefined();
+    });
+  });
 
-  describe('getArchived', () => {
-    it('should return entries older than archive age', () => {
-      const store = usePredictionInputsStore.getState()
+  describe("getArchived", () => {
+    it("should return entries older than archive age", () => {
+      const store = usePredictionInputsStore.getState();
 
       // Add an old entry (8 days ago)
-      const oldDate = new Date()
-      oldDate.setDate(oldDate.getDate() - 8)
+      const oldDate = new Date();
+      oldDate.setDate(oldDate.getDate() - 8);
 
       // Set entries directly for testing
       usePredictionInputsStore.setState({
         entries: new Map([
-          ['old-pred', {
-            predictionId: 'old-pred',
-            modelId: 'model-1',
-            modelName: 'Test Model',
-            inputs: { prompt: 'old' },
-            createdAt: oldDate.toISOString()
-          }],
-          ['new-pred', {
-            predictionId: 'new-pred',
-            modelId: 'model-1',
-            modelName: 'Test Model',
-            inputs: { prompt: 'new' },
-            createdAt: new Date().toISOString()
-          }]
+          [
+            "old-pred",
+            {
+              predictionId: "old-pred",
+              modelId: "model-1",
+              modelName: "Test Model",
+              inputs: { prompt: "old" },
+              createdAt: oldDate.toISOString(),
+            },
+          ],
+          [
+            "new-pred",
+            {
+              predictionId: "new-pred",
+              modelId: "model-1",
+              modelName: "Test Model",
+              inputs: { prompt: "new" },
+              createdAt: new Date().toISOString(),
+            },
+          ],
         ]),
-        isLoaded: true
-      })
-
-      const archived = usePredictionInputsStore.getState().getArchived()
-      expect(archived.length).toBe(1)
-      expect(archived[0].predictionId).toBe('old-pred')
-    })
-  })
-
-  describe('clear', () => {
-    it('should clear all entries', () => {
-      const store = usePredictionInputsStore.getState()
-      store.save('pred-1', 'model-1', 'Test Model', { prompt: 'test' })
-
-      store.clear()
-
-      const state = usePredictionInputsStore.getState()
-      expect(state.entries.size).toBe(0)
-      expect(localStorage.removeItem).toHaveBeenCalledWith('wavespeed_prediction_inputs')
-    })
-  })
-})
+        isLoaded: true,
+      });
+
+      const archived = usePredictionInputsStore.getState().getArchived();
+      expect(archived.length).toBe(1);
+      expect(archived[0].predictionId).toBe("old-pred");
+    });
+  });
+
+  describe("clear", () => {
+    it("should clear all entries", () => {
+      const store = usePredictionInputsStore.getState();
+      store.save("pred-1", "model-1", "Test Model", { prompt: "test" });
+
+      store.clear();
+
+      const state = usePredictionInputsStore.getState();
+      expect(state.entries.size).toBe(0);
+      expect(localStorage.removeItem).toHaveBeenCalledWith(
+        "wavespeed_prediction_inputs",
+      );
+    });
+  });
+});
diff --git a/mobile/src/__tests__/setup.ts b/mobile/src/__tests__/setup.ts
index c23094bb..9145f609 100644
--- a/mobile/src/__tests__/setup.ts
+++ b/mobile/src/__tests__/setup.ts
@@ -1,100 +1,104 @@
-import '@testing-library/jest-dom'
-import { vi } from 'vitest'
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
 
 // Mock Capacitor plugins
-vi.mock('@capacitor/preferences', () => ({
+vi.mock("@capacitor/preferences", () => ({
   Preferences: {
     get: vi.fn().mockResolvedValue({ value: null }),
     set: vi.fn().mockResolvedValue(undefined),
     remove: vi.fn().mockResolvedValue(undefined),
-    clear: vi.fn().mockResolvedValue(undefined)
-  }
-}))
+    clear: vi.fn().mockResolvedValue(undefined),
+  },
+}));
 
-vi.mock('@capacitor/filesystem', () => ({
+vi.mock("@capacitor/filesystem", () => ({
   Filesystem: {
-    writeFile: vi.fn().mockResolvedValue({ uri: 'mock-uri' }),
-    readFile: vi.fn().mockResolvedValue({ data: '' }),
+    writeFile: vi.fn().mockResolvedValue({ uri: "mock-uri" }),
+    readFile: vi.fn().mockResolvedValue({ data: "" }),
     deleteFile: vi.fn().mockResolvedValue(undefined),
     readdir: vi.fn().mockResolvedValue({ files: [] }),
     mkdir: vi.fn().mockResolvedValue(undefined),
-    stat: vi.fn().mockResolvedValue({ type: 'file', size: 0, mtime: Date.now() }),
-    getUri: vi.fn().mockResolvedValue({ uri: 'mock-uri' })
+    stat: vi
+      .fn()
+      .mockResolvedValue({ type: "file", size: 0, mtime: Date.now() }),
+    getUri: vi.fn().mockResolvedValue({ uri: "mock-uri" }),
   },
   Directory: {
-    Documents: 'DOCUMENTS',
-    Cache: 'CACHE',
-    Data: 'DATA'
+    Documents: "DOCUMENTS",
+    Cache: "CACHE",
+    Data: "DATA",
   },
   Encoding: {
-    UTF8: 'utf8'
-  }
-}))
+    UTF8: "utf8",
+  },
+}));
 
-vi.mock('@capacitor/browser', () => ({
+vi.mock("@capacitor/browser", () => ({
   Browser: {
-    open: vi.fn().mockResolvedValue(undefined)
-  }
-}))
+    open: vi.fn().mockResolvedValue(undefined),
+  },
+}));
 
-vi.mock('@capacitor/share', () => ({
+vi.mock("@capacitor/share", () => ({
   Share: {
-    share: vi.fn().mockResolvedValue(undefined)
-  }
-}))
+    share: vi.fn().mockResolvedValue(undefined),
+  },
+}));
 
-vi.mock('@capacitor/camera', () => ({
+vi.mock("@capacitor/camera", () => ({
   Camera: {
-    getPhoto: vi.fn().mockResolvedValue({ base64String: '', dataUrl: '', path: '' }),
-    pickImages: vi.fn().mockResolvedValue({ photos: [] })
+    getPhoto: vi
+      .fn()
+      .mockResolvedValue({ base64String: "", dataUrl: "", path: "" }),
+    pickImages: vi.fn().mockResolvedValue({ photos: [] }),
   },
   CameraResultType: {
-    Uri: 'uri',
-    Base64: 'base64',
-    DataUrl: 'dataUrl'
+    Uri: "uri",
+    Base64: "base64",
+    DataUrl: "dataUrl",
   },
   CameraSource: {
-    Prompt: 'PROMPT',
-    Camera: 'CAMERA',
-    Photos: 'PHOTOS'
-  }
-}))
+    Prompt: "PROMPT",
+    Camera: "CAMERA",
+    Photos: "PHOTOS",
+  },
+}));
 
-vi.mock('@capacitor/status-bar', () => ({
+vi.mock("@capacitor/status-bar", () => ({
   StatusBar: {
     setStyle: vi.fn().mockResolvedValue(undefined),
-    setBackgroundColor: vi.fn().mockResolvedValue(undefined)
+    setBackgroundColor: vi.fn().mockResolvedValue(undefined),
   },
   Style: {
-    Dark: 'DARK',
-    Light: 'LIGHT'
-  }
-}))
+    Dark: "DARK",
+    Light: "LIGHT",
+  },
+}));
 
-vi.mock('@capacitor/splash-screen', () => ({
+vi.mock("@capacitor/splash-screen", () => ({
   SplashScreen: {
     hide: vi.fn().mockResolvedValue(undefined),
-    show: vi.fn().mockResolvedValue(undefined)
-  }
-}))
+    show: vi.fn().mockResolvedValue(undefined),
+  },
+}));
 
-vi.mock('@capacitor/keyboard', () => ({
+vi.mock("@capacitor/keyboard", () => ({
   Keyboard: {
     addListener: vi.fn().mockReturnValue({ remove: vi.fn() }),
-    removeAllListeners: vi.fn().mockResolvedValue(undefined)
-  }
-}))
+    removeAllListeners: vi.fn().mockResolvedValue(undefined),
+  },
+}));
 
-vi.mock('@capacitor/app', () => ({
+vi.mock("@capacitor/app", () => ({
   App: {
     addListener: vi.fn().mockReturnValue({ remove: vi.fn() }),
     removeAllListeners: vi.fn().mockResolvedValue(undefined),
-    exitApp: vi.fn()
-  }
-}))
+    exitApp: vi.fn(),
+  },
+}));
 
 // Mock window.matchMedia for theme detection
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(window, "matchMedia", {
   writable: true,
   value: vi.fn().mockImplementation((query: string) => ({
     matches: false,
@@ -104,31 +108,31 @@ Object.defineProperty(window, 'matchMedia', {
     removeListener: vi.fn(),
     addEventListener: vi.fn(),
     removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn()
-  }))
-})
+    dispatchEvent: vi.fn(),
+  })),
+});
 
 // Mock IntersectionObserver
 class MockIntersectionObserver {
-  observe = vi.fn()
-  unobserve = vi.fn()
-  disconnect = vi.fn()
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
 }
-Object.defineProperty(window, 'IntersectionObserver', {
+Object.defineProperty(window, "IntersectionObserver", {
   writable: true,
-  value: MockIntersectionObserver
-})
+  value: MockIntersectionObserver,
+});
 
 // Mock ResizeObserver
 class MockResizeObserver {
-  observe = vi.fn()
-  unobserve = vi.fn()
-  disconnect = vi.fn()
+  observe = vi.fn();
+  unobserve = vi.fn();
+  disconnect = vi.fn();
 }
-Object.defineProperty(window, 'ResizeObserver', {
+Object.defineProperty(window, "ResizeObserver", {
   writable: true,
-  value: MockResizeObserver
-})
+  value: MockResizeObserver,
+});
 
 // Mock localStorage
 const localStorageMock = {
@@ -137,38 +141,38 @@ const localStorageMock = {
   removeItem: vi.fn(),
   clear: vi.fn(),
   length: 0,
-  key: vi.fn()
-}
-Object.defineProperty(window, 'localStorage', {
-  value: localStorageMock
-})
+  key: vi.fn(),
+};
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+});
 
 // Mock URL.createObjectURL
-Object.defineProperty(URL, 'createObjectURL', {
+Object.defineProperty(URL, "createObjectURL", {
   writable: true,
-  value: vi.fn(() => 'mock-url')
-})
+  value: vi.fn(() => "mock-url"),
+});
 
-Object.defineProperty(URL, 'revokeObjectURL', {
+Object.defineProperty(URL, "revokeObjectURL", {
   writable: true,
-  value: vi.fn()
-})
+  value: vi.fn(),
+});
 
 // Suppress console errors during tests
-const originalError = console.error
+const originalError = console.error;
 beforeAll(() => {
   console.error = (...args: unknown[]) => {
     // Suppress specific React warnings during tests
     if (
-      typeof args[0] === 'string' &&
-      (args[0].includes('Warning:') || args[0].includes('act('))
+      typeof args[0] === "string" &&
+      (args[0].includes("Warning:") || args[0].includes("act("))
     ) {
-      return
+      return;
     }
-    originalError.call(console, ...args)
-  }
-})
+    originalError.call(console, ...args);
+  };
+});
 
 afterAll(() => {
-  console.error = originalError
-})
+  console.error = originalError;
+});
diff --git a/mobile/src/components/games/FlappyBird.tsx b/mobile/src/components/games/FlappyBird.tsx
index d4499fd3..a8cf5ebe 100644
--- a/mobile/src/components/games/FlappyBird.tsx
+++ b/mobile/src/components/games/FlappyBird.tsx
@@ -1,254 +1,301 @@
-import { useRef, useEffect, useState, useCallback } from 'react'
+import { useRef, useEffect, useState, useCallback } from "react";
 
 interface Pipe {
-  x: number
-  topHeight: number
-  passed: boolean
+  x: number;
+  topHeight: number;
+  passed: boolean;
 }
 
-type GameState = 'ready' | 'playing' | 'gameover'
+type GameState = "ready" | "playing" | "gameover";
 
 export function FlappyBird() {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [gameState, setGameState] = useState<GameState>('ready')
-  const [score, setScore] = useState(0)
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [gameState, setGameState] = useState<GameState>("ready");
+  const [score, setScore] = useState(0);
   const [highScore, setHighScore] = useState(() => {
-    const saved = localStorage.getItem('flappybird_highscore')
-    return saved ? parseInt(saved, 10) : 0
-  })
+    const saved = localStorage.getItem("flappybird_highscore");
+    return saved ? parseInt(saved, 10) : 0;
+  });
 
   // Game state refs (to avoid stale closures in game loop)
-  const gameStateRef = useRef<GameState>('ready')
-  const scoreRef = useRef(0)
-  const birdRef = useRef({ y: 200, velocity: 0 })
-  const pipesRef = useRef<Pipe[]>([])
-  const frameCountRef = useRef(0)
-  const animationIdRef = useRef<number>(0)
+  const gameStateRef = useRef<GameState>("ready");
+  const scoreRef = useRef(0);
+  const birdRef = useRef({ y: 200, velocity: 0 });
+  const pipesRef = useRef<Pipe[]>([]);
+  const frameCountRef = useRef(0);
+  const animationIdRef = useRef<number>(0);
 
   // Game constants (easy mode - casual gameplay)
-  const GRAVITY = 0.28
-  const JUMP_VELOCITY = -5.5
-  const PIPE_GAP = 180
-  const PIPE_WIDTH = 45
-  const PIPE_SPEED = 1.5
-  const BIRD_SIZE = 22
-  const BIRD_X = 50
+  const GRAVITY = 0.28;
+  const JUMP_VELOCITY = -5.5;
+  const PIPE_GAP = 180;
+  const PIPE_WIDTH = 45;
+  const PIPE_SPEED = 1.5;
+  const BIRD_SIZE = 22;
+  const BIRD_X = 50;
 
   const resetGame = useCallback(() => {
-    birdRef.current = { y: 200, velocity: 0 }
-    pipesRef.current = []
-    frameCountRef.current = 0
-    scoreRef.current = 0
-    setScore(0)
-  }, [])
+    birdRef.current = { y: 200, velocity: 0 };
+    pipesRef.current = [];
+    frameCountRef.current = 0;
+    scoreRef.current = 0;
+    setScore(0);
+  }, []);
 
   const jump = useCallback(() => {
-    if (gameStateRef.current === 'ready') {
-      gameStateRef.current = 'playing'
-      setGameState('playing')
-      resetGame()
-    } else if (gameStateRef.current === 'playing') {
-      birdRef.current.velocity = JUMP_VELOCITY
-    } else if (gameStateRef.current === 'gameover') {
-      gameStateRef.current = 'ready'
-      setGameState('ready')
-      resetGame()
+    if (gameStateRef.current === "ready") {
+      gameStateRef.current = "playing";
+      setGameState("playing");
+      resetGame();
+    } else if (gameStateRef.current === "playing") {
+      birdRef.current.velocity = JUMP_VELOCITY;
+    } else if (gameStateRef.current === "gameover") {
+      gameStateRef.current = "ready";
+      setGameState("ready");
+      resetGame();
     }
-  }, [resetGame])
+  }, [resetGame]);
 
   useEffect(() => {
-    const canvas = canvasRef.current
-    const container = containerRef.current
-    if (!canvas || !container) return
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container) return;
 
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
     // Set canvas size
     const updateSize = () => {
-      const rect = container.getBoundingClientRect()
-      canvas.width = rect.width
-      canvas.height = rect.height
-    }
-    updateSize()
-    window.addEventListener('resize', updateSize)
+      const rect = container.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+    };
+    updateSize();
+    window.addEventListener("resize", updateSize);
 
     const gameLoop = () => {
-      if (!ctx || !canvas) return
+      if (!ctx || !canvas) return;
 
-      const { width, height } = canvas
+      const { width, height } = canvas;
 
       // Clear canvas
-      ctx.fillStyle = '#1a1a2e'
-      ctx.fillRect(0, 0, width, height)
+      ctx.fillStyle = "#1a1a2e";
+      ctx.fillRect(0, 0, width, height);
 
       // Draw ground
-      ctx.fillStyle = '#16213e'
-      ctx.fillRect(0, height - 40, width, 40)
-      ctx.fillStyle = '#4ade80'
-      ctx.fillRect(0, height - 42, width, 4)
+      ctx.fillStyle = "#16213e";
+      ctx.fillRect(0, height - 40, width, 40);
+      ctx.fillStyle = "#4ade80";
+      ctx.fillRect(0, height - 42, width, 4);
 
-      if (gameStateRef.current === 'playing') {
+      if (gameStateRef.current === "playing") {
         // Update bird
-        birdRef.current.velocity += GRAVITY
-        birdRef.current.y += birdRef.current.velocity
+        birdRef.current.velocity += GRAVITY;
+        birdRef.current.y += birdRef.current.velocity;
 
         // Check ground/ceiling collision
-        if (birdRef.current.y < 0 || birdRef.current.y + BIRD_SIZE > height - 40) {
-          gameStateRef.current = 'gameover'
-          setGameState('gameover')
+        if (
+          birdRef.current.y < 0 ||
+          birdRef.current.y + BIRD_SIZE > height - 40
+        ) {
+          gameStateRef.current = "gameover";
+          setGameState("gameover");
           // Update high score
           if (scoreRef.current > highScore) {
-            setHighScore(scoreRef.current)
-            localStorage.setItem('flappybird_highscore', scoreRef.current.toString())
+            setHighScore(scoreRef.current);
+            localStorage.setItem(
+              "flappybird_highscore",
+              scoreRef.current.toString(),
+            );
           }
         }
 
         // Spawn pipes (every 150 frames for casual gameplay)
-        frameCountRef.current++
+        frameCountRef.current++;
         if (frameCountRef.current % 150 === 0) {
-          const minHeight = 60
-          const maxHeight = height - PIPE_GAP - 60 - 40
-          const topHeight = Math.random() * (maxHeight - minHeight) + minHeight
-          pipesRef.current.push({ x: width, topHeight, passed: false })
+          const minHeight = 60;
+          const maxHeight = height - PIPE_GAP - 60 - 40;
+          const topHeight = Math.random() * (maxHeight - minHeight) + minHeight;
+          pipesRef.current.push({ x: width, topHeight, passed: false });
         }
 
         // Update pipes
-        pipesRef.current = pipesRef.current.filter(pipe => {
-          pipe.x -= PIPE_SPEED
+        pipesRef.current = pipesRef.current.filter((pipe) => {
+          pipe.x -= PIPE_SPEED;
 
           // Check collision
-          const birdRight = BIRD_X + BIRD_SIZE
-          const birdBottom = birdRef.current.y + BIRD_SIZE
-          const pipeRight = pipe.x + PIPE_WIDTH
-          const bottomPipeTop = pipe.topHeight + PIPE_GAP
+          const birdRight = BIRD_X + BIRD_SIZE;
+          const birdBottom = birdRef.current.y + BIRD_SIZE;
+          const pipeRight = pipe.x + PIPE_WIDTH;
+          const bottomPipeTop = pipe.topHeight + PIPE_GAP;
 
           if (birdRight > pipe.x && BIRD_X < pipeRight) {
-            if (birdRef.current.y < pipe.topHeight || birdBottom > bottomPipeTop) {
-              gameStateRef.current = 'gameover'
-              setGameState('gameover')
+            if (
+              birdRef.current.y < pipe.topHeight ||
+              birdBottom > bottomPipeTop
+            ) {
+              gameStateRef.current = "gameover";
+              setGameState("gameover");
               if (scoreRef.current > highScore) {
-                setHighScore(scoreRef.current)
-                localStorage.setItem('flappybird_highscore', scoreRef.current.toString())
+                setHighScore(scoreRef.current);
+                localStorage.setItem(
+                  "flappybird_highscore",
+                  scoreRef.current.toString(),
+                );
               }
             }
           }
 
           // Update score
           if (!pipe.passed && pipe.x + PIPE_WIDTH < BIRD_X) {
-            pipe.passed = true
-            scoreRef.current++
-            setScore(scoreRef.current)
+            pipe.passed = true;
+            scoreRef.current++;
+            setScore(scoreRef.current);
           }
 
-          return pipe.x > -PIPE_WIDTH
-        })
+          return pipe.x > -PIPE_WIDTH;
+        });
       }
 
       // Draw pipes
-      ctx.fillStyle = '#4ade80'
-      pipesRef.current.forEach(pipe => {
+      ctx.fillStyle = "#4ade80";
+      pipesRef.current.forEach((pipe) => {
         // Top pipe
-        ctx.fillRect(pipe.x, 0, PIPE_WIDTH, pipe.topHeight)
+        ctx.fillRect(pipe.x, 0, PIPE_WIDTH, pipe.topHeight);
         // Pipe cap (top)
-        ctx.fillStyle = '#22c55e'
-        ctx.fillRect(pipe.x - 3, pipe.topHeight - 20, PIPE_WIDTH + 6, 20)
-        ctx.fillStyle = '#4ade80'
+        ctx.fillStyle = "#22c55e";
+        ctx.fillRect(pipe.x - 3, pipe.topHeight - 20, PIPE_WIDTH + 6, 20);
+        ctx.fillStyle = "#4ade80";
 
         // Bottom pipe
-        const bottomY = pipe.topHeight + PIPE_GAP
-        ctx.fillRect(pipe.x, bottomY, PIPE_WIDTH, height - bottomY - 40)
+        const bottomY = pipe.topHeight + PIPE_GAP;
+        ctx.fillRect(pipe.x, bottomY, PIPE_WIDTH, height - bottomY - 40);
         // Pipe cap (bottom)
-        ctx.fillStyle = '#22c55e'
-        ctx.fillRect(pipe.x - 3, bottomY, PIPE_WIDTH + 6, 20)
-        ctx.fillStyle = '#4ade80'
-      })
+        ctx.fillStyle = "#22c55e";
+        ctx.fillRect(pipe.x - 3, bottomY, PIPE_WIDTH + 6, 20);
+        ctx.fillStyle = "#4ade80";
+      });
 
       // Draw bird
-      const birdY = birdRef.current.y
+      const birdY = birdRef.current.y;
       // Bird body
-      ctx.fillStyle = '#fbbf24'
-      ctx.beginPath()
-      ctx.ellipse(BIRD_X + BIRD_SIZE/2, birdY + BIRD_SIZE/2, BIRD_SIZE/2, BIRD_SIZE/2.5, 0, 0, Math.PI * 2)
-      ctx.fill()
+      ctx.fillStyle = "#fbbf24";
+      ctx.beginPath();
+      ctx.ellipse(
+        BIRD_X + BIRD_SIZE / 2,
+        birdY + BIRD_SIZE / 2,
+        BIRD_SIZE / 2,
+        BIRD_SIZE / 2.5,
+        0,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
       // Wing
-      ctx.fillStyle = '#f59e0b'
-      ctx.beginPath()
-      ctx.ellipse(BIRD_X + BIRD_SIZE/3, birdY + BIRD_SIZE/2 + 2, BIRD_SIZE/4, BIRD_SIZE/5, 0, 0, Math.PI * 2)
-      ctx.fill()
+      ctx.fillStyle = "#f59e0b";
+      ctx.beginPath();
+      ctx.ellipse(
+        BIRD_X + BIRD_SIZE / 3,
+        birdY + BIRD_SIZE / 2 + 2,
+        BIRD_SIZE / 4,
+        BIRD_SIZE / 5,
+        0,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
       // Eye
-      ctx.fillStyle = 'white'
-      ctx.beginPath()
-      ctx.arc(BIRD_X + BIRD_SIZE/2 + 4, birdY + BIRD_SIZE/3, 5, 0, Math.PI * 2)
-      ctx.fill()
-      ctx.fillStyle = 'black'
-      ctx.beginPath()
-      ctx.arc(BIRD_X + BIRD_SIZE/2 + 5, birdY + BIRD_SIZE/3, 2.5, 0, Math.PI * 2)
-      ctx.fill()
+      ctx.fillStyle = "white";
+      ctx.beginPath();
+      ctx.arc(
+        BIRD_X + BIRD_SIZE / 2 + 4,
+        birdY + BIRD_SIZE / 3,
+        5,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
+      ctx.fillStyle = "black";
+      ctx.beginPath();
+      ctx.arc(
+        BIRD_X + BIRD_SIZE / 2 + 5,
+        birdY + BIRD_SIZE / 3,
+        2.5,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
       // Beak
-      ctx.fillStyle = '#ef4444'
-      ctx.beginPath()
-      ctx.moveTo(BIRD_X + BIRD_SIZE - 2, birdY + BIRD_SIZE/2 - 2)
-      ctx.lineTo(BIRD_X + BIRD_SIZE + 8, birdY + BIRD_SIZE/2 + 2)
-      ctx.lineTo(BIRD_X + BIRD_SIZE - 2, birdY + BIRD_SIZE/2 + 6)
-      ctx.fill()
+      ctx.fillStyle = "#ef4444";
+      ctx.beginPath();
+      ctx.moveTo(BIRD_X + BIRD_SIZE - 2, birdY + BIRD_SIZE / 2 - 2);
+      ctx.lineTo(BIRD_X + BIRD_SIZE + 8, birdY + BIRD_SIZE / 2 + 2);
+      ctx.lineTo(BIRD_X + BIRD_SIZE - 2, birdY + BIRD_SIZE / 2 + 6);
+      ctx.fill();
 
       // Draw score
-      ctx.fillStyle = 'white'
-      ctx.font = 'bold 32px sans-serif'
-      ctx.textAlign = 'center'
-      ctx.fillText(scoreRef.current.toString(), width / 2, 50)
+      ctx.fillStyle = "white";
+      ctx.font = "bold 32px sans-serif";
+      ctx.textAlign = "center";
+      ctx.fillText(scoreRef.current.toString(), width / 2, 50);
 
       // Draw overlays
-      if (gameStateRef.current === 'ready') {
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
-        ctx.fillRect(0, 0, width, height)
-
-        ctx.fillStyle = 'white'
-        ctx.font = 'bold 28px sans-serif'
-        ctx.fillText('Flappy Bird', width / 2, height / 2 - 40)
-        ctx.font = '18px sans-serif'
-        ctx.fillText('Tap to Start', width / 2, height / 2 + 10)
-        ctx.font = '14px sans-serif'
-        ctx.fillStyle = '#94a3b8'
-        ctx.fillText(`High Score: ${highScore}`, width / 2, height / 2 + 50)
+      if (gameStateRef.current === "ready") {
+        ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.fillStyle = "white";
+        ctx.font = "bold 28px sans-serif";
+        ctx.fillText("Flappy Bird", width / 2, height / 2 - 40);
+        ctx.font = "18px sans-serif";
+        ctx.fillText("Tap to Start", width / 2, height / 2 + 10);
+        ctx.font = "14px sans-serif";
+        ctx.fillStyle = "#94a3b8";
+        ctx.fillText(`High Score: ${highScore}`, width / 2, height / 2 + 50);
       }
 
-      if (gameStateRef.current === 'gameover') {
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'
-        ctx.fillRect(0, 0, width, height)
-
-        ctx.fillStyle = '#ef4444'
-        ctx.font = 'bold 28px sans-serif'
-        ctx.fillText('Game Over', width / 2, height / 2 - 50)
-        ctx.fillStyle = 'white'
-        ctx.font = '22px sans-serif'
-        ctx.fillText(`Score: ${scoreRef.current}`, width / 2, height / 2)
-        ctx.font = '16px sans-serif'
-        ctx.fillStyle = '#94a3b8'
-        ctx.fillText(`High Score: ${Math.max(scoreRef.current, highScore)}`, width / 2, height / 2 + 35)
-        ctx.fillStyle = 'white'
-        ctx.font = '16px sans-serif'
-        ctx.fillText('Tap to Restart', width / 2, height / 2 + 80)
+      if (gameStateRef.current === "gameover") {
+        ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.fillStyle = "#ef4444";
+        ctx.font = "bold 28px sans-serif";
+        ctx.fillText("Game Over", width / 2, height / 2 - 50);
+        ctx.fillStyle = "white";
+        ctx.font = "22px sans-serif";
+        ctx.fillText(`Score: ${scoreRef.current}`, width / 2, height / 2);
+        ctx.font = "16px sans-serif";
+        ctx.fillStyle = "#94a3b8";
+        ctx.fillText(
+          `High Score: ${Math.max(scoreRef.current, highScore)}`,
+          width / 2,
+          height / 2 + 35,
+        );
+        ctx.fillStyle = "white";
+        ctx.font = "16px sans-serif";
+        ctx.fillText("Tap to Restart", width / 2, height / 2 + 80);
       }
 
-      animationIdRef.current = requestAnimationFrame(gameLoop)
-    }
+      animationIdRef.current = requestAnimationFrame(gameLoop);
+    };
 
-    gameLoop()
+    gameLoop();
 
     return () => {
-      window.removeEventListener('resize', updateSize)
-      cancelAnimationFrame(animationIdRef.current)
-    }
-  }, [highScore])
+      window.removeEventListener("resize", updateSize);
+      cancelAnimationFrame(animationIdRef.current);
+    };
+  }, [highScore]);
 
   // Handle click/touch
-  const handleInteraction = useCallback((e: React.MouseEvent | React.TouchEvent) => {
-    e.preventDefault()
-    jump()
-  }, [jump])
+  const handleInteraction = useCallback(
+    (e: React.MouseEvent | React.TouchEvent) => {
+      e.preventDefault();
+      jump();
+    },
+    [jump],
+  );
 
   return (
     <div
@@ -257,10 +304,7 @@ export function FlappyBird() {
       onClick={handleInteraction}
       onTouchStart={handleInteraction}
     >
-      <canvas
-        ref={canvasRef}
-        className="w-full h-full rounded-lg"
-      />
+      <canvas ref={canvasRef} className="w-full h-full rounded-lg" />
     </div>
-  )
+  );
 }
diff --git a/mobile/src/components/games/GameDialog.tsx b/mobile/src/components/games/GameDialog.tsx
index 605d1d66..b7fe67a2 100644
--- a/mobile/src/components/games/GameDialog.tsx
+++ b/mobile/src/components/games/GameDialog.tsx
@@ -1,23 +1,26 @@
-import { X } from 'lucide-react'
+import { X } from "lucide-react";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogDescription,
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import { FlappyBird } from './FlappyBird'
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { FlappyBird } from "./FlappyBird";
 
 interface GameDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
 }
 
 export function GameDialog({ open, onOpenChange }: GameDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-md w-[95vw] h-[80vh] max-h-[600px] p-0 gap-0 overflow-hidden" hideCloseButton>
+      <DialogContent
+        className="max-w-md w-[95vw] h-[80vh] max-h-[600px] p-0 gap-0 overflow-hidden"
+        hideCloseButton
+      >
         <DialogHeader className="px-4 py-3 border-b flex-row items-center justify-between space-y-0">
           <DialogTitle className="text-lg font-semibold">Mini Game</DialogTitle>
           <DialogDescription className="sr-only">
@@ -37,5 +40,5 @@ export function GameDialog({ open, onOpenChange }: GameDialogProps) {
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/mobile/src/components/layout/BottomNavigation.tsx b/mobile/src/components/layout/BottomNavigation.tsx
index dfa8e2a4..026a3413 100644
--- a/mobile/src/components/layout/BottomNavigation.tsx
+++ b/mobile/src/components/layout/BottomNavigation.tsx
@@ -1,92 +1,109 @@
-import { useState } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Box, Sparkles, History, Images, MoreHorizontal, FileText, Settings, Wand2 } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Box,
+  Sparkles,
+  History,
+  Images,
+  MoreHorizontal,
+  FileText,
+  Settings,
+  Wand2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface NavItem {
-  path: string
-  labelKey: string
-  icon: React.ComponentType<{ className?: string }>
-  matchPaths?: string[]
+  path: string;
+  labelKey: string;
+  icon: React.ComponentType<{ className?: string }>;
+  matchPaths?: string[];
 }
 
 const navItems: NavItem[] = [
   {
-    path: '/models',
-    labelKey: 'nav.models',
+    path: "/models",
+    labelKey: "nav.models",
     icon: Box,
   },
   {
-    path: '/playground',
-    labelKey: 'nav.playground',
+    path: "/playground",
+    labelKey: "nav.playground",
     icon: Sparkles,
-    matchPaths: ['/playground'],
+    matchPaths: ["/playground"],
   },
   {
-    path: '/history',
-    labelKey: 'nav.history',
+    path: "/history",
+    labelKey: "nav.history",
     icon: History,
   },
   {
-    path: '/assets',
-    labelKey: 'nav.assets',
+    path: "/assets",
+    labelKey: "nav.assets",
     icon: Images,
   },
-]
+];
 
 const moreItems: NavItem[] = [
   {
-    path: '/free-tools',
-    labelKey: 'nav.freeTools',
+    path: "/free-tools",
+    labelKey: "nav.freeTools",
     icon: Wand2,
   },
   {
-    path: '/templates',
-    labelKey: 'nav.templates',
+    path: "/templates",
+    labelKey: "nav.templates",
     icon: FileText,
   },
   {
-    path: '/settings',
-    labelKey: 'nav.settings',
+    path: "/settings",
+    labelKey: "nav.settings",
     icon: Settings,
   },
-]
+];
 
 // Paths that work without API key
-const publicNavPaths = ['/settings', '/free-tools']
+const publicNavPaths = ["/settings", "/free-tools"];
 
 interface BottomNavigationProps {
-  isValidated?: boolean
+  isValidated?: boolean;
 }
 
-export function BottomNavigation({ isValidated = true }: BottomNavigationProps) {
-  const { t } = useTranslation()
-  const location = useLocation()
-  const navigate = useNavigate()
-  const [showMore, setShowMore] = useState(false)
+export function BottomNavigation({
+  isValidated = true,
+}: BottomNavigationProps) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [showMore, setShowMore] = useState(false);
 
   const isActive = (item: NavItem) => {
     if (item.matchPaths) {
-      return item.matchPaths.some(p => location.pathname.startsWith(p))
+      return item.matchPaths.some((p) => location.pathname.startsWith(p));
     }
-    return location.pathname === item.path || location.pathname.startsWith(item.path + '/')
-  }
+    return (
+      location.pathname === item.path ||
+      location.pathname.startsWith(item.path + "/")
+    );
+  };
 
-  const isMoreActive = moreItems.some(item => isActive(item))
+  const isMoreActive = moreItems.some((item) => isActive(item));
 
   const handleNavClick = (path: string) => {
-    if (!isValidated && !publicNavPaths.some(p => path === p || path.startsWith(p + '/'))) {
-      navigate('/')
-      return
+    if (
+      !isValidated &&
+      !publicNavPaths.some((p) => path === p || path.startsWith(p + "/"))
+    ) {
+      navigate("/");
+      return;
     }
-    navigate(path)
-  }
+    navigate(path);
+  };
 
   const handleMoreItemClick = (path: string) => {
-    setShowMore(false)
-    handleNavClick(path)
-  }
+    setShowMore(false);
+    handleNavClick(path);
+  };
 
   return (
     <>
@@ -102,22 +119,29 @@ export function BottomNavigation({ isValidated = true }: BottomNavigationProps)
       {showMore && (
         <div className="fixed bottom-[calc(56px+env(safe-area-inset-bottom,0px))] right-2 z-50 bg-popover border border-border rounded-lg shadow-lg py-1 min-w-[160px] animate-in fade-in slide-in-from-bottom-2 duration-150">
           {moreItems.map((item) => {
-            const Icon = item.icon
-            const active = isActive(item)
+            const Icon = item.icon;
+            const active = isActive(item);
 
             return (
               <button
                 key={item.path}
                 onClick={() => handleMoreItemClick(item.path)}
                 className={cn(
-                  'flex items-center gap-3 w-full px-4 py-3 text-sm transition-colors',
-                  active ? 'text-primary bg-accent/50' : 'text-foreground active:bg-accent/50'
+                  "flex items-center gap-3 w-full px-4 py-3 text-sm transition-colors",
+                  active
+                    ? "text-primary bg-accent/50"
+                    : "text-foreground active:bg-accent/50",
                 )}
               >
-                <Icon className={cn('h-5 w-5', active ? 'text-primary' : 'text-muted-foreground')} />
+                <Icon
+                  className={cn(
+                    "h-5 w-5",
+                    active ? "text-primary" : "text-muted-foreground",
+                  )}
+                />
                 <span>{t(item.labelKey)}</span>
               </button>
-            )
+            );
           })}
         </div>
       )}
@@ -126,53 +150,67 @@ export function BottomNavigation({ isValidated = true }: BottomNavigationProps)
       <nav className="bottom-nav">
         <div className="flex items-center justify-around h-14">
           {navItems.map((item) => {
-            const Icon = item.icon
-            const active = isActive(item)
+            const Icon = item.icon;
+            const active = isActive(item);
 
             return (
               <button
                 key={item.path}
-                onClick={() => { setShowMore(false); handleNavClick(item.path) }}
-                className={cn(
-                  'bottom-nav-item ripple',
-                  active && 'active'
-                )}
+                onClick={() => {
+                  setShowMore(false);
+                  handleNavClick(item.path);
+                }}
+                className={cn("bottom-nav-item ripple", active && "active")}
               >
-                <Icon className={cn(
-                  'h-5 w-5 mb-0.5',
-                  active ? 'text-primary' : 'text-muted-foreground'
-                )} />
-                <span className={cn(
-                  'text-[10px]',
-                  active ? 'text-primary font-medium' : 'text-muted-foreground'
-                )}>
+                <Icon
+                  className={cn(
+                    "h-5 w-5 mb-0.5",
+                    active ? "text-primary" : "text-muted-foreground",
+                  )}
+                />
+                <span
+                  className={cn(
+                    "text-[10px]",
+                    active
+                      ? "text-primary font-medium"
+                      : "text-muted-foreground",
+                  )}
+                >
                   {t(item.labelKey)}
                 </span>
               </button>
-            )
+            );
           })}
 
           {/* More button */}
           <button
             onClick={() => setShowMore(!showMore)}
             className={cn(
-              'bottom-nav-item ripple',
-              (showMore || isMoreActive) && 'active'
+              "bottom-nav-item ripple",
+              (showMore || isMoreActive) && "active",
             )}
           >
-            <MoreHorizontal className={cn(
-              'h-5 w-5 mb-0.5',
-              (showMore || isMoreActive) ? 'text-primary' : 'text-muted-foreground'
-            )} />
-            <span className={cn(
-              'text-[10px]',
-              (showMore || isMoreActive) ? 'text-primary font-medium' : 'text-muted-foreground'
-            )}>
-              {t('nav.more', 'More')}
+            <MoreHorizontal
+              className={cn(
+                "h-5 w-5 mb-0.5",
+                showMore || isMoreActive
+                  ? "text-primary"
+                  : "text-muted-foreground",
+              )}
+            />
+            <span
+              className={cn(
+                "text-[10px]",
+                showMore || isMoreActive
+                  ? "text-primary font-medium"
+                  : "text-muted-foreground",
+              )}
+            >
+              {t("nav.more", "More")}
             </span>
           </button>
         </div>
       </nav>
     </>
-  )
+  );
 }
diff --git a/mobile/src/components/layout/MobileHeader.tsx b/mobile/src/components/layout/MobileHeader.tsx
index 93e933d7..8fb2f084 100644
--- a/mobile/src/components/layout/MobileHeader.tsx
+++ b/mobile/src/components/layout/MobileHeader.tsx
@@ -1,81 +1,81 @@
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { ChevronLeft, Home, Sun, Moon } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { useThemeStore } from '@/stores/themeStore'
-import { AppLogo } from '@/components/layout/AppLogo'
-import { cn } from '@/lib/utils'
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { ChevronLeft, Home, Sun, Moon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useThemeStore } from "@/stores/themeStore";
+import { AppLogo } from "@/components/layout/AppLogo";
+import { cn } from "@/lib/utils";
 
 // Map paths to page titles (translation key or plain text prefixed with '!')
 const pageTitles: Record<string, string> = {
-  '/models': 'nav.models',
-  '/playground': 'nav.playground',
-  '/templates': 'nav.templates',
-  '/history': 'nav.history',
-  '/assets': 'nav.assets',
-  '/settings': 'nav.settings',
-  '/free-tools': 'nav.freeTools',
-  '/free-tools/video': 'freeTools.videoEnhancer.title',
-  '/free-tools/image': 'freeTools.imageEnhancer.title',
-  '/free-tools/background-remover': 'freeTools.backgroundRemover.title',
-  '/free-tools/image-eraser': 'freeTools.imageEraser.title',
-  '/free-tools/segment-anything': 'freeTools.segmentAnything.title',
-  '/free-tools/video-converter': 'freeTools.videoConverter.title',
-}
+  "/models": "nav.models",
+  "/playground": "nav.playground",
+  "/templates": "nav.templates",
+  "/history": "nav.history",
+  "/assets": "nav.assets",
+  "/settings": "nav.settings",
+  "/free-tools": "nav.freeTools",
+  "/free-tools/video": "freeTools.videoEnhancer.title",
+  "/free-tools/image": "freeTools.imageEnhancer.title",
+  "/free-tools/background-remover": "freeTools.backgroundRemover.title",
+  "/free-tools/image-eraser": "freeTools.imageEraser.title",
+  "/free-tools/segment-anything": "freeTools.segmentAnything.title",
+  "/free-tools/video-converter": "freeTools.videoConverter.title",
+};
 
 // Pages that should show a back button in the header
 // Note: Free tools sub-pages are NOT included because those pages have their own back buttons
-const pagesWithBackButton: string[] = [
-]
+const pagesWithBackButton: string[] = [];
 
 export function MobileHeader() {
-  const { t } = useTranslation()
-  const location = useLocation()
-  const navigate = useNavigate()
-  const { theme, setTheme, resolvedTheme } = useThemeStore()
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { theme, setTheme, resolvedTheme } = useThemeStore();
 
   // Toggle between light and dark
   const toggleTheme = () => {
     // If current theme is auto, check what resolved to, then toggle
-    const currentTheme = theme === 'auto' ? resolvedTheme : theme
-    setTheme(currentTheme === 'dark' ? 'light' : 'dark')
-  }
+    const currentTheme = theme === "auto" ? resolvedTheme : theme;
+    setTheme(currentTheme === "dark" ? "light" : "dark");
+  };
 
-  const isDark = theme === 'auto' ? resolvedTheme === 'dark' : theme === 'dark'
+  const isDark = theme === "auto" ? resolvedTheme === "dark" : theme === "dark";
 
   // Get current page title
   const getPageTitle = () => {
     // Check for exact match first
     if (pageTitles[location.pathname]) {
-      const title = pageTitles[location.pathname]
+      const title = pageTitles[location.pathname];
       // If prefixed with '!', return plain text (without the prefix)
-      if (title.startsWith('!')) {
-        return title.slice(1)
+      if (title.startsWith("!")) {
+        return title.slice(1);
       }
-      return t(title)
+      return t(title);
     }
 
     // Check for playground with model ID
-    if (location.pathname.startsWith('/playground/')) {
-      return t('nav.playground')
+    if (location.pathname.startsWith("/playground/")) {
+      return t("nav.playground");
     }
 
     // Default to app name (home page)
-    return null
-  }
+    return null;
+  };
 
-  const showBackButton = pagesWithBackButton.some(path =>
-    location.pathname === path || location.pathname.startsWith(path + '/')
-  )
+  const showBackButton = pagesWithBackButton.some(
+    (path) =>
+      location.pathname === path || location.pathname.startsWith(path + "/"),
+  );
 
   const handleBack = () => {
     // For free tools sub-pages, go back to free tools hub
-    if (location.pathname.startsWith('/free-tools/')) {
-      navigate('/free-tools')
+    if (location.pathname.startsWith("/free-tools/")) {
+      navigate("/free-tools");
     } else {
-      navigate(-1)
+      navigate(-1);
     }
-  }
+  };
 
   return (
     <header className="mobile-header">
@@ -91,14 +91,14 @@ export function MobileHeader() {
             >
               <ChevronLeft className="h-5 w-5" />
             </Button>
-          ) : location.pathname === '/' ? (
+          ) : location.pathname === "/" ? (
             <AppLogo className="h-7 w-7 shrink-0" />
           ) : (
             <Button
               variant="ghost"
               size="icon"
               className="h-9 w-9 -ml-2"
-              onClick={() => navigate('/')}
+              onClick={() => navigate("/")}
             >
               <Home className="h-5 w-5" />
             </Button>
@@ -106,10 +106,12 @@ export function MobileHeader() {
         </div>
 
         {/* Center - Title */}
-        <h1 className={cn(
-          "font-semibold text-base truncate",
-          showBackButton ? "flex-1 text-center" : "flex-1"
-        )}>
+        <h1
+          className={cn(
+            "font-semibold text-base truncate",
+            showBackButton ? "flex-1 text-center" : "flex-1",
+          )}
+        >
           {getPageTitle() ?? (
             <span className="font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#1a2654] to-[#1a6b7c] dark:from-[#38bdf8] dark:to-[#34d399]">
               WaveSpeed
@@ -125,10 +127,14 @@ export function MobileHeader() {
             className="h-8 w-8"
             onClick={toggleTheme}
           >
-            {isDark ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+            {isDark ? (
+              <Moon className="h-4 w-4" />
+            ) : (
+              <Sun className="h-4 w-4" />
+            )}
           </Button>
         </div>
       </div>
     </header>
-  )
+  );
 }
diff --git a/mobile/src/components/layout/MobileLayout.tsx b/mobile/src/components/layout/MobileLayout.tsx
index 37eb2372..3c0f400e 100644
--- a/mobile/src/components/layout/MobileLayout.tsx
+++ b/mobile/src/components/layout/MobileLayout.tsx
@@ -1,60 +1,67 @@
-import { useState, useEffect } from 'react'
-import { Outlet, useLocation } from 'react-router-dom'
-import { BottomNavigation } from './BottomNavigation'
-import { MobileHeader } from './MobileHeader'
-import { Toaster } from '@/components/ui/toaster'
-import { TooltipProvider } from '@/components/ui/tooltip'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { Loader2 } from 'lucide-react'
-import { VideoEnhancerPage } from '@/pages/VideoEnhancerPage'
-import { ImageEnhancerPage } from '@/pages/ImageEnhancerPage'
-import { BackgroundRemoverPage } from '@/pages/BackgroundRemoverPage'
-import { MobileImageEraserPage } from '@mobile/pages/MobileImageEraserPage'
-import { MobileSegmentAnythingPage } from '@mobile/pages/MobileSegmentAnythingPage'
-import { VideoConverterPage } from '@mobile/pages/VideoConverterPage'
-import { AudioConverterPage } from '@mobile/pages/AudioConverterPage'
-import { ImageConverterPage } from '@mobile/pages/ImageConverterPage'
-import { MediaTrimmerPage } from '@mobile/pages/MediaTrimmerPage'
-import { MediaMergerPage } from '@mobile/pages/MediaMergerPage'
-import { FaceEnhancerPage } from '@mobile/pages/FaceEnhancerPage'
-import { ErrorBoundary } from '@mobile/components/shared/ErrorBoundary'
-import { WelcomePage } from '@/pages/WelcomePage'
+import { useState, useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import { BottomNavigation } from "./BottomNavigation";
+import { MobileHeader } from "./MobileHeader";
+import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { Loader2 } from "lucide-react";
+import { VideoEnhancerPage } from "@/pages/VideoEnhancerPage";
+import { ImageEnhancerPage } from "@/pages/ImageEnhancerPage";
+import { BackgroundRemoverPage } from "@/pages/BackgroundRemoverPage";
+import { MobileImageEraserPage } from "@mobile/pages/MobileImageEraserPage";
+import { MobileSegmentAnythingPage } from "@mobile/pages/MobileSegmentAnythingPage";
+import { VideoConverterPage } from "@mobile/pages/VideoConverterPage";
+import { AudioConverterPage } from "@mobile/pages/AudioConverterPage";
+import { ImageConverterPage } from "@mobile/pages/ImageConverterPage";
+import { MediaTrimmerPage } from "@mobile/pages/MediaTrimmerPage";
+import { MediaMergerPage } from "@mobile/pages/MediaMergerPage";
+import { FaceEnhancerPage } from "@mobile/pages/FaceEnhancerPage";
+import { ErrorBoundary } from "@mobile/components/shared/ErrorBoundary";
+import { WelcomePage } from "@/pages/WelcomePage";
 
 export function MobileLayout() {
-  const location = useLocation()
+  const location = useLocation();
 
   // Track which persistent pages have been visited (to delay initial mount)
-  const [visitedPages, setVisitedPages] = useState<Set<string>>(new Set())
+  const [visitedPages, setVisitedPages] = useState<Set<string>>(new Set());
 
-  const { isLoading: isLoadingApiKey, isValidated } = useApiKeyStore()
+  const { isLoading: isLoadingApiKey, isValidated } = useApiKeyStore();
 
   // Track visits to persistent pages
   useEffect(() => {
     const persistentPaths = [
-      '/free-tools/video',
-      '/free-tools/image',
-      '/free-tools/face-enhancer',
-      '/free-tools/background-remover',
-      '/free-tools/image-eraser',
-      '/free-tools/segment-anything',
-      '/free-tools/video-converter',
-      '/free-tools/audio-converter',
-      '/free-tools/image-converter',
-      '/free-tools/media-trimmer',
-      '/free-tools/media-merger'
-    ]
+      "/free-tools/video",
+      "/free-tools/image",
+      "/free-tools/face-enhancer",
+      "/free-tools/background-remover",
+      "/free-tools/image-eraser",
+      "/free-tools/segment-anything",
+      "/free-tools/video-converter",
+      "/free-tools/audio-converter",
+      "/free-tools/image-converter",
+      "/free-tools/media-trimmer",
+      "/free-tools/media-merger",
+    ];
     if (persistentPaths.includes(location.pathname)) {
       if (!visitedPages.has(location.pathname)) {
-        setVisitedPages(prev => new Set(prev).add(location.pathname))
+        setVisitedPages((prev) => new Set(prev).add(location.pathname));
       }
     }
-  }, [location.pathname, visitedPages])
+  }, [location.pathname, visitedPages]);
 
   // Pages that don't require API key
-  const publicPaths = ['/', '/featured-models', '/settings', '/templates', '/assets', '/free-tools']
-  const isPublicPage = publicPaths.some(path =>
-    location.pathname === path || location.pathname.startsWith(path + '/')
-  )
+  const publicPaths = [
+    "/",
+    "/settings",
+    "/templates",
+    "/assets",
+    "/free-tools",
+  ];
+  const isPublicPage = publicPaths.some(
+    (path) =>
+      location.pathname === path || location.pathname.startsWith(path + "/"),
+  );
 
   // Show loading state while API key is being loaded
   if (isLoadingApiKey) {
@@ -62,34 +69,34 @@ export function MobileLayout() {
       <div className="flex h-[100dvh] items-center justify-center bg-background">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   // Check if current page requires login
-  const requiresLogin = !isValidated && !isPublicPage
+  const requiresLogin = !isValidated && !isPublicPage;
 
   // Free tools paths for conditional rendering
   const freeToolsPaths = [
-    '/free-tools/video',
-    '/free-tools/image',
-    '/free-tools/face-enhancer',
-    '/free-tools/background-remover',
-    '/free-tools/image-eraser',
-    '/free-tools/segment-anything',
-    '/free-tools/video-converter',
-    '/free-tools/audio-converter',
-    '/free-tools/image-converter',
-    '/free-tools/media-trimmer',
-    '/free-tools/media-merger'
-  ]
-  const isFreeToolsPage = freeToolsPaths.includes(location.pathname)
+    "/free-tools/video",
+    "/free-tools/image",
+    "/free-tools/face-enhancer",
+    "/free-tools/background-remover",
+    "/free-tools/image-eraser",
+    "/free-tools/segment-anything",
+    "/free-tools/video-converter",
+    "/free-tools/audio-converter",
+    "/free-tools/image-converter",
+    "/free-tools/media-trimmer",
+    "/free-tools/media-merger",
+  ];
+  const isFreeToolsPage = freeToolsPaths.includes(location.pathname);
 
   // Welcome page content for users without API key
   const welcomeContent = (
     <div className="h-full overflow-auto">
       <WelcomePage />
     </div>
-  )
+  );
 
   return (
     <TooltipProvider>
@@ -99,67 +106,159 @@ export function MobileLayout() {
 
         {/* Main content area */}
         <main className="flex-1 overflow-hidden pb-14">
-          {requiresLogin ? welcomeContent : (
+          {requiresLogin ? (
+            welcomeContent
+          ) : (
             <>
               {/* Regular routes via Outlet */}
-              <div className={isFreeToolsPage ? 'hidden' : 'h-full overflow-auto'}>
+              <div
+                className={isFreeToolsPage ? "hidden" : "h-full overflow-auto"}
+              >
                 <Outlet />
               </div>
 
               {/* Persistent Free Tools pages */}
-              {visitedPages.has('/free-tools/video') && (
-                <div className={location.pathname === '/free-tools/video' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><VideoEnhancerPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/video") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/video"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <VideoEnhancerPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/image') && (
-                <div className={location.pathname === '/free-tools/image' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><ImageEnhancerPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/image") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/image"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <ImageEnhancerPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/background-remover') && (
-                <div className={location.pathname === '/free-tools/background-remover' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><BackgroundRemoverPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/background-remover") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/background-remover"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <BackgroundRemoverPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/image-eraser') && (
-                <div className={location.pathname === '/free-tools/image-eraser' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><MobileImageEraserPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/image-eraser") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/image-eraser"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <MobileImageEraserPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/segment-anything') && (
-                <div className={location.pathname === '/free-tools/segment-anything' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><MobileSegmentAnythingPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/segment-anything") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/segment-anything"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <MobileSegmentAnythingPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/video-converter') && (
-                <div className={location.pathname === '/free-tools/video-converter' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><VideoConverterPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/video-converter") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/video-converter"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <VideoConverterPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/face-enhancer') && (
-                <div className={location.pathname === '/free-tools/face-enhancer' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><FaceEnhancerPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/face-enhancer") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/face-enhancer"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <FaceEnhancerPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/audio-converter') && (
-                <div className={location.pathname === '/free-tools/audio-converter' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><AudioConverterPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/audio-converter") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/audio-converter"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <AudioConverterPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/image-converter') && (
-                <div className={location.pathname === '/free-tools/image-converter' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><ImageConverterPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/image-converter") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/image-converter"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <ImageConverterPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/media-trimmer') && (
-                <div className={location.pathname === '/free-tools/media-trimmer' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><MediaTrimmerPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/media-trimmer") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/media-trimmer"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <MediaTrimmerPage />
+                  </ErrorBoundary>
                 </div>
               )}
-              {visitedPages.has('/free-tools/media-merger') && (
-                <div className={location.pathname === '/free-tools/media-merger' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ErrorBoundary><MediaMergerPage /></ErrorBoundary>
+              {visitedPages.has("/free-tools/media-merger") && (
+                <div
+                  className={
+                    location.pathname === "/free-tools/media-merger"
+                      ? "h-full overflow-auto"
+                      : "hidden"
+                  }
+                >
+                  <ErrorBoundary>
+                    <MediaMergerPage />
+                  </ErrorBoundary>
                 </div>
               )}
             </>
@@ -172,5 +271,5 @@ export function MobileLayout() {
         <Toaster />
       </div>
     </TooltipProvider>
-  )
+  );
 }
diff --git a/mobile/src/components/shared/ErrorBoundary.tsx b/mobile/src/components/shared/ErrorBoundary.tsx
index 0a8f7a2c..c46adf6e 100644
--- a/mobile/src/components/shared/ErrorBoundary.tsx
+++ b/mobile/src/components/shared/ErrorBoundary.tsx
@@ -1,43 +1,43 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react'
-import { AlertTriangle, RefreshCw } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import React, { Component, ErrorInfo, ReactNode } from "react";
+import { AlertTriangle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
 
 interface Props {
-  children: ReactNode
-  fallback?: ReactNode
-  onError?: (error: Error, errorInfo: ErrorInfo) => void
-  onReset?: () => void
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  onReset?: () => void;
 }
 
 interface State {
-  hasError: boolean
-  error: Error | null
+  hasError: boolean;
+  error: Error | null;
 }
 
 export class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
-    super(props)
-    this.state = { hasError: false, error: null }
+    super(props);
+    this.state = { hasError: false, error: null };
   }
 
   static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error }
+    return { hasError: true, error };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('ErrorBoundary caught an error:', error, errorInfo)
-    this.props.onError?.(error, errorInfo)
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+    this.props.onError?.(error, errorInfo);
   }
 
   handleReset = () => {
-    this.setState({ hasError: false, error: null })
-    this.props.onReset?.()
-  }
+    this.setState({ hasError: false, error: null });
+    this.props.onReset?.();
+  };
 
   render() {
     if (this.state.hasError) {
       if (this.props.fallback) {
-        return this.props.fallback
+        return this.props.fallback;
       }
 
       return (
@@ -45,7 +45,7 @@ export class ErrorBoundary extends Component<Props, State> {
           <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
           <h2 className="text-lg font-semibold mb-2">Something went wrong</h2>
           <p className="text-sm text-muted-foreground mb-4 max-w-md">
-            {this.state.error?.message || 'An unexpected error occurred'}
+            {this.state.error?.message || "An unexpected error occurred"}
           </p>
           <Button
             onClick={this.handleReset}
@@ -56,56 +56,52 @@ export class ErrorBoundary extends Component<Props, State> {
             Try Again
           </Button>
         </div>
-      )
+      );
     }
 
-    return this.props.children
+    return this.props.children;
   }
 }
 
 interface ErrorFallbackProps {
-  error?: Error | null
-  resetError?: () => void
-  title?: string
-  description?: string
+  error?: Error | null;
+  resetError?: () => void;
+  title?: string;
+  description?: string;
 }
 
 export function ErrorFallback({
   error,
   resetError,
-  title = 'Something went wrong',
-  description
+  title = "Something went wrong",
+  description,
 }: ErrorFallbackProps) {
   return (
     <div className="flex flex-col items-center justify-center min-h-[300px] p-6 text-center">
       <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
       <h2 className="text-lg font-semibold mb-2">{title}</h2>
       <p className="text-sm text-muted-foreground mb-4 max-w-md">
-        {description || error?.message || 'An unexpected error occurred'}
+        {description || error?.message || "An unexpected error occurred"}
       </p>
       {resetError && (
-        <Button
-          onClick={resetError}
-          variant="outline"
-          className="gap-2"
-        >
+        <Button onClick={resetError} variant="outline" className="gap-2">
           <RefreshCw className="h-4 w-4" />
           Try Again
         </Button>
       )}
     </div>
-  )
+  );
 }
 
 export function withErrorBoundary<P extends object>(
   WrappedComponent: React.ComponentType<P>,
-  fallback?: ReactNode
+  fallback?: ReactNode,
 ) {
   return function WithErrorBoundary(props: P) {
     return (
       <ErrorBoundary fallback={fallback}>
         <WrappedComponent {...props} />
       </ErrorBoundary>
-    )
-  }
+    );
+  };
 }
diff --git a/mobile/src/hooks/useAudioConverterWorker.ts b/mobile/src/hooks/useAudioConverterWorker.ts
index b81e92db..ecb48b73 100644
--- a/mobile/src/hooks/useAudioConverterWorker.ts
+++ b/mobile/src/hooks/useAudioConverterWorker.ts
@@ -1,26 +1,26 @@
-import { useCallback, useRef, useEffect } from 'react'
+import { useCallback, useRef, useEffect } from "react";
 
 interface AudioConverterOptions {
-  onProgress?: (progress: number) => void
-  onError?: (error: string) => void
+  onProgress?: (progress: number) => void;
+  onError?: (error: string) => void;
 }
 
 interface ConvertResult {
-  data: ArrayBuffer
-  filename: string
-  mimeType: string
+  data: ArrayBuffer;
+  filename: string;
+  mimeType: string;
 }
 
 /**
  * Decode audio file to AudioBuffer using Web Audio API (main thread only)
  */
 async function decodeAudioFile(arrayBuffer: ArrayBuffer): Promise<AudioBuffer> {
-  const audioContext = new AudioContext()
+  const audioContext = new AudioContext();
   try {
-    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
-    return audioBuffer
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    return audioBuffer;
   } finally {
-    await audioContext.close()
+    await audioContext.close();
   }
 }
 
@@ -28,122 +28,124 @@ async function decodeAudioFile(arrayBuffer: ArrayBuffer): Promise<AudioBuffer> {
  * Extract channel data from AudioBuffer
  */
 function extractChannelData(audioBuffer: AudioBuffer): Float32Array[] {
-  const channels: Float32Array[] = []
+  const channels: Float32Array[] = [];
   for (let i = 0; i < audioBuffer.numberOfChannels; i++) {
-    channels.push(audioBuffer.getChannelData(i))
+    channels.push(audioBuffer.getChannelData(i));
   }
-  return channels
+  return channels;
 }
 
 export function useAudioConverterWorker(options: AudioConverterOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
+  const workerRef = useRef<Worker | null>(null);
   const pendingRef = useRef<{
-    resolve: (result: ConvertResult) => void
-    reject: (error: Error) => void
-  } | null>(null)
-  const idRef = useRef(0)
+    resolve: (result: ConvertResult) => void;
+    reject: (error: Error) => void;
+  } | null>(null);
+  const idRef = useRef(0);
 
   useEffect(() => {
     // Create worker
     workerRef.current = new Worker(
-      new URL('../workers/audioConverter.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/audioConverter.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'progress':
-          options.onProgress?.(payload.progress)
-          break
-        case 'result':
+        case "progress":
+          options.onProgress?.(payload.progress);
+          break;
+        case "result":
           if (pendingRef.current) {
             pendingRef.current.resolve({
               data: payload.data,
               filename: payload.filename,
-              mimeType: payload.mimeType
-            })
-            pendingRef.current = null
+              mimeType: payload.mimeType,
+            });
+            pendingRef.current = null;
           }
-          break
-        case 'error':
-          options.onError?.(payload)
+          break;
+        case "error":
+          options.onError?.(payload);
           if (pendingRef.current) {
-            pendingRef.current.reject(new Error(payload))
-            pendingRef.current = null
+            pendingRef.current.reject(new Error(payload));
+            pendingRef.current = null;
           }
-          break
+          break;
       }
-    }
+    };
 
     workerRef.current.onerror = (e) => {
-      const errorMsg = e.message || 'Worker error'
-      options.onError?.(errorMsg)
+      const errorMsg = e.message || "Worker error";
+      options.onError?.(errorMsg);
       if (pendingRef.current) {
-        pendingRef.current.reject(new Error(errorMsg))
-        pendingRef.current = null
+        pendingRef.current.reject(new Error(errorMsg));
+        pendingRef.current = null;
       }
-    }
+    };
 
     return () => {
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, []) // Only create worker once
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, []); // Only create worker once
 
   const convert = useCallback(
     async (
       file: ArrayBuffer,
       fileName: string,
-      outputFormat: 'mp3' | 'wav',
-      bitrate: number = 192
+      outputFormat: "mp3" | "wav",
+      bitrate: number = 192,
     ): Promise<ConvertResult> => {
       if (!workerRef.current) {
-        throw new Error('Worker not initialized')
+        throw new Error("Worker not initialized");
       }
 
-      const id = ++idRef.current
+      const id = ++idRef.current;
 
       // Decode audio in main thread (AudioContext not available in workers)
-      console.log('[AudioConverter] Decoding audio file...')
-      options.onProgress?.(2)
+      console.log("[AudioConverter] Decoding audio file...");
+      options.onProgress?.(2);
 
-      const audioBuffer = await decodeAudioFile(file)
-      console.log(`[AudioConverter] Decoded: ${audioBuffer.duration.toFixed(2)}s, ${audioBuffer.numberOfChannels}ch, ${audioBuffer.sampleRate}Hz`)
+      const audioBuffer = await decodeAudioFile(file);
+      console.log(
+        `[AudioConverter] Decoded: ${audioBuffer.duration.toFixed(2)}s, ${audioBuffer.numberOfChannels}ch, ${audioBuffer.sampleRate}Hz`,
+      );
 
       // Extract channel data
-      const channelData = extractChannelData(audioBuffer)
+      const channelData = extractChannelData(audioBuffer);
 
       return new Promise((resolve, reject) => {
-        pendingRef.current = { resolve, reject }
+        pendingRef.current = { resolve, reject };
 
         // Send decoded PCM data to worker for encoding
         workerRef.current!.postMessage({
-          type: 'convert',
+          type: "convert",
           payload: {
             channelData,
             sampleRate: audioBuffer.sampleRate,
             numberOfChannels: audioBuffer.numberOfChannels,
             outputFormat,
             bitrate,
-            id
-          }
-        })
-      })
+            id,
+          },
+        });
+      });
     },
-    []
-  )
+    [],
+  );
 
   const cancel = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.postMessage({ type: 'cancel' })
+      workerRef.current.postMessage({ type: "cancel" });
     }
     if (pendingRef.current) {
-      pendingRef.current.reject(new Error('Cancelled'))
-      pendingRef.current = null
+      pendingRef.current.reject(new Error("Cancelled"));
+      pendingRef.current = null;
     }
-  }, [])
+  }, []);
 
-  return { convert, cancel }
+  return { convert, cancel };
 }
diff --git a/mobile/src/hooks/useFFmpegWorker.ts b/mobile/src/hooks/useFFmpegWorker.ts
index 80881209..30cf35f1 100644
--- a/mobile/src/hooks/useFFmpegWorker.ts
+++ b/mobile/src/hooks/useFFmpegWorker.ts
@@ -1,358 +1,392 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
 
 interface ConvertOptions {
   // Video options
-  videoCodec?: string
-  videoBitrate?: string
-  resolution?: string
-  fps?: number
+  videoCodec?: string;
+  videoBitrate?: string;
+  resolution?: string;
+  fps?: number;
   // Audio options
-  audioCodec?: string
-  audioBitrate?: string
-  sampleRate?: number
+  audioCodec?: string;
+  audioBitrate?: string;
+  sampleRate?: number;
   // Image options
-  quality?: number
+  quality?: number;
 }
 
 interface MediaInfo {
-  duration: number | null
-  resolution: { width: number; height: number } | null
-  videoCodec: string | null
-  audioCodec: string | null
+  duration: number | null;
+  resolution: { width: number; height: number } | null;
+  videoCodec: string | null;
+  audioCodec: string | null;
 }
 
 interface WorkerMessage {
-  type: 'loaded' | 'phase' | 'progress' | 'result' | 'info' | 'error' | 'disposed' | 'cached' | 'cacheStatus'
-  payload?: unknown
+  type:
+    | "loaded"
+    | "phase"
+    | "progress"
+    | "result"
+    | "info"
+    | "error"
+    | "disposed"
+    | "cached"
+    | "cacheStatus";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id?: number
+  phase: string;
+  id?: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id?: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id?: number;
 }
 
 interface ResultPayload {
-  data: ArrayBuffer
-  filename: string
-  id: number
+  data: ArrayBuffer;
+  filename: string;
+  id: number;
 }
 
 interface InfoPayload extends MediaInfo {
-  id: number
+  id: number;
 }
 
 interface UseFFmpegWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
-  onCached?: () => void  // Called when FFmpeg loads from cache (skipping download)
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
+  onCached?: () => void; // Called when FFmpeg loads from cache (skipping download)
 }
 
 export function useFFmpegWorker(options: UseFFmpegWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const resultCallbacksRef = useRef<Map<number, (result: { data: ArrayBuffer; filename: string }) => void>>(new Map())
-  const infoCallbacksRef = useRef<Map<number, (info: MediaInfo) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
-  const isLoadedRef = useRef(false)
+  const workerRef = useRef<Worker | null>(null);
+  const resultCallbacksRef = useRef<
+    Map<number, (result: { data: ArrayBuffer; filename: string }) => void>
+  >(new Map());
+  const infoCallbacksRef = useRef<Map<number, (info: MediaInfo) => void>>(
+    new Map(),
+  );
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
+  const isLoadedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
-    isLoadedRef.current = false
+    hasFailedRef.current = false;
+    isLoadedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/ffmpeg.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/ffmpeg.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'loaded': {
-          isLoadedRef.current = true
-          break
+        case "loaded": {
+          isLoadedRef.current = true;
+          break;
         }
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'result': {
-          const { data, filename, id } = payload as ResultPayload
-          const callback = resultCallbacksRef.current.get(id)
+        case "result": {
+          const { data, filename, id } = payload as ResultPayload;
+          const callback = resultCallbacksRef.current.get(id);
           if (callback) {
-            callback({ data, filename })
-            resultCallbacksRef.current.delete(id)
+            callback({ data, filename });
+            resultCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'info': {
-          const { id, ...info } = payload as InfoPayload
-          const callback = infoCallbacksRef.current.get(id)
+        case "info": {
+          const { id, ...info } = payload as InfoPayload;
+          const callback = infoCallbacksRef.current.get(id);
           if (callback) {
-            callback(info)
-            infoCallbacksRef.current.delete(id)
+            callback(info);
+            infoCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'cached':
+        case "cached":
           // FFmpeg loaded from cache - notify that download phase was skipped
-          optionsRef.current.onCached?.()
-          break
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
+          optionsRef.current.onCached?.();
+          break;
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
           // Reject all pending callbacks
           resultCallbacksRef.current.forEach((_, id) => {
-            resultCallbacksRef.current.delete(id)
-          })
+            resultCallbacksRef.current.delete(id);
+          });
           infoCallbacksRef.current.forEach((_, id) => {
-            infoCallbacksRef.current.delete(id)
-          })
-          break
+            infoCallbacksRef.current.delete(id);
+          });
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   // Check if FFmpeg WASM files are cached
   const checkCache = useCallback((): Promise<boolean> => {
     return new Promise((resolve, reject) => {
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
       const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'cacheStatus') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          resolve((e.data.payload as { cached: boolean }).cached)
+        if (e.data.type === "cacheStatus") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          resolve((e.data.payload as { cached: boolean }).cached);
         }
-      }
+      };
 
-      workerRef.current.addEventListener('message', handleMessage)
-      workerRef.current.postMessage({ type: 'checkCache' })
-    })
-  }, [])
+      workerRef.current.addEventListener("message", handleMessage);
+      workerRef.current.postMessage({ type: "checkCache" });
+    });
+  }, []);
 
   // Pre-load FFmpeg (optional, can be called early)
   const load = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
       if (isLoadedRef.current) {
-        resolve()
-        return
+        resolve();
+        return;
       }
 
       const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'loaded') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          resolve()
-        } else if (e.data.type === 'error') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          reject(new Error(e.data.payload as string))
+        if (e.data.type === "loaded") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          resolve();
+        } else if (e.data.type === "error") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          reject(new Error(e.data.payload as string));
         }
-      }
+      };
 
-      workerRef.current.addEventListener('message', handleMessage)
-      workerRef.current.postMessage({ type: 'load' })
-    })
-  }, [])
+      workerRef.current.addEventListener("message", handleMessage);
+      workerRef.current.postMessage({ type: "load" });
+    });
+  }, []);
 
   // Convert media file
-  const convert = useCallback((
-    file: ArrayBuffer,
-    fileName: string,
-    outputFormat: string,
-    outputExt: string,
-    options?: ConvertOptions
-  ): Promise<{ data: ArrayBuffer; filename: string }> => {
-    return new Promise((resolve, reject) => {
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const convert = useCallback(
+    (
+      file: ArrayBuffer,
+      fileName: string,
+      outputFormat: string,
+      outputExt: string,
+      options?: ConvertOptions,
+    ): Promise<{ data: ArrayBuffer; filename: string }> => {
+      return new Promise((resolve, reject) => {
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      resultCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        resultCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          resultCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'convert',
-          payload: { file, fileName, outputFormat, outputExt, options, id }
-        },
-        { transfer: [file] }
-      )
-    })
-  }, [])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            resultCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "convert",
+            payload: { file, fileName, outputFormat, outputExt, options, id },
+          },
+          { transfer: [file] },
+        );
+      });
+    },
+    [],
+  );
 
   // Merge multiple media files
-  const merge = useCallback((
-    files: ArrayBuffer[],
-    fileNames: string[],
-    outputFormat: string,
-    outputExt: string
-  ): Promise<{ data: ArrayBuffer; filename: string }> => {
-    return new Promise((resolve, reject) => {
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const merge = useCallback(
+    (
+      files: ArrayBuffer[],
+      fileNames: string[],
+      outputFormat: string,
+      outputExt: string,
+    ): Promise<{ data: ArrayBuffer; filename: string }> => {
+      return new Promise((resolve, reject) => {
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      resultCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        resultCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          resultCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'merge',
-          payload: { files, fileNames, outputFormat, outputExt, id }
-        },
-        { transfer: files }
-      )
-    })
-  }, [])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            resultCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "merge",
+            payload: { files, fileNames, outputFormat, outputExt, id },
+          },
+          { transfer: files },
+        );
+      });
+    },
+    [],
+  );
 
   // Trim media file
-  const trim = useCallback((
-    file: ArrayBuffer,
-    fileName: string,
-    startTime: number,
-    endTime: number,
-    outputFormat: string,
-    outputExt: string
-  ): Promise<{ data: ArrayBuffer; filename: string }> => {
-    return new Promise((resolve, reject) => {
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const trim = useCallback(
+    (
+      file: ArrayBuffer,
+      fileName: string,
+      startTime: number,
+      endTime: number,
+      outputFormat: string,
+      outputExt: string,
+    ): Promise<{ data: ArrayBuffer; filename: string }> => {
+      return new Promise((resolve, reject) => {
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      resultCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        resultCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          resultCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'trim',
-          payload: { file, fileName, startTime, endTime, outputFormat, outputExt, id }
-        },
-        { transfer: [file] }
-      )
-    })
-  }, [])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            resultCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "trim",
+            payload: {
+              file,
+              fileName,
+              startTime,
+              endTime,
+              outputFormat,
+              outputExt,
+              id,
+            },
+          },
+          { transfer: [file] },
+        );
+      });
+    },
+    [],
+  );
 
   // Get media info
-  const getMediaInfo = useCallback((
-    file: ArrayBuffer,
-    fileName: string
-  ): Promise<MediaInfo> => {
-    return new Promise((resolve, reject) => {
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const getMediaInfo = useCallback(
+    (file: ArrayBuffer, fileName: string): Promise<MediaInfo> => {
+      return new Promise((resolve, reject) => {
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      infoCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        infoCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          infoCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      // Clone the buffer since we can't transfer and keep
-      const clonedBuffer = file.slice(0)
-      workerRef.current.postMessage(
-        {
-          type: 'getInfo',
-          payload: { file: clonedBuffer, fileName, id }
-        },
-        { transfer: [clonedBuffer] }
-      )
-    })
-  }, [])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            infoCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        // Clone the buffer since we can't transfer and keep
+        const clonedBuffer = file.slice(0);
+        workerRef.current.postMessage(
+          {
+            type: "getInfo",
+            payload: { file: clonedBuffer, fileName, id },
+          },
+          { transfer: [clonedBuffer] },
+        );
+      });
+    },
+    [],
+  );
 
   // Cancel current operation
   const cancel = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'cancel' })
-  }, [])
+    workerRef.current?.postMessage({ type: "cancel" });
+  }, []);
 
   // Dispose worker
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+  }, []);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
-  const isLoaded = useCallback(() => isLoadedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
+  const isLoaded = useCallback(() => isLoadedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
   return {
     checkCache,
@@ -365,6 +399,6 @@ export function useFFmpegWorker(options: UseFFmpegWorkerOptions = {}) {
     dispose,
     hasFailed,
     isLoaded,
-    retryWorker
-  }
+    retryWorker,
+  };
 }
diff --git a/mobile/src/hooks/useFaceEnhancerWorker.ts b/mobile/src/hooks/useFaceEnhancerWorker.ts
index c84a6ca6..bf0d11fa 100644
--- a/mobile/src/hooks/useFaceEnhancerWorker.ts
+++ b/mobile/src/hooks/useFaceEnhancerWorker.ts
@@ -1,35 +1,39 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
 
 interface EnhanceResult {
-  data: Float32Array
-  width: number
-  height: number
-  faces: number
-  id: number
+  data: Float32Array;
+  width: number;
+  height: number;
+  faces: number;
+  id: number;
 }
 
 interface WorkerMessage {
-  type: 'ready' | 'phase' | 'progress' | 'result' | 'error' | 'disposed'
-  payload?: unknown
+  type: "ready" | "phase" | "progress" | "result" | "error" | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id?: number
+  phase: string;
+  id?: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id?: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id?: number;
 }
 
 interface UseFaceEnhancerWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
 }
 
 /**
@@ -38,208 +42,215 @@ interface UseFaceEnhancerWorkerOptions {
 function float32ToImageData(
   data: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): ImageData {
-  const imageData = new ImageData(width, height)
-  const pixels = imageData.data
+  const imageData = new ImageData(width, height);
+  const pixels = imageData.data;
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 3
-      const dstIdx = (y * width + x) * 4
+      const srcIdx = (y * width + x) * 3;
+      const dstIdx = (y * width + x) * 4;
 
-      pixels[dstIdx] = Math.round(data[srcIdx] * 255)
-      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255)
-      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255)
-      pixels[dstIdx + 3] = 255
+      pixels[dstIdx] = Math.round(data[srcIdx] * 255);
+      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255);
+      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255);
+      pixels[dstIdx + 3] = 255;
     }
   }
 
-  return imageData
+  return imageData;
 }
 
 /**
  * Convert ImageData to Float32Array HWC [0,1]
  */
 function imageDataToFloat32(imageData: ImageData): Float32Array {
-  const { width, height, data } = imageData
-  const result = new Float32Array(width * height * 3)
+  const { width, height, data } = imageData;
+  const result = new Float32Array(width * height * 3);
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 4
-      const dstIdx = (y * width + x) * 3
+      const srcIdx = (y * width + x) * 4;
+      const dstIdx = (y * width + x) * 3;
 
-      result[dstIdx] = data[srcIdx] / 255
-      result[dstIdx + 1] = data[srcIdx + 1] / 255
-      result[dstIdx + 2] = data[srcIdx + 2] / 255
+      result[dstIdx] = data[srcIdx] / 255;
+      result[dstIdx + 1] = data[srcIdx + 1] / 255;
+      result[dstIdx + 2] = data[srcIdx + 2] / 255;
     }
   }
 
-  return result
+  return result;
 }
 
 /**
  * Convert ImageData to data URL
  */
 function imageDataToDataURL(imageData: ImageData): string {
-  const canvas = document.createElement('canvas')
-  canvas.width = imageData.width
-  canvas.height = imageData.height
-  const ctx = canvas.getContext('2d')!
-  ctx.putImageData(imageData, 0, 0)
-  return canvas.toDataURL('image/png')
+  const canvas = document.createElement("canvas");
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
 }
 
-export function useFaceEnhancerWorker(options: UseFaceEnhancerWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const callbacksRef = useRef<Map<number, (result: { dataUrl: string; faces: number }) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
-  const isInitializedRef = useRef(false)
+export function useFaceEnhancerWorker(
+  options: UseFaceEnhancerWorkerOptions = {},
+) {
+  const workerRef = useRef<Worker | null>(null);
+  const callbacksRef = useRef<
+    Map<number, (result: { dataUrl: string; faces: number }) => void>
+  >(new Map());
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
+  const isInitializedRef = useRef(false);
 
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
-    isInitializedRef.current = false
+    hasFailedRef.current = false;
+    isInitializedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/faceEnhancer.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/faceEnhancer.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'result': {
-          const { data, width, height, faces, id } = payload as EnhanceResult
-          const callback = callbacksRef.current.get(id)
+        case "result": {
+          const { data, width, height, faces, id } = payload as EnhanceResult;
+          const callback = callbacksRef.current.get(id);
           if (callback) {
-            const imageData = float32ToImageData(data, width, height)
-            const dataUrl = imageDataToDataURL(imageData)
-            callback({ dataUrl, faces })
-            callbacksRef.current.delete(id)
+            const imageData = float32ToImageData(data, width, height);
+            const dataUrl = imageDataToDataURL(imageData);
+            callback({ dataUrl, faces });
+            callbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'ready':
-          isInitializedRef.current = true
-          break
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
-          break
+        case "ready":
+          isInitializedRef.current = true;
+          break;
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   const initModel = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
       if (isInitializedRef.current) {
-        resolve()
-        return
+        resolve();
+        return;
       }
 
-      const id = idCounterRef.current++
+      const id = idCounterRef.current++;
 
       const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'ready') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          resolve()
-        } else if (e.data.type === 'error') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          reject(new Error(e.data.payload as string))
+        if (e.data.type === "ready") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          resolve();
+        } else if (e.data.type === "error") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          reject(new Error(e.data.payload as string));
         }
-      }
+      };
 
-      workerRef.current.addEventListener('message', handleMessage)
+      workerRef.current.addEventListener("message", handleMessage);
       workerRef.current.postMessage({
-        type: 'init',
+        type: "init",
         payload: {
           id,
-          timeout: 3600000 // 60 minutes
+          timeout: 3600000, // 60 minutes
+        },
+      });
+    });
+  }, []);
+
+  const enhance = useCallback(
+    (imageData: ImageData): Promise<{ dataUrl: string; faces: number }> => {
+      return new Promise((resolve, reject) => {
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
         }
-      })
-    })
-  }, [])
 
-  const enhance = useCallback((imageData: ImageData): Promise<{ dataUrl: string; faces: number }> => {
-    return new Promise((resolve, reject) => {
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
-
-      const id = idCounterRef.current++
-      callbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        callbacksRef.current.set(id, resolve);
 
-      const float32Data = imageDataToFloat32(imageData)
+        const float32Data = imageDataToFloat32(imageData);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          callbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'enhance',
-          payload: {
-            imageData: float32Data,
-            width: imageData.width,
-            height: imageData.height,
-            id
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            callbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
           }
-        },
-        { transfer: [float32Data.buffer] }
-      )
-    })
-  }, [])
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "enhance",
+            payload: {
+              imageData: float32Data,
+              width: imageData.width,
+              height: imageData.height,
+              id,
+            },
+          },
+          { transfer: [float32Data.buffer] },
+        );
+      });
+    },
+    [],
+  );
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    isInitializedRef.current = false
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    isInitializedRef.current = false;
+  }, []);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
-  return { initModel, enhance, dispose, hasFailed, retryWorker }
+  return { initModel, enhance, dispose, hasFailed, retryWorker };
 }
diff --git a/mobile/src/hooks/useMobileDownload.ts b/mobile/src/hooks/useMobileDownload.ts
index c31cdbfa..d810ca57 100644
--- a/mobile/src/hooks/useMobileDownload.ts
+++ b/mobile/src/hooks/useMobileDownload.ts
@@ -1,173 +1,182 @@
 /**
  * Hook for downloading files on mobile using Capacitor Filesystem
  */
-import { useCallback } from 'react'
-import { Filesystem, Directory } from '@capacitor/filesystem'
-import { Capacitor } from '@capacitor/core'
-import { Share } from '@capacitor/share'
-import { useToast } from '@/hooks/useToast'
-import { useTranslation } from 'react-i18next'
+import { useCallback } from "react";
+import { Filesystem, Directory } from "@capacitor/filesystem";
+import { Capacitor } from "@capacitor/core";
+import { Share } from "@capacitor/share";
+import { useToast } from "@/hooks/useToast";
+import { useTranslation } from "react-i18next";
 
-const isNative = Capacitor.isNativePlatform()
+const isNative = Capacitor.isNativePlatform();
 
 export function useMobileDownload() {
-  const { toast } = useToast()
-  const { t } = useTranslation()
+  const { toast } = useToast();
+  const { t } = useTranslation();
 
   /**
    * Convert blob to base64 string
    */
   const blobToBase64 = useCallback((blob: Blob): Promise<string> => {
     return new Promise((resolve, reject) => {
-      const reader = new FileReader()
+      const reader = new FileReader();
       reader.onloadend = () => {
-        const base64 = reader.result as string
+        const base64 = reader.result as string;
         // Remove data URL prefix (e.g., "data:image/png;base64,")
-        const base64Data = base64.split(',')[1]
-        resolve(base64Data)
-      }
-      reader.onerror = reject
-      reader.readAsDataURL(blob)
-    })
-  }, [])
+        const base64Data = base64.split(",")[1];
+        resolve(base64Data);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  }, []);
 
   /**
    * Download a blob to the device
    */
-  const downloadBlob = useCallback(async (
-    blob: Blob,
-    filename: string,
-    options?: { showToast?: boolean; shareAfter?: boolean }
-  ): Promise<{ success: boolean; filePath?: string; error?: string }> => {
-    const { showToast = true, shareAfter = false } = options || {}
-
-    try {
-      if (isNative) {
-        // Convert blob to base64
-        const base64Data = await blobToBase64(blob)
-
-        // Save to Downloads folder in Documents
-        const directory = 'Downloads'
-
-        // Ensure directory exists
-        try {
-          await Filesystem.mkdir({
-            path: directory,
-            directory: Directory.Documents,
-            recursive: true
-          })
-        } catch {
-          // Directory might already exist
-        }
-
-        const filePath = `${directory}/${filename}`
+  const downloadBlob = useCallback(
+    async (
+      blob: Blob,
+      filename: string,
+      options?: { showToast?: boolean; shareAfter?: boolean },
+    ): Promise<{ success: boolean; filePath?: string; error?: string }> => {
+      const { showToast = true, shareAfter = false } = options || {};
+
+      try {
+        if (isNative) {
+          // Convert blob to base64
+          const base64Data = await blobToBase64(blob);
+
+          // Save to Downloads folder in Documents
+          const directory = "Downloads";
+
+          // Ensure directory exists
+          try {
+            await Filesystem.mkdir({
+              path: directory,
+              directory: Directory.Documents,
+              recursive: true,
+            });
+          } catch {
+            // Directory might already exist
+          }
 
-        await Filesystem.writeFile({
-          path: filePath,
-          data: base64Data,
-          directory: Directory.Documents
-        })
+          const filePath = `${directory}/${filename}`;
 
-        if (showToast) {
-          toast({
-            title: t('common.success'),
-            description: t('freeTools.downloadSuccess')
-          })
-        }
+          await Filesystem.writeFile({
+            path: filePath,
+            data: base64Data,
+            directory: Directory.Documents,
+          });
 
-        // Optionally share the file
-        if (shareAfter) {
-          try {
-            const fileUri = await Filesystem.getUri({
-              path: filePath,
-              directory: Directory.Documents
-            })
-            await Share.share({
-              url: fileUri.uri
-            })
-          } catch (shareError) {
-            console.warn('Share failed:', shareError)
+          if (showToast) {
+            toast({
+              title: t("common.success"),
+              description: t("freeTools.downloadSuccess"),
+            });
           }
-        }
 
-        return { success: true, filePath }
-      } else {
-        // Web fallback: use browser download
-        const blobUrl = URL.createObjectURL(blob)
+          // Optionally share the file
+          if (shareAfter) {
+            try {
+              const fileUri = await Filesystem.getUri({
+                path: filePath,
+                directory: Directory.Documents,
+              });
+              await Share.share({
+                url: fileUri.uri,
+              });
+            } catch (shareError) {
+              console.warn("Share failed:", shareError);
+            }
+          }
 
-        const link = document.createElement('a')
-        link.href = blobUrl
-        link.download = filename
-        link.style.display = 'none'
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
+          return { success: true, filePath };
+        } else {
+          // Web fallback: use browser download
+          const blobUrl = URL.createObjectURL(blob);
+
+          const link = document.createElement("a");
+          link.href = blobUrl;
+          link.download = filename;
+          link.style.display = "none";
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+
+          // Clean up blob URL after a short delay
+          setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
+
+          if (showToast) {
+            toast({
+              title: t("common.success"),
+              description: t("freeTools.downloadStarted", "Download started"),
+            });
+          }
 
-        // Clean up blob URL after a short delay
-        setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
+          return { success: true, filePath: filename };
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
 
         if (showToast) {
           toast({
-            title: t('common.success'),
-            description: t('freeTools.downloadStarted', 'Download started')
-          })
+            title: t("common.error"),
+            description: errorMessage,
+            variant: "destructive",
+          });
         }
 
-        return { success: true, filePath: filename }
+        return { success: false, error: errorMessage };
       }
-    } catch (error) {
-      const errorMessage = (error as Error).message
-
-      if (showToast) {
-        toast({
-          title: t('common.error'),
-          description: errorMessage,
-          variant: 'destructive'
-        })
-      }
-
-      return { success: false, error: errorMessage }
-    }
-  }, [blobToBase64, toast, t])
+    },
+    [blobToBase64, toast, t],
+  );
 
   /**
    * Download from a blob URL
    */
-  const downloadFromBlobUrl = useCallback(async (
-    blobUrl: string,
-    filename: string,
-    options?: { showToast?: boolean; shareAfter?: boolean }
-  ): Promise<{ success: boolean; filePath?: string; error?: string }> => {
-    try {
-      const response = await fetch(blobUrl)
-      const blob = await response.blob()
-      return downloadBlob(blob, filename, options)
-    } catch (error) {
-      return { success: false, error: (error as Error).message }
-    }
-  }, [downloadBlob])
+  const downloadFromBlobUrl = useCallback(
+    async (
+      blobUrl: string,
+      filename: string,
+      options?: { showToast?: boolean; shareAfter?: boolean },
+    ): Promise<{ success: boolean; filePath?: string; error?: string }> => {
+      try {
+        const response = await fetch(blobUrl);
+        const blob = await response.blob();
+        return downloadBlob(blob, filename, options);
+      } catch (error) {
+        return { success: false, error: (error as Error).message };
+      }
+    },
+    [downloadBlob],
+  );
 
   /**
    * Download from a data URL (base64)
    */
-  const downloadFromDataUrl = useCallback(async (
-    dataUrl: string,
-    filename: string,
-    options?: { showToast?: boolean; shareAfter?: boolean }
-  ): Promise<{ success: boolean; filePath?: string; error?: string }> => {
-    try {
-      const response = await fetch(dataUrl)
-      const blob = await response.blob()
-      return downloadBlob(blob, filename, options)
-    } catch (error) {
-      return { success: false, error: (error as Error).message }
-    }
-  }, [downloadBlob])
+  const downloadFromDataUrl = useCallback(
+    async (
+      dataUrl: string,
+      filename: string,
+      options?: { showToast?: boolean; shareAfter?: boolean },
+    ): Promise<{ success: boolean; filePath?: string; error?: string }> => {
+      try {
+        const response = await fetch(dataUrl);
+        const blob = await response.blob();
+        return downloadBlob(blob, filename, options);
+      } catch (error) {
+        return { success: false, error: (error as Error).message };
+      }
+    },
+    [downloadBlob],
+  );
 
   return {
     downloadBlob,
     downloadFromBlobUrl,
     downloadFromDataUrl,
-    isNative
-  }
+    isNative,
+  };
 }
diff --git a/mobile/src/hooks/useNativeMediaMerger.ts b/mobile/src/hooks/useNativeMediaMerger.ts
index 908c933b..664c8521 100644
--- a/mobile/src/hooks/useNativeMediaMerger.ts
+++ b/mobile/src/hooks/useNativeMediaMerger.ts
@@ -1,12 +1,12 @@
-import { useCallback, useRef } from 'react'
-import { Mp3Encoder } from '@breezystack/lamejs'
+import { useCallback, useRef } from "react";
+import { Mp3Encoder } from "@breezystack/lamejs";
 
 interface MergeOptions {
-  onProgress?: (progress: number) => void
+  onProgress?: (progress: number) => void;
 }
 
 interface MergeResult {
-  blob: Blob
+  blob: Blob;
 }
 
 /**
@@ -15,311 +15,318 @@ interface MergeResult {
  * - Video: HTML5 video + MediaRecorder API (plays videos sequentially)
  */
 export function useNativeMediaMerger() {
-  const abortRef = useRef(false)
+  const abortRef = useRef(false);
 
   /**
    * Merge multiple audio files using Web Audio API
    */
-  const mergeAudio = useCallback(async (
-    files: File[],
-    options?: MergeOptions
-  ): Promise<MergeResult> => {
-    abortRef.current = false
-    const { onProgress } = options || {}
+  const mergeAudio = useCallback(
+    async (files: File[], options?: MergeOptions): Promise<MergeResult> => {
+      abortRef.current = false;
+      const { onProgress } = options || {};
 
-    onProgress?.(5)
+      onProgress?.(5);
 
-    const audioContext = new AudioContext()
-    const audioBuffers: AudioBuffer[] = []
+      const audioContext = new AudioContext();
+      const audioBuffers: AudioBuffer[] = [];
 
-    // Decode all audio files
-    for (let i = 0; i < files.length; i++) {
-      if (abortRef.current) throw new Error('Cancelled')
+      // Decode all audio files
+      for (let i = 0; i < files.length; i++) {
+        if (abortRef.current) throw new Error("Cancelled");
 
-      const arrayBuffer = await files[i].arrayBuffer()
-      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
-      audioBuffers.push(audioBuffer)
+        const arrayBuffer = await files[i].arrayBuffer();
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        audioBuffers.push(audioBuffer);
 
-      onProgress?.(5 + (i + 1) / files.length * 25)
-    }
-
-    onProgress?.(30)
-
-    // Calculate total length and verify sample rates match
-    const sampleRate = audioBuffers[0].sampleRate
-    const numberOfChannels = Math.max(...audioBuffers.map(b => b.numberOfChannels))
-    let totalLength = 0
-
-    for (const buffer of audioBuffers) {
-      // Resample if needed (simple approach: use original length)
-      totalLength += buffer.length
-    }
-
-    // Create merged buffer
-    const mergedBuffer = audioContext.createBuffer(
-      numberOfChannels,
-      totalLength,
-      sampleRate
-    )
-
-    // Copy audio data from each buffer
-    let offset = 0
-    for (let bufIdx = 0; bufIdx < audioBuffers.length; bufIdx++) {
-      if (abortRef.current) throw new Error('Cancelled')
-
-      const buffer = audioBuffers[bufIdx]
-      for (let channel = 0; channel < numberOfChannels; channel++) {
-        const destData = mergedBuffer.getChannelData(channel)
-        // If this buffer has fewer channels, use channel 0
-        const sourceChannel = Math.min(channel, buffer.numberOfChannels - 1)
-        const sourceData = buffer.getChannelData(sourceChannel)
-
-        for (let i = 0; i < buffer.length; i++) {
-          destData[offset + i] = sourceData[i]
-        }
+        onProgress?.(5 + ((i + 1) / files.length) * 25);
       }
-      offset += buffer.length
-
-      onProgress?.(30 + (bufIdx + 1) / audioBuffers.length * 20)
-    }
 
-    onProgress?.(50)
+      onProgress?.(30);
 
-    // Determine output format - use MP3 for smaller file size
-    const blob = await audioBufferToMp3(mergedBuffer, (p) => {
-      onProgress?.(50 + p * 50)
-    })
+      // Calculate total length and verify sample rates match
+      const sampleRate = audioBuffers[0].sampleRate;
+      const numberOfChannels = Math.max(
+        ...audioBuffers.map((b) => b.numberOfChannels),
+      );
+      let totalLength = 0;
 
-    await audioContext.close()
-
-    return { blob }
-  }, [])
-
-  /**
-   * Merge multiple video files by playing them sequentially and recording
-   */
-  const mergeVideo = useCallback(async (
-    files: File[],
-    options?: MergeOptions
-  ): Promise<MergeResult> => {
-    abortRef.current = false
-    const { onProgress } = options || {}
-
-    return new Promise((resolve, reject) => {
-      onProgress?.(5)
-
-      // Create video element for playback (muted to avoid sound during processing)
-      const video = document.createElement('video')
-      video.muted = true  // Mute playback, audio will still be captured via createMediaElementSource
-      video.playsInline = true
-
-      // Create canvas for video rendering
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')!
-
-      // Create audio context for capturing video audio (without playing through speakers)
-      const audioContext = new AudioContext()
-      const audioDestination = audioContext.createMediaStreamDestination()
-
-      let mediaRecorder: MediaRecorder | null = null
-      const chunks: Blob[] = []
-      let currentFileIndex = 0
-      let totalDuration = 0
-      let playedDuration = 0
-      const fileUrls: string[] = []
-
-      // Pre-calculate total duration
-      const getDurations = async () => {
-        for (const file of files) {
-          const url = URL.createObjectURL(file)
-          fileUrls.push(url)
-
-          await new Promise<void>((res) => {
-            const tempVideo = document.createElement('video')
-            tempVideo.src = url
-            tempVideo.onloadedmetadata = () => {
-              totalDuration += tempVideo.duration
-              res()
-            }
-            tempVideo.onerror = () => res()
-          })
-        }
+      for (const buffer of audioBuffers) {
+        // Resample if needed (simple approach: use original length)
+        totalLength += buffer.length;
       }
 
-      const cleanup = () => {
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-          mediaRecorder.stop()
-        }
-        fileUrls.forEach(url => URL.revokeObjectURL(url))
-        video.remove()
-        canvas.remove()
-        audioContext.close()
-      }
-
-      const playNextVideo = async () => {
-        if (currentFileIndex >= files.length) {
-          // All videos played, stop recording
-          if (mediaRecorder && mediaRecorder.state === 'recording') {
-            mediaRecorder.stop()
+      // Create merged buffer
+      const mergedBuffer = audioContext.createBuffer(
+        numberOfChannels,
+        totalLength,
+        sampleRate,
+      );
+
+      // Copy audio data from each buffer
+      let offset = 0;
+      for (let bufIdx = 0; bufIdx < audioBuffers.length; bufIdx++) {
+        if (abortRef.current) throw new Error("Cancelled");
+
+        const buffer = audioBuffers[bufIdx];
+        for (let channel = 0; channel < numberOfChannels; channel++) {
+          const destData = mergedBuffer.getChannelData(channel);
+          // If this buffer has fewer channels, use channel 0
+          const sourceChannel = Math.min(channel, buffer.numberOfChannels - 1);
+          const sourceData = buffer.getChannelData(sourceChannel);
+
+          for (let i = 0; i < buffer.length; i++) {
+            destData[offset + i] = sourceData[i];
           }
-          return
         }
+        offset += buffer.length;
 
-        video.src = fileUrls[currentFileIndex]
-
-        await new Promise<void>((res) => {
-          video.onloadedmetadata = () => res()
-        })
-
-        // Set canvas size to match first video
-        if (currentFileIndex === 0) {
-          canvas.width = video.videoWidth || 1280
-          canvas.height = video.videoHeight || 720
-        }
-
-        await video.play()
+        onProgress?.(30 + ((bufIdx + 1) / audioBuffers.length) * 20);
       }
 
-      const startRecording = async () => {
-        try {
-          await getDurations()
-          onProgress?.(10)
-
-          // Set initial canvas size
-          canvas.width = 1280
-          canvas.height = 720
-
-          // Create combined stream
-          const canvasStream = canvas.captureStream(30)
-          const combinedStream = new MediaStream([
-            ...canvasStream.getVideoTracks(),
-            ...audioDestination.stream.getAudioTracks()
-          ])
-
-          // Determine output format
-          const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
-            ? 'video/webm;codecs=vp9'
-            : MediaRecorder.isTypeSupported('video/webm')
-              ? 'video/webm'
-              : 'video/mp4'
-
-          mediaRecorder = new MediaRecorder(combinedStream, {
-            mimeType,
-            videoBitsPerSecond: 5000000
-          })
-
-          mediaRecorder.ondataavailable = (e) => {
-            if (e.data.size > 0) {
-              chunks.push(e.data)
-            }
-          }
+      onProgress?.(50);
 
-          mediaRecorder.onstop = () => {
-            const blob = new Blob(chunks, { type: mimeType.split(';')[0] })
-            cleanup()
-            onProgress?.(100)
-            resolve({ blob })
-          }
+      // Determine output format - use MP3 for smaller file size
+      const blob = await audioBufferToMp3(mergedBuffer, (p) => {
+        onProgress?.(50 + p * 50);
+      });
 
-          mediaRecorder.onerror = (e) => {
-            cleanup()
-            reject(new Error('MediaRecorder error: ' + e))
-          }
+      await audioContext.close();
 
-          // Set up video element event handlers
-          video.onended = () => {
-            playedDuration += video.duration
-            currentFileIndex++
-            playNextVideo()
-          }
+      return { blob };
+    },
+    [],
+  );
 
-          video.onerror = () => {
-            cleanup()
-            reject(new Error('Failed to load video'))
+  /**
+   * Merge multiple video files by playing them sequentially and recording
+   */
+  const mergeVideo = useCallback(
+    async (files: File[], options?: MergeOptions): Promise<MergeResult> => {
+      abortRef.current = false;
+      const { onProgress } = options || {};
+
+      return new Promise((resolve, reject) => {
+        onProgress?.(5);
+
+        // Create video element for playback (muted to avoid sound during processing)
+        const video = document.createElement("video");
+        video.muted = true; // Mute playback, audio will still be captured via createMediaElementSource
+        video.playsInline = true;
+
+        // Create canvas for video rendering
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d")!;
+
+        // Create audio context for capturing video audio (without playing through speakers)
+        const audioContext = new AudioContext();
+        const audioDestination = audioContext.createMediaStreamDestination();
+
+        let mediaRecorder: MediaRecorder | null = null;
+        const chunks: Blob[] = [];
+        let currentFileIndex = 0;
+        let totalDuration = 0;
+        let playedDuration = 0;
+        const fileUrls: string[] = [];
+
+        // Pre-calculate total duration
+        const getDurations = async () => {
+          for (const file of files) {
+            const url = URL.createObjectURL(file);
+            fileUrls.push(url);
+
+            await new Promise<void>((res) => {
+              const tempVideo = document.createElement("video");
+              tempVideo.src = url;
+              tempVideo.onloadedmetadata = () => {
+                totalDuration += tempVideo.duration;
+                res();
+              };
+              tempVideo.onerror = () => res();
+            });
           }
+        };
 
-          // Connect video audio to recorder (not to speakers since video is muted)
-          video.onplay = () => {
-            try {
-              const source = audioContext.createMediaElementSource(video)
-              source.connect(audioDestination)
-              // Note: Do NOT connect to audioContext.destination as video is muted for silent processing
-            } catch {
-              // Already connected
-            }
+        const cleanup = () => {
+          if (mediaRecorder && mediaRecorder.state !== "inactive") {
+            mediaRecorder.stop();
           }
-
-          // Draw video frames to canvas
-          const drawFrame = () => {
-            if (abortRef.current) {
-              cleanup()
-              reject(new Error('Cancelled'))
-              return
+          fileUrls.forEach((url) => URL.revokeObjectURL(url));
+          video.remove();
+          canvas.remove();
+          audioContext.close();
+        };
+
+        const playNextVideo = async () => {
+          if (currentFileIndex >= files.length) {
+            // All videos played, stop recording
+            if (mediaRecorder && mediaRecorder.state === "recording") {
+              mediaRecorder.stop();
             }
+            return;
+          }
 
-            if (video.readyState >= 2) {
-              // Scale video to fit canvas while maintaining aspect ratio
-              const scale = Math.min(
-                canvas.width / video.videoWidth,
-                canvas.height / video.videoHeight
-              )
-              const w = video.videoWidth * scale
-              const h = video.videoHeight * scale
-              const x = (canvas.width - w) / 2
-              const y = (canvas.height - h) / 2
-
-              ctx.fillStyle = '#000'
-              ctx.fillRect(0, 0, canvas.width, canvas.height)
-              ctx.drawImage(video, x, y, w, h)
-            }
+          video.src = fileUrls[currentFileIndex];
 
-            // Update progress
-            const currentProgress = playedDuration + (video.currentTime || 0)
-            const progress = totalDuration > 0
-              ? 10 + (currentProgress / totalDuration) * 85
-              : 10
-            onProgress?.(Math.min(95, progress))
+          await new Promise<void>((res) => {
+            video.onloadedmetadata = () => res();
+          });
 
-            if (mediaRecorder?.state === 'recording') {
-              requestAnimationFrame(drawFrame)
-            }
+          // Set canvas size to match first video
+          if (currentFileIndex === 0) {
+            canvas.width = video.videoWidth || 1280;
+            canvas.height = video.videoHeight || 720;
           }
 
-          // Start recording and play first video
-          mediaRecorder.start(100)
-          drawFrame()
-          await playNextVideo()
-
-        } catch (err) {
-          cleanup()
-          reject(err)
-        }
-      }
+          await video.play();
+        };
+
+        const startRecording = async () => {
+          try {
+            await getDurations();
+            onProgress?.(10);
+
+            // Set initial canvas size
+            canvas.width = 1280;
+            canvas.height = 720;
+
+            // Create combined stream
+            const canvasStream = canvas.captureStream(30);
+            const combinedStream = new MediaStream([
+              ...canvasStream.getVideoTracks(),
+              ...audioDestination.stream.getAudioTracks(),
+            ]);
+
+            // Determine output format
+            const mimeType = MediaRecorder.isTypeSupported(
+              "video/webm;codecs=vp9",
+            )
+              ? "video/webm;codecs=vp9"
+              : MediaRecorder.isTypeSupported("video/webm")
+                ? "video/webm"
+                : "video/mp4";
+
+            mediaRecorder = new MediaRecorder(combinedStream, {
+              mimeType,
+              videoBitsPerSecond: 5000000,
+            });
+
+            mediaRecorder.ondataavailable = (e) => {
+              if (e.data.size > 0) {
+                chunks.push(e.data);
+              }
+            };
+
+            mediaRecorder.onstop = () => {
+              const blob = new Blob(chunks, { type: mimeType.split(";")[0] });
+              cleanup();
+              onProgress?.(100);
+              resolve({ blob });
+            };
+
+            mediaRecorder.onerror = (e) => {
+              cleanup();
+              reject(new Error("MediaRecorder error: " + e));
+            };
+
+            // Set up video element event handlers
+            video.onended = () => {
+              playedDuration += video.duration;
+              currentFileIndex++;
+              playNextVideo();
+            };
+
+            video.onerror = () => {
+              cleanup();
+              reject(new Error("Failed to load video"));
+            };
+
+            // Connect video audio to recorder (not to speakers since video is muted)
+            video.onplay = () => {
+              try {
+                const source = audioContext.createMediaElementSource(video);
+                source.connect(audioDestination);
+                // Note: Do NOT connect to audioContext.destination as video is muted for silent processing
+              } catch {
+                // Already connected
+              }
+            };
+
+            // Draw video frames to canvas
+            const drawFrame = () => {
+              if (abortRef.current) {
+                cleanup();
+                reject(new Error("Cancelled"));
+                return;
+              }
+
+              if (video.readyState >= 2) {
+                // Scale video to fit canvas while maintaining aspect ratio
+                const scale = Math.min(
+                  canvas.width / video.videoWidth,
+                  canvas.height / video.videoHeight,
+                );
+                const w = video.videoWidth * scale;
+                const h = video.videoHeight * scale;
+                const x = (canvas.width - w) / 2;
+                const y = (canvas.height - h) / 2;
+
+                ctx.fillStyle = "#000";
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(video, x, y, w, h);
+              }
+
+              // Update progress
+              const currentProgress = playedDuration + (video.currentTime || 0);
+              const progress =
+                totalDuration > 0
+                  ? 10 + (currentProgress / totalDuration) * 85
+                  : 10;
+              onProgress?.(Math.min(95, progress));
+
+              if (mediaRecorder?.state === "recording") {
+                requestAnimationFrame(drawFrame);
+              }
+            };
+
+            // Start recording and play first video
+            mediaRecorder.start(100);
+            drawFrame();
+            await playNextVideo();
+          } catch (err) {
+            cleanup();
+            reject(err);
+          }
+        };
 
-      startRecording()
-    })
-  }, [])
+        startRecording();
+      });
+    },
+    [],
+  );
 
   /**
    * Merge media files (auto-detect audio/video)
    */
-  const merge = useCallback(async (
-    files: File[],
-    mediaType: 'audio' | 'video',
-    options?: MergeOptions
-  ): Promise<MergeResult> => {
-    if (mediaType === 'audio') {
-      return mergeAudio(files, options)
-    } else {
-      return mergeVideo(files, options)
-    }
-  }, [mergeAudio, mergeVideo])
+  const merge = useCallback(
+    async (
+      files: File[],
+      mediaType: "audio" | "video",
+      options?: MergeOptions,
+    ): Promise<MergeResult> => {
+      if (mediaType === "audio") {
+        return mergeAudio(files, options);
+      } else {
+        return mergeVideo(files, options);
+      }
+    },
+    [mergeAudio, mergeVideo],
+  );
 
   const cancel = useCallback(() => {
-    abortRef.current = true
-  }, [])
+    abortRef.current = true;
+  }, []);
 
-  return { merge, mergeAudio, mergeVideo, cancel }
+  return { merge, mergeAudio, mergeVideo, cancel };
 }
 
 /**
@@ -327,57 +334,63 @@ export function useNativeMediaMerger() {
  */
 async function audioBufferToMp3(
   buffer: AudioBuffer,
-  onProgress?: (progress: number) => void
+  onProgress?: (progress: number) => void,
 ): Promise<Blob> {
-  const numChannels = Math.min(buffer.numberOfChannels, 2)
-  const sampleRate = buffer.sampleRate
-  const kbps = 128
+  const numChannels = Math.min(buffer.numberOfChannels, 2);
+  const sampleRate = buffer.sampleRate;
+  const kbps = 128;
 
-  const encoder = new Mp3Encoder(numChannels, sampleRate, kbps)
-  const mp3Data: Int8Array[] = []
+  const encoder = new Mp3Encoder(numChannels, sampleRate, kbps);
+  const mp3Data: Int8Array[] = [];
 
-  const left = buffer.getChannelData(0)
-  const right = numChannels > 1 ? buffer.getChannelData(1) : left
+  const left = buffer.getChannelData(0);
+  const right = numChannels > 1 ? buffer.getChannelData(1) : left;
 
-  const samples = buffer.length
-  const leftInt16 = new Int16Array(samples)
-  const rightInt16 = new Int16Array(samples)
+  const samples = buffer.length;
+  const leftInt16 = new Int16Array(samples);
+  const rightInt16 = new Int16Array(samples);
 
   for (let i = 0; i < samples; i++) {
-    leftInt16[i] = Math.max(-32768, Math.min(32767, Math.round(left[i] * 32767)))
-    rightInt16[i] = Math.max(-32768, Math.min(32767, Math.round(right[i] * 32767)))
+    leftInt16[i] = Math.max(
+      -32768,
+      Math.min(32767, Math.round(left[i] * 32767)),
+    );
+    rightInt16[i] = Math.max(
+      -32768,
+      Math.min(32767, Math.round(right[i] * 32767)),
+    );
   }
 
-  const chunkSize = 1152
-  const totalChunks = Math.ceil(samples / chunkSize)
+  const chunkSize = 1152;
+  const totalChunks = Math.ceil(samples / chunkSize);
 
   for (let i = 0; i < samples; i += chunkSize) {
-    const leftChunk = leftInt16.subarray(i, Math.min(i + chunkSize, samples))
-    const rightChunk = rightInt16.subarray(i, Math.min(i + chunkSize, samples))
+    const leftChunk = leftInt16.subarray(i, Math.min(i + chunkSize, samples));
+    const rightChunk = rightInt16.subarray(i, Math.min(i + chunkSize, samples));
 
-    const mp3buf = encoder.encodeBuffer(leftChunk, rightChunk)
+    const mp3buf = encoder.encodeBuffer(leftChunk, rightChunk);
     if (mp3buf.length > 0) {
-      mp3Data.push(new Int8Array(mp3buf))
+      mp3Data.push(new Int8Array(mp3buf));
     }
 
-    const chunkIndex = Math.floor(i / chunkSize)
-    onProgress?.(chunkIndex / totalChunks)
+    const chunkIndex = Math.floor(i / chunkSize);
+    onProgress?.(chunkIndex / totalChunks);
   }
 
-  const mp3buf = encoder.flush()
+  const mp3buf = encoder.flush();
   if (mp3buf.length > 0) {
-    mp3Data.push(new Int8Array(mp3buf))
+    mp3Data.push(new Int8Array(mp3buf));
   }
 
-  onProgress?.(1)
+  onProgress?.(1);
 
-  const totalLength = mp3Data.reduce((acc, arr) => acc + arr.length, 0)
-  const result = new Uint8Array(totalLength)
-  let offset = 0
+  const totalLength = mp3Data.reduce((acc, arr) => acc + arr.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
   for (const chunk of mp3Data) {
-    result.set(new Uint8Array(chunk.buffer), offset)
-    offset += chunk.length
+    result.set(new Uint8Array(chunk.buffer), offset);
+    offset += chunk.length;
   }
 
-  return new Blob([result], { type: 'audio/mp3' })
+  return new Blob([result], { type: "audio/mp3" });
 }
diff --git a/mobile/src/hooks/useNativeMediaTrimmer.ts b/mobile/src/hooks/useNativeMediaTrimmer.ts
index fed8a294..980b11fe 100644
--- a/mobile/src/hooks/useNativeMediaTrimmer.ts
+++ b/mobile/src/hooks/useNativeMediaTrimmer.ts
@@ -1,13 +1,13 @@
-import { useCallback, useRef } from 'react'
-import { Mp3Encoder } from '@breezystack/lamejs'
+import { useCallback, useRef } from "react";
+import { Mp3Encoder } from "@breezystack/lamejs";
 
 interface TrimOptions {
-  onProgress?: (progress: number) => void
+  onProgress?: (progress: number) => void;
 }
 
 interface TrimResult {
-  blob: Blob
-  duration: number
+  blob: Blob;
+  duration: number;
 }
 
 /**
@@ -16,304 +16,316 @@ interface TrimResult {
  * - Video: HTML5 video + MediaRecorder API
  */
 export function useNativeMediaTrimmer() {
-  const abortRef = useRef(false)
+  const abortRef = useRef(false);
 
   /**
    * Trim audio file using Web Audio API
    */
-  const trimAudio = useCallback(async (
-    file: File,
-    startTime: number,
-    endTime: number,
-    options?: TrimOptions
-  ): Promise<TrimResult> => {
-    abortRef.current = false
-    const { onProgress } = options || {}
-
-    onProgress?.(5)
-
-    // Read file as ArrayBuffer
-    const arrayBuffer = await file.arrayBuffer()
-
-    onProgress?.(10)
-
-    // Decode audio using Web Audio API
-    const audioContext = new AudioContext()
-    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
-
-    onProgress?.(20)
-
-    // Calculate sample range
-    const sampleRate = audioBuffer.sampleRate
-    const numberOfChannels = audioBuffer.numberOfChannels
-    const startSample = Math.floor(startTime * sampleRate)
-    const endSample = Math.floor(endTime * sampleRate)
-    const trimmedLength = endSample - startSample
-
-    // Create trimmed buffer
-    const trimmedBuffer = audioContext.createBuffer(
-      numberOfChannels,
-      trimmedLength,
-      sampleRate
-    )
-
-    // Copy trimmed data
-    for (let channel = 0; channel < numberOfChannels; channel++) {
-      const sourceData = audioBuffer.getChannelData(channel)
-      const destData = trimmedBuffer.getChannelData(channel)
-      for (let i = 0; i < trimmedLength; i++) {
-        if (abortRef.current) throw new Error('Cancelled')
-        destData[i] = sourceData[startSample + i]
+  const trimAudio = useCallback(
+    async (
+      file: File,
+      startTime: number,
+      endTime: number,
+      options?: TrimOptions,
+    ): Promise<TrimResult> => {
+      abortRef.current = false;
+      const { onProgress } = options || {};
+
+      onProgress?.(5);
+
+      // Read file as ArrayBuffer
+      const arrayBuffer = await file.arrayBuffer();
+
+      onProgress?.(10);
+
+      // Decode audio using Web Audio API
+      const audioContext = new AudioContext();
+      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+
+      onProgress?.(20);
+
+      // Calculate sample range
+      const sampleRate = audioBuffer.sampleRate;
+      const numberOfChannels = audioBuffer.numberOfChannels;
+      const startSample = Math.floor(startTime * sampleRate);
+      const endSample = Math.floor(endTime * sampleRate);
+      const trimmedLength = endSample - startSample;
+
+      // Create trimmed buffer
+      const trimmedBuffer = audioContext.createBuffer(
+        numberOfChannels,
+        trimmedLength,
+        sampleRate,
+      );
+
+      // Copy trimmed data
+      for (let channel = 0; channel < numberOfChannels; channel++) {
+        const sourceData = audioBuffer.getChannelData(channel);
+        const destData = trimmedBuffer.getChannelData(channel);
+        for (let i = 0; i < trimmedLength; i++) {
+          if (abortRef.current) throw new Error("Cancelled");
+          destData[i] = sourceData[startSample + i];
+        }
       }
-    }
 
-    onProgress?.(40)
+      onProgress?.(40);
 
-    // Determine output format based on input
-    const ext = file.name.split('.').pop()?.toLowerCase()
-    const isWav = ext === 'wav'
+      // Determine output format based on input
+      const ext = file.name.split(".").pop()?.toLowerCase();
+      const isWav = ext === "wav";
 
-    let blob: Blob
+      let blob: Blob;
 
-    if (isWav) {
-      // Export as WAV
-      blob = audioBufferToWav(trimmedBuffer)
-      onProgress?.(100)
-    } else {
-      // Export as MP3
-      blob = await audioBufferToMp3(trimmedBuffer, (p) => {
-        onProgress?.(40 + p * 0.6)
-      })
-    }
+      if (isWav) {
+        // Export as WAV
+        blob = audioBufferToWav(trimmedBuffer);
+        onProgress?.(100);
+      } else {
+        // Export as MP3
+        blob = await audioBufferToMp3(trimmedBuffer, (p) => {
+          onProgress?.(40 + p * 0.6);
+        });
+      }
 
-    await audioContext.close()
+      await audioContext.close();
 
-    return {
-      blob,
-      duration: endTime - startTime
-    }
-  }, [])
+      return {
+        blob,
+        duration: endTime - startTime,
+      };
+    },
+    [],
+  );
 
   /**
    * Trim video file using MediaRecorder API
    */
-  const trimVideo = useCallback(async (
-    file: File,
-    startTime: number,
-    endTime: number,
-    options?: TrimOptions
-  ): Promise<TrimResult> => {
-    abortRef.current = false
-    const { onProgress } = options || {}
-
-    return new Promise((resolve, reject) => {
-      onProgress?.(5)
-
-      // Create video element
-      const video = document.createElement('video')
-      video.muted = true
-      video.playsInline = true
-
-      const url = URL.createObjectURL(file)
-      video.src = url
-
-      const chunks: Blob[] = []
-      let mediaRecorder: MediaRecorder | null = null
-      let stream: MediaStream | null = null
-
-      const cleanup = () => {
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-          mediaRecorder.stop()
-        }
-        if (stream) {
-          stream.getTracks().forEach(track => track.stop())
-        }
-        URL.revokeObjectURL(url)
-        video.remove()
-      }
-
-      video.onloadedmetadata = async () => {
-        try {
-          onProgress?.(10)
-
-          // Seek to start time
-          video.currentTime = startTime
-
-          await new Promise<void>((res) => {
-            video.onseeked = () => res()
-          })
-
-          onProgress?.(15)
-
-          // Capture stream from video
-          // @ts-ignore - captureStream is available on video elements
-          stream = video.captureStream ? video.captureStream() : video.mozCaptureStream?.()
-
-          if (!stream) {
-            throw new Error('captureStream not supported in this browser')
+  const trimVideo = useCallback(
+    async (
+      file: File,
+      startTime: number,
+      endTime: number,
+      options?: TrimOptions,
+    ): Promise<TrimResult> => {
+      abortRef.current = false;
+      const { onProgress } = options || {};
+
+      return new Promise((resolve, reject) => {
+        onProgress?.(5);
+
+        // Create video element
+        const video = document.createElement("video");
+        video.muted = true;
+        video.playsInline = true;
+
+        const url = URL.createObjectURL(file);
+        video.src = url;
+
+        const chunks: Blob[] = [];
+        let mediaRecorder: MediaRecorder | null = null;
+        let stream: MediaStream | null = null;
+
+        const cleanup = () => {
+          if (mediaRecorder && mediaRecorder.state !== "inactive") {
+            mediaRecorder.stop();
           }
-
-          // Determine output format
-          const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
-            ? 'video/webm;codecs=vp9'
-            : MediaRecorder.isTypeSupported('video/webm')
-              ? 'video/webm'
-              : 'video/mp4'
-
-          mediaRecorder = new MediaRecorder(stream, {
-            mimeType,
-            videoBitsPerSecond: 5000000 // 5 Mbps
-          })
-
-          mediaRecorder.ondataavailable = (e) => {
-            if (e.data.size > 0) {
-              chunks.push(e.data)
-            }
+          if (stream) {
+            stream.getTracks().forEach((track) => track.stop());
           }
+          URL.revokeObjectURL(url);
+          video.remove();
+        };
 
-          mediaRecorder.onstop = () => {
-            const blob = new Blob(chunks, { type: mimeType.split(';')[0] })
-            cleanup()
-            onProgress?.(100)
-            resolve({
-              blob,
-              duration: endTime - startTime
-            })
-          }
+        video.onloadedmetadata = async () => {
+          try {
+            onProgress?.(10);
 
-          mediaRecorder.onerror = (e) => {
-            cleanup()
-            reject(new Error('MediaRecorder error: ' + e))
-          }
+            // Seek to start time
+            video.currentTime = startTime;
 
-          // Start recording
-          mediaRecorder.start(100) // Collect data every 100ms
+            await new Promise<void>((res) => {
+              video.onseeked = () => res();
+            });
 
-          onProgress?.(20)
+            onProgress?.(15);
 
-          // Play video
-          await video.play()
+            // Capture stream from video
+            // @ts-ignore - captureStream is available on video elements
+            stream = video.captureStream
+              ? video.captureStream()
+              : video.mozCaptureStream?.();
 
-          // Update progress during playback
-          const duration = endTime - startTime
-          const progressInterval = setInterval(() => {
-            if (abortRef.current) {
-              clearInterval(progressInterval)
-              cleanup()
-              reject(new Error('Cancelled'))
-              return
+            if (!stream) {
+              throw new Error("captureStream not supported in this browser");
             }
 
-            const elapsed = video.currentTime - startTime
-            const progress = Math.min(20 + (elapsed / duration) * 75, 95)
-            onProgress?.(progress)
-          }, 100)
-
-          // Stop when end time is reached
-          const checkEnd = () => {
-            if (video.currentTime >= endTime || video.ended) {
-              clearInterval(progressInterval)
-              video.pause()
-              if (mediaRecorder && mediaRecorder.state === 'recording') {
-                mediaRecorder.stop()
+            // Determine output format
+            const mimeType = MediaRecorder.isTypeSupported(
+              "video/webm;codecs=vp9",
+            )
+              ? "video/webm;codecs=vp9"
+              : MediaRecorder.isTypeSupported("video/webm")
+                ? "video/webm"
+                : "video/mp4";
+
+            mediaRecorder = new MediaRecorder(stream, {
+              mimeType,
+              videoBitsPerSecond: 5000000, // 5 Mbps
+            });
+
+            mediaRecorder.ondataavailable = (e) => {
+              if (e.data.size > 0) {
+                chunks.push(e.data);
+              }
+            };
+
+            mediaRecorder.onstop = () => {
+              const blob = new Blob(chunks, { type: mimeType.split(";")[0] });
+              cleanup();
+              onProgress?.(100);
+              resolve({
+                blob,
+                duration: endTime - startTime,
+              });
+            };
+
+            mediaRecorder.onerror = (e) => {
+              cleanup();
+              reject(new Error("MediaRecorder error: " + e));
+            };
+
+            // Start recording
+            mediaRecorder.start(100); // Collect data every 100ms
+
+            onProgress?.(20);
+
+            // Play video
+            await video.play();
+
+            // Update progress during playback
+            const duration = endTime - startTime;
+            const progressInterval = setInterval(() => {
+              if (abortRef.current) {
+                clearInterval(progressInterval);
+                cleanup();
+                reject(new Error("Cancelled"));
+                return;
               }
-            } else {
-              requestAnimationFrame(checkEnd)
-            }
-          }
-          checkEnd()
 
-        } catch (err) {
-          cleanup()
-          reject(err)
-        }
-      }
+              const elapsed = video.currentTime - startTime;
+              const progress = Math.min(20 + (elapsed / duration) * 75, 95);
+              onProgress?.(progress);
+            }, 100);
+
+            // Stop when end time is reached
+            const checkEnd = () => {
+              if (video.currentTime >= endTime || video.ended) {
+                clearInterval(progressInterval);
+                video.pause();
+                if (mediaRecorder && mediaRecorder.state === "recording") {
+                  mediaRecorder.stop();
+                }
+              } else {
+                requestAnimationFrame(checkEnd);
+              }
+            };
+            checkEnd();
+          } catch (err) {
+            cleanup();
+            reject(err);
+          }
+        };
 
-      video.onerror = () => {
-        cleanup()
-        reject(new Error('Failed to load video'))
-      }
-    })
-  }, [])
+        video.onerror = () => {
+          cleanup();
+          reject(new Error("Failed to load video"));
+        };
+      });
+    },
+    [],
+  );
 
   /**
    * Trim media file (auto-detect audio/video)
    */
-  const trim = useCallback(async (
-    file: File,
-    startTime: number,
-    endTime: number,
-    mediaType: 'audio' | 'video',
-    options?: TrimOptions
-  ): Promise<TrimResult> => {
-    if (mediaType === 'audio') {
-      return trimAudio(file, startTime, endTime, options)
-    } else {
-      return trimVideo(file, startTime, endTime, options)
-    }
-  }, [trimAudio, trimVideo])
+  const trim = useCallback(
+    async (
+      file: File,
+      startTime: number,
+      endTime: number,
+      mediaType: "audio" | "video",
+      options?: TrimOptions,
+    ): Promise<TrimResult> => {
+      if (mediaType === "audio") {
+        return trimAudio(file, startTime, endTime, options);
+      } else {
+        return trimVideo(file, startTime, endTime, options);
+      }
+    },
+    [trimAudio, trimVideo],
+  );
 
   const cancel = useCallback(() => {
-    abortRef.current = true
-  }, [])
+    abortRef.current = true;
+  }, []);
 
-  return { trim, trimAudio, trimVideo, cancel }
+  return { trim, trimAudio, trimVideo, cancel };
 }
 
 /**
  * Convert AudioBuffer to WAV blob
  */
 function audioBufferToWav(buffer: AudioBuffer): Blob {
-  const numChannels = buffer.numberOfChannels
-  const sampleRate = buffer.sampleRate
-  const format = 1 // PCM
-  const bitDepth = 16
+  const numChannels = buffer.numberOfChannels;
+  const sampleRate = buffer.sampleRate;
+  const format = 1; // PCM
+  const bitDepth = 16;
 
-  const bytesPerSample = bitDepth / 8
-  const blockAlign = numChannels * bytesPerSample
-  const dataLength = buffer.length * blockAlign
-  const bufferLength = 44 + dataLength
+  const bytesPerSample = bitDepth / 8;
+  const blockAlign = numChannels * bytesPerSample;
+  const dataLength = buffer.length * blockAlign;
+  const bufferLength = 44 + dataLength;
 
-  const arrayBuffer = new ArrayBuffer(bufferLength)
-  const view = new DataView(arrayBuffer)
+  const arrayBuffer = new ArrayBuffer(bufferLength);
+  const view = new DataView(arrayBuffer);
 
   // WAV header
-  writeString(view, 0, 'RIFF')
-  view.setUint32(4, bufferLength - 8, true)
-  writeString(view, 8, 'WAVE')
-  writeString(view, 12, 'fmt ')
-  view.setUint32(16, 16, true) // fmt chunk size
-  view.setUint16(20, format, true)
-  view.setUint16(22, numChannels, true)
-  view.setUint32(24, sampleRate, true)
-  view.setUint32(28, sampleRate * blockAlign, true)
-  view.setUint16(32, blockAlign, true)
-  view.setUint16(34, bitDepth, true)
-  writeString(view, 36, 'data')
-  view.setUint32(40, dataLength, true)
+  writeString(view, 0, "RIFF");
+  view.setUint32(4, bufferLength - 8, true);
+  writeString(view, 8, "WAVE");
+  writeString(view, 12, "fmt ");
+  view.setUint32(16, 16, true); // fmt chunk size
+  view.setUint16(20, format, true);
+  view.setUint16(22, numChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true);
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bitDepth, true);
+  writeString(view, 36, "data");
+  view.setUint32(40, dataLength, true);
 
   // Write audio data
-  const channels: Float32Array[] = []
+  const channels: Float32Array[] = [];
   for (let i = 0; i < numChannels; i++) {
-    channels.push(buffer.getChannelData(i))
+    channels.push(buffer.getChannelData(i));
   }
 
-  let offset = 44
+  let offset = 44;
   for (let i = 0; i < buffer.length; i++) {
     for (let ch = 0; ch < numChannels; ch++) {
-      const sample = Math.max(-1, Math.min(1, channels[ch][i]))
-      const int16 = sample < 0 ? sample * 0x8000 : sample * 0x7fff
-      view.setInt16(offset, int16, true)
-      offset += 2
+      const sample = Math.max(-1, Math.min(1, channels[ch][i]));
+      const int16 = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+      view.setInt16(offset, int16, true);
+      offset += 2;
     }
   }
 
-  return new Blob([arrayBuffer], { type: 'audio/wav' })
+  return new Blob([arrayBuffer], { type: "audio/wav" });
 }
 
 function writeString(view: DataView, offset: number, string: string) {
   for (let i = 0; i < string.length; i++) {
-    view.setUint8(offset + i, string.charCodeAt(i))
+    view.setUint8(offset + i, string.charCodeAt(i));
   }
 }
 
@@ -322,63 +334,69 @@ function writeString(view: DataView, offset: number, string: string) {
  */
 async function audioBufferToMp3(
   buffer: AudioBuffer,
-  onProgress?: (progress: number) => void
+  onProgress?: (progress: number) => void,
 ): Promise<Blob> {
-  const numChannels = Math.min(buffer.numberOfChannels, 2) // MP3 supports max 2 channels
-  const sampleRate = buffer.sampleRate
-  const kbps = 128
+  const numChannels = Math.min(buffer.numberOfChannels, 2); // MP3 supports max 2 channels
+  const sampleRate = buffer.sampleRate;
+  const kbps = 128;
 
-  const encoder = new Mp3Encoder(numChannels, sampleRate, kbps)
-  const mp3Data: Int8Array[] = []
+  const encoder = new Mp3Encoder(numChannels, sampleRate, kbps);
+  const mp3Data: Int8Array[] = [];
 
   // Get channel data
-  const left = buffer.getChannelData(0)
-  const right = numChannels > 1 ? buffer.getChannelData(1) : left
+  const left = buffer.getChannelData(0);
+  const right = numChannels > 1 ? buffer.getChannelData(1) : left;
 
   // Convert to Int16
-  const samples = buffer.length
-  const leftInt16 = new Int16Array(samples)
-  const rightInt16 = new Int16Array(samples)
+  const samples = buffer.length;
+  const leftInt16 = new Int16Array(samples);
+  const rightInt16 = new Int16Array(samples);
 
   for (let i = 0; i < samples; i++) {
-    leftInt16[i] = Math.max(-32768, Math.min(32767, Math.round(left[i] * 32767)))
-    rightInt16[i] = Math.max(-32768, Math.min(32767, Math.round(right[i] * 32767)))
+    leftInt16[i] = Math.max(
+      -32768,
+      Math.min(32767, Math.round(left[i] * 32767)),
+    );
+    rightInt16[i] = Math.max(
+      -32768,
+      Math.min(32767, Math.round(right[i] * 32767)),
+    );
   }
 
   // Encode in chunks
-  const chunkSize = 1152
-  const totalChunks = Math.ceil(samples / chunkSize)
+  const chunkSize = 1152;
+  const totalChunks = Math.ceil(samples / chunkSize);
 
   for (let i = 0; i < samples; i += chunkSize) {
-    const leftChunk = leftInt16.subarray(i, Math.min(i + chunkSize, samples))
-    const rightChunk = rightInt16.subarray(i, Math.min(i + chunkSize, samples))
+    const leftChunk = leftInt16.subarray(i, Math.min(i + chunkSize, samples));
+    const rightChunk = rightInt16.subarray(i, Math.min(i + chunkSize, samples));
 
-    const mp3buf = encoder.encodeBuffer(leftChunk, rightChunk)
+    const mp3buf = encoder.encodeBuffer(leftChunk, rightChunk);
     if (mp3buf.length > 0) {
-      mp3Data.push(new Int8Array(mp3buf))
+      mp3Data.push(new Int8Array(mp3buf));
     }
 
     // Report progress
-    const chunkIndex = Math.floor(i / chunkSize)
-    onProgress?.(chunkIndex / totalChunks)
+    const chunkIndex = Math.floor(i / chunkSize);
+    onProgress?.(chunkIndex / totalChunks);
   }
 
   // Flush remaining data
-  const mp3buf = encoder.flush()
+  const mp3buf = encoder.flush();
   if (mp3buf.length > 0) {
-    mp3Data.push(new Int8Array(mp3buf))
+    mp3Data.push(new Int8Array(mp3buf));
   }
 
-  onProgress?.(1)
+  onProgress?.(1);
 
   // Combine all chunks
-  const totalLength = mp3Data.reduce((acc, arr) => acc + arr.length, 0)
-  const result = new Uint8Array(totalLength)
-  let offset = 0
+  const totalLength = mp3Data.reduce((acc, arr) => acc + arr.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
   for (const chunk of mp3Data) {
-    result.set(new Uint8Array(chunk.buffer), offset)
-    offset += chunk.length
+    result.set(new Uint8Array(chunk.buffer), offset);
+    offset += chunk.length;
   }
 
-  return new Blob([result], { type: 'audio/mp3' })
+  return new Blob([result], { type: "audio/mp3" });
 }
diff --git a/mobile/src/hooks/utils/workerUtils.ts b/mobile/src/hooks/utils/workerUtils.ts
index 58b911fb..0f146816 100644
--- a/mobile/src/hooks/utils/workerUtils.ts
+++ b/mobile/src/hooks/utils/workerUtils.ts
@@ -4,8 +4,8 @@
  */
 
 interface WorkerMessage {
-  type: string
-  payload?: unknown
+  type: string;
+  payload?: unknown;
 }
 
 /**
@@ -20,50 +20,62 @@ export function createWorkerPromise<T>(
   worker: Worker,
   successType: string,
   options: {
-    errorType?: string
-    matchId?: number
-    onSuccess: (payload: unknown) => T
-    onError?: (payload: unknown) => Error
-    postMessage: () => void
-  }
+    errorType?: string;
+    matchId?: number;
+    onSuccess: (payload: unknown) => T;
+    onError?: (payload: unknown) => Error;
+    postMessage: () => void;
+  },
 ): Promise<T> {
-  const { errorType = 'error', matchId, onSuccess, onError, postMessage } = options
+  const {
+    errorType = "error",
+    matchId,
+    onSuccess,
+    onError,
+    postMessage,
+  } = options;
 
   return new Promise((resolve, reject) => {
-    let resolved = false
+    let resolved = false;
 
     const cleanup = () => {
-      worker.removeEventListener('message', handleMessage)
-    }
+      worker.removeEventListener("message", handleMessage);
+    };
 
     const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-      if (resolved) return
+      if (resolved) return;
 
-      const { type, payload } = e.data
-      const payloadId = (payload as { id?: number })?.id
+      const { type, payload } = e.data;
+      const payloadId = (payload as { id?: number })?.id;
 
       // If matchId is specified, only handle messages with matching id
-      if (matchId !== undefined && payloadId !== undefined && payloadId !== matchId) {
-        return
+      if (
+        matchId !== undefined &&
+        payloadId !== undefined &&
+        payloadId !== matchId
+      ) {
+        return;
       }
 
       if (type === successType) {
-        resolved = true
-        cleanup()
-        resolve(onSuccess(payload))
+        resolved = true;
+        cleanup();
+        resolve(onSuccess(payload));
       } else if (type === errorType) {
-        resolved = true
-        cleanup()
+        resolved = true;
+        cleanup();
         const error = onError
           ? onError(payload)
-          : new Error((payload as { message?: string })?.message || String(payload))
-        reject(error)
+          : new Error(
+              (payload as { message?: string })?.message || String(payload),
+            );
+        reject(error);
       }
-    }
+    };
 
-    worker.addEventListener('message', handleMessage)
-    postMessage()
-  })
+    worker.addEventListener("message", handleMessage);
+    postMessage();
+  });
 }
 
 /**
@@ -72,17 +84,17 @@ export function createWorkerPromise<T>(
 export const devLog = {
   log: (...args: unknown[]) => {
     if (import.meta.env.DEV) {
-      console.log(...args)
+      console.log(...args);
     }
   },
   warn: (...args: unknown[]) => {
     if (import.meta.env.DEV) {
-      console.warn(...args)
+      console.warn(...args);
     }
   },
   error: (...args: unknown[]) => {
     if (import.meta.env.DEV) {
-      console.error(...args)
+      console.error(...args);
     }
-  }
-}
+  },
+};
diff --git a/mobile/src/index.css b/mobile/src/index.css
index b9ff581b..cad38639 100644
--- a/mobile/src/index.css
+++ b/mobile/src/index.css
@@ -1,5 +1,5 @@
 /* Import shared styles from main project - must be first */
-@import '../../src/index.css';
+@import "../../src/index.css";
 
 @tailwind base;
 @tailwind components;
@@ -29,7 +29,9 @@
   }
 
   /* Allow text selection in specific elements */
-  input, textarea, [contenteditable="true"] {
+  input,
+  textarea,
+  [contenteditable="true"] {
     -webkit-user-select: text;
     user-select: text;
   }
@@ -196,7 +198,8 @@ textarea {
 }
 
 /* Pull-to-refresh disabled */
-html, body {
+html,
+body {
   overscroll-behavior-y: contain;
 }
 
@@ -245,7 +248,7 @@ html, body {
 }
 
 .ripple::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
   left: 50%;
@@ -255,7 +258,10 @@ html, body {
   opacity: 0.1;
   border-radius: 50%;
   transform: translate(-50%, -50%);
-  transition: width 0.3s, height 0.3s, opacity 0.3s;
+  transition:
+    width 0.3s,
+    height 0.3s,
+    opacity 0.3s;
 }
 
 .ripple:active::after {
@@ -274,7 +280,10 @@ input:not([type="number"]):not([type="range"]) {
    ==================================== */
 
 /* Collapsed state: show only the magnifying glass icon */
-.mobile-models-page .page-header > div:nth-child(2) > .relative.flex-1.max-w-md {
+.mobile-models-page
+  .page-header
+  > div:nth-child(2)
+  > .relative.flex-1.max-w-md {
   flex: 0 0 36px !important;
   width: 36px !important;
   max-width: 36px !important;
@@ -287,18 +296,29 @@ input:not([type="number"]):not([type="range"]) {
 }
 
 /* SVG icon pass-through so tapping focuses the input */
-.mobile-models-page .page-header > div:nth-child(2) > .relative.flex-1.max-w-md > svg {
+.mobile-models-page
+  .page-header
+  > div:nth-child(2)
+  > .relative.flex-1.max-w-md
+  > svg {
   pointer-events: none;
 }
 
 /* Hide input text when collapsed */
-.mobile-models-page .page-header > div:nth-child(2) > .relative.flex-1.max-w-md > input {
+.mobile-models-page
+  .page-header
+  > div:nth-child(2)
+  > .relative.flex-1.max-w-md
+  > input {
   caret-color: transparent;
   color: transparent;
 }
 
 /* Expanded state: full-width search bar */
-.mobile-models-page .page-header > div:nth-child(2) > .relative.flex-1.max-w-md:focus-within {
+.mobile-models-page
+  .page-header
+  > div:nth-child(2)
+  > .relative.flex-1.max-w-md:focus-within {
   flex: 1 1 0% !important;
   width: auto !important;
   max-width: none !important;
@@ -308,14 +328,22 @@ input:not([type="number"]):not([type="range"]) {
   background: transparent;
 }
 
-.mobile-models-page .page-header > div:nth-child(2) > .relative.flex-1.max-w-md:focus-within > input {
+.mobile-models-page
+  .page-header
+  > div:nth-child(2)
+  > .relative.flex-1.max-w-md:focus-within
+  > input {
   caret-color: auto;
   color: inherit;
   height: 44px;
 }
 
 /* Hide sibling controls when search is expanded */
-.mobile-models-page .page-header > div:nth-child(2) > .relative.flex-1.max-w-md:focus-within ~ * {
+.mobile-models-page
+  .page-header
+  > div:nth-child(2)
+  > .relative.flex-1.max-w-md:focus-within
+  ~ * {
   display: none !important;
 }
 
diff --git a/mobile/src/lib/ffmpegFormats.ts b/mobile/src/lib/ffmpegFormats.ts
index 92c28039..16067d0e 100644
--- a/mobile/src/lib/ffmpegFormats.ts
+++ b/mobile/src/lib/ffmpegFormats.ts
@@ -1,153 +1,252 @@
 export interface VideoFormat {
-  id: string
-  ext: string
-  label: string
-  codec: string
-  mimeType: string
+  id: string;
+  ext: string;
+  label: string;
+  codec: string;
+  mimeType: string;
 }
 
 export interface AudioFormat {
-  id: string
-  ext: string
-  label: string
-  codec: string
-  mimeType: string
+  id: string;
+  ext: string;
+  label: string;
+  codec: string;
+  mimeType: string;
 }
 
 export interface ImageFormat {
-  id: string
-  ext: string
-  label: string
-  mimeType: string
-  supportsQuality: boolean
+  id: string;
+  ext: string;
+  label: string;
+  mimeType: string;
+  supportsQuality: boolean;
 }
 
 export interface QualityPreset {
-  id: string
-  label: string
-  videoBitrate: string
-  audioBitrate: string
+  id: string;
+  label: string;
+  videoBitrate: string;
+  audioBitrate: string;
 }
 
 export interface ResolutionPreset {
-  id: string
-  label: string
-  value: string // 'original' or 'WxH'
+  id: string;
+  label: string;
+  value: string; // 'original' or 'WxH'
 }
 
 export const VIDEO_FORMATS: VideoFormat[] = [
-  { id: 'mp4-h264', ext: 'mp4', label: 'MP4 (H.264)', codec: 'libx264', mimeType: 'video/mp4' },
-  { id: 'mp4-h265', ext: 'mp4', label: 'MP4 (H.265/HEVC)', codec: 'libx265', mimeType: 'video/mp4' },
-  { id: 'webm-vp9', ext: 'webm', label: 'WebM (VP9)', codec: 'libvpx-vp9', mimeType: 'video/webm' },
-  { id: 'webm-vp8', ext: 'webm', label: 'WebM (VP8)', codec: 'libvpx', mimeType: 'video/webm' },
-  { id: 'mov', ext: 'mov', label: 'MOV', codec: 'libx264', mimeType: 'video/quicktime' },
-  { id: 'avi', ext: 'avi', label: 'AVI', codec: 'libx264', mimeType: 'video/x-msvideo' },
-  { id: 'mkv', ext: 'mkv', label: 'MKV', codec: 'libx264', mimeType: 'video/x-matroska' },
-]
+  {
+    id: "mp4-h264",
+    ext: "mp4",
+    label: "MP4 (H.264)",
+    codec: "libx264",
+    mimeType: "video/mp4",
+  },
+  {
+    id: "mp4-h265",
+    ext: "mp4",
+    label: "MP4 (H.265/HEVC)",
+    codec: "libx265",
+    mimeType: "video/mp4",
+  },
+  {
+    id: "webm-vp9",
+    ext: "webm",
+    label: "WebM (VP9)",
+    codec: "libvpx-vp9",
+    mimeType: "video/webm",
+  },
+  {
+    id: "webm-vp8",
+    ext: "webm",
+    label: "WebM (VP8)",
+    codec: "libvpx",
+    mimeType: "video/webm",
+  },
+  {
+    id: "mov",
+    ext: "mov",
+    label: "MOV",
+    codec: "libx264",
+    mimeType: "video/quicktime",
+  },
+  {
+    id: "avi",
+    ext: "avi",
+    label: "AVI",
+    codec: "libx264",
+    mimeType: "video/x-msvideo",
+  },
+  {
+    id: "mkv",
+    ext: "mkv",
+    label: "MKV",
+    codec: "libx264",
+    mimeType: "video/x-matroska",
+  },
+];
 
 // Audio formats - using codecs that are available in FFmpeg WASM core
 export const AUDIO_FORMATS: AudioFormat[] = [
-  { id: 'mp3', ext: 'mp3', label: 'MP3', codec: 'libmp3lame', mimeType: 'audio/mpeg' },
-  { id: 'aac', ext: 'm4a', label: 'AAC (M4A)', codec: 'aac', mimeType: 'audio/mp4' },
-  { id: 'wav', ext: 'wav', label: 'WAV (Uncompressed)', codec: 'pcm_s16le', mimeType: 'audio/wav' },
-  { id: 'flac', ext: 'flac', label: 'FLAC (Lossless)', codec: 'flac', mimeType: 'audio/flac' },
+  {
+    id: "mp3",
+    ext: "mp3",
+    label: "MP3",
+    codec: "libmp3lame",
+    mimeType: "audio/mpeg",
+  },
+  {
+    id: "aac",
+    ext: "m4a",
+    label: "AAC (M4A)",
+    codec: "aac",
+    mimeType: "audio/mp4",
+  },
+  {
+    id: "wav",
+    ext: "wav",
+    label: "WAV (Uncompressed)",
+    codec: "pcm_s16le",
+    mimeType: "audio/wav",
+  },
+  {
+    id: "flac",
+    ext: "flac",
+    label: "FLAC (Lossless)",
+    codec: "flac",
+    mimeType: "audio/flac",
+  },
   // Note: libopus and libvorbis may not be in FFmpeg WASM core, use with caution
   // { id: 'opus', ext: 'ogg', label: 'Opus (OGG)', codec: 'libopus', mimeType: 'audio/ogg' },
   // { id: 'vorbis', ext: 'ogg', label: 'Vorbis (OGG)', codec: 'libvorbis', mimeType: 'audio/ogg' },
-]
+];
 
 export const IMAGE_FORMATS: ImageFormat[] = [
-  { id: 'jpg', ext: 'jpg', label: 'JPEG', mimeType: 'image/jpeg', supportsQuality: true },
-  { id: 'png', ext: 'png', label: 'PNG', mimeType: 'image/png', supportsQuality: false },
-  { id: 'webp', ext: 'webp', label: 'WebP', mimeType: 'image/webp', supportsQuality: true },
-  { id: 'gif', ext: 'gif', label: 'GIF', mimeType: 'image/gif', supportsQuality: false },
-  { id: 'bmp', ext: 'bmp', label: 'BMP', mimeType: 'image/bmp', supportsQuality: false },
-]
+  {
+    id: "jpg",
+    ext: "jpg",
+    label: "JPEG",
+    mimeType: "image/jpeg",
+    supportsQuality: true,
+  },
+  {
+    id: "png",
+    ext: "png",
+    label: "PNG",
+    mimeType: "image/png",
+    supportsQuality: false,
+  },
+  {
+    id: "webp",
+    ext: "webp",
+    label: "WebP",
+    mimeType: "image/webp",
+    supportsQuality: true,
+  },
+  {
+    id: "gif",
+    ext: "gif",
+    label: "GIF",
+    mimeType: "image/gif",
+    supportsQuality: false,
+  },
+  {
+    id: "bmp",
+    ext: "bmp",
+    label: "BMP",
+    mimeType: "image/bmp",
+    supportsQuality: false,
+  },
+];
 
 export const QUALITY_PRESETS: QualityPreset[] = [
-  { id: 'low', label: 'Low (Fast)', videoBitrate: '1M', audioBitrate: '96k' },
-  { id: 'medium', label: 'Medium', videoBitrate: '5M', audioBitrate: '128k' },
-  { id: 'high', label: 'High', videoBitrate: '10M', audioBitrate: '192k' },
-  { id: 'ultra', label: 'Ultra', videoBitrate: '20M', audioBitrate: '320k' },
-]
+  { id: "low", label: "Low (Fast)", videoBitrate: "1M", audioBitrate: "96k" },
+  { id: "medium", label: "Medium", videoBitrate: "5M", audioBitrate: "128k" },
+  { id: "high", label: "High", videoBitrate: "10M", audioBitrate: "192k" },
+  { id: "ultra", label: "Ultra", videoBitrate: "20M", audioBitrate: "320k" },
+];
 
 export const RESOLUTION_PRESETS: ResolutionPreset[] = [
-  { id: 'original', label: 'Original', value: 'original' },
-  { id: '4k', label: '4K (3840x2160)', value: '3840x2160' },
-  { id: '1080p', label: '1080p (1920x1080)', value: '1920x1080' },
-  { id: '720p', label: '720p (1280x720)', value: '1280x720' },
-  { id: '480p', label: '480p (854x480)', value: '854x480' },
-  { id: '360p', label: '360p (640x360)', value: '640x360' },
-]
+  { id: "original", label: "Original", value: "original" },
+  { id: "4k", label: "4K (3840x2160)", value: "3840x2160" },
+  { id: "1080p", label: "1080p (1920x1080)", value: "1920x1080" },
+  { id: "720p", label: "720p (1280x720)", value: "1280x720" },
+  { id: "480p", label: "480p (854x480)", value: "854x480" },
+  { id: "360p", label: "360p (640x360)", value: "640x360" },
+];
 
 export const AUDIO_BITRATES = [
-  { id: '64k', label: '64 kbps', value: '64k' },
-  { id: '96k', label: '96 kbps', value: '96k' },
-  { id: '128k', label: '128 kbps', value: '128k' },
-  { id: '192k', label: '192 kbps', value: '192k' },
-  { id: '256k', label: '256 kbps', value: '256k' },
-  { id: '320k', label: '320 kbps', value: '320k' },
-]
+  { id: "64k", label: "64 kbps", value: "64k" },
+  { id: "96k", label: "96 kbps", value: "96k" },
+  { id: "128k", label: "128 kbps", value: "128k" },
+  { id: "192k", label: "192 kbps", value: "192k" },
+  { id: "256k", label: "256 kbps", value: "256k" },
+  { id: "320k", label: "320 kbps", value: "320k" },
+];
 
 // Helper to get format by ID
 export function getVideoFormat(id: string): VideoFormat | undefined {
-  return VIDEO_FORMATS.find(f => f.id === id)
+  return VIDEO_FORMATS.find((f) => f.id === id);
 }
 
 export function getAudioFormat(id: string): AudioFormat | undefined {
-  return AUDIO_FORMATS.find(f => f.id === id)
+  return AUDIO_FORMATS.find((f) => f.id === id);
 }
 
 export function getImageFormat(id: string): ImageFormat | undefined {
-  return IMAGE_FORMATS.find(f => f.id === id)
+  return IMAGE_FORMATS.find((f) => f.id === id);
 }
 
 // Detect media type from file
-export function getMediaType(file: File): 'video' | 'audio' | 'image' | 'unknown' {
-  if (file.type.startsWith('video/')) return 'video'
-  if (file.type.startsWith('audio/')) return 'audio'
-  if (file.type.startsWith('image/')) return 'image'
+export function getMediaType(
+  file: File,
+): "video" | "audio" | "image" | "unknown" {
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.startsWith("audio/")) return "audio";
+  if (file.type.startsWith("image/")) return "image";
 
   // Fallback to extension
-  const ext = file.name.split('.').pop()?.toLowerCase()
-  const videoExts = ['mp4', 'webm', 'mov', 'avi', 'mkv', 'm4v', 'wmv', 'flv']
-  const audioExts = ['mp3', 'm4a', 'ogg', 'wav', 'flac', 'aac', 'wma']
-  const imageExts = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'tiff']
+  const ext = file.name.split(".").pop()?.toLowerCase();
+  const videoExts = ["mp4", "webm", "mov", "avi", "mkv", "m4v", "wmv", "flv"];
+  const audioExts = ["mp3", "m4a", "ogg", "wav", "flac", "aac", "wma"];
+  const imageExts = ["jpg", "jpeg", "png", "webp", "gif", "bmp", "tiff"];
 
-  if (ext && videoExts.includes(ext)) return 'video'
-  if (ext && audioExts.includes(ext)) return 'audio'
-  if (ext && imageExts.includes(ext)) return 'image'
+  if (ext && videoExts.includes(ext)) return "video";
+  if (ext && audioExts.includes(ext)) return "audio";
+  if (ext && imageExts.includes(ext)) return "image";
 
-  return 'unknown'
+  return "unknown";
 }
 
 // Format duration as HH:MM:SS
 export function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  const s = Math.floor(seconds % 60)
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
 
   if (h > 0) {
-    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
   }
-  return `${m}:${s.toString().padStart(2, '0')}`
+  return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
 // Parse duration string to seconds
 export function parseDurationString(str: string): number {
-  const parts = str.split(':').map(Number)
+  const parts = str.split(":").map(Number);
   if (parts.length === 3) {
-    return parts[0] * 3600 + parts[1] * 60 + parts[2]
+    return parts[0] * 3600 + parts[1] * 60 + parts[2];
   } else if (parts.length === 2) {
-    return parts[0] * 60 + parts[1]
+    return parts[0] * 60 + parts[1];
   }
-  return parts[0] || 0
+  return parts[0] || 0;
 }
 
 // Format file size
 export function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024)
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
 }
diff --git a/mobile/src/lib/mediaUtils.ts b/mobile/src/lib/mediaUtils.ts
index a578fc98..c02a9a19 100644
--- a/mobile/src/lib/mediaUtils.ts
+++ b/mobile/src/lib/mediaUtils.ts
@@ -2,40 +2,59 @@
  * Media utility functions for type detection and URL validation
  */
 
-export type MediaType = 'image' | 'video' | 'audio' | 'unknown'
+export type MediaType = "image" | "video" | "audio" | "unknown";
 
 // MIME type mappings
-const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg', 'ico', 'avif']
-const VIDEO_EXTENSIONS = ['mp4', 'webm', 'mov', 'avi', 'mkv', 'ogv', 'm4v']
-const AUDIO_EXTENSIONS = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma', 'opus']
+const IMAGE_EXTENSIONS = [
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "webp",
+  "bmp",
+  "svg",
+  "ico",
+  "avif",
+];
+const VIDEO_EXTENSIONS = ["mp4", "webm", "mov", "avi", "mkv", "ogv", "m4v"];
+const AUDIO_EXTENSIONS = [
+  "mp3",
+  "wav",
+  "ogg",
+  "flac",
+  "aac",
+  "m4a",
+  "wma",
+  "opus",
+];
 
 const MIME_TYPE_MAP: Record<string, MediaType> = {
   // Images
-  'image/jpeg': 'image',
-  'image/png': 'image',
-  'image/gif': 'image',
-  'image/webp': 'image',
-  'image/bmp': 'image',
-  'image/svg+xml': 'image',
-  'image/avif': 'image',
-  'image/x-icon': 'image',
+  "image/jpeg": "image",
+  "image/png": "image",
+  "image/gif": "image",
+  "image/webp": "image",
+  "image/bmp": "image",
+  "image/svg+xml": "image",
+  "image/avif": "image",
+  "image/x-icon": "image",
   // Videos
-  'video/mp4': 'video',
-  'video/webm': 'video',
-  'video/quicktime': 'video',
-  'video/x-msvideo': 'video',
-  'video/x-matroska': 'video',
-  'video/ogg': 'video',
+  "video/mp4": "video",
+  "video/webm": "video",
+  "video/quicktime": "video",
+  "video/x-msvideo": "video",
+  "video/x-matroska": "video",
+  "video/ogg": "video",
   // Audio
-  'audio/mpeg': 'audio',
-  'audio/wav': 'audio',
-  'audio/ogg': 'audio',
-  'audio/flac': 'audio',
-  'audio/aac': 'audio',
-  'audio/mp4': 'audio',
-  'audio/x-ms-wma': 'audio',
-  'audio/opus': 'audio'
-}
+  "audio/mpeg": "audio",
+  "audio/wav": "audio",
+  "audio/ogg": "audio",
+  "audio/flac": "audio",
+  "audio/aac": "audio",
+  "audio/mp4": "audio",
+  "audio/x-ms-wma": "audio",
+  "audio/opus": "audio",
+};
 
 /**
  * Detect media type from URL extension
@@ -43,31 +62,31 @@ const MIME_TYPE_MAP: Record<string, MediaType> = {
  * @returns The detected media type
  */
 export function getMediaTypeFromUrl(url: string): MediaType {
-  if (!url) return 'unknown'
+  if (!url) return "unknown";
 
   try {
     // Extract path from URL, handling query strings
-    const urlObj = new URL(url, 'https://example.com')
-    const pathname = urlObj.pathname.toLowerCase()
-    const ext = pathname.split('.').pop()
+    const urlObj = new URL(url, "https://example.com");
+    const pathname = urlObj.pathname.toLowerCase();
+    const ext = pathname.split(".").pop();
 
-    if (!ext) return 'unknown'
+    if (!ext) return "unknown";
 
-    if (IMAGE_EXTENSIONS.includes(ext)) return 'image'
-    if (VIDEO_EXTENSIONS.includes(ext)) return 'video'
-    if (AUDIO_EXTENSIONS.includes(ext)) return 'audio'
+    if (IMAGE_EXTENSIONS.includes(ext)) return "image";
+    if (VIDEO_EXTENSIONS.includes(ext)) return "video";
+    if (AUDIO_EXTENSIONS.includes(ext)) return "audio";
 
-    return 'unknown'
+    return "unknown";
   } catch {
     // Fallback for invalid URLs - try simple extension extraction
-    const match = url.match(/\.([a-z0-9]+)(?:\?.*)?$/i)
+    const match = url.match(/\.([a-z0-9]+)(?:\?.*)?$/i);
     if (match) {
-      const ext = match[1].toLowerCase()
-      if (IMAGE_EXTENSIONS.includes(ext)) return 'image'
-      if (VIDEO_EXTENSIONS.includes(ext)) return 'video'
-      if (AUDIO_EXTENSIONS.includes(ext)) return 'audio'
+      const ext = match[1].toLowerCase();
+      if (IMAGE_EXTENSIONS.includes(ext)) return "image";
+      if (VIDEO_EXTENSIONS.includes(ext)) return "video";
+      if (AUDIO_EXTENSIONS.includes(ext)) return "audio";
     }
-    return 'unknown'
+    return "unknown";
   }
 }
 
@@ -77,8 +96,8 @@ export function getMediaTypeFromUrl(url: string): MediaType {
  * @returns The detected media type
  */
 export function getMediaTypeFromMime(mimeType: string): MediaType {
-  if (!mimeType) return 'unknown'
-  return MIME_TYPE_MAP[mimeType.toLowerCase()] || 'unknown'
+  if (!mimeType) return "unknown";
+  return MIME_TYPE_MAP[mimeType.toLowerCase()] || "unknown";
 }
 
 /**
@@ -87,12 +106,12 @@ export function getMediaTypeFromMime(mimeType: string): MediaType {
  * @returns Whether the URL is HTTPS
  */
 export function isSecureUrl(url: string): boolean {
-  if (!url) return false
+  if (!url) return false;
   try {
-    const urlObj = new URL(url)
-    return urlObj.protocol === 'https:'
+    const urlObj = new URL(url);
+    return urlObj.protocol === "https:";
   } catch {
-    return url.toLowerCase().startsWith('https://')
+    return url.toLowerCase().startsWith("https://");
   }
 }
 
@@ -102,12 +121,15 @@ export function isSecureUrl(url: string): boolean {
  * @returns Whether the URL is HTTP or HTTPS
  */
 export function isHttpUrl(url: string): boolean {
-  if (!url) return false
+  if (!url) return false;
   try {
-    const urlObj = new URL(url)
-    return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
+    const urlObj = new URL(url);
+    return urlObj.protocol === "http:" || urlObj.protocol === "https:";
   } catch {
-    return url.toLowerCase().startsWith('http://') || url.toLowerCase().startsWith('https://')
+    return (
+      url.toLowerCase().startsWith("http://") ||
+      url.toLowerCase().startsWith("https://")
+    );
   }
 }
 
@@ -117,7 +139,7 @@ export function isHttpUrl(url: string): boolean {
  * @returns Whether the string is a data URL
  */
 export function isDataUrl(str: string): boolean {
-  return str?.startsWith('data:') ?? false
+  return str?.startsWith("data:") ?? false;
 }
 
 /**
@@ -126,7 +148,7 @@ export function isDataUrl(str: string): boolean {
  * @returns Whether the string is a blob URL
  */
 export function isBlobUrl(str: string): boolean {
-  return str?.startsWith('blob:') ?? false
+  return str?.startsWith("blob:") ?? false;
 }
 
 /**
@@ -135,9 +157,9 @@ export function isBlobUrl(str: string): boolean {
  * @returns The MIME type or null
  */
 export function getMimeFromDataUrl(dataUrl: string): string | null {
-  if (!isDataUrl(dataUrl)) return null
-  const match = dataUrl.match(/^data:([^;,]+)/)
-  return match ? match[1] : null
+  if (!isDataUrl(dataUrl)) return null;
+  const match = dataUrl.match(/^data:([^;,]+)/);
+  return match ? match[1] : null;
 }
 
 /**
@@ -146,28 +168,33 @@ export function getMimeFromDataUrl(dataUrl: string): string | null {
  * @returns Object with validation results
  */
 export function validateMediaUrl(url: string): {
-  isValid: boolean
-  isSecure: boolean
-  mediaType: MediaType
-  error?: string
+  isValid: boolean;
+  isSecure: boolean;
+  mediaType: MediaType;
+  error?: string;
 } {
   if (!url) {
-    return { isValid: false, isSecure: false, mediaType: 'unknown', error: 'URL is empty' }
+    return {
+      isValid: false,
+      isSecure: false,
+      mediaType: "unknown",
+      error: "URL is empty",
+    };
   }
 
   // Data URLs are always valid and secure
   if (isDataUrl(url)) {
-    const mime = getMimeFromDataUrl(url)
+    const mime = getMimeFromDataUrl(url);
     return {
       isValid: true,
       isSecure: true,
-      mediaType: mime ? getMediaTypeFromMime(mime) : 'unknown'
-    }
+      mediaType: mime ? getMediaTypeFromMime(mime) : "unknown",
+    };
   }
 
   // Blob URLs are valid and secure
   if (isBlobUrl(url)) {
-    return { isValid: true, isSecure: true, mediaType: 'unknown' }
+    return { isValid: true, isSecure: true, mediaType: "unknown" };
   }
 
   // HTTP(S) URLs
@@ -175,9 +202,14 @@ export function validateMediaUrl(url: string): {
     return {
       isValid: true,
       isSecure: isSecureUrl(url),
-      mediaType: getMediaTypeFromUrl(url)
-    }
+      mediaType: getMediaTypeFromUrl(url),
+    };
   }
 
-  return { isValid: false, isSecure: false, mediaType: 'unknown', error: 'Invalid URL format' }
+  return {
+    isValid: false,
+    isSecure: false,
+    mediaType: "unknown",
+    error: "Invalid URL format",
+  };
 }
diff --git a/mobile/src/main.tsx b/mobile/src/main.tsx
index 68265ef8..5d736870 100644
--- a/mobile/src/main.tsx
+++ b/mobile/src/main.tsx
@@ -1,42 +1,42 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { HashRouter } from 'react-router-dom'
-import App from './App'
-import './index.css'
-import '@/i18n'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HashRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+import "@/i18n";
 
 // Initialize Capacitor plugins
-import { StatusBar, Style } from '@capacitor/status-bar'
-import { Keyboard } from '@capacitor/keyboard'
-import { App as CapacitorApp } from '@capacitor/app'
+import { StatusBar, Style } from "@capacitor/status-bar";
+import { Keyboard } from "@capacitor/keyboard";
+import { App as CapacitorApp } from "@capacitor/app";
 
 // Configure status bar
 StatusBar.setStyle({ style: Style.Dark }).catch(() => {
   // Ignore errors when running in browser
-})
-StatusBar.setBackgroundColor({ color: '#0f172a' }).catch(() => {})
+});
+StatusBar.setBackgroundColor({ color: "#0f172a" }).catch(() => {});
 
 // Handle keyboard events
-Keyboard.addListener('keyboardWillShow', () => {
-  document.body.classList.add('keyboard-visible')
-})
-Keyboard.addListener('keyboardWillHide', () => {
-  document.body.classList.remove('keyboard-visible')
-})
+Keyboard.addListener("keyboardWillShow", () => {
+  document.body.classList.add("keyboard-visible");
+});
+Keyboard.addListener("keyboardWillHide", () => {
+  document.body.classList.remove("keyboard-visible");
+});
 
 // Handle Android back button
-CapacitorApp.addListener('backButton', ({ canGoBack }) => {
+CapacitorApp.addListener("backButton", ({ canGoBack }) => {
   if (canGoBack) {
-    window.history.back()
+    window.history.back();
   } else {
-    CapacitorApp.exitApp()
+    CapacitorApp.exitApp();
   }
-})
+});
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <HashRouter>
       <App />
     </HashRouter>
-  </React.StrictMode>
-)
+  </React.StrictMode>,
+);
diff --git a/mobile/src/pages/AudioConverterPage.tsx b/mobile/src/pages/AudioConverterPage.tsx
index 835f441b..0e94101c 100644
--- a/mobile/src/pages/AudioConverterPage.tsx
+++ b/mobile/src/pages/AudioConverterPage.tsx
@@ -1,19 +1,25 @@
-import { useState, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useAudioConverterWorker } from '@mobile/hooks/useAudioConverterWorker'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { formatFileSize, formatDuration } from '@mobile/lib/ffmpegFormats'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
+import { useState, useRef, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useAudioConverterWorker } from "@mobile/hooks/useAudioConverterWorker";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { formatFileSize, formatDuration } from "@mobile/lib/ffmpegFormats";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   ArrowLeft,
   Upload,
@@ -21,157 +27,185 @@ import {
   Loader2,
   FileAudio,
   X,
-  AlertCircle
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  AlertCircle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Lightweight audio formats (Web Audio API + lamejs)
 const AUDIO_FORMATS = [
-  { id: 'mp3', label: 'MP3', ext: 'mp3', mimeType: 'audio/mpeg' },
-  { id: 'wav', label: 'WAV', ext: 'wav', mimeType: 'audio/wav' }
-]
+  { id: "mp3", label: "MP3", ext: "mp3", mimeType: "audio/mpeg" },
+  { id: "wav", label: "WAV", ext: "wav", mimeType: "audio/wav" },
+];
 
 const AUDIO_BITRATES = [
-  { id: '128', label: '128 kbps', value: 128 },
-  { id: '192', label: '192 kbps (Recommended)', value: 192 },
-  { id: '256', label: '256 kbps', value: 256 },
-  { id: '320', label: '320 kbps (High Quality)', value: 320 }
-]
+  { id: "128", label: "128 kbps", value: 128 },
+  { id: "192", label: "192 kbps (Recommended)", value: 192 },
+  { id: "256", label: "256 kbps", value: 256 },
+  { id: "320", label: "320 kbps (High Quality)", value: 320 },
+];
 
 export function AudioConverterPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadBlob } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const audioRef = useRef<HTMLAudioElement>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadBlob } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
 
-  const [audioFile, setAudioFile] = useState<File | null>(null)
-  const [audioUrl, setAudioUrl] = useState<string | null>(null)
-  const [audioDuration, setAudioDuration] = useState<number | null>(null)
-  const [convertedUrl, setConvertedUrl] = useState<string | null>(null)
-  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [outputFormat, setOutputFormat] = useState<'mp3' | 'wav'>('mp3')
-  const [bitrate, setBitrate] = useState(192)
-  const [error, setError] = useState<string | null>(null)
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [audioDuration, setAudioDuration] = useState<number | null>(null);
+  const [convertedUrl, setConvertedUrl] = useState<string | null>(null);
+  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [outputFormat, setOutputFormat] = useState<"mp3" | "wav">("mp3");
+  const [bitrate, setBitrate] = useState(192);
+  const [error, setError] = useState<string | null>(null);
 
   const { convert } = useAudioConverterWorker({
     onProgress: (progressValue) => {
-      setProgress(progressValue)
+      setProgress(progressValue);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+    },
+  });
 
-  const handleFileSelect = useCallback((file: File) => {
-    // Only accept MP3 and WAV files
-    if (!file.name.match(/\.(mp3|wav)$/i)) {
-      setError(t('freeTools.audioConverter.invalidFile', 'Please select an MP3 or WAV file'))
-      return
-    }
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      // Only accept MP3 and WAV files
+      if (!file.name.match(/\.(mp3|wav)$/i)) {
+        setError(
+          t(
+            "freeTools.audioConverter.invalidFile",
+            "Please select an MP3 or WAV file",
+          ),
+        );
+        return;
+      }
 
-    // Clean up previous URLs
-    if (audioUrl) URL.revokeObjectURL(audioUrl)
-    if (convertedUrl) URL.revokeObjectURL(convertedUrl)
+      // Clean up previous URLs
+      if (audioUrl) URL.revokeObjectURL(audioUrl);
+      if (convertedUrl) URL.revokeObjectURL(convertedUrl);
 
-    const url = URL.createObjectURL(file)
-    setAudioFile(file)
-    setAudioUrl(url)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    setError(null)
-    setProgress(0)
+      const url = URL.createObjectURL(file);
+      setAudioFile(file);
+      setAudioUrl(url);
+      setConvertedUrl(null);
+      setConvertedBlob(null);
+      setError(null);
+      setProgress(0);
 
-    // Get duration from audio element
-    const audio = new Audio(url)
-    audio.addEventListener('loadedmetadata', () => {
-      setAudioDuration(audio.duration)
-    })
-  }, [audioUrl, convertedUrl, t])
+      // Get duration from audio element
+      const audio = new Audio(url);
+      audio.addEventListener("loadedmetadata", () => {
+        setAudioDuration(audio.duration);
+      });
+    },
+    [audioUrl, convertedUrl, t],
+  );
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    if (isProcessing) return
-    const file = e.dataTransfer.files[0]
-    if (file) handleFileSelect(file)
-  }, [handleFileSelect, isProcessing])
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
+    },
+    [handleFileSelect, isProcessing],
+  );
 
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) handleFileSelect(file)
-    e.target.value = ''
-  }, [handleFileSelect])
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleFileSelect(file);
+      e.target.value = "";
+    },
+    [handleFileSelect],
+  );
 
   const clearInput = useCallback(() => {
-    if (audioUrl) URL.revokeObjectURL(audioUrl)
-    if (convertedUrl) URL.revokeObjectURL(convertedUrl)
-    setAudioFile(null)
-    setAudioUrl(null)
-    setAudioDuration(null)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    setError(null)
-    setProgress(0)
-    if (fileInputRef.current) fileInputRef.current.value = ''
-  }, [audioUrl, convertedUrl])
+    if (audioUrl) URL.revokeObjectURL(audioUrl);
+    if (convertedUrl) URL.revokeObjectURL(convertedUrl);
+    setAudioFile(null);
+    setAudioUrl(null);
+    setAudioDuration(null);
+    setConvertedUrl(null);
+    setConvertedBlob(null);
+    setError(null);
+    setProgress(0);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [audioUrl, convertedUrl]);
 
   const handleConvert = async () => {
-    if (!audioFile) return
+    if (!audioFile) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    setProgress(0)
+    setIsProcessing(true);
+    setError(null);
+    setConvertedUrl(null);
+    setConvertedBlob(null);
+    setProgress(0);
 
-    const format = AUDIO_FORMATS.find(f => f.id === outputFormat)
-    if (!format) return
+    const format = AUDIO_FORMATS.find((f) => f.id === outputFormat);
+    if (!format) return;
 
     try {
-      const arrayBuffer = await audioFile.arrayBuffer()
+      const arrayBuffer = await audioFile.arrayBuffer();
 
-      const result = await convert(arrayBuffer, audioFile.name, outputFormat, bitrate)
+      const result = await convert(
+        arrayBuffer,
+        audioFile.name,
+        outputFormat,
+        bitrate,
+      );
 
-      const blob = new Blob([result.data], { type: format.mimeType })
-      const url = URL.createObjectURL(blob)
+      const blob = new Blob([result.data], { type: format.mimeType });
+      const url = URL.createObjectURL(blob);
 
-      setConvertedBlob(blob)
-      setConvertedUrl(url)
-      setProgress(100)
+      setConvertedBlob(blob);
+      setConvertedUrl(url);
+      setProgress(100);
     } catch (err) {
-      console.error('Conversion failed:', err)
-      setError(err instanceof Error ? err.message : 'Conversion failed')
+      console.error("Conversion failed:", err);
+      setError(err instanceof Error ? err.message : "Conversion failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    if (!convertedBlob || !audioFile) return
+    if (!convertedBlob || !audioFile) return;
 
-    const format = AUDIO_FORMATS.find(f => f.id === outputFormat)
-    const filename = audioFile.name.replace(/\.[^.]+$/, `.${format?.ext || outputFormat}`)
+    const format = AUDIO_FORMATS.find((f) => f.id === outputFormat);
+    const filename = audioFile.name.replace(
+      /\.[^.]+$/,
+      `.${format?.ext || outputFormat}`,
+    );
 
-    await downloadBlob(convertedBlob, filename)
-  }
+    await downloadBlob(convertedBlob, filename);
+  };
 
-  const selectedFormat = AUDIO_FORMATS.find(f => f.id === outputFormat)
+  const selectedFormat = AUDIO_FORMATS.find((f) => f.id === outputFormat);
 
   return (
     <div className="container mx-auto p-4 max-w-4xl space-y-4">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.audioConverter.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.audioConverter.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.audioConverter.description')}
+            {t("freeTools.audioConverter.description")}
           </p>
         </div>
       </div>
@@ -181,10 +215,13 @@ export function AudioConverterPage() {
         <CardHeader className="pb-3">
           <CardTitle className="text-base flex items-center gap-2">
             <Upload className="h-4 w-4" />
-            {t('freeTools.audioConverter.inputAudio', 'Input Audio')}
+            {t("freeTools.audioConverter.inputAudio", "Input Audio")}
           </CardTitle>
           <CardDescription className="text-xs">
-            {t('freeTools.audioConverter.supportedFormats', 'MP3 ↔ WAV conversion')}
+            {t(
+              "freeTools.audioConverter.supportedFormats",
+              "MP3 ↔ WAV conversion",
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -192,7 +229,7 @@ export function AudioConverterPage() {
             <div
               className={cn(
                 "border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors",
-                "hover:border-primary hover:bg-primary/5"
+                "hover:border-primary hover:bg-primary/5",
               )}
               onClick={() => fileInputRef.current?.click()}
               onDrop={handleDrop}
@@ -200,7 +237,10 @@ export function AudioConverterPage() {
             >
               <FileAudio className="h-10 w-10 mx-auto mb-3 text-muted-foreground" />
               <p className="text-sm text-muted-foreground mb-1">
-                {t('freeTools.audioConverter.selectAudio', 'Click or drag MP3/WAV file here')}
+                {t(
+                  "freeTools.audioConverter.selectAudio",
+                  "Click or drag MP3/WAV file here",
+                )}
               </p>
             </div>
           ) : (
@@ -209,18 +249,31 @@ export function AudioConverterPage() {
                 <div className="flex items-center gap-2 flex-1 min-w-0">
                   <FileAudio className="h-8 w-8 text-primary flex-shrink-0" />
                   <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium truncate">{audioFile.name}</p>
+                    <p className="text-sm font-medium truncate">
+                      {audioFile.name}
+                    </p>
                     <p className="text-xs text-muted-foreground">
-                      {formatFileSize(audioFile.size)} • {formatDuration(audioDuration || 0)}
+                      {formatFileSize(audioFile.size)} •{" "}
+                      {formatDuration(audioDuration || 0)}
                     </p>
                   </div>
                 </div>
-                <Button variant="ghost" size="icon" onClick={clearInput} className="flex-shrink-0">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={clearInput}
+                  className="flex-shrink-0"
+                >
                   <X className="h-4 w-4" />
                 </Button>
               </div>
               {audioUrl && (
-                <audio ref={audioRef} src={audioUrl} controls className="w-full h-10" />
+                <audio
+                  ref={audioRef}
+                  src={audioUrl}
+                  controls
+                  className="w-full h-10"
+                />
               )}
             </div>
           )}
@@ -238,13 +291,21 @@ export function AudioConverterPage() {
       {audioFile && (
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">{t('common.settings', 'Settings')}</CardTitle>
+            <CardTitle className="text-base">
+              {t("common.settings", "Settings")}
+            </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <label className="text-xs font-medium">{t('freeTools.audioConverter.outputFormat', 'Output Format')}</label>
-                <Select value={outputFormat} onValueChange={(v) => setOutputFormat(v as 'mp3' | 'wav')} disabled={isProcessing}>
+                <label className="text-xs font-medium">
+                  {t("freeTools.audioConverter.outputFormat", "Output Format")}
+                </label>
+                <Select
+                  value={outputFormat}
+                  onValueChange={(v) => setOutputFormat(v as "mp3" | "wav")}
+                  disabled={isProcessing}
+                >
                   <SelectTrigger className="h-9">
                     <SelectValue />
                   </SelectTrigger>
@@ -258,10 +319,16 @@ export function AudioConverterPage() {
                 </Select>
               </div>
 
-              {outputFormat === 'mp3' && (
+              {outputFormat === "mp3" && (
                 <div className="space-y-1.5">
-                  <label className="text-xs font-medium">{t('freeTools.audioConverter.bitrate', 'Bitrate')}</label>
-                  <Select value={String(bitrate)} onValueChange={(v) => setBitrate(Number(v))} disabled={isProcessing}>
+                  <label className="text-xs font-medium">
+                    {t("freeTools.audioConverter.bitrate", "Bitrate")}
+                  </label>
+                  <Select
+                    value={String(bitrate)}
+                    onValueChange={(v) => setBitrate(Number(v))}
+                    disabled={isProcessing}
+                  >
                     <SelectTrigger className="h-9">
                       <SelectValue />
                     </SelectTrigger>
@@ -285,10 +352,10 @@ export function AudioConverterPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('freeTools.audioConverter.converting', 'Converting...')}
+                  {t("freeTools.audioConverter.converting", "Converting...")}
                 </>
               ) : (
-                t('freeTools.audioConverter.convert', 'Convert Audio')
+                t("freeTools.audioConverter.convert", "Convert Audio")
               )}
             </Button>
 
@@ -317,7 +384,7 @@ export function AudioConverterPage() {
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <Download className="h-4 w-4" />
-              {t('freeTools.audioConverter.result', 'Result')}
+              {t("freeTools.audioConverter.result", "Result")}
             </CardTitle>
             <CardDescription className="text-xs">
               {selectedFormat?.label} • {formatFileSize(convertedBlob.size)}
@@ -327,11 +394,11 @@ export function AudioConverterPage() {
             <audio src={convertedUrl} controls className="w-full h-10" />
             <Button className="w-full" onClick={handleDownload}>
               <Download className="mr-2 h-4 w-4" />
-              {t('common.download', 'Download')}
+              {t("common.download", "Download")}
             </Button>
           </CardContent>
         </Card>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/FaceEnhancerPage.tsx b/mobile/src/pages/FaceEnhancerPage.tsx
index ffd50dba..9a88f35d 100644
--- a/mobile/src/pages/FaceEnhancerPage.tsx
+++ b/mobile/src/pages/FaceEnhancerPage.tsx
@@ -1,12 +1,18 @@
-import { useState, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useFaceEnhancerWorker } from '@mobile/hooks/useFaceEnhancerWorker'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { formatFileSize } from '@mobile/lib/ffmpegFormats'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
+import { useState, useRef, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useFaceEnhancerWorker } from "@mobile/hooks/useFaceEnhancerWorker";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { formatFileSize } from "@mobile/lib/ffmpegFormats";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
 import {
   ArrowLeft,
   Upload,
@@ -16,180 +22,200 @@ import {
   X,
   AlertCircle,
   Image as ImageIcon,
-  UserCircle
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  UserCircle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export function FaceEnhancerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadFromDataUrl } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadFromDataUrl } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
 
-  const [imageFile, setImageFile] = useState<File | null>(null)
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
-  const [enhancedUrl, setEnhancedUrl] = useState<string | null>(null)
-  const [faceCount, setFaceCount] = useState(0)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isInitializing, setIsInitializing] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [phase, setPhase] = useState<string>('')
-  const [error, setError] = useState<string | null>(null)
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [enhancedUrl, setEnhancedUrl] = useState<string | null>(null);
+  const [faceCount, setFaceCount] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isInitializing, setIsInitializing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [phase, setPhase] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
 
   const { initModel, enhance, hasFailed, retryWorker } = useFaceEnhancerWorker({
     onPhase: (p) => {
-      setPhase(p)
-      if (p === 'download') setProgress(5)
-      else if (p === 'loading') setProgress(95)
-      else if (p === 'detect') setProgress(10)
-      else if (p === 'enhance') setProgress(30)
+      setPhase(p);
+      if (p === "download") setProgress(5);
+      else if (p === "loading") setProgress(95);
+      else if (p === "detect") setProgress(10);
+      else if (p === "enhance") setProgress(30);
     },
     onProgress: (p, progressValue) => {
-      if (p === 'download') {
-        setProgress(Math.round(progressValue * 0.9))
-      } else if (p === 'detect' || p === 'enhance') {
-        setProgress(Math.round(progressValue))
+      if (p === "download") {
+        setProgress(Math.round(progressValue * 0.9));
+      } else if (p === "detect" || p === "enhance") {
+        setProgress(Math.round(progressValue));
       }
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      setIsInitializing(false)
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      setIsInitializing(false);
+    },
+  });
 
-  const handleFileSelect = useCallback((file: File) => {
-    if (!file.type.startsWith('image/')) {
-      setError(t('freeTools.faceEnhancer.invalidFile', 'Please select a valid image file'))
-      return
-    }
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("image/")) {
+        setError(
+          t(
+            "freeTools.faceEnhancer.invalidFile",
+            "Please select a valid image file",
+          ),
+        );
+        return;
+      }
 
-    // Clean up previous URLs
-    if (imageUrl) URL.revokeObjectURL(imageUrl)
-    if (enhancedUrl) URL.revokeObjectURL(enhancedUrl)
+      // Clean up previous URLs
+      if (imageUrl) URL.revokeObjectURL(imageUrl);
+      if (enhancedUrl) URL.revokeObjectURL(enhancedUrl);
 
-    const url = URL.createObjectURL(file)
-    setImageFile(file)
-    setImageUrl(url)
-    setEnhancedUrl(null)
-    setFaceCount(0)
-    setError(null)
-    setProgress(0)
-    setPhase('')
-  }, [imageUrl, enhancedUrl, t])
+      const url = URL.createObjectURL(file);
+      setImageFile(file);
+      setImageUrl(url);
+      setEnhancedUrl(null);
+      setFaceCount(0);
+      setError(null);
+      setProgress(0);
+      setPhase("");
+    },
+    [imageUrl, enhancedUrl, t],
+  );
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    if (isProcessing || isInitializing) return
-    const file = e.dataTransfer.files[0]
-    if (file) handleFileSelect(file)
-  }, [handleFileSelect, isProcessing, isInitializing])
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (isProcessing || isInitializing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
+    },
+    [handleFileSelect, isProcessing, isInitializing],
+  );
 
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) handleFileSelect(file)
-    e.target.value = ''
-  }, [handleFileSelect])
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleFileSelect(file);
+      e.target.value = "";
+    },
+    [handleFileSelect],
+  );
 
   const clearInput = useCallback(() => {
-    if (imageUrl) URL.revokeObjectURL(imageUrl)
-    if (enhancedUrl) URL.revokeObjectURL(enhancedUrl)
-    setImageFile(null)
-    setImageUrl(null)
-    setEnhancedUrl(null)
-    setFaceCount(0)
-    setError(null)
-    setProgress(0)
-    setPhase('')
-    if (fileInputRef.current) fileInputRef.current.value = ''
-  }, [imageUrl, enhancedUrl])
+    if (imageUrl) URL.revokeObjectURL(imageUrl);
+    if (enhancedUrl) URL.revokeObjectURL(enhancedUrl);
+    setImageFile(null);
+    setImageUrl(null);
+    setEnhancedUrl(null);
+    setFaceCount(0);
+    setError(null);
+    setProgress(0);
+    setPhase("");
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [imageUrl, enhancedUrl]);
 
   const handleEnhance = async () => {
-    if (!imageFile || !imageUrl || !canvasRef.current) return
+    if (!imageFile || !imageUrl || !canvasRef.current) return;
 
-    setIsProcessing(true)
-    setIsInitializing(true)
-    setError(null)
-    setEnhancedUrl(null)
-    setFaceCount(0)
-    setProgress(0)
+    setIsProcessing(true);
+    setIsInitializing(true);
+    setError(null);
+    setEnhancedUrl(null);
+    setFaceCount(0);
+    setProgress(0);
 
     try {
       // Initialize model (downloads if needed)
-      await initModel()
-      setIsInitializing(false)
+      await initModel();
+      setIsInitializing(false);
 
       // Load image to canvas
-      const img = new Image()
+      const img = new Image();
       await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve()
-        img.onerror = () => reject(new Error('Failed to load image'))
-        img.src = imageUrl
-      })
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error("Failed to load image"));
+        img.src = imageUrl;
+      });
 
-      const canvas = canvasRef.current
-      canvas.width = img.width
-      canvas.height = img.height
-      const ctx = canvas.getContext('2d')!
-      ctx.drawImage(img, 0, 0)
+      const canvas = canvasRef.current;
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d")!;
+      ctx.drawImage(img, 0, 0);
 
-      const imageData = ctx.getImageData(0, 0, img.width, img.height)
+      const imageData = ctx.getImageData(0, 0, img.width, img.height);
 
       // Enhance faces
-      const result = await enhance(imageData)
-      setEnhancedUrl(result.dataUrl)
-      setFaceCount(result.faces)
-      setProgress(100)
+      const result = await enhance(imageData);
+      setEnhancedUrl(result.dataUrl);
+      setFaceCount(result.faces);
+      setProgress(100);
     } catch (err) {
-      console.error('Enhancement failed:', err)
-      setError(err instanceof Error ? err.message : 'Enhancement failed')
+      console.error("Enhancement failed:", err);
+      setError(err instanceof Error ? err.message : "Enhancement failed");
     } finally {
-      setIsProcessing(false)
-      setIsInitializing(false)
+      setIsProcessing(false);
+      setIsInitializing(false);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    if (!enhancedUrl || !imageFile) return
+    if (!enhancedUrl || !imageFile) return;
 
-    const filename = imageFile.name.replace(/\.[^.]+$/, '_enhanced.png')
+    const filename = imageFile.name.replace(/\.[^.]+$/, "_enhanced.png");
 
-    await downloadFromDataUrl(enhancedUrl, filename)
-  }
+    await downloadFromDataUrl(enhancedUrl, filename);
+  };
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const getPhaseLabel = () => {
     switch (phase) {
-      case 'download':
-        return t('freeTools.faceEnhancer.downloading', 'Downloading models...')
-      case 'loading':
-        return t('freeTools.faceEnhancer.loading', 'Loading models...')
-      case 'detect':
-        return t('freeTools.faceEnhancer.detecting', 'Detecting faces...')
-      case 'enhance':
-        return t('freeTools.faceEnhancer.enhancing', 'Enhancing faces...')
+      case "download":
+        return t("freeTools.faceEnhancer.downloading", "Downloading models...");
+      case "loading":
+        return t("freeTools.faceEnhancer.loading", "Loading models...");
+      case "detect":
+        return t("freeTools.faceEnhancer.detecting", "Detecting faces...");
+      case "enhance":
+        return t("freeTools.faceEnhancer.enhancing", "Enhancing faces...");
       default:
-        return t('freeTools.faceEnhancer.processing', 'Processing...')
+        return t("freeTools.faceEnhancer.processing", "Processing...");
     }
-  }
+  };
 
   return (
     <div className="container mx-auto p-4 max-w-4xl space-y-4">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.faceEnhancer.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.faceEnhancer.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.faceEnhancer.description')}
+            {t("freeTools.faceEnhancer.description")}
           </p>
         </div>
       </div>
@@ -199,10 +225,13 @@ export function FaceEnhancerPage() {
         <CardHeader className="pb-3">
           <CardTitle className="text-base flex items-center gap-2">
             <Upload className="h-4 w-4" />
-            {t('freeTools.faceEnhancer.inputImage', 'Input Image')}
+            {t("freeTools.faceEnhancer.inputImage", "Input Image")}
           </CardTitle>
           <CardDescription className="text-xs">
-            {t('freeTools.faceEnhancer.selectImageWithFaces', 'Select an image with faces to enhance')}
+            {t(
+              "freeTools.faceEnhancer.selectImageWithFaces",
+              "Select an image with faces to enhance",
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -210,7 +239,7 @@ export function FaceEnhancerPage() {
             <div
               className={cn(
                 "border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors",
-                "hover:border-primary hover:bg-primary/5"
+                "hover:border-primary hover:bg-primary/5",
               )}
               onClick={() => fileInputRef.current?.click()}
               onDrop={handleDrop}
@@ -218,10 +247,16 @@ export function FaceEnhancerPage() {
             >
               <UserCircle className="h-10 w-10 mx-auto mb-3 text-muted-foreground" />
               <p className="text-sm text-muted-foreground mb-1">
-                {t('freeTools.faceEnhancer.selectImage', 'Click or drag image here')}
+                {t(
+                  "freeTools.faceEnhancer.selectImage",
+                  "Click or drag image here",
+                )}
               </p>
               <p className="text-xs text-muted-foreground">
-                {t('freeTools.faceEnhancer.modelsInfo', 'Uses YOLO + GFPGAN AI models')}
+                {t(
+                  "freeTools.faceEnhancer.modelsInfo",
+                  "Uses YOLO + GFPGAN AI models",
+                )}
               </p>
             </div>
           ) : (
@@ -276,7 +311,7 @@ export function FaceEnhancerPage() {
               ) : (
                 <>
                   <Sparkles className="mr-2 h-4 w-4" />
-                  {t('freeTools.faceEnhancer.enhance', 'Enhance Faces')}
+                  {t("freeTools.faceEnhancer.enhance", "Enhance Faces")}
                 </>
               )}
             </Button>
@@ -284,13 +319,18 @@ export function FaceEnhancerPage() {
             {isProcessing && (
               <div className="space-y-2">
                 <Progress value={progress} className="h-2" />
-                <p className="text-xs text-center text-muted-foreground">{progress}%</p>
+                <p className="text-xs text-center text-muted-foreground">
+                  {progress}%
+                </p>
               </div>
             )}
 
             {isInitializing && (
               <p className="text-xs text-center text-muted-foreground">
-                {t('freeTools.faceEnhancer.firstTimeDownload', 'First time? Models will be downloaded (~350MB)')}
+                {t(
+                  "freeTools.faceEnhancer.firstTimeDownload",
+                  "First time? Models will be downloaded (~350MB)",
+                )}
               </p>
             )}
 
@@ -299,7 +339,7 @@ export function FaceEnhancerPage() {
                 <AlertCircle className="h-4 w-4 text-destructive" />
                 <span className="text-sm text-destructive flex-1">{error}</span>
                 <Button variant="outline" size="sm" onClick={handleRetry}>
-                  {t('common.retry', 'Retry')}
+                  {t("common.retry", "Retry")}
                 </Button>
               </div>
             )}
@@ -320,13 +360,16 @@ export function FaceEnhancerPage() {
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <Download className="h-4 w-4" />
-              {t('freeTools.faceEnhancer.result', 'Enhanced Result')}
+              {t("freeTools.faceEnhancer.result", "Enhanced Result")}
             </CardTitle>
             <CardDescription className="text-xs">
               {faceCount > 0
-                ? t('freeTools.faceEnhancer.facesEnhanced', '{{count}} face(s) enhanced', { count: faceCount })
-                : t('freeTools.faceEnhancer.noFacesFound', 'No faces found')
-              }
+                ? t(
+                    "freeTools.faceEnhancer.facesEnhanced",
+                    "{{count}} face(s) enhanced",
+                    { count: faceCount },
+                  )
+                : t("freeTools.faceEnhancer.noFacesFound", "No faces found")}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-3">
@@ -340,10 +383,10 @@ export function FaceEnhancerPage() {
             <div className="flex gap-2">
               <Button className="flex-1" onClick={handleDownload}>
                 <Download className="mr-2 h-4 w-4" />
-                {t('common.download', 'Download')}
+                {t("common.download", "Download")}
               </Button>
               <Button variant="outline" onClick={clearInput}>
-                {t('freeTools.faceEnhancer.newImage', 'New Image')}
+                {t("freeTools.faceEnhancer.newImage", "New Image")}
               </Button>
             </div>
           </CardContent>
@@ -353,5 +396,5 @@ export function FaceEnhancerPage() {
       {/* Hidden canvas for processing */}
       <canvas ref={canvasRef} className="hidden" />
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/ImageConverterPage.tsx b/mobile/src/pages/ImageConverterPage.tsx
index f4fb55f2..6a4ba11e 100644
--- a/mobile/src/pages/ImageConverterPage.tsx
+++ b/mobile/src/pages/ImageConverterPage.tsx
@@ -1,19 +1,25 @@
-import { useState, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-import { Slider } from '@/components/ui/slider'
-import { Label } from '@/components/ui/label'
+import { useState, useRef, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   ArrowLeft,
   Upload,
@@ -21,21 +27,39 @@ import {
   Loader2,
   Image as ImageIcon,
   X,
-  AlertCircle
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  AlertCircle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Lightweight image formats (Canvas API)
 const IMAGE_FORMATS = [
-  { id: 'jpg', label: 'JPEG', ext: 'jpg', mimeType: 'image/jpeg', supportsQuality: true },
-  { id: 'png', label: 'PNG', ext: 'png', mimeType: 'image/png', supportsQuality: false },
-  { id: 'webp', label: 'WebP', ext: 'webp', mimeType: 'image/webp', supportsQuality: true }
-]
+  {
+    id: "jpg",
+    label: "JPEG",
+    ext: "jpg",
+    mimeType: "image/jpeg",
+    supportsQuality: true,
+  },
+  {
+    id: "png",
+    label: "PNG",
+    ext: "png",
+    mimeType: "image/png",
+    supportsQuality: false,
+  },
+  {
+    id: "webp",
+    label: "WebP",
+    ext: "webp",
+    mimeType: "image/webp",
+    supportsQuality: true,
+  },
+];
 
 function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / 1024 / 1024).toFixed(2)} MB`
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
 }
 
 /**
@@ -45,168 +69,196 @@ async function convertImage(
   file: File,
   outputFormat: string,
   quality: number,
-  onProgress?: (progress: number) => void
+  onProgress?: (progress: number) => void,
 ): Promise<Blob> {
-  onProgress?.(10)
+  onProgress?.(10);
 
   // Load image
-  const img = new Image()
-  const imageUrl = URL.createObjectURL(file)
+  const img = new Image();
+  const imageUrl = URL.createObjectURL(file);
 
   await new Promise<void>((resolve, reject) => {
-    img.onload = () => resolve()
-    img.onerror = () => reject(new Error('Failed to load image'))
-    img.src = imageUrl
-  })
+    img.onload = () => resolve();
+    img.onerror = () => reject(new Error("Failed to load image"));
+    img.src = imageUrl;
+  });
 
-  URL.revokeObjectURL(imageUrl)
-  onProgress?.(30)
+  URL.revokeObjectURL(imageUrl);
+  onProgress?.(30);
 
   // Create canvas and draw image
-  const canvas = document.createElement('canvas')
-  canvas.width = img.naturalWidth
-  canvas.height = img.naturalHeight
+  const canvas = document.createElement("canvas");
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
 
-  const ctx = canvas.getContext('2d')
+  const ctx = canvas.getContext("2d");
   if (!ctx) {
-    throw new Error('Failed to get canvas context')
+    throw new Error("Failed to get canvas context");
   }
 
   // Fill with white background for JPEG (no transparency support)
-  const format = IMAGE_FORMATS.find(f => f.id === outputFormat)
-  if (format?.mimeType === 'image/jpeg') {
-    ctx.fillStyle = '#FFFFFF'
-    ctx.fillRect(0, 0, canvas.width, canvas.height)
+  const format = IMAGE_FORMATS.find((f) => f.id === outputFormat);
+  if (format?.mimeType === "image/jpeg") {
+    ctx.fillStyle = "#FFFFFF";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
   }
 
-  ctx.drawImage(img, 0, 0)
-  onProgress?.(60)
+  ctx.drawImage(img, 0, 0);
+  onProgress?.(60);
 
   // Convert to blob
   const blob = await new Promise<Blob>((resolve, reject) => {
     canvas.toBlob(
       (blob) => {
         if (blob) {
-          resolve(blob)
+          resolve(blob);
         } else {
-          reject(new Error('Failed to convert image'))
+          reject(new Error("Failed to convert image"));
         }
       },
-      format?.mimeType || 'image/jpeg',
-      format?.supportsQuality ? quality / 100 : undefined
-    )
-  })
+      format?.mimeType || "image/jpeg",
+      format?.supportsQuality ? quality / 100 : undefined,
+    );
+  });
 
-  onProgress?.(100)
-  return blob
+  onProgress?.(100);
+  return blob;
 }
 
 export function ImageConverterPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadBlob } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const [imageFile, setImageFile] = useState<File | null>(null)
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
-  const [convertedUrl, setConvertedUrl] = useState<string | null>(null)
-  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [outputFormat, setOutputFormat] = useState('jpg')
-  const [quality, setQuality] = useState(85)
-  const [error, setError] = useState<string | null>(null)
-
-  const handleFileSelect = useCallback((file: File) => {
-    if (!file.type.startsWith('image/')) {
-      setError(t('freeTools.imageConverter.invalidFile', 'Please select a valid image file'))
-      return
-    }
-
-    // Clean up previous URLs
-    if (imageUrl) URL.revokeObjectURL(imageUrl)
-    if (convertedUrl) URL.revokeObjectURL(convertedUrl)
-
-    const url = URL.createObjectURL(file)
-    setImageFile(file)
-    setImageUrl(url)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    setError(null)
-    setProgress(0)
-  }, [imageUrl, convertedUrl, t])
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    if (isProcessing) return
-    const file = e.dataTransfer.files[0]
-    if (file) handleFileSelect(file)
-  }, [handleFileSelect, isProcessing])
-
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) handleFileSelect(file)
-    e.target.value = ''
-  }, [handleFileSelect])
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadBlob } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [convertedUrl, setConvertedUrl] = useState<string | null>(null);
+  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [outputFormat, setOutputFormat] = useState("jpg");
+  const [quality, setQuality] = useState(85);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("image/")) {
+        setError(
+          t(
+            "freeTools.imageConverter.invalidFile",
+            "Please select a valid image file",
+          ),
+        );
+        return;
+      }
+
+      // Clean up previous URLs
+      if (imageUrl) URL.revokeObjectURL(imageUrl);
+      if (convertedUrl) URL.revokeObjectURL(convertedUrl);
+
+      const url = URL.createObjectURL(file);
+      setImageFile(file);
+      setImageUrl(url);
+      setConvertedUrl(null);
+      setConvertedBlob(null);
+      setError(null);
+      setProgress(0);
+    },
+    [imageUrl, convertedUrl, t],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
+    },
+    [handleFileSelect, isProcessing],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleFileSelect(file);
+      e.target.value = "";
+    },
+    [handleFileSelect],
+  );
 
   const clearInput = useCallback(() => {
-    if (imageUrl) URL.revokeObjectURL(imageUrl)
-    if (convertedUrl) URL.revokeObjectURL(convertedUrl)
-    setImageFile(null)
-    setImageUrl(null)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    setError(null)
-    setProgress(0)
-    if (fileInputRef.current) fileInputRef.current.value = ''
-  }, [imageUrl, convertedUrl])
+    if (imageUrl) URL.revokeObjectURL(imageUrl);
+    if (convertedUrl) URL.revokeObjectURL(convertedUrl);
+    setImageFile(null);
+    setImageUrl(null);
+    setConvertedUrl(null);
+    setConvertedBlob(null);
+    setError(null);
+    setProgress(0);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [imageUrl, convertedUrl]);
 
   const handleConvert = async () => {
-    if (!imageFile) return
+    if (!imageFile) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    setProgress(0)
+    setIsProcessing(true);
+    setError(null);
+    setConvertedUrl(null);
+    setConvertedBlob(null);
+    setProgress(0);
 
     try {
-      const blob = await convertImage(imageFile, outputFormat, quality, setProgress)
-      const url = URL.createObjectURL(blob)
-
-      setConvertedBlob(blob)
-      setConvertedUrl(url)
-      setProgress(100)
+      const blob = await convertImage(
+        imageFile,
+        outputFormat,
+        quality,
+        setProgress,
+      );
+      const url = URL.createObjectURL(blob);
+
+      setConvertedBlob(blob);
+      setConvertedUrl(url);
+      setProgress(100);
     } catch (err) {
-      console.error('Conversion failed:', err)
-      setError(err instanceof Error ? err.message : 'Conversion failed')
+      console.error("Conversion failed:", err);
+      setError(err instanceof Error ? err.message : "Conversion failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    if (!convertedBlob || !imageFile) return
+    if (!convertedBlob || !imageFile) return;
 
-    const format = IMAGE_FORMATS.find(f => f.id === outputFormat)
-    const filename = imageFile.name.replace(/\.[^.]+$/, `.${format?.ext || outputFormat}`)
+    const format = IMAGE_FORMATS.find((f) => f.id === outputFormat);
+    const filename = imageFile.name.replace(
+      /\.[^.]+$/,
+      `.${format?.ext || outputFormat}`,
+    );
 
-    await downloadBlob(convertedBlob, filename)
-  }
+    await downloadBlob(convertedBlob, filename);
+  };
 
-  const selectedFormat = IMAGE_FORMATS.find(f => f.id === outputFormat)
+  const selectedFormat = IMAGE_FORMATS.find((f) => f.id === outputFormat);
 
   return (
     <div className="container mx-auto p-4 max-w-4xl space-y-4">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.imageConverter.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.imageConverter.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.imageConverter.description')}
+            {t("freeTools.imageConverter.description")}
           </p>
         </div>
       </div>
@@ -216,10 +268,13 @@ export function ImageConverterPage() {
         <CardHeader className="pb-3">
           <CardTitle className="text-base flex items-center gap-2">
             <Upload className="h-4 w-4" />
-            {t('freeTools.imageConverter.inputImage', 'Input Image')}
+            {t("freeTools.imageConverter.inputImage", "Input Image")}
           </CardTitle>
           <CardDescription className="text-xs">
-            {t('freeTools.imageConverter.supportedFormats', 'JPG, PNG, WebP, GIF, BMP → JPG/PNG/WebP')}
+            {t(
+              "freeTools.imageConverter.supportedFormats",
+              "JPG, PNG, WebP, GIF, BMP → JPG/PNG/WebP",
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -227,7 +282,7 @@ export function ImageConverterPage() {
             <div
               className={cn(
                 "border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors",
-                "hover:border-primary hover:bg-primary/5"
+                "hover:border-primary hover:bg-primary/5",
               )}
               onClick={() => fileInputRef.current?.click()}
               onDrop={handleDrop}
@@ -235,7 +290,10 @@ export function ImageConverterPage() {
             >
               <ImageIcon className="h-10 w-10 mx-auto mb-3 text-muted-foreground" />
               <p className="text-sm text-muted-foreground mb-1">
-                {t('freeTools.imageConverter.selectImage', 'Click or drag image here')}
+                {t(
+                  "freeTools.imageConverter.selectImage",
+                  "Click or drag image here",
+                )}
               </p>
             </div>
           ) : (
@@ -276,12 +334,20 @@ export function ImageConverterPage() {
       {imageFile && (
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">{t('common.settings', 'Settings')}</CardTitle>
+            <CardTitle className="text-base">
+              {t("common.settings", "Settings")}
+            </CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="space-y-1.5">
-              <Label className="text-xs">{t('freeTools.imageConverter.outputFormat', 'Output Format')}</Label>
-              <Select value={outputFormat} onValueChange={setOutputFormat} disabled={isProcessing}>
+              <Label className="text-xs">
+                {t("freeTools.imageConverter.outputFormat", "Output Format")}
+              </Label>
+              <Select
+                value={outputFormat}
+                onValueChange={setOutputFormat}
+                disabled={isProcessing}
+              >
                 <SelectTrigger className="h-9">
                   <SelectValue />
                 </SelectTrigger>
@@ -298,8 +364,12 @@ export function ImageConverterPage() {
             {selectedFormat?.supportsQuality && (
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
-                  <Label className="text-xs">{t('freeTools.imageConverter.quality', 'Quality')}</Label>
-                  <span className="text-xs text-muted-foreground">{quality}%</span>
+                  <Label className="text-xs">
+                    {t("freeTools.imageConverter.quality", "Quality")}
+                  </Label>
+                  <span className="text-xs text-muted-foreground">
+                    {quality}%
+                  </span>
                 </div>
                 <Slider
                   value={[quality]}
@@ -320,17 +390,19 @@ export function ImageConverterPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('freeTools.imageConverter.converting', 'Converting...')}
+                  {t("freeTools.imageConverter.converting", "Converting...")}
                 </>
               ) : (
-                t('freeTools.imageConverter.convert', 'Convert Image')
+                t("freeTools.imageConverter.convert", "Convert Image")
               )}
             </Button>
 
             {isProcessing && (
               <div className="space-y-2">
                 <Progress value={progress} className="h-2" />
-                <p className="text-xs text-center text-muted-foreground">{progress}%</p>
+                <p className="text-xs text-center text-muted-foreground">
+                  {progress}%
+                </p>
               </div>
             )}
 
@@ -350,7 +422,7 @@ export function ImageConverterPage() {
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <Download className="h-4 w-4" />
-              {t('freeTools.imageConverter.result', 'Result')}
+              {t("freeTools.imageConverter.result", "Result")}
             </CardTitle>
             <CardDescription className="text-xs">
               {selectedFormat?.label} • {formatFileSize(convertedBlob.size)}
@@ -366,11 +438,11 @@ export function ImageConverterPage() {
             </div>
             <Button className="w-full" onClick={handleDownload}>
               <Download className="mr-2 h-4 w-4" />
-              {t('common.download', 'Download')}
+              {t("common.download", "Download")}
             </Button>
           </CardContent>
         </Card>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MediaMergerPage.tsx b/mobile/src/pages/MediaMergerPage.tsx
index 22c86421..fdff5056 100644
--- a/mobile/src/pages/MediaMergerPage.tsx
+++ b/mobile/src/pages/MediaMergerPage.tsx
@@ -1,12 +1,18 @@
-import { useState, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useNativeMediaMerger } from '@mobile/hooks/useNativeMediaMerger'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { formatFileSize, getMediaType } from '@mobile/lib/ffmpegFormats'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
+import { useState, useRef, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useNativeMediaMerger } from "@mobile/hooks/useNativeMediaMerger";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { formatFileSize, getMediaType } from "@mobile/lib/ffmpegFormats";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
 import {
   ArrowLeft,
   Upload,
@@ -20,164 +26,187 @@ import {
   Plus,
   GripVertical,
   ArrowUp,
-  ArrowDown
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  ArrowDown,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface MediaItem {
-  id: string
-  file: File
-  url: string
-  type: 'video' | 'audio'
+  id: string;
+  file: File;
+  url: string;
+  type: "video" | "audio";
 }
 
 export function MediaMergerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadBlob } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const resultVideoRef = useRef<HTMLVideoElement>(null)
-
-  const [mediaItems, setMediaItems] = useState<MediaItem[]>([])
-  const [mergedUrl, setMergedUrl] = useState<string | null>(null)
-  const [mergedBlob, setMergedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [error, setError] = useState<string | null>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadBlob } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const resultVideoRef = useRef<HTMLVideoElement>(null);
+
+  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
+  const [mergedUrl, setMergedUrl] = useState<string | null>(null);
+  const [mergedBlob, setMergedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
 
   // Use native browser APIs for merging (no FFmpeg needed)
-  const { merge } = useNativeMediaMerger()
-
-  const addFiles = useCallback((files: FileList | File[]) => {
-    const newItems: MediaItem[] = []
-    const firstType = mediaItems.length > 0 ? mediaItems[0].type : null
-
-    for (const file of Array.from(files)) {
-      const type = getMediaType(file)
-      if (type !== 'video' && type !== 'audio') continue
-
-      // All files must be same type
-      if (firstType && type !== firstType) {
-        setError(t('freeTools.mediaMerger.sameTypeRequired', 'All files must be the same type (video or audio)'))
-        continue
+  const { merge } = useNativeMediaMerger();
+
+  const addFiles = useCallback(
+    (files: FileList | File[]) => {
+      const newItems: MediaItem[] = [];
+      const firstType = mediaItems.length > 0 ? mediaItems[0].type : null;
+
+      for (const file of Array.from(files)) {
+        const type = getMediaType(file);
+        if (type !== "video" && type !== "audio") continue;
+
+        // All files must be same type
+        if (firstType && type !== firstType) {
+          setError(
+            t(
+              "freeTools.mediaMerger.sameTypeRequired",
+              "All files must be the same type (video or audio)",
+            ),
+          );
+          continue;
+        }
+
+        newItems.push({
+          id: `${Date.now()}-${Math.random()}`,
+          file,
+          url: URL.createObjectURL(file),
+          type,
+        });
       }
 
-      newItems.push({
-        id: `${Date.now()}-${Math.random()}`,
-        file,
-        url: URL.createObjectURL(file),
-        type
-      })
-    }
-
-    if (newItems.length > 0) {
-      setMediaItems(prev => [...prev, ...newItems])
-      setMergedUrl(null)
-      setMergedBlob(null)
-      setError(null)
-      setProgress(0)
-    }
-  }, [mediaItems, t])
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    if (isProcessing) return
-    addFiles(e.dataTransfer.files)
-  }, [addFiles, isProcessing])
-
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) addFiles(e.target.files)
-    e.target.value = ''
-  }, [addFiles])
+      if (newItems.length > 0) {
+        setMediaItems((prev) => [...prev, ...newItems]);
+        setMergedUrl(null);
+        setMergedBlob(null);
+        setError(null);
+        setProgress(0);
+      }
+    },
+    [mediaItems, t],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (isProcessing) return;
+      addFiles(e.dataTransfer.files);
+    },
+    [addFiles, isProcessing],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) addFiles(e.target.files);
+      e.target.value = "";
+    },
+    [addFiles],
+  );
 
   const removeItem = useCallback((id: string) => {
-    setMediaItems(prev => {
-      const item = prev.find(i => i.id === id)
-      if (item) URL.revokeObjectURL(item.url)
-      return prev.filter(i => i.id !== id)
-    })
-  }, [])
-
-  const moveItem = useCallback((index: number, direction: 'up' | 'down') => {
-    setMediaItems(prev => {
-      const newItems = [...prev]
-      const newIndex = direction === 'up' ? index - 1 : index + 1
-      if (newIndex < 0 || newIndex >= newItems.length) return prev
-      [newItems[index], newItems[newIndex]] = [newItems[newIndex], newItems[index]]
-      return newItems
-    })
-  }, [])
+    setMediaItems((prev) => {
+      const item = prev.find((i) => i.id === id);
+      if (item) URL.revokeObjectURL(item.url);
+      return prev.filter((i) => i.id !== id);
+    });
+  }, []);
+
+  const moveItem = useCallback((index: number, direction: "up" | "down") => {
+    setMediaItems((prev) => {
+      const newItems = [...prev];
+      const newIndex = direction === "up" ? index - 1 : index + 1;
+      if (newIndex < 0 || newIndex >= newItems.length)
+        return (prev[(newItems[index], newItems[newIndex])] = [
+          newItems[newIndex],
+          newItems[index],
+        ]);
+      return newItems;
+    });
+  }, []);
 
   const clearAll = useCallback(() => {
-    mediaItems.forEach(item => URL.revokeObjectURL(item.url))
-    if (mergedUrl) URL.revokeObjectURL(mergedUrl)
-    setMediaItems([])
-    setMergedUrl(null)
-    setMergedBlob(null)
-    setError(null)
-    setProgress(0)
-  }, [mediaItems, mergedUrl])
+    mediaItems.forEach((item) => URL.revokeObjectURL(item.url));
+    if (mergedUrl) URL.revokeObjectURL(mergedUrl);
+    setMediaItems([]);
+    setMergedUrl(null);
+    setMergedBlob(null);
+    setError(null);
+    setProgress(0);
+  }, [mediaItems, mergedUrl]);
 
   const handleMerge = async () => {
-    if (mediaItems.length < 2) return
+    if (mediaItems.length < 2) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setMergedUrl(null)
-    setMergedBlob(null)
-    setProgress(0)
+    setIsProcessing(true);
+    setError(null);
+    setMergedUrl(null);
+    setMergedBlob(null);
+    setProgress(0);
 
     try {
-      const files = mediaItems.map(item => item.file)
-      const outputType = mediaItems[0].type
+      const files = mediaItems.map((item) => item.file);
+      const outputType = mediaItems[0].type;
 
       // Use native browser APIs for merging (no FFmpeg download needed)
       const result = await merge(files, outputType, {
-        onProgress: (p) => setProgress(Math.round(p))
-      })
+        onProgress: (p) => setProgress(Math.round(p)),
+      });
 
-      const url = URL.createObjectURL(result.blob)
+      const url = URL.createObjectURL(result.blob);
 
-      setMergedBlob(result.blob)
-      setMergedUrl(url)
-      setProgress(100)
+      setMergedBlob(result.blob);
+      setMergedUrl(url);
+      setProgress(100);
     } catch (err) {
-      console.error('Merge failed:', err)
-      setError(err instanceof Error ? err.message : 'Merge failed')
+      console.error("Merge failed:", err);
+      setError(err instanceof Error ? err.message : "Merge failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    if (!mergedBlob) return
+    if (!mergedBlob) return;
 
     // Determine extension from blob type
-    const blobType = mergedBlob.type
-    let ext = 'mp4'
-    if (blobType.includes('webm')) ext = 'webm'
-    else if (blobType.includes('mp3') || blobType.includes('mpeg')) ext = 'mp3'
-    else if (blobType.includes('wav')) ext = 'wav'
+    const blobType = mergedBlob.type;
+    let ext = "mp4";
+    if (blobType.includes("webm")) ext = "webm";
+    else if (blobType.includes("mp3") || blobType.includes("mpeg")) ext = "mp3";
+    else if (blobType.includes("wav")) ext = "wav";
 
-    const filename = `merged_${Date.now()}.${ext}`
+    const filename = `merged_${Date.now()}.${ext}`;
 
-    await downloadBlob(mergedBlob, filename)
-  }
+    await downloadBlob(mergedBlob, filename);
+  };
 
-  const outputType = mediaItems.length > 0 ? mediaItems[0].type : null
-  const totalSize = mediaItems.reduce((sum, item) => sum + item.file.size, 0)
+  const outputType = mediaItems.length > 0 ? mediaItems[0].type : null;
+  const totalSize = mediaItems.reduce((sum, item) => sum + item.file.size, 0);
 
   return (
     <div className="container mx-auto p-4 max-w-4xl space-y-4">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.mediaMerger.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.mediaMerger.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.mediaMerger.description')}
+            {t("freeTools.mediaMerger.description")}
           </p>
         </div>
       </div>
@@ -187,10 +216,13 @@ export function MediaMergerPage() {
         <CardHeader className="pb-3">
           <CardTitle className="text-base flex items-center gap-2">
             <Upload className="h-4 w-4" />
-            {t('freeTools.mediaMerger.inputMedia', 'Input Files')}
+            {t("freeTools.mediaMerger.inputMedia", "Input Files")}
           </CardTitle>
           <CardDescription className="text-xs">
-            {t('freeTools.mediaMerger.supportedFormats', 'Add multiple video or audio files to merge')}
+            {t(
+              "freeTools.mediaMerger.supportedFormats",
+              "Add multiple video or audio files to merge",
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
@@ -198,7 +230,7 @@ export function MediaMergerPage() {
           <div
             className={cn(
               "border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors",
-              "hover:border-primary hover:bg-primary/5"
+              "hover:border-primary hover:bg-primary/5",
             )}
             onClick={() => fileInputRef.current?.click()}
             onDrop={handleDrop}
@@ -207,9 +239,11 @@ export function MediaMergerPage() {
             <Plus className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
             <p className="text-sm text-muted-foreground">
               {mediaItems.length === 0
-                ? t('freeTools.mediaMerger.selectFiles', 'Click or drag files here')
-                : t('freeTools.mediaMerger.addMore', 'Add more files')
-              }
+                ? t(
+                    "freeTools.mediaMerger.selectFiles",
+                    "Click or drag files here",
+                  )
+                : t("freeTools.mediaMerger.addMore", "Add more files")}
             </p>
           </div>
 
@@ -222,21 +256,23 @@ export function MediaMergerPage() {
                   className="flex items-center gap-2 p-2 bg-muted/50 rounded-lg"
                 >
                   <GripVertical className="h-4 w-4 text-muted-foreground" />
-                  {item.type === 'video' ? (
+                  {item.type === "video" ? (
                     <FileVideo className="h-5 w-5 text-primary flex-shrink-0" />
                   ) : (
                     <FileAudio className="h-5 w-5 text-primary flex-shrink-0" />
                   )}
                   <div className="flex-1 min-w-0">
                     <p className="text-sm truncate">{item.file.name}</p>
-                    <p className="text-xs text-muted-foreground">{formatFileSize(item.file.size)}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {formatFileSize(item.file.size)}
+                    </p>
                   </div>
                   <div className="flex items-center gap-1">
                     <Button
                       variant="ghost"
                       size="icon"
                       className="h-7 w-7"
-                      onClick={() => moveItem(index, 'up')}
+                      onClick={() => moveItem(index, "up")}
                       disabled={index === 0 || isProcessing}
                     >
                       <ArrowUp className="h-3 w-3" />
@@ -245,7 +281,7 @@ export function MediaMergerPage() {
                       variant="ghost"
                       size="icon"
                       className="h-7 w-7"
-                      onClick={() => moveItem(index, 'down')}
+                      onClick={() => moveItem(index, "down")}
                       disabled={index === mediaItems.length - 1 || isProcessing}
                     >
                       <ArrowDown className="h-3 w-3" />
@@ -264,9 +300,18 @@ export function MediaMergerPage() {
               ))}
 
               <div className="flex items-center justify-between text-xs text-muted-foreground pt-2">
-                <span>{mediaItems.length} {t('freeTools.mediaMerger.files', 'files')} • {formatFileSize(totalSize)}</span>
-                <Button variant="ghost" size="sm" onClick={clearAll} disabled={isProcessing}>
-                  {t('common.clearAll', 'Clear All')}
+                <span>
+                  {mediaItems.length}{" "}
+                  {t("freeTools.mediaMerger.files", "files")} •{" "}
+                  {formatFileSize(totalSize)}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearAll}
+                  disabled={isProcessing}
+                >
+                  {t("common.clearAll", "Clear All")}
                 </Button>
               </div>
             </div>
@@ -295,12 +340,12 @@ export function MediaMergerPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('freeTools.mediaMerger.merging', 'Merging...')}
+                  {t("freeTools.mediaMerger.merging", "Merging...")}
                 </>
               ) : (
                 <>
                   <Combine className="mr-2 h-4 w-4" />
-                  {t('freeTools.mediaMerger.merge', 'Merge Files')}
+                  {t("freeTools.mediaMerger.merge", "Merge Files")}
                 </>
               )}
             </Button>
@@ -308,7 +353,9 @@ export function MediaMergerPage() {
             {isProcessing && (
               <div className="space-y-2">
                 <Progress value={progress} className="h-2" />
-                <p className="text-xs text-center text-muted-foreground">{progress}%</p>
+                <p className="text-xs text-center text-muted-foreground">
+                  {progress}%
+                </p>
               </div>
             )}
 
@@ -328,14 +375,14 @@ export function MediaMergerPage() {
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <Download className="h-4 w-4" />
-              {t('freeTools.mediaMerger.result', 'Merged Result')}
+              {t("freeTools.mediaMerger.result", "Merged Result")}
             </CardTitle>
             <CardDescription className="text-xs">
               {formatFileSize(mergedBlob.size)}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-3">
-            {outputType === 'video' ? (
+            {outputType === "video" ? (
               <div className="aspect-video bg-black rounded-lg overflow-hidden">
                 <video
                   ref={resultVideoRef}
@@ -345,8 +392,11 @@ export function MediaMergerPage() {
                   playsInline
                   preload="metadata"
                   onLoadedMetadata={() => {
-                    if (resultVideoRef.current && resultVideoRef.current.currentTime === 0) {
-                      resultVideoRef.current.currentTime = 0.001
+                    if (
+                      resultVideoRef.current &&
+                      resultVideoRef.current.currentTime === 0
+                    ) {
+                      resultVideoRef.current.currentTime = 0.001;
                     }
                   }}
                 />
@@ -356,11 +406,11 @@ export function MediaMergerPage() {
             )}
             <Button className="w-full" onClick={handleDownload}>
               <Download className="mr-2 h-4 w-4" />
-              {t('common.download', 'Download')}
+              {t("common.download", "Download")}
             </Button>
           </CardContent>
         </Card>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MediaTrimmerPage.tsx b/mobile/src/pages/MediaTrimmerPage.tsx
index ef66ffca..622c93be 100644
--- a/mobile/src/pages/MediaTrimmerPage.tsx
+++ b/mobile/src/pages/MediaTrimmerPage.tsx
@@ -1,46 +1,56 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useNativeMediaTrimmer } from '@mobile/hooks/useNativeMediaTrimmer'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { formatDuration, formatFileSize, getMediaType } from '@mobile/lib/ffmpegFormats'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
-import { Progress } from '@/components/ui/progress'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Slider } from '@/components/ui/slider'
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useNativeMediaTrimmer } from "@mobile/hooks/useNativeMediaTrimmer";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import {
+  formatDuration,
+  formatFileSize,
+  getMediaType,
+} from "@mobile/lib/ffmpegFormats";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
 
 // Helper to format time as mm:ss.d for input
 function formatTimeForInput(seconds: number): string {
-  const mins = Math.floor(seconds / 60)
-  const secs = seconds % 60
-  return `${mins}:${secs.toFixed(1).padStart(4, '0')}`
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toFixed(1).padStart(4, "0")}`;
 }
 
 // Parse time from mm:ss.d or just seconds format
 function parseTimeInput(input: string, maxDuration: number): number | null {
-  const trimmed = input.trim()
+  const trimmed = input.trim();
 
   // Try mm:ss.d format
-  const colonMatch = trimmed.match(/^(\d+):(\d+\.?\d*)$/)
+  const colonMatch = trimmed.match(/^(\d+):(\d+\.?\d*)$/);
   if (colonMatch) {
-    const mins = parseInt(colonMatch[1], 10)
-    const secs = parseFloat(colonMatch[2])
-    const total = mins * 60 + secs
+    const mins = parseInt(colonMatch[1], 10);
+    const secs = parseFloat(colonMatch[2]);
+    const total = mins * 60 + secs;
     if (!isNaN(total) && total >= 0 && total <= maxDuration) {
-      return total
+      return total;
     }
-    return null
+    return null;
   }
 
   // Try plain seconds format
-  const seconds = parseFloat(trimmed)
+  const seconds = parseFloat(trimmed);
   if (!isNaN(seconds) && seconds >= 0 && seconds <= maxDuration) {
-    return seconds
+    return seconds;
   }
 
-  return null
+  return null;
 }
 import {
   ArrowLeft,
@@ -51,223 +61,237 @@ import {
   X,
   AlertCircle,
   FileVideo,
-  FileAudio
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  FileAudio,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 export function MediaTrimmerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadBlob } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null)
-  const resultVideoRef = useRef<HTMLVideoElement>(null)
-
-  const [mediaFile, setMediaFile] = useState<File | null>(null)
-  const [mediaUrl, setMediaUrl] = useState<string | null>(null)
-  const [mediaType, setMediaType] = useState<'video' | 'audio' | null>(null)
-  const [duration, setDuration] = useState(0)
-  const [startTime, setStartTime] = useState(0)
-  const [endTime, setEndTime] = useState(0)
-  const [trimmedUrl, setTrimmedUrl] = useState<string | null>(null)
-  const [trimmedBlob, setTrimmedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [error, setError] = useState<string | null>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadBlob } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null);
+  const resultVideoRef = useRef<HTMLVideoElement>(null);
+
+  const [mediaFile, setMediaFile] = useState<File | null>(null);
+  const [mediaUrl, setMediaUrl] = useState<string | null>(null);
+  const [mediaType, setMediaType] = useState<"video" | "audio" | null>(null);
+  const [duration, setDuration] = useState(0);
+  const [startTime, setStartTime] = useState(0);
+  const [endTime, setEndTime] = useState(0);
+  const [trimmedUrl, setTrimmedUrl] = useState<string | null>(null);
+  const [trimmedBlob, setTrimmedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
 
   // Text input state for editable time inputs
-  const [startTimeInput, setStartTimeInput] = useState('')
-  const [endTimeInput, setEndTimeInput] = useState('')
-  const [isStartFocused, setIsStartFocused] = useState(false)
-  const [isEndFocused, setIsEndFocused] = useState(false)
+  const [startTimeInput, setStartTimeInput] = useState("");
+  const [endTimeInput, setEndTimeInput] = useState("");
+  const [isStartFocused, setIsStartFocused] = useState(false);
+  const [isEndFocused, setIsEndFocused] = useState(false);
 
   // Use native browser APIs for trimming (no FFmpeg needed)
-  const { trim } = useNativeMediaTrimmer()
-
-  const handleFileSelect = useCallback((file: File) => {
-    const type = getMediaType(file)
-    if (type !== 'video' && type !== 'audio') {
-      setError(t('freeTools.mediaTrimmer.invalidFile', 'Please select a valid video or audio file'))
-      return
-    }
+  const { trim } = useNativeMediaTrimmer();
+
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      const type = getMediaType(file);
+      if (type !== "video" && type !== "audio") {
+        setError(
+          t(
+            "freeTools.mediaTrimmer.invalidFile",
+            "Please select a valid video or audio file",
+          ),
+        );
+        return;
+      }
 
-    // Clean up previous URLs
-    if (mediaUrl) URL.revokeObjectURL(mediaUrl)
-    if (trimmedUrl) URL.revokeObjectURL(trimmedUrl)
-
-    const url = URL.createObjectURL(file)
-    setMediaFile(file)
-    setMediaUrl(url)
-    setMediaType(type)
-    setTrimmedUrl(null)
-    setTrimmedBlob(null)
-    setError(null)
-    setProgress(0)
-    setStartTime(0)
-    setEndTime(0)
-  }, [mediaUrl, trimmedUrl, t])
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    if (isProcessing) return
-    const file = e.dataTransfer.files[0]
-    if (file) handleFileSelect(file)
-  }, [handleFileSelect, isProcessing])
-
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) handleFileSelect(file)
-    e.target.value = ''
-  }, [handleFileSelect])
+      // Clean up previous URLs
+      if (mediaUrl) URL.revokeObjectURL(mediaUrl);
+      if (trimmedUrl) URL.revokeObjectURL(trimmedUrl);
+
+      const url = URL.createObjectURL(file);
+      setMediaFile(file);
+      setMediaUrl(url);
+      setMediaType(type);
+      setTrimmedUrl(null);
+      setTrimmedBlob(null);
+      setError(null);
+      setProgress(0);
+      setStartTime(0);
+      setEndTime(0);
+    },
+    [mediaUrl, trimmedUrl, t],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
+    },
+    [handleFileSelect, isProcessing],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleFileSelect(file);
+      e.target.value = "";
+    },
+    [handleFileSelect],
+  );
 
   const clearInput = useCallback(() => {
-    if (mediaUrl) URL.revokeObjectURL(mediaUrl)
-    if (trimmedUrl) URL.revokeObjectURL(trimmedUrl)
-    setMediaFile(null)
-    setMediaUrl(null)
-    setMediaType(null)
-    setDuration(0)
-    setStartTime(0)
-    setEndTime(0)
-    setStartTimeInput('0:00.0')
-    setEndTimeInput('0:00.0')
-    setTrimmedUrl(null)
-    setTrimmedBlob(null)
-    setError(null)
-    setProgress(0)
-    if (fileInputRef.current) fileInputRef.current.value = ''
-  }, [mediaUrl, trimmedUrl])
+    if (mediaUrl) URL.revokeObjectURL(mediaUrl);
+    if (trimmedUrl) URL.revokeObjectURL(trimmedUrl);
+    setMediaFile(null);
+    setMediaUrl(null);
+    setMediaType(null);
+    setDuration(0);
+    setStartTime(0);
+    setEndTime(0);
+    setStartTimeInput("0:00.0");
+    setEndTimeInput("0:00.0");
+    setTrimmedUrl(null);
+    setTrimmedBlob(null);
+    setError(null);
+    setProgress(0);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [mediaUrl, trimmedUrl]);
 
   // Update duration when media loads
   useEffect(() => {
     if (mediaRef.current && mediaUrl) {
-      const media = mediaRef.current
+      const media = mediaRef.current;
       const handleLoaded = () => {
-        setDuration(media.duration)
-        setStartTime(0)
-        setEndTime(media.duration)
+        setDuration(media.duration);
+        setStartTime(0);
+        setEndTime(media.duration);
         // Initialize text inputs
-        setStartTimeInput(formatTimeForInput(0))
-        setEndTimeInput(formatTimeForInput(media.duration))
-      }
-      media.addEventListener('loadedmetadata', handleLoaded)
-      return () => media.removeEventListener('loadedmetadata', handleLoaded)
+        setStartTimeInput(formatTimeForInput(0));
+        setEndTimeInput(formatTimeForInput(media.duration));
+      };
+      media.addEventListener("loadedmetadata", handleLoaded);
+      return () => media.removeEventListener("loadedmetadata", handleLoaded);
     }
-  }, [mediaUrl])
+  }, [mediaUrl]);
 
   const handleTrim = async () => {
-    if (!mediaFile || !mediaType || startTime >= endTime) return
+    if (!mediaFile || !mediaType || startTime >= endTime) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setTrimmedUrl(null)
-    setTrimmedBlob(null)
-    setProgress(0)
+    setIsProcessing(true);
+    setError(null);
+    setTrimmedUrl(null);
+    setTrimmedBlob(null);
+    setProgress(0);
 
     try {
       // Use native browser APIs for trimming (no FFmpeg download needed)
-      const result = await trim(
-        mediaFile,
-        startTime,
-        endTime,
-        mediaType,
-        {
-          onProgress: (p) => setProgress(Math.round(p))
-        }
-      )
-
-      const url = URL.createObjectURL(result.blob)
-
-      setTrimmedBlob(result.blob)
-      setTrimmedUrl(url)
-      setProgress(100)
+      const result = await trim(mediaFile, startTime, endTime, mediaType, {
+        onProgress: (p) => setProgress(Math.round(p)),
+      });
+
+      const url = URL.createObjectURL(result.blob);
+
+      setTrimmedBlob(result.blob);
+      setTrimmedUrl(url);
+      setProgress(100);
     } catch (err) {
-      console.error('Trim failed:', err)
-      setError(err instanceof Error ? err.message : 'Trim failed')
+      console.error("Trim failed:", err);
+      setError(err instanceof Error ? err.message : "Trim failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    if (!trimmedBlob || !mediaFile) return
+    if (!trimmedBlob || !mediaFile) return;
 
     // Determine extension from blob type
-    const blobType = trimmedBlob.type
-    let ext = 'mp4'
-    if (blobType.includes('webm')) ext = 'webm'
-    else if (blobType.includes('mp3') || blobType.includes('mpeg')) ext = 'mp3'
-    else if (blobType.includes('wav')) ext = 'wav'
+    const blobType = trimmedBlob.type;
+    let ext = "mp4";
+    if (blobType.includes("webm")) ext = "webm";
+    else if (blobType.includes("mp3") || blobType.includes("mpeg")) ext = "mp3";
+    else if (blobType.includes("wav")) ext = "wav";
 
-    const baseName = mediaFile.name.replace(/\.[^.]+$/, '')
-    const filename = `${baseName}_trimmed.${ext}`
+    const baseName = mediaFile.name.replace(/\.[^.]+$/, "");
+    const filename = `${baseName}_trimmed.${ext}`;
 
-    await downloadBlob(trimmedBlob, filename)
-  }
+    await downloadBlob(trimmedBlob, filename);
+  };
 
   const handleSliderChange = (values: number[]) => {
-    setStartTime(values[0])
-    setEndTime(values[1])
+    setStartTime(values[0]);
+    setEndTime(values[1]);
     // Update text inputs when slider changes (if not focused)
     if (!isStartFocused) {
-      setStartTimeInput(formatTimeForInput(values[0]))
+      setStartTimeInput(formatTimeForInput(values[0]));
     }
     if (!isEndFocused) {
-      setEndTimeInput(formatTimeForInput(values[1]))
+      setEndTimeInput(formatTimeForInput(values[1]));
     }
-  }
+  };
 
   // Sync text inputs when times change externally (e.g., from slider)
   useEffect(() => {
     if (!isStartFocused) {
-      setStartTimeInput(formatTimeForInput(startTime))
+      setStartTimeInput(formatTimeForInput(startTime));
     }
-  }, [startTime, isStartFocused])
+  }, [startTime, isStartFocused]);
 
   useEffect(() => {
     if (!isEndFocused) {
-      setEndTimeInput(formatTimeForInput(endTime))
+      setEndTimeInput(formatTimeForInput(endTime));
     }
-  }, [endTime, isEndFocused])
+  }, [endTime, isEndFocused]);
 
   // Handle start time input blur - validate and apply
   const handleStartTimeBlur = () => {
-    setIsStartFocused(false)
-    const parsed = parseTimeInput(startTimeInput, duration)
+    setIsStartFocused(false);
+    const parsed = parseTimeInput(startTimeInput, duration);
     if (parsed !== null && parsed < endTime) {
-      setStartTime(parsed)
+      setStartTime(parsed);
     } else {
       // Revert to current value if invalid
-      setStartTimeInput(formatTimeForInput(startTime))
+      setStartTimeInput(formatTimeForInput(startTime));
     }
-  }
+  };
 
   // Handle end time input blur - validate and apply
   const handleEndTimeBlur = () => {
-    setIsEndFocused(false)
-    const parsed = parseTimeInput(endTimeInput, duration)
+    setIsEndFocused(false);
+    const parsed = parseTimeInput(endTimeInput, duration);
     if (parsed !== null && parsed > startTime) {
-      setEndTime(parsed)
+      setEndTime(parsed);
     } else {
       // Revert to current value if invalid
-      setEndTimeInput(formatTimeForInput(endTime))
+      setEndTimeInput(formatTimeForInput(endTime));
     }
-  }
+  };
 
-  const trimDuration = endTime - startTime
-  const MediaIcon = mediaType === 'video' ? FileVideo : FileAudio
+  const trimDuration = endTime - startTime;
+  const MediaIcon = mediaType === "video" ? FileVideo : FileAudio;
 
   return (
     <div className="container mx-auto p-4 max-w-4xl space-y-4">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.mediaTrimmer.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.mediaTrimmer.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.mediaTrimmer.description')}
+            {t("freeTools.mediaTrimmer.description")}
           </p>
         </div>
       </div>
@@ -277,10 +301,13 @@ export function MediaTrimmerPage() {
         <CardHeader className="pb-3">
           <CardTitle className="text-base flex items-center gap-2">
             <Upload className="h-4 w-4" />
-            {t('freeTools.mediaTrimmer.inputMedia', 'Input Media')}
+            {t("freeTools.mediaTrimmer.inputMedia", "Input Media")}
           </CardTitle>
           <CardDescription className="text-xs">
-            {t('freeTools.mediaTrimmer.supportedFormats', 'MP4, WebM, MOV, AVI, MP3, WAV, OGG')}
+            {t(
+              "freeTools.mediaTrimmer.supportedFormats",
+              "MP4, WebM, MOV, AVI, MP3, WAV, OGG",
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -288,7 +315,7 @@ export function MediaTrimmerPage() {
             <div
               className={cn(
                 "border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors",
-                "hover:border-primary hover:bg-primary/5"
+                "hover:border-primary hover:bg-primary/5",
               )}
               onClick={() => fileInputRef.current?.click()}
               onDrop={handleDrop}
@@ -296,12 +323,15 @@ export function MediaTrimmerPage() {
             >
               <Scissors className="h-10 w-10 mx-auto mb-3 text-muted-foreground" />
               <p className="text-sm text-muted-foreground mb-1">
-                {t('freeTools.mediaTrimmer.selectMedia', 'Click or drag video/audio here')}
+                {t(
+                  "freeTools.mediaTrimmer.selectMedia",
+                  "Click or drag video/audio here",
+                )}
               </p>
             </div>
           ) : (
             <div className="space-y-3">
-              {mediaType === 'video' ? (
+              {mediaType === "video" ? (
                 <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
                   <video
                     ref={mediaRef as React.RefObject<HTMLVideoElement>}
@@ -311,9 +341,9 @@ export function MediaTrimmerPage() {
                     playsInline
                     preload="metadata"
                     onLoadedData={() => {
-                      const video = mediaRef.current as HTMLVideoElement
+                      const video = mediaRef.current as HTMLVideoElement;
                       if (video && video.currentTime === 0) {
-                        video.currentTime = 0.001
+                        video.currentTime = 0.001;
                       }
                     }}
                   />
@@ -332,13 +362,21 @@ export function MediaTrimmerPage() {
                     <div className="flex items-center gap-2 flex-1 min-w-0">
                       <MediaIcon className="h-8 w-8 text-primary flex-shrink-0" />
                       <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium truncate">{mediaFile.name}</p>
+                        <p className="text-sm font-medium truncate">
+                          {mediaFile.name}
+                        </p>
                         <p className="text-xs text-muted-foreground">
-                          {formatFileSize(mediaFile.size)} • {formatDuration(duration)}
+                          {formatFileSize(mediaFile.size)} •{" "}
+                          {formatDuration(duration)}
                         </p>
                       </div>
                     </div>
-                    <Button variant="ghost" size="icon" onClick={clearInput} className="flex-shrink-0">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={clearInput}
+                      className="flex-shrink-0"
+                    >
                       <X className="h-4 w-4" />
                     </Button>
                   </div>
@@ -366,9 +404,14 @@ export function MediaTrimmerPage() {
       {mediaFile && duration > 0 && (
         <Card>
           <CardHeader className="pb-3">
-            <CardTitle className="text-base">{t('freeTools.mediaTrimmer.trimSettings', 'Trim Settings')}</CardTitle>
+            <CardTitle className="text-base">
+              {t("freeTools.mediaTrimmer.trimSettings", "Trim Settings")}
+            </CardTitle>
             <CardDescription className="text-xs">
-              {t('freeTools.mediaTrimmer.selectRange', 'Select start and end time')}
+              {t(
+                "freeTools.mediaTrimmer.selectRange",
+                "Select start and end time",
+              )}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
@@ -391,7 +434,9 @@ export function MediaTrimmerPage() {
             {/* Time inputs */}
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-1.5">
-                <Label className="text-xs">{t('freeTools.mediaTrimmer.startTime', 'Start Time')}</Label>
+                <Label className="text-xs">
+                  {t("freeTools.mediaTrimmer.startTime", "Start Time")}
+                </Label>
                 <Input
                   type="text"
                   value={startTimeInput}
@@ -403,11 +448,16 @@ export function MediaTrimmerPage() {
                   className="h-9 text-sm font-mono"
                 />
                 <p className="text-xs text-muted-foreground">
-                  {t('freeTools.mediaTrimmer.timeFormat', 'Format: m:ss.d or seconds')}
+                  {t(
+                    "freeTools.mediaTrimmer.timeFormat",
+                    "Format: m:ss.d or seconds",
+                  )}
                 </p>
               </div>
               <div className="space-y-1.5">
-                <Label className="text-xs">{t('freeTools.mediaTrimmer.endTime', 'End Time')}</Label>
+                <Label className="text-xs">
+                  {t("freeTools.mediaTrimmer.endTime", "End Time")}
+                </Label>
                 <Input
                   type="text"
                   value={endTimeInput}
@@ -419,13 +469,19 @@ export function MediaTrimmerPage() {
                   className="h-9 text-sm font-mono"
                 />
                 <p className="text-xs text-muted-foreground">
-                  {t('freeTools.mediaTrimmer.timeFormat', 'Format: m:ss.d or seconds')}
+                  {t(
+                    "freeTools.mediaTrimmer.timeFormat",
+                    "Format: m:ss.d or seconds",
+                  )}
                 </p>
               </div>
             </div>
 
             <div className="text-sm text-center text-muted-foreground">
-              {t('freeTools.mediaTrimmer.outputDuration', 'Output duration')}: <span className="font-medium">{formatDuration(trimDuration)}</span>
+              {t("freeTools.mediaTrimmer.outputDuration", "Output duration")}:{" "}
+              <span className="font-medium">
+                {formatDuration(trimDuration)}
+              </span>
             </div>
 
             <Button
@@ -436,12 +492,12 @@ export function MediaTrimmerPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('freeTools.mediaTrimmer.trimming', 'Trimming...')}
+                  {t("freeTools.mediaTrimmer.trimming", "Trimming...")}
                 </>
               ) : (
                 <>
                   <Scissors className="mr-2 h-4 w-4" />
-                  {t('freeTools.mediaTrimmer.trim', 'Trim Media')}
+                  {t("freeTools.mediaTrimmer.trim", "Trim Media")}
                 </>
               )}
             </Button>
@@ -449,7 +505,9 @@ export function MediaTrimmerPage() {
             {isProcessing && (
               <div className="space-y-2">
                 <Progress value={progress} className="h-2" />
-                <p className="text-xs text-center text-muted-foreground">{progress}%</p>
+                <p className="text-xs text-center text-muted-foreground">
+                  {progress}%
+                </p>
               </div>
             )}
 
@@ -469,14 +527,15 @@ export function MediaTrimmerPage() {
           <CardHeader className="pb-3">
             <CardTitle className="text-base flex items-center gap-2">
               <Download className="h-4 w-4" />
-              {t('freeTools.mediaTrimmer.result', 'Trimmed Result')}
+              {t("freeTools.mediaTrimmer.result", "Trimmed Result")}
             </CardTitle>
             <CardDescription className="text-xs">
-              {formatDuration(trimDuration)} • {formatFileSize(trimmedBlob.size)}
+              {formatDuration(trimDuration)} •{" "}
+              {formatFileSize(trimmedBlob.size)}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-3">
-            {mediaType === 'video' ? (
+            {mediaType === "video" ? (
               <div className="aspect-video bg-black rounded-lg overflow-hidden">
                 <video
                   ref={resultVideoRef}
@@ -486,8 +545,11 @@ export function MediaTrimmerPage() {
                   playsInline
                   preload="metadata"
                   onLoadedMetadata={() => {
-                    if (resultVideoRef.current && resultVideoRef.current.currentTime === 0) {
-                      resultVideoRef.current.currentTime = 0.001
+                    if (
+                      resultVideoRef.current &&
+                      resultVideoRef.current.currentTime === 0
+                    ) {
+                      resultVideoRef.current.currentTime = 0.001;
                     }
                   }}
                 />
@@ -497,11 +559,11 @@ export function MediaTrimmerPage() {
             )}
             <Button className="w-full" onClick={handleDownload}>
               <Download className="mr-2 h-4 w-4" />
-              {t('common.download', 'Download')}
+              {t("common.download", "Download")}
             </Button>
           </CardContent>
         </Card>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileAssetsPage.tsx b/mobile/src/pages/MobileAssetsPage.tsx
index b41afecf..c83f25d9 100644
--- a/mobile/src/pages/MobileAssetsPage.tsx
+++ b/mobile/src/pages/MobileAssetsPage.tsx
@@ -1,96 +1,107 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { apiClient } from '@/api/client'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import type { HistoryItem } from '@/types/prediction'
-import { getPlatformService } from '@mobile/platform'
-import { Loader2, RefreshCw, Download, ImageOff, ChevronLeft, ChevronRight, X } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Checkbox } from '@/components/ui/checkbox'
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "@/api/client";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import type { HistoryItem } from "@/types/prediction";
+import { getPlatformService } from "@mobile/platform";
 import {
-  Dialog,
-  DialogContent,
-} from '@/components/ui/dialog'
-import { useToast } from '@/hooks/useToast'
-import { cn } from '@/lib/utils'
-
-const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i
-const PAGE_SIZE = 20
+  Loader2,
+  RefreshCw,
+  Download,
+  ImageOff,
+  ChevronLeft,
+  ChevronRight,
+  X,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { useToast } from "@/hooks/useToast";
+import { cn } from "@/lib/utils";
+
+const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i;
+const PAGE_SIZE = 20;
 
 interface AssetImage {
-  url: string
-  model: string
-  createdAt: string
-  predictionId: string
+  url: string;
+  model: string;
+  createdAt: string;
+  predictionId: string;
 }
 
 // Unique key for an image (url + predictionId + index in case of duplicates)
 function imageKey(image: AssetImage, idx: number) {
-  return `${image.predictionId}-${idx}`
+  return `${image.predictionId}-${idx}`;
 }
 
 // Extract image URLs from completed history items
 function extractImages(items: HistoryItem[]): AssetImage[] {
-  const images: AssetImage[] = []
+  const images: AssetImage[] = [];
   for (const item of items) {
-    if (item.status !== 'completed' || !item.outputs) continue
+    if (item.status !== "completed" || !item.outputs) continue;
     for (const output of item.outputs) {
-      if (typeof output === 'string' && IMAGE_EXTENSIONS.test(output)) {
+      if (typeof output === "string" && IMAGE_EXTENSIONS.test(output)) {
         images.push({
           url: output,
           model: item.model,
           createdAt: item.created_at,
           predictionId: item.id,
-        })
+        });
       }
     }
   }
-  return images
+  return images;
 }
 
 // Proxy image component - fetches images via Capacitor HTTP to bypass CORS
-function ProxyImage({ src, alt, className }: {
-  src: string
-  alt: string
-  className?: string
+function ProxyImage({
+  src,
+  alt,
+  className,
+}: {
+  src: string;
+  alt: string;
+  className?: string;
 }) {
-  const [dataUrl, setDataUrl] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [hasError, setHasError] = useState(false)
+  const [dataUrl, setDataUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    let mounted = true
+    let mounted = true;
 
     const loadImage = async () => {
       try {
-        const platform = getPlatformService()
-        const result = await platform.fetchImageAsDataUrl(src)
+        const platform = getPlatformService();
+        const result = await platform.fetchImageAsDataUrl(src);
         if (mounted) {
           if (result) {
-            setDataUrl(result)
+            setDataUrl(result);
           } else {
-            setHasError(true)
+            setHasError(true);
           }
-          setIsLoading(false)
+          setIsLoading(false);
         }
       } catch {
         if (mounted) {
-          setHasError(true)
-          setIsLoading(false)
+          setHasError(true);
+          setIsLoading(false);
         }
       }
-    }
+    };
 
-    loadImage()
-    return () => { mounted = false }
-  }, [src])
+    loadImage();
+    return () => {
+      mounted = false;
+    };
+  }, [src]);
 
   if (isLoading) {
     return (
       <div className={`flex items-center justify-center bg-muted ${className}`}>
         <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   if (hasError || !dataUrl) {
@@ -98,278 +109,287 @@ function ProxyImage({ src, alt, className }: {
       <div className={`flex items-center justify-center bg-muted ${className}`}>
         <ImageOff className="h-4 w-4 text-muted-foreground" />
       </div>
-    )
+    );
   }
 
-  return (
-    <img
-      src={dataUrl}
-      alt={alt}
-      className={className}
-      loading="lazy"
-    />
-  )
+  return <img src={dataUrl} alt={alt} className={className} loading="lazy" />;
 }
 
 export function MobileAssetsPage() {
-  const { t } = useTranslation()
-  const { isValidated } = useApiKeyStore()
-  const { toast } = useToast()
+  const { t } = useTranslation();
+  const { isValidated } = useApiKeyStore();
+  const { toast } = useToast();
 
-  const [images, setImages] = useState<AssetImage[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
-  const [selectedImage, setSelectedImage] = useState<AssetImage | null>(null)
-  const [isDownloading, setIsDownloading] = useState(false)
+  const [images, setImages] = useState<AssetImage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [selectedImage, setSelectedImage] = useState<AssetImage | null>(null);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   // Select mode
-  const [isSelectMode, setIsSelectMode] = useState(false)
-  const [selectedIndices, setSelectedIndices] = useState<Set<number>>(new Set())
-  const longPressTimer = useRef<NodeJS.Timeout | null>(null)
-  const longPressTriggered = useRef(false)
+  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [selectedIndices, setSelectedIndices] = useState<Set<number>>(
+    new Set(),
+  );
+  const longPressTimer = useRef<NodeJS.Timeout | null>(null);
+  const longPressTriggered = useRef(false);
 
   // Page-level swipe refs
-  const touchStartX = useRef(0)
-  const touchStartY = useRef(0)
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
   // Dialog-level swipe refs
-  const dialogTouchStartX = useRef(0)
-  const dialogTouchStartY = useRef(0)
+  const dialogTouchStartX = useRef(0);
+  const dialogTouchStartY = useRef(0);
 
-  const totalPages = Math.ceil(total / PAGE_SIZE) || 1
+  const totalPages = Math.ceil(total / PAGE_SIZE) || 1;
 
   const fetchAssets = useCallback(async () => {
-    if (!isValidated) return
-    setIsLoading(true)
+    if (!isValidated) return;
+    setIsLoading(true);
 
     try {
-      const now = new Date()
-      const yearAgo = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000)
+      const now = new Date();
+      const yearAgo = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000);
 
       const response = await apiClient.getHistory(page, PAGE_SIZE, {
-        status: 'completed',
+        status: "completed",
         created_after: yearAgo.toISOString(),
         created_before: now.toISOString(),
-      })
+      });
 
-      setImages(extractImages(response.items || []))
-      setTotal(response.total || 0)
+      setImages(extractImages(response.items || []));
+      setTotal(response.total || 0);
     } catch (err) {
-      console.error('Assets fetch error:', err)
+      console.error("Assets fetch error:", err);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [isValidated, page])
+  }, [isValidated, page]);
 
   useEffect(() => {
-    fetchAssets()
-  }, [fetchAssets])
+    fetchAssets();
+  }, [fetchAssets]);
 
   // Clear select mode when page changes
   useEffect(() => {
-    setIsSelectMode(false)
-    setSelectedIndices(new Set())
-  }, [page])
+    setIsSelectMode(false);
+    setSelectedIndices(new Set());
+  }, [page]);
 
   // Navigate between images in detail dialog
-  const navigateImage = useCallback((direction: 'prev' | 'next') => {
-    if (!selectedImage || images.length <= 1) return
-    const currentIdx = images.findIndex(img =>
-      img.url === selectedImage.url && img.predictionId === selectedImage.predictionId
-    )
-    if (currentIdx === -1) return
-
-    let newIdx: number
-    if (direction === 'prev') {
-      newIdx = currentIdx === 0 ? images.length - 1 : currentIdx - 1
-    } else {
-      newIdx = currentIdx === images.length - 1 ? 0 : currentIdx + 1
-    }
-    setSelectedImage(images[newIdx])
-  }, [selectedImage, images])
+  const navigateImage = useCallback(
+    (direction: "prev" | "next") => {
+      if (!selectedImage || images.length <= 1) return;
+      const currentIdx = images.findIndex(
+        (img) =>
+          img.url === selectedImage.url &&
+          img.predictionId === selectedImage.predictionId,
+      );
+      if (currentIdx === -1) return;
+
+      let newIdx: number;
+      if (direction === "prev") {
+        newIdx = currentIdx === 0 ? images.length - 1 : currentIdx - 1;
+      } else {
+        newIdx = currentIdx === images.length - 1 ? 0 : currentIdx + 1;
+      }
+      setSelectedImage(images[newIdx]);
+    },
+    [selectedImage, images],
+  );
 
   // Long press handlers
   const handleLongPressStart = (idx: number) => {
-    longPressTriggered.current = false
+    longPressTriggered.current = false;
     longPressTimer.current = setTimeout(() => {
-      longPressTriggered.current = true
+      longPressTriggered.current = true;
       if (!isSelectMode) {
-        setIsSelectMode(true)
-        setSelectedIndices(new Set([idx]))
+        setIsSelectMode(true);
+        setSelectedIndices(new Set([idx]));
       }
-    }, 500)
-  }
+    }, 500);
+  };
 
   const handleLongPressEnd = () => {
     if (longPressTimer.current) {
-      clearTimeout(longPressTimer.current)
-      longPressTimer.current = null
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
     }
-  }
+  };
 
   const handleImageClick = (idx: number) => {
     if (longPressTriggered.current) {
-      longPressTriggered.current = false
-      return
+      longPressTriggered.current = false;
+      return;
     }
 
     if (isSelectMode) {
-      handleToggleSelect(idx)
+      handleToggleSelect(idx);
     } else {
-      setSelectedImage(images[idx])
+      setSelectedImage(images[idx]);
     }
-  }
+  };
 
   const handleToggleSelect = (idx: number) => {
-    setSelectedIndices(prev => {
-      const newSet = new Set(prev)
+    setSelectedIndices((prev) => {
+      const newSet = new Set(prev);
       if (newSet.has(idx)) {
-        newSet.delete(idx)
+        newSet.delete(idx);
       } else {
-        newSet.add(idx)
+        newSet.add(idx);
       }
-      return newSet
-    })
-  }
+      return newSet;
+    });
+  };
 
   const handleSelectAll = () => {
     if (selectedIndices.size === images.length) {
-      setSelectedIndices(new Set())
+      setSelectedIndices(new Set());
     } else {
-      setSelectedIndices(new Set(images.map((_, i) => i)))
+      setSelectedIndices(new Set(images.map((_, i) => i)));
     }
-  }
+  };
 
   const handleClearSelection = () => {
-    setSelectedIndices(new Set())
-    setIsSelectMode(false)
-  }
+    setSelectedIndices(new Set());
+    setIsSelectMode(false);
+  };
 
   // Bulk download
   const handleBulkDownload = async () => {
-    if (selectedIndices.size === 0) return
-    setIsDownloading(true)
+    if (selectedIndices.size === 0) return;
+    setIsDownloading(true);
 
-    const platform = getPlatformService()
-    let successCount = 0
-    let failCount = 0
+    const platform = getPlatformService();
+    let successCount = 0;
+    let failCount = 0;
 
     for (const idx of selectedIndices) {
-      const image = images[idx]
-      if (!image) continue
+      const image = images[idx];
+      if (!image) continue;
 
-      const ext = image.url.match(/\.(jpg|jpeg|png|gif|webp)/i)?.[1] || 'png'
-      const filename = `${image.model.replace(/\//g, '_')}_${image.predictionId}_${idx}.${ext}`
+      const ext = image.url.match(/\.(jpg|jpeg|png|gif|webp)/i)?.[1] || "png";
+      const filename = `${image.model.replace(/\//g, "_")}_${image.predictionId}_${idx}.${ext}`;
 
       try {
-        const result = await platform.downloadFile(image.url, filename)
+        const result = await platform.downloadFile(image.url, filename);
         if (result.success) {
-          successCount++
+          successCount++;
         } else {
-          failCount++
+          failCount++;
         }
       } catch {
-        failCount++
+        failCount++;
       }
     }
 
-    setIsDownloading(false)
-    setSelectedIndices(new Set())
-    setIsSelectMode(false)
+    setIsDownloading(false);
+    setSelectedIndices(new Set());
+    setIsSelectMode(false);
 
     if (successCount > 0) {
       toast({
-        title: t('history.downloadComplete', 'Download complete'),
-        description: t('history.downloadCompleteDesc', { count: successCount }),
-      })
+        title: t("history.downloadComplete", "Download complete"),
+        description: t("history.downloadCompleteDesc", { count: successCount }),
+      });
     }
     if (failCount > 0) {
       toast({
-        title: t('history.downloadFailed', 'Download failed'),
-        description: t('history.downloadFailedDesc', { count: failCount }),
-        variant: 'destructive',
-      })
+        title: t("history.downloadFailed", "Download failed"),
+        description: t("history.downloadFailedDesc", { count: failCount }),
+        variant: "destructive",
+      });
     }
-  }
+  };
 
   // Single download
   const handleDownload = async (image: AssetImage) => {
-    setIsDownloading(true)
+    setIsDownloading(true);
     try {
-      const platform = getPlatformService()
-      const ext = image.url.match(/\.(jpg|jpeg|png|gif|webp)/i)?.[1] || 'png'
-      const filename = `${image.model.replace(/\//g, '_')}_${image.predictionId}.${ext}`
-      const result = await platform.downloadFile(image.url, filename)
+      const platform = getPlatformService();
+      const ext = image.url.match(/\.(jpg|jpeg|png|gif|webp)/i)?.[1] || "png";
+      const filename = `${image.model.replace(/\//g, "_")}_${image.predictionId}.${ext}`;
+      const result = await platform.downloadFile(image.url, filename);
       if (result.success) {
-        toast({ title: t('common.downloaded', 'Downloaded') })
+        toast({ title: t("common.downloaded", "Downloaded") });
       } else {
-        toast({ title: result.error || t('common.error', 'Error'), variant: 'destructive' })
+        toast({
+          title: result.error || t("common.error", "Error"),
+          variant: "destructive",
+        });
       }
     } catch {
-      toast({ title: t('common.error', 'Error'), variant: 'destructive' })
+      toast({ title: t("common.error", "Error"), variant: "destructive" });
     } finally {
-      setIsDownloading(false)
+      setIsDownloading(false);
     }
-  }
+  };
 
   // Swipe to change page
   const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    touchStartX.current = e.touches[0].clientX
-    touchStartY.current = e.touches[0].clientY
-  }, [])
-
-  const handleTouchEnd = useCallback((e: React.TouchEvent) => {
-    const dx = e.changedTouches[0].clientX - touchStartX.current
-    const dy = e.changedTouches[0].clientY - touchStartY.current
-    if (Math.abs(dx) > 80 && Math.abs(dx) > Math.abs(dy) * 1.5) {
-      if (dx < 0 && page < totalPages) {
-        setPage(p => p + 1)
-      } else if (dx > 0 && page > 1) {
-        setPage(p => p - 1)
+    touchStartX.current = e.touches[0].clientX;
+    touchStartY.current = e.touches[0].clientY;
+  }, []);
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      const dx = e.changedTouches[0].clientX - touchStartX.current;
+      const dy = e.changedTouches[0].clientY - touchStartY.current;
+      if (Math.abs(dx) > 80 && Math.abs(dx) > Math.abs(dy) * 1.5) {
+        if (dx < 0 && page < totalPages) {
+          setPage((p) => p + 1);
+        } else if (dx > 0 && page > 1) {
+          setPage((p) => p - 1);
+        }
       }
-    }
-  }, [page, totalPages])
+    },
+    [page, totalPages],
+  );
 
   // Swipe in detail dialog to navigate between images
   const handleDialogTouchStart = useCallback((e: React.TouchEvent) => {
-    dialogTouchStartX.current = e.touches[0].clientX
-    dialogTouchStartY.current = e.touches[0].clientY
-  }, [])
-
-  const handleDialogTouchEnd = useCallback((e: React.TouchEvent) => {
-    const dx = e.changedTouches[0].clientX - dialogTouchStartX.current
-    const dy = e.changedTouches[0].clientY - dialogTouchStartY.current
-    if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) {
-      if (dx < 0) {
-        navigateImage('next')
-      } else {
-        navigateImage('prev')
+    dialogTouchStartX.current = e.touches[0].clientX;
+    dialogTouchStartY.current = e.touches[0].clientY;
+  }, []);
+
+  const handleDialogTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      const dx = e.changedTouches[0].clientX - dialogTouchStartX.current;
+      const dy = e.changedTouches[0].clientY - dialogTouchStartY.current;
+      if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) {
+        if (dx < 0) {
+          navigateImage("next");
+        } else {
+          navigateImage("prev");
+        }
       }
-    }
-  }, [navigateImage])
+    },
+    [navigateImage],
+  );
 
   const selectedIdx = selectedImage
-    ? images.findIndex(img => img.url === selectedImage.url && img.predictionId === selectedImage.predictionId)
-    : -1
+    ? images.findIndex(
+        (img) =>
+          img.url === selectedImage.url &&
+          img.predictionId === selectedImage.predictionId,
+      )
+    : -1;
 
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <h1 className="text-lg font-semibold">{t('nav.assets')}</h1>
+        <h1 className="text-lg font-semibold">{t("nav.assets")}</h1>
         <div className="flex items-center gap-2">
           {isSelectMode ? (
             <>
               {selectedIndices.size > 0 && (
                 <>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleSelectAll}
-                  >
+                  <Button variant="outline" size="sm" onClick={handleSelectAll}>
                     {selectedIndices.size === images.length
-                      ? t('common.deselectAll', 'Deselect All')
-                      : t('common.selectAll', 'Select All')}
+                      ? t("common.deselectAll", "Deselect All")
+                      : t("common.selectAll", "Select All")}
                   </Button>
                   <Button
                     variant="outline"
@@ -388,7 +408,12 @@ export function MobileAssetsPage() {
                   </Button>
                 </>
               )}
-              <Button variant="outline" size="sm" onClick={handleClearSelection} disabled={isDownloading}>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleClearSelection}
+                disabled={isDownloading}
+              >
                 <X className="h-4 w-4" />
               </Button>
             </>
@@ -396,10 +421,15 @@ export function MobileAssetsPage() {
             <Button
               variant="outline"
               size="sm"
-              onClick={() => { setPage(1); fetchAssets() }}
+              onClick={() => {
+                setPage(1);
+                fetchAssets();
+              }}
               disabled={isLoading}
             >
-              <RefreshCw className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
+              <RefreshCw
+                className={`h-4 w-4 ${isLoading ? "animate-spin" : ""}`}
+              />
             </Button>
           )}
         </div>
@@ -418,7 +448,7 @@ export function MobileAssetsPage() {
         ) : images.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-40 text-muted-foreground">
             <ImageOff className="h-10 w-10 mb-2" />
-            <p className="text-sm">{t('assets.empty', 'No images yet')}</p>
+            <p className="text-sm">{t("assets.empty", "No images yet")}</p>
           </div>
         ) : (
           <>
@@ -428,7 +458,9 @@ export function MobileAssetsPage() {
                   key={imageKey(image, idx)}
                   className={cn(
                     "aspect-square relative cursor-pointer rounded overflow-hidden select-none",
-                    isSelectMode && selectedIndices.has(idx) && "ring-2 ring-primary"
+                    isSelectMode &&
+                      selectedIndices.has(idx) &&
+                      "ring-2 ring-primary",
                   )}
                   onClick={() => handleImageClick(idx)}
                   onTouchStart={() => handleLongPressStart(idx)}
@@ -460,7 +492,7 @@ export function MobileAssetsPage() {
                 size="sm"
                 className="h-9 w-9 p-0"
                 disabled={page <= 1 || isLoading}
-                onClick={() => setPage(p => p - 1)}
+                onClick={() => setPage((p) => p - 1)}
               >
                 <ChevronLeft className="h-4 w-4" />
               </Button>
@@ -472,7 +504,7 @@ export function MobileAssetsPage() {
                 size="sm"
                 className="h-9 w-9 p-0"
                 disabled={page >= totalPages || isLoading}
-                onClick={() => setPage(p => p + 1)}
+                onClick={() => setPage((p) => p + 1)}
               >
                 <ChevronRight className="h-4 w-4" />
               </Button>
@@ -482,7 +514,10 @@ export function MobileAssetsPage() {
       </div>
 
       {/* Preview Dialog with navigation */}
-      <Dialog open={!!selectedImage} onOpenChange={(open) => !open && setSelectedImage(null)}>
+      <Dialog
+        open={!!selectedImage}
+        onOpenChange={(open) => !open && setSelectedImage(null)}
+      >
         <DialogContent className="max-w-[95vw] max-h-[90vh] p-2">
           {selectedImage && (
             <div
@@ -497,7 +532,7 @@ export function MobileAssetsPage() {
                     variant="outline"
                     size="sm"
                     className="h-8 w-8 p-0"
-                    onClick={() => navigateImage('prev')}
+                    onClick={() => navigateImage("prev")}
                   >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
@@ -508,7 +543,7 @@ export function MobileAssetsPage() {
                     variant="outline"
                     size="sm"
                     className="h-8 w-8 p-0"
-                    onClick={() => navigateImage('next')}
+                    onClick={() => navigateImage("next")}
                   >
                     <ChevronRight className="h-4 w-4" />
                   </Button>
@@ -542,5 +577,5 @@ export function MobileAssetsPage() {
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileFreeToolsPage.tsx b/mobile/src/pages/MobileFreeToolsPage.tsx
index b4bb63c7..f294d587 100644
--- a/mobile/src/pages/MobileFreeToolsPage.tsx
+++ b/mobile/src/pages/MobileFreeToolsPage.tsx
@@ -1,145 +1,164 @@
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Video, ImageUp, Eraser, Wand2, ArrowRight, MousePointer2, FileVideo, FileAudio, FileImage, Scissors, Combine, Sparkles } from 'lucide-react'
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Video,
+  ImageUp,
+  Eraser,
+  Wand2,
+  ArrowRight,
+  MousePointer2,
+  FileVideo,
+  FileAudio,
+  FileImage,
+  Scissors,
+  Combine,
+  Sparkles,
+} from "lucide-react";
 
 // Import tool demo images
-import videoEnhancerImg from '../../../build/images/VideoEnhancer.jpeg'
-import imageEnhancerImg from '../../../build/images/ImageEnhancer.jpeg'
-import backgroundRemoverImg from '../../../build/images/BackgroundRemover.jpeg'
-import imageEraserImg from '../../../build/images/ImageEraser.jpeg'
-import SegmentAnythingImg from '../../../build/images/SegmentAnything.png'
-import faceEnhancerImg from '../../../build/images/FaceEnhancerNew.png'
-import videoConverterImg from '../../../build/images/VideoConverter.png'
-import audioConverterImg from '../../../build/images/AudioConverter.png'
-import imageConverterImg from '../../../build/images/ImageConverter.png'
-import mediaTrimmerImg from '../../../build/images/MediaTrimmer.png'
-import mediaMergerImg from '../../../build/images/MediaMerger.png'
+import videoEnhancerImg from "../../../build/images/VideoEnhancer.jpeg";
+import imageEnhancerImg from "../../../build/images/ImageEnhancer.jpeg";
+import backgroundRemoverImg from "../../../build/images/BackgroundRemover.jpeg";
+import imageEraserImg from "../../../build/images/ImageEraser.jpeg";
+import SegmentAnythingImg from "../../../build/images/SegmentAnything.png";
+import faceEnhancerImg from "../../../build/images/FaceEnhancerNew.png";
+import videoConverterImg from "../../../build/images/VideoConverter.png";
+import audioConverterImg from "../../../build/images/AudioConverter.png";
+import imageConverterImg from "../../../build/images/ImageConverter.png";
+import mediaTrimmerImg from "../../../build/images/MediaTrimmer.png";
+import mediaMergerImg from "../../../build/images/MediaMerger.png";
 
 export function MobileFreeToolsPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const tools = [
     {
-      id: 'video',
+      id: "video",
       icon: Video,
-      titleKey: 'freeTools.videoEnhancer.title',
-      descriptionKey: 'freeTools.videoEnhancer.description',
-      route: '/free-tools/video',
-      gradient: 'from-violet-500/20 via-purple-500/10 to-transparent',
-      iconGradient: 'from-violet-500 to-purple-600',
-      image: videoEnhancerImg
+      titleKey: "freeTools.videoEnhancer.title",
+      descriptionKey: "freeTools.videoEnhancer.description",
+      route: "/free-tools/video",
+      gradient: "from-violet-500/20 via-purple-500/10 to-transparent",
+      iconGradient: "from-violet-500 to-purple-600",
+      image: videoEnhancerImg,
     },
     {
-      id: 'image',
+      id: "image",
       icon: ImageUp,
-      titleKey: 'freeTools.imageEnhancer.title',
-      descriptionKey: 'freeTools.imageEnhancer.description',
-      route: '/free-tools/image',
-      gradient: 'from-cyan-500/20 via-blue-500/10 to-transparent',
-      iconGradient: 'from-cyan-500 to-blue-600',
-      image: imageEnhancerImg
+      titleKey: "freeTools.imageEnhancer.title",
+      descriptionKey: "freeTools.imageEnhancer.description",
+      route: "/free-tools/image",
+      gradient: "from-cyan-500/20 via-blue-500/10 to-transparent",
+      iconGradient: "from-cyan-500 to-blue-600",
+      image: imageEnhancerImg,
     },
     {
-      id: 'background-remover',
+      id: "background-remover",
       icon: Eraser,
-      titleKey: 'freeTools.backgroundRemover.title',
-      descriptionKey: 'freeTools.backgroundRemover.description',
-      route: '/free-tools/background-remover',
-      gradient: 'from-emerald-500/20 via-green-500/10 to-transparent',
-      iconGradient: 'from-emerald-500 to-green-600',
-      image: backgroundRemoverImg
+      titleKey: "freeTools.backgroundRemover.title",
+      descriptionKey: "freeTools.backgroundRemover.description",
+      route: "/free-tools/background-remover",
+      gradient: "from-emerald-500/20 via-green-500/10 to-transparent",
+      iconGradient: "from-emerald-500 to-green-600",
+      image: backgroundRemoverImg,
     },
     {
-      id: 'image-eraser',
+      id: "image-eraser",
       icon: Wand2,
-      titleKey: 'freeTools.imageEraser.title',
-      descriptionKey: 'freeTools.imageEraser.description',
-      route: '/free-tools/image-eraser',
-      gradient: 'from-orange-500/20 via-red-500/10 to-transparent',
-      iconGradient: 'from-orange-500 to-red-600',
-      image: imageEraserImg
+      titleKey: "freeTools.imageEraser.title",
+      descriptionKey: "freeTools.imageEraser.description",
+      route: "/free-tools/image-eraser",
+      gradient: "from-orange-500/20 via-red-500/10 to-transparent",
+      iconGradient: "from-orange-500 to-red-600",
+      image: imageEraserImg,
     },
     {
-      id: 'segment-anything',
+      id: "segment-anything",
       icon: MousePointer2,
-      titleKey: 'freeTools.segmentAnything.title',
-      descriptionKey: 'freeTools.segmentAnything.description',
-      route: '/free-tools/segment-anything',
-      gradient: 'from-pink-500/20 via-rose-500/10 to-transparent',
-      iconGradient: 'from-pink-500 to-rose-600',
-      image: SegmentAnythingImg
+      titleKey: "freeTools.segmentAnything.title",
+      descriptionKey: "freeTools.segmentAnything.description",
+      route: "/free-tools/segment-anything",
+      gradient: "from-pink-500/20 via-rose-500/10 to-transparent",
+      iconGradient: "from-pink-500 to-rose-600",
+      image: SegmentAnythingImg,
     },
     {
-      id: 'face-enhancer',
+      id: "face-enhancer",
       icon: Sparkles,
-      titleKey: 'freeTools.faceEnhancer.title',
-      descriptionKey: 'freeTools.faceEnhancer.description',
-      route: '/free-tools/face-enhancer',
-      gradient: 'from-rose-500/20 via-pink-500/10 to-transparent',
-      iconGradient: 'from-rose-500 to-pink-600',
-      image: faceEnhancerImg
+      titleKey: "freeTools.faceEnhancer.title",
+      descriptionKey: "freeTools.faceEnhancer.description",
+      route: "/free-tools/face-enhancer",
+      gradient: "from-rose-500/20 via-pink-500/10 to-transparent",
+      iconGradient: "from-rose-500 to-pink-600",
+      image: faceEnhancerImg,
     },
     {
-      id: 'video-converter',
+      id: "video-converter",
       icon: FileVideo,
-      titleKey: 'freeTools.videoConverter.title',
-      descriptionKey: 'freeTools.videoConverter.description',
-      route: '/free-tools/video-converter',
-      gradient: 'from-indigo-500/20 via-blue-500/10 to-transparent',
-      iconGradient: 'from-indigo-500 to-blue-600',
-      image: videoConverterImg
+      titleKey: "freeTools.videoConverter.title",
+      descriptionKey: "freeTools.videoConverter.description",
+      route: "/free-tools/video-converter",
+      gradient: "from-indigo-500/20 via-blue-500/10 to-transparent",
+      iconGradient: "from-indigo-500 to-blue-600",
+      image: videoConverterImg,
     },
     {
-      id: 'audio-converter',
+      id: "audio-converter",
       icon: FileAudio,
-      titleKey: 'freeTools.audioConverter.title',
-      descriptionKey: 'freeTools.audioConverter.description',
-      route: '/free-tools/audio-converter',
-      gradient: 'from-teal-500/20 via-cyan-500/10 to-transparent',
-      iconGradient: 'from-teal-500 to-cyan-600',
-      image: audioConverterImg
+      titleKey: "freeTools.audioConverter.title",
+      descriptionKey: "freeTools.audioConverter.description",
+      route: "/free-tools/audio-converter",
+      gradient: "from-teal-500/20 via-cyan-500/10 to-transparent",
+      iconGradient: "from-teal-500 to-cyan-600",
+      image: audioConverterImg,
     },
     {
-      id: 'image-converter',
+      id: "image-converter",
       icon: FileImage,
-      titleKey: 'freeTools.imageConverter.title',
-      descriptionKey: 'freeTools.imageConverter.description',
-      route: '/free-tools/image-converter',
-      gradient: 'from-amber-500/20 via-yellow-500/10 to-transparent',
-      iconGradient: 'from-amber-500 to-yellow-600',
-      image: imageConverterImg
+      titleKey: "freeTools.imageConverter.title",
+      descriptionKey: "freeTools.imageConverter.description",
+      route: "/free-tools/image-converter",
+      gradient: "from-amber-500/20 via-yellow-500/10 to-transparent",
+      iconGradient: "from-amber-500 to-yellow-600",
+      image: imageConverterImg,
     },
     {
-      id: 'media-trimmer',
+      id: "media-trimmer",
       icon: Scissors,
-      titleKey: 'freeTools.mediaTrimmer.title',
-      descriptionKey: 'freeTools.mediaTrimmer.description',
-      route: '/free-tools/media-trimmer',
-      gradient: 'from-red-500/20 via-orange-500/10 to-transparent',
-      iconGradient: 'from-red-500 to-orange-600',
-      image: mediaTrimmerImg
+      titleKey: "freeTools.mediaTrimmer.title",
+      descriptionKey: "freeTools.mediaTrimmer.description",
+      route: "/free-tools/media-trimmer",
+      gradient: "from-red-500/20 via-orange-500/10 to-transparent",
+      iconGradient: "from-red-500 to-orange-600",
+      image: mediaTrimmerImg,
     },
     {
-      id: 'media-merger',
+      id: "media-merger",
       icon: Combine,
-      titleKey: 'freeTools.mediaMerger.title',
-      descriptionKey: 'freeTools.mediaMerger.description',
-      route: '/free-tools/media-merger',
-      gradient: 'from-purple-500/20 via-fuchsia-500/10 to-transparent',
-      iconGradient: 'from-purple-500 to-fuchsia-600',
-      image: mediaMergerImg
-    }
-  ]
+      titleKey: "freeTools.mediaMerger.title",
+      descriptionKey: "freeTools.mediaMerger.description",
+      route: "/free-tools/media-merger",
+      gradient: "from-purple-500/20 via-fuchsia-500/10 to-transparent",
+      iconGradient: "from-purple-500 to-fuchsia-600",
+      image: mediaMergerImg,
+    },
+  ];
 
   return (
     <div className="p-4">
       <div className="mb-6">
-        <h1 className="text-2xl font-bold">{t('freeTools.title')}</h1>
+        <h1 className="text-2xl font-bold">{t("freeTools.title")}</h1>
         <p className="text-muted-foreground text-sm mt-1">
-          {t('freeTools.description')}
+          {t("freeTools.description")}
         </p>
       </div>
 
@@ -151,7 +170,9 @@ export function MobileFreeToolsPage() {
             onClick={() => navigate(tool.route)}
           >
             {/* Decorative gradient background */}
-            <div className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${tool.gradient} rounded-full blur-2xl opacity-60 group-hover:opacity-100 group-hover:scale-125 transition-all duration-500`} />
+            <div
+              className={`absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl ${tool.gradient} rounded-full blur-2xl opacity-60 group-hover:opacity-100 group-hover:scale-125 transition-all duration-500`}
+            />
 
             {/* Demo image or icon placeholder */}
             <div className="px-3 pt-3 relative z-10">
@@ -163,7 +184,9 @@ export function MobileFreeToolsPage() {
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
                 ) : (
-                  <div className={`w-full h-full bg-gradient-to-br ${tool.iconGradient} flex items-center justify-center group-hover:scale-105 transition-transform duration-300`}>
+                  <div
+                    className={`w-full h-full bg-gradient-to-br ${tool.iconGradient} flex items-center justify-center group-hover:scale-105 transition-transform duration-300`}
+                  >
                     <tool.icon className="h-10 w-10 text-white/90" />
                   </div>
                 )}
@@ -175,7 +198,9 @@ export function MobileFreeToolsPage() {
                 <div className="p-1.5 rounded-lg bg-primary/10 group-hover:bg-primary/20 transition-colors">
                   <tool.icon className="h-3.5 w-3.5 text-primary" />
                 </div>
-                <CardTitle className="text-sm">{tool.title || t(tool.titleKey)}</CardTitle>
+                <CardTitle className="text-sm">
+                  {tool.title || t(tool.titleKey)}
+                </CardTitle>
               </div>
               <CardDescription className="mt-1.5 text-xs line-clamp-2">
                 {tool.description || t(tool.descriptionKey)}
@@ -187,7 +212,7 @@ export function MobileFreeToolsPage() {
                 size="sm"
                 className="w-full justify-between group-hover:bg-primary/5 h-8"
               >
-                <span className="text-xs">{t('common.open')}</span>
+                <span className="text-xs">{t("common.open")}</span>
                 <ArrowRight className="h-3.5 w-3.5 group-hover:translate-x-1 transition-transform" />
               </Button>
             </CardContent>
@@ -195,5 +220,5 @@ export function MobileFreeToolsPage() {
         ))}
       </div>
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileHistoryPage.tsx b/mobile/src/pages/MobileHistoryPage.tsx
index 8cbf9372..b8a4a1f2 100644
--- a/mobile/src/pages/MobileHistoryPage.tsx
+++ b/mobile/src/pages/MobileHistoryPage.tsx
@@ -1,18 +1,18 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { getMediaTypeFromUrl, isHttpUrl } from '@mobile/lib/mediaUtils'
-import { apiClient } from '@/api/client'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { useTemplateStore } from '@/stores/templateStore'
-import { usePredictionInputsStore } from '@mobile/stores/predictionInputsStore'
-import type { HistoryItem } from '@/types/prediction'
-import { OutputDisplay } from '@/components/playground/OutputDisplay'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { getMediaTypeFromUrl, isHttpUrl } from "@mobile/lib/mediaUtils";
+import { apiClient } from "@/api/client";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { useTemplateStore } from "@/stores/templateStore";
+import { usePredictionInputsStore } from "@mobile/stores/predictionInputsStore";
+import type { HistoryItem } from "@/types/prediction";
+import { OutputDisplay } from "@/components/playground/OutputDisplay";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 // ScrollArea removed – native div scroll for reliable infinite-scroll
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Dialog,
   DialogContent,
@@ -20,7 +20,7 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
+} from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -30,15 +30,15 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { Checkbox } from '@/components/ui/checkbox'
+} from "@/components/ui/alert-dialog";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from "@/components/ui/select";
 import {
   Loader2,
   RefreshCw,
@@ -60,38 +60,38 @@ import {
   BookmarkPlus,
   Trash2,
   Download,
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { AudioPlayer } from '@/components/shared/AudioPlayer'
-import { useToast } from '@/hooks/useToast'
-import { getPlatformService } from '@mobile/platform'
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AudioPlayer } from "@/components/shared/AudioPlayer";
+import { useToast } from "@/hooks/useToast";
+import { getPlatformService } from "@mobile/platform";
 
 // Extended history item that might include inputs from API
 interface ExtendedHistoryItem extends HistoryItem {
-  inputs?: Record<string, unknown>
-  input?: Record<string, unknown>
+  inputs?: Record<string, unknown>;
+  input?: Record<string, unknown>;
 }
 
 // Video preview component - shows first frame, plays on hover
 function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
 
   const handleMouseEnter = () => {
     if (videoRef.current && isLoaded && enabled) {
       videoRef.current.play().catch(() => {
         // Ignore autoplay errors
-      })
+      });
     }
-  }
+  };
 
   const handleMouseLeave = () => {
     if (videoRef.current) {
-      videoRef.current.pause()
-      videoRef.current.currentTime = 0.1
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0.1;
     }
-  }
+  };
 
   // Show placeholder if disabled or error
   if (!enabled || hasError) {
@@ -99,7 +99,7 @@ function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
       <div className="w-full h-full flex items-center justify-center">
         <Video className="h-12 w-12 text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   return (
@@ -122,594 +122,679 @@ function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
         playsInline
         preload="auto"
         onLoadedData={(e) => {
-          const video = e.currentTarget
-          video.currentTime = 0.1  // Seek to first frame for preview
-          setIsLoaded(true)
+          const video = e.currentTarget;
+          video.currentTime = 0.1; // Seek to first frame for preview
+          setIsLoaded(true);
         }}
         onError={() => setHasError(true)}
       />
     </div>
-  )
+  );
 }
 
 // Proxy image component - fetches images via Capacitor HTTP to bypass CORS
-function ProxyImage({ src, alt, className }: { src: string; alt: string; className?: string }) {
-  const [dataUrl, setDataUrl] = useState<string | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [hasError, setHasError] = useState(false)
+function ProxyImage({
+  src,
+  alt,
+  className,
+}: {
+  src: string;
+  alt: string;
+  className?: string;
+}) {
+  const [dataUrl, setDataUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    let mounted = true
+    let mounted = true;
 
     const loadImage = async () => {
       try {
-        const platform = getPlatformService()
-        const result = await platform.fetchImageAsDataUrl(src)
+        const platform = getPlatformService();
+        const result = await platform.fetchImageAsDataUrl(src);
         if (mounted) {
           if (result) {
-            setDataUrl(result)
+            setDataUrl(result);
           } else {
-            setHasError(true)
+            setHasError(true);
           }
-          setIsLoading(false)
+          setIsLoading(false);
         }
       } catch {
         if (mounted) {
-          setHasError(true)
-          setIsLoading(false)
+          setHasError(true);
+          setIsLoading(false);
         }
       }
-    }
+    };
 
-    loadImage()
+    loadImage();
 
     return () => {
-      mounted = false
-    }
-  }, [src])
+      mounted = false;
+    };
+  }, [src]);
 
   if (isLoading) {
     return (
-      <div className={cn('flex items-center justify-center bg-muted', className)}>
+      <div
+        className={cn("flex items-center justify-center bg-muted", className)}
+      >
         <Loader2 className="h-6 w-6 text-muted-foreground animate-spin" />
       </div>
-    )
+    );
   }
 
   if (hasError || !dataUrl) {
     return (
-      <div className={cn('flex items-center justify-center bg-muted', className)}>
+      <div
+        className={cn("flex items-center justify-center bg-muted", className)}
+      >
         <Image className="h-8 w-8 text-muted-foreground" />
       </div>
-    )
+    );
   }
 
-  return (
-    <img
-      src={dataUrl}
-      alt={alt}
-      className={className}
-    />
-  )
+  return <img src={dataUrl} alt={alt} className={className} />;
 }
 
 export function MobileHistoryPage() {
-  const { t } = useTranslation()
-  const { toast } = useToast()
-  const { isLoading: isLoadingApiKey, isValidated } = useApiKeyStore()
-  const { templates, saveTemplate, loadTemplates } = useTemplateStore()
-  const { get: getLocalInputs, getArchived, load: loadPredictionInputs, isLoaded: inputsLoaded } = usePredictionInputsStore()
-  const [items, setItems] = useState<ExtendedHistoryItem[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
-  const contentRef = useRef<HTMLDivElement>(null)
-  const touchStartX = useRef(0)
-  const touchStartY = useRef(0)
-  const dialogTouchStartX = useRef(0)
-  const dialogTouchStartY = useRef(0)
-  const [statusFilter, setStatusFilter] = useState<string>('all')
-  const [selectedItem, setSelectedItem] = useState<ExtendedHistoryItem | null>(null)
-  const [copiedId, setCopiedId] = useState(false)
-  const [loadPreviews, setLoadPreviews] = useState(true)
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const { isLoading: isLoadingApiKey, isValidated } = useApiKeyStore();
+  const { templates, saveTemplate, loadTemplates } = useTemplateStore();
+  const {
+    get: getLocalInputs,
+    getArchived,
+    load: loadPredictionInputs,
+    isLoaded: inputsLoaded,
+  } = usePredictionInputsStore();
+  const [items, setItems] = useState<ExtendedHistoryItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
+  const dialogTouchStartX = useRef(0);
+  const dialogTouchStartY = useRef(0);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [selectedItem, setSelectedItem] = useState<ExtendedHistoryItem | null>(
+    null,
+  );
+  const [copiedId, setCopiedId] = useState(false);
+  const [loadPreviews, setLoadPreviews] = useState(true);
 
   // Save template state
-  const [showSaveDialog, setShowSaveDialog] = useState(false)
-  const [templateName, setTemplateName] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-  const [nameError, setNameError] = useState('')
+  const [showSaveDialog, setShowSaveDialog] = useState(false);
+  const [templateName, setTemplateName] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [nameError, setNameError] = useState("");
 
   // Delete functionality state
-  const [isSelectMode, setIsSelectMode] = useState(false)
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-  const [deleteConfirmItem, setDeleteConfirmItem] = useState<ExtendedHistoryItem | null>(null)
-  const [bulkDeleteConfirm, setBulkDeleteConfirm] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [isDownloading, setIsDownloading] = useState(false)
+  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [deleteConfirmItem, setDeleteConfirmItem] =
+    useState<ExtendedHistoryItem | null>(null);
+  const [bulkDeleteConfirm, setBulkDeleteConfirm] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   // Long press handling
-  const longPressTimer = useRef<NodeJS.Timeout | null>(null)
-  const longPressTriggered = useRef(false)
-  const [isFetchingInputs, setIsFetchingInputs] = useState(false)
+  const longPressTimer = useRef<NodeJS.Timeout | null>(null);
+  const longPressTriggered = useRef(false);
+  const [isFetchingInputs, setIsFetchingInputs] = useState(false);
 
   // Check for duplicate template name
-  const checkDuplicateName = useCallback((name: string) => {
-    const trimmed = name.trim()
-    if (!trimmed) {
-      setNameError('')
-      return false
-    }
-    const isDuplicate = templates.some(t => t.name.toLowerCase() === trimmed.toLowerCase())
-    if (isDuplicate) {
-      setNameError(t('history.saveTemplate.duplicateName'))
-      return true
-    }
-    setNameError('')
-    return false
-  }, [templates, t])
+  const checkDuplicateName = useCallback(
+    (name: string) => {
+      const trimmed = name.trim();
+      if (!trimmed) {
+        setNameError("");
+        return false;
+      }
+      const isDuplicate = templates.some(
+        (t) => t.name.toLowerCase() === trimmed.toLowerCase(),
+      );
+      if (isDuplicate) {
+        setNameError(t("history.saveTemplate.duplicateName"));
+        return true;
+      }
+      setNameError("");
+      return false;
+    },
+    [templates, t],
+  );
 
   // Load templates and prediction inputs on mount
   useEffect(() => {
-    loadTemplates()
+    loadTemplates();
     if (!inputsLoaded) {
-      loadPredictionInputs()
+      loadPredictionInputs();
     }
-  }, [loadTemplates, inputsLoaded, loadPredictionInputs])
+  }, [loadTemplates, inputsLoaded, loadPredictionInputs]);
 
   const handleCopyId = async (id: string) => {
-    await navigator.clipboard.writeText(id)
-    setCopiedId(true)
-    setTimeout(() => setCopiedId(false), 2000)
-  }
+    await navigator.clipboard.writeText(id);
+    setCopiedId(true);
+    setTimeout(() => setCopiedId(false), 2000);
+  };
 
   const handleDelete = async (item: ExtendedHistoryItem) => {
-    setIsDeleting(true)
+    setIsDeleting(true);
     try {
-      await apiClient.deletePrediction(item.id)
-      setItems(prev => prev.filter(i => i.id !== item.id))
-      setTotal(prev => prev - 1)
-      setDeleteConfirmItem(null)
-      setSelectedItem(null)
+      await apiClient.deletePrediction(item.id);
+      setItems((prev) => prev.filter((i) => i.id !== item.id));
+      setTotal((prev) => prev - 1);
+      setDeleteConfirmItem(null);
+      setSelectedItem(null);
       toast({
-        title: t('history.deleted'),
+        title: t("history.deleted"),
         description: item.model,
-      })
+      });
     } catch (err) {
       toast({
-        title: t('history.deleteFailed'),
-        description: err instanceof Error ? err.message : 'Unknown error',
-        variant: 'destructive',
-      })
+        title: t("history.deleteFailed"),
+        description: err instanceof Error ? err.message : "Unknown error",
+        variant: "destructive",
+      });
     } finally {
-      setIsDeleting(false)
+      setIsDeleting(false);
     }
-  }
+  };
 
   const handleBulkDelete = async () => {
-    if (selectedIds.size === 0) return
-    setIsDeleting(true)
+    if (selectedIds.size === 0) return;
+    setIsDeleting(true);
     try {
-      await apiClient.deletePredictions(Array.from(selectedIds))
-      setItems(prev => prev.filter(i => !selectedIds.has(i.id)))
-      setTotal(prev => prev - selectedIds.size)
-      const count = selectedIds.size
-      setSelectedIds(new Set())
-      setIsSelectMode(false)
-      setBulkDeleteConfirm(false)
+      await apiClient.deletePredictions(Array.from(selectedIds));
+      setItems((prev) => prev.filter((i) => !selectedIds.has(i.id)));
+      setTotal((prev) => prev - selectedIds.size);
+      const count = selectedIds.size;
+      setSelectedIds(new Set());
+      setIsSelectMode(false);
+      setBulkDeleteConfirm(false);
       toast({
-        title: t('history.deletedBulk'),
-        description: t('history.deletedBulkDesc', { count }),
-      })
+        title: t("history.deletedBulk"),
+        description: t("history.deletedBulkDesc", { count }),
+      });
     } catch (err) {
       toast({
-        title: t('history.deleteFailed'),
-        description: err instanceof Error ? err.message : 'Unknown error',
-        variant: 'destructive',
-      })
+        title: t("history.deleteFailed"),
+        description: err instanceof Error ? err.message : "Unknown error",
+        variant: "destructive",
+      });
     } finally {
-      setIsDeleting(false)
+      setIsDeleting(false);
     }
-  }
+  };
 
   const handleToggleSelect = (id: string) => {
-    setSelectedIds(prev => {
-      const newSet = new Set(prev)
+    setSelectedIds((prev) => {
+      const newSet = new Set(prev);
       if (newSet.has(id)) {
-        newSet.delete(id)
+        newSet.delete(id);
       } else {
-        newSet.add(id)
+        newSet.add(id);
       }
-      return newSet
-    })
-  }
+      return newSet;
+    });
+  };
 
   const handleSelectAll = () => {
     if (selectedIds.size === items.length) {
-      setSelectedIds(new Set())
+      setSelectedIds(new Set());
     } else {
-      setSelectedIds(new Set(items.map(i => i.id)))
+      setSelectedIds(new Set(items.map((i) => i.id)));
     }
-  }
+  };
 
   const handleClearSelection = () => {
-    setSelectedIds(new Set())
-    setIsSelectMode(false)
-  }
+    setSelectedIds(new Set());
+    setIsSelectMode(false);
+  };
 
   // Long press handlers
   const handleLongPressStart = (item: ExtendedHistoryItem) => {
-    longPressTriggered.current = false
+    longPressTriggered.current = false;
     longPressTimer.current = setTimeout(() => {
-      longPressTriggered.current = true
-      if (!isSelectMode && statusFilter !== 'archived') {
-        setIsSelectMode(true)
-        setSelectedIds(new Set([item.id]))
+      longPressTriggered.current = true;
+      if (!isSelectMode && statusFilter !== "archived") {
+        setIsSelectMode(true);
+        setSelectedIds(new Set([item.id]));
       }
-    }, 500) // 500ms for long press
-  }
+    }, 500); // 500ms for long press
+  };
 
   const handleLongPressEnd = () => {
     if (longPressTimer.current) {
-      clearTimeout(longPressTimer.current)
-      longPressTimer.current = null
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
     }
-  }
+  };
 
   const handleCardClick = (item: ExtendedHistoryItem) => {
     // If long press was triggered, don't handle click
     if (longPressTriggered.current) {
-      longPressTriggered.current = false
-      return
+      longPressTriggered.current = false;
+      return;
     }
 
     if (isSelectMode) {
-      handleToggleSelect(item.id)
+      handleToggleSelect(item.id);
     } else {
-      setSelectedItem(item)
+      setSelectedItem(item);
     }
-  }
+  };
 
   // Bulk download handler
   const handleBulkDownload = async () => {
-    if (selectedIds.size === 0) return
-    setIsDownloading(true)
+    if (selectedIds.size === 0) return;
+    setIsDownloading(true);
 
-    const platform = getPlatformService()
-    let successCount = 0
-    let failCount = 0
+    const platform = getPlatformService();
+    let successCount = 0;
+    let failCount = 0;
 
     for (const id of selectedIds) {
-      const item = items.find(i => i.id === id)
-      if (!item?.outputs?.[0] || typeof item.outputs[0] !== 'string') continue
+      const item = items.find((i) => i.id === id);
+      if (!item?.outputs?.[0] || typeof item.outputs[0] !== "string") continue;
 
-      const url = item.outputs[0]
-      if (!url.startsWith('http')) continue
+      const url = item.outputs[0];
+      if (!url.startsWith("http")) continue;
 
       // Extract file extension from URL
-      const urlPath = new URL(url).pathname
-      const ext = urlPath.split('.').pop() || 'png'
-      const filename = `wavespeed_${item.id.slice(-8)}.${ext}`
+      const urlPath = new URL(url).pathname;
+      const ext = urlPath.split(".").pop() || "png";
+      const filename = `wavespeed_${item.id.slice(-8)}.${ext}`;
 
       try {
-        const result = await platform.downloadFile(url, filename)
+        const result = await platform.downloadFile(url, filename);
         if (result.success) {
-          successCount++
+          successCount++;
         } else {
-          failCount++
+          failCount++;
         }
       } catch {
-        failCount++
+        failCount++;
       }
     }
 
-    setIsDownloading(false)
-    setSelectedIds(new Set())
-    setIsSelectMode(false)
+    setIsDownloading(false);
+    setSelectedIds(new Set());
+    setIsSelectMode(false);
 
     if (successCount > 0) {
       toast({
-        title: t('history.downloadComplete'),
-        description: t('history.downloadCompleteDesc', { count: successCount }),
-      })
+        title: t("history.downloadComplete"),
+        description: t("history.downloadCompleteDesc", { count: successCount }),
+      });
     }
     if (failCount > 0) {
       toast({
-        title: t('history.downloadFailed'),
-        description: t('history.downloadFailedDesc', { count: failCount }),
-        variant: 'destructive',
-      })
+        title: t("history.downloadFailed"),
+        description: t("history.downloadFailedDesc", { count: failCount }),
+        variant: "destructive",
+      });
     }
-  }
+  };
 
   // Navigate to previous/next history item (with loop support)
-  const navigateHistory = useCallback((direction: 'prev' | 'next') => {
-    if (!selectedItem || items.length <= 1) return
+  const navigateHistory = useCallback(
+    (direction: "prev" | "next") => {
+      if (!selectedItem || items.length <= 1) return;
 
-    const currentIdx = items.findIndex(item => item.id === selectedItem.id)
-    if (currentIdx === -1) return
+      const currentIdx = items.findIndex((item) => item.id === selectedItem.id);
+      if (currentIdx === -1) return;
 
-    let newIdx: number
-    if (direction === 'prev') {
-      newIdx = currentIdx === 0 ? items.length - 1 : currentIdx - 1
-    } else {
-      newIdx = currentIdx === items.length - 1 ? 0 : currentIdx + 1
-    }
+      let newIdx: number;
+      if (direction === "prev") {
+        newIdx = currentIdx === 0 ? items.length - 1 : currentIdx - 1;
+      } else {
+        newIdx = currentIdx === items.length - 1 ? 0 : currentIdx + 1;
+      }
 
-    setSelectedItem(items[newIdx])
-  }, [selectedItem, items])
+      setSelectedItem(items[newIdx]);
+    },
+    [selectedItem, items],
+  );
 
-  const pageSize = 20
-  const totalPages = Math.ceil(total / pageSize) || 1
+  const pageSize = 20;
+  const totalPages = Math.ceil(total / pageSize) || 1;
 
   const fetchHistory = useCallback(async () => {
-    if (!isValidated) return
-    setIsLoading(true)
-    setError(null)
+    if (!isValidated) return;
+    setIsLoading(true);
+    setError(null);
 
     try {
       // Handle archived filter - show from local storage
-      if (statusFilter === 'archived') {
-        const archivedEntries = getArchived()
-        const archivedItems: ExtendedHistoryItem[] = archivedEntries.map(entry => ({
-          id: entry.predictionId,
-          model: entry.modelId,
-          status: 'completed' as const,
-          outputs: [],
-          created_at: entry.createdAt,
-          inputs: entry.inputs
-        }))
-        setItems(archivedItems)
-        setTotal(archivedItems.length)
-        return
+      if (statusFilter === "archived") {
+        const archivedEntries = getArchived();
+        const archivedItems: ExtendedHistoryItem[] = archivedEntries.map(
+          (entry) => ({
+            id: entry.predictionId,
+            model: entry.modelId,
+            status: "completed" as const,
+            outputs: [],
+            created_at: entry.createdAt,
+            inputs: entry.inputs,
+          }),
+        );
+        setItems(archivedItems);
+        setTotal(archivedItems.length);
+        return;
       }
 
-      const filters = statusFilter !== 'all'
-        ? { status: statusFilter as 'completed' | 'failed' }
-        : undefined
+      const filters =
+        statusFilter !== "all"
+          ? { status: statusFilter as "completed" | "failed" }
+          : undefined;
 
-      const response = await apiClient.getHistory(page, pageSize, filters)
-      setItems((response.items || []) as ExtendedHistoryItem[])
-      setTotal(response.total || 0)
+      const response = await apiClient.getHistory(page, pageSize, filters);
+      setItems((response.items || []) as ExtendedHistoryItem[]);
+      setTotal(response.total || 0);
     } catch (err) {
-      console.error('History fetch error:', err)
-      setError(err instanceof Error ? err.message : 'Failed to fetch history')
+      console.error("History fetch error:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch history");
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [isValidated, page, statusFilter, getArchived])
+  }, [isValidated, page, statusFilter, getArchived]);
 
   // Load when page or filter changes
   useEffect(() => {
-    fetchHistory()
-  }, [fetchHistory])
+    fetchHistory();
+  }, [fetchHistory]);
 
   // Reset page when filter changes
   useEffect(() => {
-    setPage(1)
-  }, [statusFilter])
+    setPage(1);
+  }, [statusFilter]);
 
   // Swipe to change page
   const handleTouchStart = useCallback((e: React.TouchEvent) => {
-    touchStartX.current = e.touches[0].clientX
-    touchStartY.current = e.touches[0].clientY
-  }, [])
-
-  const handleTouchEnd = useCallback((e: React.TouchEvent) => {
-    const dx = e.changedTouches[0].clientX - touchStartX.current
-    const dy = e.changedTouches[0].clientY - touchStartY.current
-    // Only trigger if horizontal swipe is dominant and > 80px
-    if (Math.abs(dx) > 80 && Math.abs(dx) > Math.abs(dy) * 1.5) {
-      if (dx < 0 && page < totalPages) {
-        setPage(p => p + 1)
-      } else if (dx > 0 && page > 1) {
-        setPage(p => p - 1)
+    touchStartX.current = e.touches[0].clientX;
+    touchStartY.current = e.touches[0].clientY;
+  }, []);
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      const dx = e.changedTouches[0].clientX - touchStartX.current;
+      const dy = e.changedTouches[0].clientY - touchStartY.current;
+      // Only trigger if horizontal swipe is dominant and > 80px
+      if (Math.abs(dx) > 80 && Math.abs(dx) > Math.abs(dy) * 1.5) {
+        if (dx < 0 && page < totalPages) {
+          setPage((p) => p + 1);
+        } else if (dx > 0 && page > 1) {
+          setPage((p) => p - 1);
+        }
       }
-    }
-  }, [page, totalPages])
+    },
+    [page, totalPages],
+  );
 
   // Swipe in detail dialog to navigate between items
   const handleDialogTouchStart = useCallback((e: React.TouchEvent) => {
-    dialogTouchStartX.current = e.touches[0].clientX
-    dialogTouchStartY.current = e.touches[0].clientY
-  }, [])
-
-  const handleDialogTouchEnd = useCallback((e: React.TouchEvent) => {
-    const dx = e.changedTouches[0].clientX - dialogTouchStartX.current
-    const dy = e.changedTouches[0].clientY - dialogTouchStartY.current
-    if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) {
-      if (dx < 0) {
-        navigateHistory('next')
-      } else {
-        navigateHistory('prev')
+    dialogTouchStartX.current = e.touches[0].clientX;
+    dialogTouchStartY.current = e.touches[0].clientY;
+  }, []);
+
+  const handleDialogTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      const dx = e.changedTouches[0].clientX - dialogTouchStartX.current;
+      const dy = e.changedTouches[0].clientY - dialogTouchStartY.current;
+      if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy) * 1.5) {
+        if (dx < 0) {
+          navigateHistory("next");
+        } else {
+          navigateHistory("prev");
+        }
       }
-    }
-  }, [navigateHistory])
+    },
+    [navigateHistory],
+  );
 
   const getStatusBadge = (status: string, isArchived?: boolean) => {
     // Show archived badge if item is from archived filter
     if (isArchived) {
-      return <Badge variant="secondary">{t('history.status.archived')}</Badge>
+      return <Badge variant="secondary">{t("history.status.archived")}</Badge>;
     }
     switch (status) {
-      case 'completed':
-        return <Badge variant="success">{t('history.status.completed')}</Badge>
-      case 'failed':
-        return <Badge variant="destructive">{t('history.status.failed')}</Badge>
+      case "completed":
+        return <Badge variant="success">{t("history.status.completed")}</Badge>;
+      case "failed":
+        return (
+          <Badge variant="destructive">{t("history.status.failed")}</Badge>
+        );
       default:
-        return <Badge variant="secondary">{status}</Badge>
+        return <Badge variant="secondary">{status}</Badge>;
     }
-  }
+  };
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString()
-  }
-
-  const getOutputType = (output: unknown): 'image' | 'video' | 'audio' | 'url' | 'json' | 'text' => {
-    if (typeof output === 'object' && output !== null) {
-      return 'json'
+    return new Date(dateString).toLocaleString();
+  };
+
+  const getOutputType = (
+    output: unknown,
+  ): "image" | "video" | "audio" | "url" | "json" | "text" => {
+    if (typeof output === "object" && output !== null) {
+      return "json";
     }
-    if (typeof output === 'string') {
-      const mediaType = getMediaTypeFromUrl(output); if (mediaType === 'image') return 'image'
-      if (mediaType === 'video') return 'video'
-      if (mediaType === 'audio') return 'audio'
-      if (isHttpUrl(output)) return 'url'
+    if (typeof output === "string") {
+      const mediaType = getMediaTypeFromUrl(output);
+      if (mediaType === "image") return "image";
+      if (mediaType === "video") return "video";
+      if (mediaType === "audio") return "audio";
+      if (isHttpUrl(output)) return "url";
     }
-    return 'text'
-  }
+    return "text";
+  };
 
   const getPreviewIcon = (item: ExtendedHistoryItem) => {
-    const firstOutput = item.outputs?.[0]
-    const type = getOutputType(firstOutput)
+    const firstOutput = item.outputs?.[0];
+    const type = getOutputType(firstOutput);
     switch (type) {
-      case 'image': return Image
-      case 'video': return Video
-      case 'audio': return Music
-      case 'url': return Link
-      case 'json': return FileJson
-      case 'text': return FileText
-      default: return File
+      case "image":
+        return Image;
+      case "video":
+        return Video;
+      case "audio":
+        return Music;
+      case "url":
+        return Link;
+      case "json":
+        return FileJson;
+      case "text":
+        return FileText;
+      default:
+        return File;
     }
-  }
+  };
 
   // Get inputs from history item (check local storage first, then API response)
-  const getItemInputs = (item: ExtendedHistoryItem): { inputs: Record<string, unknown>; modelName: string } | null => {
-    console.log('[MobileHistoryPage] Looking up inputs for prediction:', item.id)
+  const getItemInputs = (
+    item: ExtendedHistoryItem,
+  ): { inputs: Record<string, unknown>; modelName: string } | null => {
+    console.log(
+      "[MobileHistoryPage] Looking up inputs for prediction:",
+      item.id,
+    );
 
     // First check local storage (from predictions made in this app)
-    const localEntry = getLocalInputs(item.id)
-    console.log('[MobileHistoryPage] Local storage entry:', localEntry)
-
-    if (localEntry && localEntry.inputs && Object.keys(localEntry.inputs).length > 0) {
-      console.log('[MobileHistoryPage] Found inputs in local storage')
-      return { inputs: localEntry.inputs, modelName: localEntry.modelName }
+    const localEntry = getLocalInputs(item.id);
+    console.log("[MobileHistoryPage] Local storage entry:", localEntry);
+
+    if (
+      localEntry &&
+      localEntry.inputs &&
+      Object.keys(localEntry.inputs).length > 0
+    ) {
+      console.log("[MobileHistoryPage] Found inputs in local storage");
+      return { inputs: localEntry.inputs, modelName: localEntry.modelName };
     }
     // Then check API response (might return as 'inputs' or 'input')
-    if (item.inputs && typeof item.inputs === 'object' && Object.keys(item.inputs).length > 0) {
-      console.log('[MobileHistoryPage] Found inputs in API response (inputs field)')
-      return { inputs: item.inputs, modelName: item.model }
+    if (
+      item.inputs &&
+      typeof item.inputs === "object" &&
+      Object.keys(item.inputs).length > 0
+    ) {
+      console.log(
+        "[MobileHistoryPage] Found inputs in API response (inputs field)",
+      );
+      return { inputs: item.inputs, modelName: item.model };
     }
-    if (item.input && typeof item.input === 'object' && Object.keys(item.input).length > 0) {
-      console.log('[MobileHistoryPage] Found inputs in API response (input field)')
-      return { inputs: item.input, modelName: item.model }
+    if (
+      item.input &&
+      typeof item.input === "object" &&
+      Object.keys(item.input).length > 0
+    ) {
+      console.log(
+        "[MobileHistoryPage] Found inputs in API response (input field)",
+      );
+      return { inputs: item.input, modelName: item.model };
     }
-    console.log('[MobileHistoryPage] No inputs found')
-    return null
-  }
+    console.log("[MobileHistoryPage] No inputs found");
+    return null;
+  };
 
   // Check if inputs are available for a history item
   const hasInputsAvailable = (item: ExtendedHistoryItem): boolean => {
     // Check local storage
-    const localEntry = getLocalInputs(item.id)
-    if (localEntry && localEntry.inputs && Object.keys(localEntry.inputs).length > 0) {
-      return true
+    const localEntry = getLocalInputs(item.id);
+    if (
+      localEntry &&
+      localEntry.inputs &&
+      Object.keys(localEntry.inputs).length > 0
+    ) {
+      return true;
     }
     // Check API response
-    if (item.inputs && typeof item.inputs === 'object' && Object.keys(item.inputs).length > 0) {
-      return true
+    if (
+      item.inputs &&
+      typeof item.inputs === "object" &&
+      Object.keys(item.inputs).length > 0
+    ) {
+      return true;
     }
-    if (item.input && typeof item.input === 'object' && Object.keys(item.input).length > 0) {
-      return true
+    if (
+      item.input &&
+      typeof item.input === "object" &&
+      Object.keys(item.input).length > 0
+    ) {
+      return true;
     }
-    return false
-  }
+    return false;
+  };
 
   // Handle save as template - tries local storage first, then API
   const handleSaveAsTemplate = async () => {
-    if (!selectedItem) return
+    if (!selectedItem) return;
 
     // Wait for inputs store to load
     if (!inputsLoaded) {
       toast({
-        title: t('common.loading'),
-        description: t('common.loading'),
-        variant: 'default'
-      })
-      return
+        title: t("common.loading"),
+        description: t("common.loading"),
+        variant: "default",
+      });
+      return;
     }
 
     // First try local storage
-    let inputData = getItemInputs(selectedItem)
+    let inputData = getItemInputs(selectedItem);
 
     // If not found locally, try fetching from API
     if (!inputData) {
-      console.log('[MobileHistoryPage] No local inputs, trying API...')
-      setIsFetchingInputs(true)
+      console.log("[MobileHistoryPage] No local inputs, trying API...");
+      setIsFetchingInputs(true);
       try {
-        const details = await apiClient.getPredictionDetails(selectedItem.id)
-        console.log('[MobileHistoryPage] API response:', details)
+        const details = await apiClient.getPredictionDetails(selectedItem.id);
+        console.log("[MobileHistoryPage] API response:", details);
 
         // Check if API returned inputs
-        const apiInputs = (details as { input?: Record<string, unknown> }).input
-        if (apiInputs && typeof apiInputs === 'object' && Object.keys(apiInputs).length > 0) {
-          console.log('[MobileHistoryPage] Found inputs from API')
-          inputData = { inputs: apiInputs, modelName: selectedItem.model }
+        const apiInputs = (details as { input?: Record<string, unknown> })
+          .input;
+        if (
+          apiInputs &&
+          typeof apiInputs === "object" &&
+          Object.keys(apiInputs).length > 0
+        ) {
+          console.log("[MobileHistoryPage] Found inputs from API");
+          inputData = { inputs: apiInputs, modelName: selectedItem.model };
 
           // Update the selected item with the fetched inputs
-          setSelectedItem(prev => prev ? { ...prev, input: apiInputs } : null)
+          setSelectedItem((prev) =>
+            prev ? { ...prev, input: apiInputs } : null,
+          );
         }
       } catch (err) {
-        console.error('[MobileHistoryPage] Failed to fetch from API:', err)
+        console.error("[MobileHistoryPage] Failed to fetch from API:", err);
       } finally {
-        setIsFetchingInputs(false)
+        setIsFetchingInputs(false);
       }
     }
 
     if (!inputData) {
       toast({
-        title: t('history.saveTemplate.noInputsTitle'),
-        description: t('history.saveTemplate.noInputsDesc'),
-        variant: 'destructive'
-      })
-      return
+        title: t("history.saveTemplate.noInputsTitle"),
+        description: t("history.saveTemplate.noInputsDesc"),
+        variant: "destructive",
+      });
+      return;
     }
 
     // Generate default template name
-    const modelName = inputData.modelName.split('/').pop() || inputData.modelName
-    const dateStr = new Date(selectedItem.created_at).toLocaleDateString()
-    setTemplateName(`${modelName} - ${dateStr}`)
-    setShowSaveDialog(true)
-  }
+    const modelName =
+      inputData.modelName.split("/").pop() || inputData.modelName;
+    const dateStr = new Date(selectedItem.created_at).toLocaleDateString();
+    setTemplateName(`${modelName} - ${dateStr}`);
+    setShowSaveDialog(true);
+  };
 
   const handleConfirmSave = async () => {
-    if (!selectedItem || !templateName.trim()) return
+    if (!selectedItem || !templateName.trim()) return;
 
-    const inputData = getItemInputs(selectedItem)
-    if (!inputData) return
+    const inputData = getItemInputs(selectedItem);
+    if (!inputData) return;
 
     // Check for duplicate template name
     if (checkDuplicateName(templateName)) {
-      return
+      return;
     }
 
-    setIsSaving(true)
+    setIsSaving(true);
     try {
       // Use model from local storage if available (more reliable than API's model field)
       saveTemplate(
         templateName.trim(),
         selectedItem.model,
         inputData.modelName,
-        inputData.inputs
-      )
+        inputData.inputs,
+      );
 
       toast({
-        title: t('history.saveTemplate.success'),
-        description: t('history.saveTemplate.successDesc')
-      })
+        title: t("history.saveTemplate.success"),
+        description: t("history.saveTemplate.successDesc"),
+      });
 
-      setShowSaveDialog(false)
-      setTemplateName('')
-      setNameError('')
+      setShowSaveDialog(false);
+      setTemplateName("");
+      setNameError("");
     } catch (err) {
       toast({
-        title: t('history.saveTemplate.error'),
-        description: err instanceof Error ? err.message : 'Failed to save template',
-        variant: 'destructive'
-      })
+        title: t("history.saveTemplate.error"),
+        description:
+          err instanceof Error ? err.message : "Failed to save template",
+        variant: "destructive",
+      });
     } finally {
-      setIsSaving(false)
+      setIsSaving(false);
     }
-  }
+  };
 
   // Show loading state while API key is being loaded from storage
   if (isLoadingApiKey) {
@@ -717,23 +802,29 @@ export function MobileHistoryPage() {
       <div className="flex h-full items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
-
   return (
     <div className="flex h-full flex-col relative overflow-hidden">
       {/* Dynamic Background */}
       <div className="absolute inset-0 bg-gradient-to-br from-violet-500/5 via-transparent to-cyan-500/5" />
       <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-bl from-primary/10 to-transparent rounded-full blur-3xl animate-pulse" />
-      <div className="absolute bottom-0 left-0 w-80 h-80 bg-gradient-to-tr from-cyan-500/10 to-transparent rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
+      <div
+        className="absolute bottom-0 left-0 w-80 h-80 bg-gradient-to-tr from-cyan-500/10 to-transparent rounded-full blur-3xl animate-pulse"
+        style={{ animationDelay: "1s" }}
+      />
 
       {/* Header */}
       <div className="page-header px-4 py-3 relative z-10">
         <div className="flex items-center justify-between mb-3">
           <div>
-            <h1 className="text-xl font-bold tracking-tight">{t('history.title')}</h1>
-            <p className="text-muted-foreground text-xs mt-0.5">{t('history.description')}</p>
+            <h1 className="text-xl font-bold tracking-tight">
+              {t("history.title")}
+            </h1>
+            <p className="text-muted-foreground text-xs mt-0.5">
+              {t("history.description")}
+            </p>
           </div>
           <div className="flex items-center gap-2">
             {isSelectMode ? (
@@ -763,13 +854,25 @@ export function MobileHistoryPage() {
                     </Button>
                   </>
                 )}
-                <Button variant="outline" size="sm" onClick={handleClearSelection} disabled={isDownloading}>
-                  {t('history.selectionDone')}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleClearSelection}
+                  disabled={isDownloading}
+                >
+                  {t("history.selectionDone")}
                 </Button>
               </>
             ) : (
-              <Button variant="outline" size="sm" onClick={() => fetchHistory()} disabled={isLoading}>
-                <RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => fetchHistory()}
+                disabled={isLoading}
+              >
+                <RefreshCw
+                  className={cn("h-4 w-4", isLoading && "animate-spin")}
+                />
               </Button>
             )}
           </div>
@@ -780,24 +883,34 @@ export function MobileHistoryPage() {
           <Select
             value={statusFilter}
             onValueChange={(value) => {
-              setStatusFilter(value)
+              setStatusFilter(value);
             }}
           >
             <SelectTrigger className="flex-1 h-9">
-              <SelectValue placeholder={t('history.status.all')} />
+              <SelectValue placeholder={t("history.status.all")} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{t('history.status.all')}</SelectItem>
-              <SelectItem value="completed">{t('history.status.completed')}</SelectItem>
-              <SelectItem value="failed">{t('history.status.failed')}</SelectItem>
-              <SelectItem value="archived">{t('history.status.archived')}</SelectItem>
+              <SelectItem value="all">{t("history.status.all")}</SelectItem>
+              <SelectItem value="completed">
+                {t("history.status.completed")}
+              </SelectItem>
+              <SelectItem value="failed">
+                {t("history.status.failed")}
+              </SelectItem>
+              <SelectItem value="archived">
+                {t("history.status.archived")}
+              </SelectItem>
             </SelectContent>
           </Select>
           <Button
             variant={loadPreviews ? "default" : "outline"}
             size="sm"
             onClick={() => setLoadPreviews(!loadPreviews)}
-            title={loadPreviews ? t('history.disablePreviews') : t('history.loadPreviews')}
+            title={
+              loadPreviews
+                ? t("history.disablePreviews")
+                : t("history.loadPreviews")
+            }
           >
             {loadPreviews ? (
               <Eye className="h-4 w-4" />
@@ -823,18 +936,29 @@ export function MobileHistoryPage() {
           ) : error ? (
             <div className="text-center py-8">
               <AlertCircle className="mx-auto h-10 w-10 text-muted-foreground mb-3" />
-              {error.includes('404') || error.includes('page not found') || error.includes('504') || error.includes('timeout') || error.includes('Gateway') ? (
+              {error.includes("404") ||
+              error.includes("page not found") ||
+              error.includes("504") ||
+              error.includes("timeout") ||
+              error.includes("Gateway") ? (
                 <>
-                  <p className="text-base font-medium">{t('history.notAvailable')}</p>
+                  <p className="text-base font-medium">
+                    {t("history.notAvailable")}
+                  </p>
                   <p className="text-muted-foreground text-sm mt-1">
-                    {t('history.notAvailableDesc')}
+                    {t("history.notAvailableDesc")}
                   </p>
                 </>
               ) : (
                 <>
                   <p className="text-destructive text-sm">{error}</p>
-                  <Button variant="outline" size="sm" className="mt-3" onClick={fetchHistory}>
-                    {t('errors.tryAgain')}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-3"
+                    onClick={fetchHistory}
+                  >
+                    {t("errors.tryAgain")}
                   </Button>
                 </>
               )}
@@ -842,105 +966,143 @@ export function MobileHistoryPage() {
           ) : items.length === 0 ? (
             <div className="text-center py-8">
               <Clock className="mx-auto h-10 w-10 text-muted-foreground mb-3" />
-              <p className="text-muted-foreground text-sm">{t('history.noHistory')}</p>
+              <p className="text-muted-foreground text-sm">
+                {t("history.noHistory")}
+              </p>
             </div>
           ) : (
             <>
-            <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-              {items.map((item) => {
-                const PreviewIcon = getPreviewIcon(item)
-                const hasPreview = item.outputs && item.outputs.length > 0
-
-                return (
-                  <Card
-                    key={item.id}
-                    className={cn(
-                      "overflow-hidden cursor-pointer card-elevated border-transparent hover:border-primary/20 active:scale-[0.98] transition-transform relative select-none",
-                      isSelectMode && selectedIds.has(item.id) && "ring-2 ring-primary"
-                    )}
-                    onClick={() => handleCardClick(item)}
-                    onTouchStart={() => handleLongPressStart(item)}
-                    onTouchEnd={handleLongPressEnd}
-                    onTouchCancel={handleLongPressEnd}
-                    onMouseDown={() => handleLongPressStart(item)}
-                    onMouseUp={handleLongPressEnd}
-                    onMouseLeave={handleLongPressEnd}
-                  >
-                    {/* Preview */}
-                    <div className="aspect-square bg-muted relative">
-                      {isSelectMode && (
-                        <div className="absolute top-1.5 left-1.5 z-10">
-                          <Checkbox
-                            checked={selectedIds.has(item.id)}
-                            onClick={(e) => e.stopPropagation()}
-                            onCheckedChange={() => handleToggleSelect(item.id)}
-                          />
-                        </div>
-                      )}
-                      {loadPreviews && hasPreview && typeof item.outputs![0] === 'string' && item.outputs![0].match(/\.(jpg|jpeg|png|gif|webp)/i) ? (
-                        <ProxyImage
-                          src={item.outputs![0]}
-                          alt="Preview"
-                          className="w-full h-full object-cover"
-                        />
-                      ) : loadPreviews && hasPreview && typeof item.outputs![0] === 'string' && item.outputs![0].match(/\.(mp4|webm|mov)/i) ? (
-                        <VideoPreview src={item.outputs![0]} enabled={loadPreviews} />
-                      ) : loadPreviews && hasPreview && typeof item.outputs![0] === 'string' && item.outputs![0].match(/\.(mp3|wav|ogg|flac|aac|m4a|wma)/i) ? (
-                        <div
-                          className="w-full h-full flex items-center justify-center p-3"
-                        >
-                          <AudioPlayer src={item.outputs![0]} compact />
-                        </div>
-                      ) : hasPreview && typeof item.outputs![0] === 'object' ? (
-                        <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
-                          <FileJson className="h-6 w-6 text-muted-foreground shrink-0" />
-                          <pre className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-3">
-                            {JSON.stringify(item.outputs![0], null, 0).slice(0, 100)}
-                          </pre>
-                        </div>
-                      ) : hasPreview && typeof item.outputs![0] === 'string' && !item.outputs![0].startsWith('http') ? (
-                        <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
-                          <FileText className="h-6 w-6 text-muted-foreground shrink-0" />
-                          <p className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-3">
-                            {item.outputs![0].slice(0, 150)}
-                          </p>
-                        </div>
-                      ) : hasPreview && typeof item.outputs![0] === 'string' && item.outputs![0].startsWith('http') ? (
-                        <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
-                          <Link className="h-6 w-6 text-muted-foreground shrink-0" />
-                          <p className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-2 break-all">
-                            {item.outputs![0]}
-                          </p>
-                        </div>
-                      ) : (
-                        <div className="w-full h-full flex items-center justify-center">
-                          <PreviewIcon className="h-10 w-10 text-muted-foreground" />
-                        </div>
+              <div className="grid gap-3 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+                {items.map((item) => {
+                  const PreviewIcon = getPreviewIcon(item);
+                  const hasPreview = item.outputs && item.outputs.length > 0;
+
+                  return (
+                    <Card
+                      key={item.id}
+                      className={cn(
+                        "overflow-hidden cursor-pointer card-elevated border-transparent hover:border-primary/20 active:scale-[0.98] transition-transform relative select-none",
+                        isSelectMode &&
+                          selectedIds.has(item.id) &&
+                          "ring-2 ring-primary",
                       )}
-                      <div className="absolute top-1.5 right-1.5 flex items-center gap-1">
-                        {/* Indicator for items with locally stored inputs */}
-                        {inputsLoaded && hasInputsAvailable(item) && (
-                          <div className="bg-primary/90 rounded-full p-1" title={t('history.hasInputs')}>
-                            <BookmarkPlus className="h-3 w-3 text-primary-foreground" />
+                      onClick={() => handleCardClick(item)}
+                      onTouchStart={() => handleLongPressStart(item)}
+                      onTouchEnd={handleLongPressEnd}
+                      onTouchCancel={handleLongPressEnd}
+                      onMouseDown={() => handleLongPressStart(item)}
+                      onMouseUp={handleLongPressEnd}
+                      onMouseLeave={handleLongPressEnd}
+                    >
+                      {/* Preview */}
+                      <div className="aspect-square bg-muted relative">
+                        {isSelectMode && (
+                          <div className="absolute top-1.5 left-1.5 z-10">
+                            <Checkbox
+                              checked={selectedIds.has(item.id)}
+                              onClick={(e) => e.stopPropagation()}
+                              onCheckedChange={() =>
+                                handleToggleSelect(item.id)
+                              }
+                            />
                           </div>
                         )}
-                        {getStatusBadge(item.status, statusFilter === 'archived')}
-                      </div>
-                    </div>
-
-                    <CardContent className="p-2">
-                      <p className="font-medium text-xs truncate">{item.model.split('/').pop()}</p>
-                      <div className="flex items-center justify-between mt-0.5 text-[10px] text-muted-foreground">
-                        <span>{new Date(item.created_at).toLocaleDateString()}</span>
-                        {item.execution_time && (
-                          <span>{(item.execution_time / 1000).toFixed(1)}s</span>
+                        {loadPreviews &&
+                        hasPreview &&
+                        typeof item.outputs![0] === "string" &&
+                        item.outputs![0].match(/\.(jpg|jpeg|png|gif|webp)/i) ? (
+                          <ProxyImage
+                            src={item.outputs![0]}
+                            alt="Preview"
+                            className="w-full h-full object-cover"
+                          />
+                        ) : loadPreviews &&
+                          hasPreview &&
+                          typeof item.outputs![0] === "string" &&
+                          item.outputs![0].match(/\.(mp4|webm|mov)/i) ? (
+                          <VideoPreview
+                            src={item.outputs![0]}
+                            enabled={loadPreviews}
+                          />
+                        ) : loadPreviews &&
+                          hasPreview &&
+                          typeof item.outputs![0] === "string" &&
+                          item.outputs![0].match(
+                            /\.(mp3|wav|ogg|flac|aac|m4a|wma)/i,
+                          ) ? (
+                          <div className="w-full h-full flex items-center justify-center p-3">
+                            <AudioPlayer src={item.outputs![0]} compact />
+                          </div>
+                        ) : hasPreview &&
+                          typeof item.outputs![0] === "object" ? (
+                          <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
+                            <FileJson className="h-6 w-6 text-muted-foreground shrink-0" />
+                            <pre className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-3">
+                              {JSON.stringify(item.outputs![0], null, 0).slice(
+                                0,
+                                100,
+                              )}
+                            </pre>
+                          </div>
+                        ) : hasPreview &&
+                          typeof item.outputs![0] === "string" &&
+                          !item.outputs![0].startsWith("http") ? (
+                          <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
+                            <FileText className="h-6 w-6 text-muted-foreground shrink-0" />
+                            <p className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-3">
+                              {item.outputs![0].slice(0, 150)}
+                            </p>
+                          </div>
+                        ) : hasPreview &&
+                          typeof item.outputs![0] === "string" &&
+                          item.outputs![0].startsWith("http") ? (
+                          <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
+                            <Link className="h-6 w-6 text-muted-foreground shrink-0" />
+                            <p className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-2 break-all">
+                              {item.outputs![0]}
+                            </p>
+                          </div>
+                        ) : (
+                          <div className="w-full h-full flex items-center justify-center">
+                            <PreviewIcon className="h-10 w-10 text-muted-foreground" />
+                          </div>
                         )}
+                        <div className="absolute top-1.5 right-1.5 flex items-center gap-1">
+                          {/* Indicator for items with locally stored inputs */}
+                          {inputsLoaded && hasInputsAvailable(item) && (
+                            <div
+                              className="bg-primary/90 rounded-full p-1"
+                              title={t("history.hasInputs")}
+                            >
+                              <BookmarkPlus className="h-3 w-3 text-primary-foreground" />
+                            </div>
+                          )}
+                          {getStatusBadge(
+                            item.status,
+                            statusFilter === "archived",
+                          )}
+                        </div>
                       </div>
-                    </CardContent>
-                  </Card>
-                )
-              })}
-            </div>
+
+                      <CardContent className="p-2">
+                        <p className="font-medium text-xs truncate">
+                          {item.model.split("/").pop()}
+                        </p>
+                        <div className="flex items-center justify-between mt-0.5 text-[10px] text-muted-foreground">
+                          <span>
+                            {new Date(item.created_at).toLocaleDateString()}
+                          </span>
+                          {item.execution_time && (
+                            <span>
+                              {(item.execution_time / 1000).toFixed(1)}s
+                            </span>
+                          )}
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
               {/* Pagination */}
               <div className="flex items-center justify-center gap-3 pt-4 pb-6">
                 <Button
@@ -948,7 +1110,7 @@ export function MobileHistoryPage() {
                   size="sm"
                   className="h-9 w-9 p-0"
                   disabled={page <= 1 || isLoading}
-                  onClick={() => setPage(p => p - 1)}
+                  onClick={() => setPage((p) => p - 1)}
                 >
                   <ChevronLeft className="h-4 w-4" />
                 </Button>
@@ -960,7 +1122,7 @@ export function MobileHistoryPage() {
                   size="sm"
                   className="h-9 w-9 p-0"
                   disabled={page >= totalPages || isLoading}
-                  onClick={() => setPage(p => p + 1)}
+                  onClick={() => setPage((p) => p + 1)}
                 >
                   <ChevronRight className="h-4 w-4" />
                 </Button>
@@ -971,28 +1133,36 @@ export function MobileHistoryPage() {
       </div>
 
       {/* Detail Dialog */}
-      <Dialog open={!!selectedItem && !showSaveDialog} onOpenChange={(open) => !open && setSelectedItem(null)}>
+      <Dialog
+        open={!!selectedItem && !showSaveDialog}
+        onOpenChange={(open) => !open && setSelectedItem(null)}
+      >
         <DialogContent className="max-w-[95vw] max-h-[85vh] overflow-hidden flex flex-col">
           <DialogHeader className="flex flex-row items-center justify-between">
             <div>
               <DialogTitle className="text-base flex items-center gap-2">
-                {t('history.generationDetails')}
+                {t("history.generationDetails")}
                 {items.length > 1 && (
                   <span className="text-sm font-normal text-muted-foreground">
-                    ({items.findIndex(item => item.id === selectedItem?.id) + 1}/{items.length})
+                    (
+                    {items.findIndex((item) => item.id === selectedItem?.id) +
+                      1}
+                    /{items.length})
                   </span>
                 )}
               </DialogTitle>
               <DialogDescription className="sr-only">
-                {t('history.generationDetails')}
+                {t("history.generationDetails")}
               </DialogDescription>
             </div>
-            {statusFilter !== 'archived' && (
+            {statusFilter !== "archived" && (
               <Button
                 variant="ghost"
                 size="sm"
                 className="text-destructive hover:text-destructive"
-                onClick={() => selectedItem && setDeleteConfirmItem(selectedItem)}
+                onClick={() =>
+                  selectedItem && setDeleteConfirmItem(selectedItem)
+                }
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
@@ -1011,18 +1181,20 @@ export function MobileHistoryPage() {
                     variant="outline"
                     size="sm"
                     className="h-8 w-8 p-0"
-                    onClick={() => navigateHistory('prev')}
+                    onClick={() => navigateHistory("prev")}
                   >
                     <ChevronLeft className="h-4 w-4" />
                   </Button>
                   <span className="text-xs text-muted-foreground">
-                    {items.findIndex(item => item.id === selectedItem?.id) + 1} / {items.length}
+                    {items.findIndex((item) => item.id === selectedItem?.id) +
+                      1}{" "}
+                    / {items.length}
                   </span>
                   <Button
                     variant="outline"
                     size="sm"
                     className="h-8 w-8 p-0"
-                    onClick={() => navigateHistory('next')}
+                    onClick={() => navigateHistory("next")}
                   >
                     <ChevronRight className="h-4 w-4" />
                   </Button>
@@ -1040,7 +1212,7 @@ export function MobileHistoryPage() {
                       has_nsfw_contents: selectedItem.has_nsfw_contents,
                       timings: selectedItem.execution_time
                         ? { inference: selectedItem.execution_time }
-                        : undefined
+                        : undefined,
                     }}
                     outputs={selectedItem.outputs}
                     error={null}
@@ -1054,25 +1226,41 @@ export function MobileHistoryPage() {
               {/* Details */}
               <div className="grid grid-cols-2 gap-3 text-sm">
                 <div>
-                  <p className="text-xs text-muted-foreground">{t('history.model')}</p>
-                  <p className="font-medium text-xs truncate">{selectedItem.model}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {t("history.model")}
+                  </p>
+                  <p className="font-medium text-xs truncate">
+                    {selectedItem.model}
+                  </p>
                 </div>
                 <div>
-                  <p className="text-xs text-muted-foreground">{t('history.status.all').replace('All ', '')}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {t("history.status.all").replace("All ", "")}
+                  </p>
                   <div>{getStatusBadge(selectedItem.status)}</div>
                 </div>
                 <div>
-                  <p className="text-xs text-muted-foreground">{t('history.created')}</p>
-                  <p className="font-medium text-xs">{formatDate(selectedItem.created_at)}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {t("history.created")}
+                  </p>
+                  <p className="font-medium text-xs">
+                    {formatDate(selectedItem.created_at)}
+                  </p>
                 </div>
                 {selectedItem.execution_time && (
                   <div>
-                    <p className="text-xs text-muted-foreground">{t('history.executionTime')}</p>
-                    <p className="font-medium text-xs">{(selectedItem.execution_time / 1000).toFixed(2)}s</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t("history.executionTime")}
+                    </p>
+                    <p className="font-medium text-xs">
+                      {(selectedItem.execution_time / 1000).toFixed(2)}s
+                    </p>
                   </div>
                 )}
                 <div className="col-span-2">
-                  <p className="text-xs text-muted-foreground">{t('history.predictionId')}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {t("history.predictionId")}
+                  </p>
                   <div className="flex items-center gap-2">
                     <code className="text-[10px] bg-muted px-2 py-1 rounded flex-1 truncate">
                       {selectedItem.id}
@@ -1094,7 +1282,7 @@ export function MobileHistoryPage() {
               </div>
 
               {/* Save as Template Button */}
-              {selectedItem.status === 'completed' && (
+              {selectedItem.status === "completed" && (
                 <Button
                   variant="outline"
                   className="w-full"
@@ -1106,7 +1294,9 @@ export function MobileHistoryPage() {
                   ) : (
                     <BookmarkPlus className="mr-2 h-4 w-4" />
                   )}
-                  {isFetchingInputs ? t('common.loading') : t('history.saveTemplate.button')}
+                  {isFetchingInputs
+                    ? t("common.loading")
+                    : t("history.saveTemplate.button")}
                 </Button>
               )}
             </div>
@@ -1115,31 +1305,36 @@ export function MobileHistoryPage() {
       </Dialog>
 
       {/* Save Template Dialog */}
-      <Dialog open={showSaveDialog} onOpenChange={(open) => {
-        setShowSaveDialog(open)
-        if (!open) {
-          setNameError('')
-        }
-      }}>
+      <Dialog
+        open={showSaveDialog}
+        onOpenChange={(open) => {
+          setShowSaveDialog(open);
+          if (!open) {
+            setNameError("");
+          }
+        }}
+      >
         <DialogContent className="max-w-[90vw]">
           <DialogHeader>
-            <DialogTitle>{t('history.saveTemplate.dialogTitle')}</DialogTitle>
+            <DialogTitle>{t("history.saveTemplate.dialogTitle")}</DialogTitle>
             <DialogDescription>
-              {t('history.saveTemplate.namePlaceholder')}
+              {t("history.saveTemplate.namePlaceholder")}
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-2">
             <div className="space-y-2">
-              <Label htmlFor="template-name">{t('history.saveTemplate.nameLabel')}</Label>
+              <Label htmlFor="template-name">
+                {t("history.saveTemplate.nameLabel")}
+              </Label>
               <Input
                 id="template-name"
                 value={templateName}
                 onChange={(e) => {
-                  setTemplateName(e.target.value)
-                  checkDuplicateName(e.target.value)
+                  setTemplateName(e.target.value);
+                  checkDuplicateName(e.target.value);
                 }}
-                placeholder={t('history.saveTemplate.namePlaceholder')}
-                className={nameError ? 'border-destructive' : ''}
+                placeholder={t("history.saveTemplate.namePlaceholder")}
+                className={nameError ? "border-destructive" : ""}
                 autoFocus
               />
               {nameError && (
@@ -1154,7 +1349,7 @@ export function MobileHistoryPage() {
               onClick={() => setShowSaveDialog(false)}
               disabled={isSaving}
             >
-              {t('common.cancel')}
+              {t("common.cancel")}
             </Button>
             <Button
               className="flex-1"
@@ -1164,7 +1359,7 @@ export function MobileHistoryPage() {
               {isSaving ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
-                t('common.save')
+                t("common.save")
               )}
             </Button>
           </DialogFooter>
@@ -1172,23 +1367,34 @@ export function MobileHistoryPage() {
       </Dialog>
 
       {/* Single Delete Confirmation */}
-      <AlertDialog open={!!deleteConfirmItem} onOpenChange={(open) => !open && setDeleteConfirmItem(null)}>
+      <AlertDialog
+        open={!!deleteConfirmItem}
+        onOpenChange={(open) => !open && setDeleteConfirmItem(null)}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('history.deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("history.deleteConfirmTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('history.deleteConfirmDesc')}
+              {t("history.deleteConfirmDesc")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>
+              {t("common.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction
-              onClick={() => deleteConfirmItem && handleDelete(deleteConfirmItem)}
+              onClick={() =>
+                deleteConfirmItem && handleDelete(deleteConfirmItem)
+              }
               disabled={isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              {t('common.delete')}
+              {isDeleting ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : null}
+              {t("common.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -1198,24 +1404,30 @@ export function MobileHistoryPage() {
       <AlertDialog open={bulkDeleteConfirm} onOpenChange={setBulkDeleteConfirm}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('history.bulkDeleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("history.bulkDeleteConfirmTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('history.bulkDeleteConfirmDesc', { count: selectedIds.size })}
+              {t("history.bulkDeleteConfirmDesc", { count: selectedIds.size })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>
+              {t("common.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction
               onClick={handleBulkDelete}
               disabled={isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
-              {t('common.delete')}
+              {isDeleting ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : null}
+              {t("common.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileImageEraserPage.tsx b/mobile/src/pages/MobileImageEraserPage.tsx
index e6591c5c..8b752196 100644
--- a/mobile/src/pages/MobileImageEraserPage.tsx
+++ b/mobile/src/pages/MobileImageEraserPage.tsx
@@ -1,11 +1,11 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useImageEraserWorker } from '@/hooks/useImageEraserWorker'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useImageEraserWorker } from "@/hooks/useImageEraserWorker";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
 import {
   canvasToFloat32Array,
   maskCanvasToFloat32Array,
@@ -15,18 +15,18 @@ import {
   cropCanvas,
   pasteWithBlending,
   addReflectPadding,
-  addMaskReflectPadding
-} from '@/lib/lamaUtils'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Slider } from '@/components/ui/slider'
+  addMaskReflectPadding,
+} from "@/lib/lamaUtils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   ArrowLeft,
   Upload,
@@ -36,43 +36,51 @@ import {
   Paintbrush,
   Undo2,
   Trash2,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
-type Tool = 'brush' | 'eraser'
+type Tool = "brush" | "eraser";
 
 // Phase configuration for image eraser
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.1 },
-  { id: 'loading', labelKey: 'freeTools.progress.loading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.progress.processing', weight: 0.8 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.1 },
+  { id: "loading", labelKey: "freeTools.progress.loading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.progress.processing", weight: 0.8 },
+];
 
 export function MobileImageEraserPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadFromDataUrl } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const canvasContainerRef = useRef<HTMLDivElement>(null)
-  const imageCanvasRef = useRef<HTMLCanvasElement>(null)
-  const maskCanvasRef = useRef<HTMLCanvasElement>(null)
-  const resultCanvasRef = useRef<HTMLCanvasElement>(null)
-  const lastPosRef = useRef<{ x: number; y: number } | null>(null)
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null)
-  const [resultImage, setResultImage] = useState<string | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDrawing, setIsDrawing] = useState(false)
-  const [canvasSize, setCanvasSize] = useState({ width: 300, height: 300 })
-  const [originalSize, setOriginalSize] = useState<{ width: number; height: number } | null>(null)
-  const [containerSize, setContainerSize] = useState({ width: 300, height: 400 })
-  const [tool, setTool] = useState<Tool>('brush')
-  const [brushSize, setBrushSize] = useState(40)
-  const [maskHistory, setMaskHistory] = useState<ImageData[]>([])
-  const [maskHistoryIndex, setMaskHistoryIndex] = useState(-1)
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>('jpeg')
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadFromDataUrl } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const canvasContainerRef = useRef<HTMLDivElement>(null);
+  const imageCanvasRef = useRef<HTMLCanvasElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
+  const resultCanvasRef = useRef<HTMLCanvasElement>(null);
+  const lastPosRef = useRef<{ x: number; y: number } | null>(null);
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null);
+  const [resultImage, setResultImage] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({ width: 300, height: 300 });
+  const [originalSize, setOriginalSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [containerSize, setContainerSize] = useState({
+    width: 300,
+    height: 400,
+  });
+  const [tool, setTool] = useState<Tool>("brush");
+  const [brushSize, setBrushSize] = useState(40);
+  const [maskHistory, setMaskHistory] = useState<ImageData[]>([]);
+  const [maskHistoryIndex, setMaskHistoryIndex] = useState(-1);
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "jpeg",
+  );
 
   // Multi-phase progress tracking
   const {
@@ -81,332 +89,380 @@ export function MobileImageEraserPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
-
-  const [error, setError] = useState<string | null>(null)
-
-  const { initModel, removeObjects, dispose, hasFailed, retryWorker } = useImageEraserWorker({
-    onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'loading') {
-        startPhase('loading')
-      } else if (phase === 'process') {
-        startPhase('process')
-      }
-    },
-    onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : phase === 'loading' ? 'loading' : 'process'
-      updatePhase(phaseId, progressValue, detail)
-    },
-    onReady: () => {
-      setError(null)
-    },
-    onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { initModel, removeObjects, dispose, hasFailed, retryWorker } =
+    useImageEraserWorker({
+      onPhase: (phase) => {
+        if (phase === "download") {
+          startPhase("download");
+        } else if (phase === "loading") {
+          startPhase("loading");
+        } else if (phase === "process") {
+          startPhase("process");
+        }
+      },
+      onProgress: (phase, progressValue, detail) => {
+        const phaseId =
+          phase === "download"
+            ? "download"
+            : phase === "loading"
+              ? "loading"
+              : "process";
+        updatePhase(phaseId, progressValue, detail);
+      },
+      onReady: () => {
+        setError(null);
+      },
+      onError: (err) => {
+        console.error("Worker error:", err);
+        setError(err);
+        setIsProcessing(false);
+      },
+    });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   // Measure available container size on mount and window resize (same as MobileSegmentAnythingPage)
   useEffect(() => {
     const updateContainerSize = () => {
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-      const availableWidth = Math.min(viewportWidth - 32, 500)
-      const availableHeight = Math.max(300, viewportHeight - 400)
-      setContainerSize({ width: availableWidth, height: availableHeight })
-    }
-
-    updateContainerSize()
-    window.addEventListener('resize', updateContainerSize)
-    return () => window.removeEventListener('resize', updateContainerSize)
-  }, [])
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const availableWidth = Math.min(viewportWidth - 32, 500);
+      const availableHeight = Math.max(300, viewportHeight - 400);
+      setContainerSize({ width: availableWidth, height: availableHeight });
+    };
+
+    updateContainerSize();
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, []);
 
   // Recalculate canvas size when container or image changes
   useEffect(() => {
-    if (!loadedImage) return
+    if (!loadedImage) return;
 
-    const imgWidth = loadedImage.width
-    const imgHeight = loadedImage.height
+    const imgWidth = loadedImage.width;
+    const imgHeight = loadedImage.height;
 
-    let width = imgWidth
-    let height = imgHeight
+    let width = imgWidth;
+    let height = imgHeight;
 
     // Scale to fit container while maintaining aspect ratio
     if (width > containerSize.width) {
-      height = (height * containerSize.width) / width
-      width = containerSize.width
+      height = (height * containerSize.width) / width;
+      width = containerSize.width;
     }
     if (height > containerSize.height) {
-      width = (width * containerSize.height) / height
-      height = containerSize.height
+      width = (width * containerSize.height) / height;
+      height = containerSize.height;
     }
 
-    setCanvasSize({ width: Math.round(width), height: Math.round(height) })
-  }, [loadedImage, containerSize])
+    setCanvasSize({ width: Math.round(width), height: Math.round(height) });
+  }, [loadedImage, containerSize]);
 
   // Draw loaded image to canvas at ORIGINAL resolution
   useEffect(() => {
-    if (!loadedImage || !imageCanvasRef.current || !originalSize) return
+    if (!loadedImage || !imageCanvasRef.current || !originalSize) return;
 
-    const imageCanvas = imageCanvasRef.current
-    imageCanvas.width = originalSize.width
-    imageCanvas.height = originalSize.height
+    const imageCanvas = imageCanvasRef.current;
+    imageCanvas.width = originalSize.width;
+    imageCanvas.height = originalSize.height;
 
-    const ctx = imageCanvas.getContext('2d', { willReadFrequently: true })
-    if (!ctx) return
+    const ctx = imageCanvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
 
-    ctx.drawImage(loadedImage, 0, 0, originalSize.width, originalSize.height)
-  }, [loadedImage, originalSize])
+    ctx.drawImage(loadedImage, 0, 0, originalSize.width, originalSize.height);
+  }, [loadedImage, originalSize]);
 
   // Initialize mask canvas when image loads
   useEffect(() => {
-    if (!originalImage || !maskCanvasRef.current || !originalSize) return
+    if (!originalImage || !maskCanvasRef.current || !originalSize) return;
 
-    const maskCanvas = maskCanvasRef.current
-    maskCanvas.width = originalSize.width
-    maskCanvas.height = originalSize.height
+    const maskCanvas = maskCanvasRef.current;
+    maskCanvas.width = originalSize.width;
+    maskCanvas.height = originalSize.height;
 
-    const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx) return
+    const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx) return;
 
-    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height)
+    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height);
 
-    const initialMaskState = maskCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-    setMaskHistory([initialMaskState])
-    setMaskHistoryIndex(0)
-  }, [originalImage, originalSize])
+    const initialMaskState = maskCtx.getImageData(
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    setMaskHistory([initialMaskState]);
+    setMaskHistoryIndex(0);
+  }, [originalImage, originalSize]);
 
   // Save mask history snapshot
   const saveMaskSnapshot = useCallback(() => {
-    const maskCanvas = maskCanvasRef.current
-    const maskCtx = maskCanvas?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    const maskCtx = maskCanvas?.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx || !maskCanvas) return;
 
-    const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
+    const imageData = maskCtx.getImageData(
+      0,
+      0,
+      maskCanvas.width,
+      maskCanvas.height,
+    );
 
     setMaskHistory((prev) => {
-      const newHistory = prev.slice(0, maskHistoryIndex + 1)
-      newHistory.push(imageData)
+      const newHistory = prev.slice(0, maskHistoryIndex + 1);
+      newHistory.push(imageData);
       if (newHistory.length > 30) {
-        newHistory.shift()
-        return newHistory
+        newHistory.shift();
+        return newHistory;
       }
-      return newHistory
-    })
-    setMaskHistoryIndex((prev) => Math.min(prev + 1, 29))
-  }, [maskHistoryIndex])
+      return newHistory;
+    });
+    setMaskHistoryIndex((prev) => Math.min(prev + 1, 29));
+  }, [maskHistoryIndex]);
 
   // Undo mask drawing
   const undoMask = useCallback(() => {
-    if (maskHistoryIndex <= 0) return
+    if (maskHistoryIndex <= 0) return;
 
-    const newIndex = maskHistoryIndex - 1
-    const maskCtx = maskCanvasRef.current?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskHistory[newIndex]) return
+    const newIndex = maskHistoryIndex - 1;
+    const maskCtx = maskCanvasRef.current?.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!maskCtx || !maskHistory[newIndex]) return;
 
-    maskCtx.putImageData(maskHistory[newIndex], 0, 0)
-    setMaskHistoryIndex(newIndex)
-  }, [maskHistoryIndex, maskHistory])
+    maskCtx.putImageData(maskHistory[newIndex], 0, 0);
+    setMaskHistoryIndex(newIndex);
+  }, [maskHistoryIndex, maskHistory]);
 
   // Clear mask
   const clearMask = useCallback(() => {
-    const maskCanvas = maskCanvasRef.current
-    const maskCtx = maskCanvas?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    const maskCtx = maskCanvas?.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx || !maskCanvas) return;
 
-    maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
-    saveMaskSnapshot()
-  }, [saveMaskSnapshot])
+    maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+    saveMaskSnapshot();
+  }, [saveMaskSnapshot]);
 
   // Get coordinates relative to canvas from touch event
-  const getTouchCoords = useCallback(
-    (touch: React.Touch) => {
-      const canvas = maskCanvasRef.current
-      if (!canvas) return null
-
-      const rect = canvas.getBoundingClientRect()
-      const scaleX = canvas.width / rect.width
-      const scaleY = canvas.height / rect.height
-
-      return {
-        x: (touch.clientX - rect.left) * scaleX,
-        y: (touch.clientY - rect.top) * scaleY
-      }
-    },
-    []
-  )
+  const getTouchCoords = useCallback((touch: React.Touch) => {
+    const canvas = maskCanvasRef.current;
+    if (!canvas) return null;
+
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+
+    return {
+      x: (touch.clientX - rect.left) * scaleX,
+      y: (touch.clientY - rect.top) * scaleY,
+    };
+  }, []);
 
   // Draw at position
   const drawAt = useCallback(
     (x: number, y: number, lastX?: number, lastY?: number) => {
-      const maskCanvas = maskCanvasRef.current
-      const maskCtx = maskCanvas?.getContext('2d', { willReadFrequently: true })
-      if (!maskCtx || !maskCanvas) return
+      const maskCanvas = maskCanvasRef.current;
+      const maskCtx = maskCanvas?.getContext("2d", {
+        willReadFrequently: true,
+      });
+      if (!maskCtx || !maskCanvas) return;
 
       // Scale brush size from display to canvas coordinates
-      const scaleRatio = maskCanvas.width / canvasSize.width
-      const scaledBrushSize = brushSize * scaleRatio
+      const scaleRatio = maskCanvas.width / canvasSize.width;
+      const scaledBrushSize = brushSize * scaleRatio;
 
-      if (tool === 'eraser') {
-        maskCtx.globalCompositeOperation = 'destination-out'
-        maskCtx.fillStyle = 'rgba(0,0,0,1)'
-        maskCtx.strokeStyle = 'rgba(0,0,0,1)'
+      if (tool === "eraser") {
+        maskCtx.globalCompositeOperation = "destination-out";
+        maskCtx.fillStyle = "rgba(0,0,0,1)";
+        maskCtx.strokeStyle = "rgba(0,0,0,1)";
       } else {
-        maskCtx.globalCompositeOperation = 'source-over'
-        maskCtx.fillStyle = 'rgba(255, 80, 80, 1)'
-        maskCtx.strokeStyle = 'rgba(255, 80, 80, 1)'
+        maskCtx.globalCompositeOperation = "source-over";
+        maskCtx.fillStyle = "rgba(255, 80, 80, 1)";
+        maskCtx.strokeStyle = "rgba(255, 80, 80, 1)";
       }
 
-      maskCtx.lineWidth = scaledBrushSize
-      maskCtx.lineCap = 'round'
-      maskCtx.lineJoin = 'round'
+      maskCtx.lineWidth = scaledBrushSize;
+      maskCtx.lineCap = "round";
+      maskCtx.lineJoin = "round";
 
       if (lastX !== undefined && lastY !== undefined) {
-        maskCtx.beginPath()
-        maskCtx.moveTo(lastX, lastY)
-        maskCtx.lineTo(x, y)
-        maskCtx.stroke()
+        maskCtx.beginPath();
+        maskCtx.moveTo(lastX, lastY);
+        maskCtx.lineTo(x, y);
+        maskCtx.stroke();
       } else {
-        maskCtx.beginPath()
-        maskCtx.arc(x, y, scaledBrushSize / 2, 0, Math.PI * 2)
-        maskCtx.fill()
+        maskCtx.beginPath();
+        maskCtx.arc(x, y, scaledBrushSize / 2, 0, Math.PI * 2);
+        maskCtx.fill();
       }
 
-      maskCtx.globalCompositeOperation = 'source-over'
+      maskCtx.globalCompositeOperation = "source-over";
     },
-    [tool, brushSize, canvasSize.width]
-  )
+    [tool, brushSize, canvasSize.width],
+  );
 
   // Touch event handlers
   const handleTouchStart = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
+      e.preventDefault();
+      e.stopPropagation();
 
-      if (isProcessing) return
+      if (isProcessing) return;
 
-      const touch = e.touches[0]
-      if (!touch) return
+      const touch = e.touches[0];
+      if (!touch) return;
 
-      const coords = getTouchCoords(touch)
-      if (!coords) return
+      const coords = getTouchCoords(touch);
+      if (!coords) return;
 
-      setIsDrawing(true)
-      lastPosRef.current = coords
-      drawAt(coords.x, coords.y)
+      setIsDrawing(true);
+      lastPosRef.current = coords;
+      drawAt(coords.x, coords.y);
     },
-    [isProcessing, getTouchCoords, drawAt]
-  )
+    [isProcessing, getTouchCoords, drawAt],
+  );
 
   const handleTouchMove = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
+      e.preventDefault();
+      e.stopPropagation();
 
-      if (!isDrawing) return
+      if (!isDrawing) return;
 
-      const touch = e.touches[0]
-      if (!touch) return
+      const touch = e.touches[0];
+      if (!touch) return;
 
-      const coords = getTouchCoords(touch)
-      if (!coords) return
+      const coords = getTouchCoords(touch);
+      if (!coords) return;
 
-      const lastPos = lastPosRef.current
-      drawAt(coords.x, coords.y, lastPos?.x, lastPos?.y)
-      lastPosRef.current = coords
+      const lastPos = lastPosRef.current;
+      drawAt(coords.x, coords.y, lastPos?.x, lastPos?.y);
+      lastPosRef.current = coords;
     },
-    [isDrawing, getTouchCoords, drawAt]
-  )
+    [isDrawing, getTouchCoords, drawAt],
+  );
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
-      e.preventDefault()
+      e.preventDefault();
       if (isDrawing) {
-        setIsDrawing(false)
-        lastPosRef.current = null
-        saveMaskSnapshot()
+        setIsDrawing(false);
+        lastPosRef.current = null;
+        saveMaskSnapshot();
       }
     },
-    [isDrawing, saveMaskSnapshot]
-  )
+    [isDrawing, saveMaskSnapshot],
+  );
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('image/')) return
+      if (!file.type.startsWith("image/")) return;
 
-      setError(null)
-      const reader = new FileReader()
+      setError(null);
+      const reader = new FileReader();
       reader.onload = (e) => {
-        const dataUrl = e.target?.result as string
-        setOriginalImage(dataUrl)
-        setResultImage(null)
-        setLoadedImage(null)
-        resetProgress()
+        const dataUrl = e.target?.result as string;
+        setOriginalImage(dataUrl);
+        setResultImage(null);
+        setLoadedImage(null);
+        resetProgress();
 
-        const img = new Image()
+        const img = new Image();
         img.onload = () => {
-          setOriginalSize({ width: img.width, height: img.height })
-          setLoadedImage(img)
-        }
-        img.src = dataUrl
-      }
-      reader.readAsDataURL(file)
+          setOriginalSize({ width: img.width, height: img.height });
+          setLoadedImage(img);
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
     },
-    [resetProgress]
-  )
+    [resetProgress],
+  );
 
   const handleRemoveObjects = async () => {
-    const imageCanvas = imageCanvasRef.current
-    const maskCanvas = maskCanvasRef.current
-    if (!imageCanvas || !maskCanvas) return
+    const imageCanvas = imageCanvasRef.current;
+    const maskCanvas = maskCanvasRef.current;
+    if (!imageCanvas || !maskCanvas) return;
 
-    const bbox = getMaskBoundingBox(maskCanvas)
+    const bbox = getMaskBoundingBox(maskCanvas);
     if (!bbox) {
-      console.warn('No mask drawn')
-      return
+      console.warn("No mask drawn");
+      return;
     }
 
-    setIsProcessing(true)
-    resetAndStart('download')
+    setIsProcessing(true);
+    resetAndStart("download");
 
     try {
-      await initModel()
-
-      const croppedImage = cropCanvas(imageCanvas, bbox.x, bbox.y, bbox.width, bbox.height)
-      const croppedMask = cropCanvas(maskCanvas, bbox.x, bbox.y, bbox.width, bbox.height)
-
-      const padAmount = 32
+      await initModel();
+
+      const croppedImage = cropCanvas(
+        imageCanvas,
+        bbox.x,
+        bbox.y,
+        bbox.width,
+        bbox.height,
+      );
+      const croppedMask = cropCanvas(
+        maskCanvas,
+        bbox.x,
+        bbox.y,
+        bbox.width,
+        bbox.height,
+      );
+
+      const padAmount = 32;
       const padding = {
         top: bbox.y === 0 ? padAmount : 0,
         left: bbox.x === 0 ? padAmount : 0,
-        bottom: originalSize && bbox.y + bbox.height >= originalSize.height ? padAmount : 0,
-        right: originalSize && bbox.x + bbox.width >= originalSize.width ? padAmount : 0
-      }
-      const hasPadding = padding.top > 0 || padding.left > 0 || padding.bottom > 0 || padding.right > 0
-
-      const processImage = hasPadding ? addReflectPadding(croppedImage, padding) : croppedImage
-      const processMask = hasPadding ? addMaskReflectPadding(croppedMask, padding) : croppedMask
-
-      const imageData = canvasToFloat32Array(processImage)
-      const maskData = maskCanvasToFloat32Array(processMask)
+        bottom:
+          originalSize && bbox.y + bbox.height >= originalSize.height
+            ? padAmount
+            : 0,
+        right:
+          originalSize && bbox.x + bbox.width >= originalSize.width
+            ? padAmount
+            : 0,
+      };
+      const hasPadding =
+        padding.top > 0 ||
+        padding.left > 0 ||
+        padding.bottom > 0 ||
+        padding.right > 0;
+
+      const processImage = hasPadding
+        ? addReflectPadding(croppedImage, padding)
+        : croppedImage;
+      const processMask = hasPadding
+        ? addMaskReflectPadding(croppedMask, padding)
+        : croppedMask;
+
+      const imageData = canvasToFloat32Array(processImage);
+      const maskData = maskCanvasToFloat32Array(processMask);
 
       const result = await removeObjects(
         imageData,
         maskData,
         processImage.width,
-        processImage.height
-      )
+        processImage.height,
+      );
 
-      let resultCanvas = tensorToCanvas(result.data, result.width, result.height, true)
+      let resultCanvas = tensorToCanvas(
+        result.data,
+        result.width,
+        result.height,
+        true,
+      );
 
       if (hasPadding) {
         resultCanvas = cropCanvas(
@@ -414,61 +470,73 @@ export function MobileImageEraserPage() {
           padding.left,
           padding.top,
           bbox.width,
-          bbox.height
-        )
+          bbox.height,
+        );
       }
 
-      pasteWithBlending(imageCanvas, resultCanvas, croppedMask, bbox.x, bbox.y, 12)
+      pasteWithBlending(
+        imageCanvas,
+        resultCanvas,
+        croppedMask,
+        bbox.x,
+        bbox.y,
+        12,
+      );
 
       if (resultCanvasRef.current && originalSize) {
-        resultCanvasRef.current.width = originalSize.width
-        resultCanvasRef.current.height = originalSize.height
-        const downloadCtx = resultCanvasRef.current.getContext('2d')
+        resultCanvasRef.current.width = originalSize.width;
+        resultCanvasRef.current.height = originalSize.height;
+        const downloadCtx = resultCanvasRef.current.getContext("2d");
         if (downloadCtx) {
-          downloadCtx.drawImage(imageCanvas, 0, 0)
+          downloadCtx.drawImage(imageCanvas, 0, 0);
         }
       }
 
-      const blob = await canvasToBlob(imageCanvas)
-      const resultUrl = URL.createObjectURL(blob)
-      setResultImage(resultUrl)
+      const blob = await canvasToBlob(imageCanvas);
+      const resultUrl = URL.createObjectURL(blob);
+      setResultImage(resultUrl);
 
-      const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
+      const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
       if (maskCtx) {
-        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
-        const initialState = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
-        setMaskHistory([initialState])
-        setMaskHistoryIndex(0)
+        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+        const initialState = maskCtx.getImageData(
+          0,
+          0,
+          maskCanvas.width,
+          maskCanvas.height,
+        );
+        setMaskHistory([initialState]);
+        setMaskHistoryIndex(0);
       }
 
-      completeAllPhases()
+      completeAllPhases();
     } catch (error) {
-      console.error('Object removal failed:', error)
+      console.error("Object removal failed:", error);
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = async () => {
-    const canvas = resultCanvasRef.current || imageCanvasRef.current
-    if (!canvas) return
+    const canvas = resultCanvasRef.current || imageCanvasRef.current;
+    if (!canvas) return;
 
-    const mimeType = `image/${downloadFormat}`
-    const quality = downloadFormat === 'png' ? undefined : 0.95
-    const dataUrl = canvas.toDataURL(mimeType, quality)
+    const mimeType = `image/${downloadFormat}`;
+    const quality = downloadFormat === "png" ? undefined : 0.95;
+    const dataUrl = canvas.toDataURL(mimeType, quality);
 
-    const filename = generateFreeToolFilename('image-eraser', downloadFormat)
-    await downloadFromDataUrl(dataUrl, filename)
-  }
+    const filename = generateFreeToolFilename("image-eraser", downloadFormat);
+    await downloadFromDataUrl(dataUrl, filename);
+  };
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      dispose()
-    }
-  }, [dispose])
+      dispose();
+    };
+  }, [dispose]);
 
-  const canUndo = maskHistoryIndex > 0
+  const canUndo = maskHistoryIndex > 0;
 
   // Same layout structure as MobileSegmentAnythingPage
   return (
@@ -478,13 +546,19 @@ export function MobileImageEraserPage() {
 
       {/* Header with back button */}
       <div className="flex items-center gap-3 mb-4">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.imageEraser.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.imageEraser.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.imageEraser.description')}
+            {t("freeTools.imageEraser.description")}
           </p>
         </div>
       </div>
@@ -499,7 +573,9 @@ export function MobileImageEraserPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-base font-medium">{t('freeTools.imageEraser.selectImage')}</p>
+            <p className="text-base font-medium">
+              {t("freeTools.imageEraser.selectImage")}
+            </p>
           </CardContent>
         </Card>
       )}
@@ -510,9 +586,9 @@ export function MobileImageEraserPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
+          e.target.value = "";
         }}
       />
 
@@ -521,16 +597,23 @@ export function MobileImageEraserPage() {
         <div className="flex flex-col gap-4">
           {/* Progress display */}
           {isProcessing && (
-            <ProcessingProgress progress={progress} showPhases={true} showOverall={true} showEta={true} />
+            <ProcessingProgress
+              progress={progress}
+              showPhases={true}
+              showOverall={true}
+              showEta={true}
+            />
           )}
 
           {/* Error with retry button */}
           {error && hasFailed() && !isProcessing && (
             <div className="flex items-center justify-center gap-3 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
-              <span className="text-sm text-destructive">{t('common.downloadFailed')}</span>
+              <span className="text-sm text-destructive">
+                {t("common.downloadFailed")}
+              </span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -540,22 +623,22 @@ export function MobileImageEraserPage() {
             {/* Left: Tool selection */}
             <div className="flex items-center gap-1">
               <Button
-                variant={tool === 'brush' ? 'default' : 'ghost'}
+                variant={tool === "brush" ? "default" : "ghost"}
                 size="icon"
                 className="h-9 w-9"
-                onClick={() => setTool('brush')}
+                onClick={() => setTool("brush")}
                 disabled={isProcessing}
-                title={t('freeTools.imageEraser.brush')}
+                title={t("freeTools.imageEraser.brush")}
               >
                 <Paintbrush className="h-4 w-4" />
               </Button>
               <Button
-                variant={tool === 'eraser' ? 'default' : 'ghost'}
+                variant={tool === "eraser" ? "default" : "ghost"}
                 size="icon"
                 className="h-9 w-9"
-                onClick={() => setTool('eraser')}
+                onClick={() => setTool("eraser")}
                 disabled={isProcessing}
-                title={t('freeTools.imageEraser.eraser')}
+                title={t("freeTools.imageEraser.eraser")}
               >
                 <Eraser className="h-4 w-4" />
               </Button>
@@ -568,7 +651,7 @@ export function MobileImageEraserPage() {
                 className="h-9 w-9"
                 onClick={undoMask}
                 disabled={isProcessing || !canUndo}
-                title={t('freeTools.imageEraser.undo')}
+                title={t("freeTools.imageEraser.undo")}
               >
                 <Undo2 className="h-4 w-4" />
               </Button>
@@ -578,7 +661,7 @@ export function MobileImageEraserPage() {
                 className="h-9 w-9"
                 onClick={clearMask}
                 disabled={isProcessing}
-                title={t('freeTools.imageEraser.clear')}
+                title={t("freeTools.imageEraser.clear")}
               >
                 <Trash2 className="h-4 w-4" />
               </Button>
@@ -595,7 +678,9 @@ export function MobileImageEraserPage() {
                 disabled={isProcessing}
                 className="flex-1"
               />
-              <span className="text-xs text-muted-foreground w-6 text-right">{brushSize}</span>
+              <span className="text-xs text-muted-foreground w-6 text-right">
+                {brushSize}
+              </span>
             </div>
           </div>
 
@@ -605,12 +690,12 @@ export function MobileImageEraserPage() {
               <div
                 ref={canvasContainerRef}
                 className={cn(
-                  'relative mx-auto bg-muted rounded-lg overflow-hidden touch-none',
-                  loadedImage ? 'cursor-crosshair' : 'cursor-default'
+                  "relative mx-auto bg-muted rounded-lg overflow-hidden touch-none",
+                  loadedImage ? "cursor-crosshair" : "cursor-default",
                 )}
                 style={{
                   width: canvasSize.width,
-                  height: canvasSize.height
+                  height: canvasSize.height,
                 }}
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}
@@ -622,7 +707,7 @@ export function MobileImageEraserPage() {
                   className="absolute inset-0 pointer-events-none"
                   style={{
                     width: canvasSize.width,
-                    height: canvasSize.height
+                    height: canvasSize.height,
                   }}
                 />
 
@@ -632,7 +717,7 @@ export function MobileImageEraserPage() {
                   className="absolute inset-0 pointer-events-none opacity-50"
                   style={{
                     width: canvasSize.width,
-                    height: canvasSize.height
+                    height: canvasSize.height,
                   }}
                 />
 
@@ -655,7 +740,7 @@ export function MobileImageEraserPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.imageEraser.selectImage')}
+              {t("freeTools.imageEraser.selectImage")}
             </Button>
 
             <Button
@@ -666,12 +751,12 @@ export function MobileImageEraserPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.imageEraser.processing')}
+                  {t("freeTools.imageEraser.processing")}
                 </>
               ) : (
                 <>
                   <Eraser className="h-4 w-4 mr-2" />
-                  {t('freeTools.imageEraser.removeObjects')}
+                  {t("freeTools.imageEraser.removeObjects")}
                 </>
               )}
             </Button>
@@ -682,7 +767,9 @@ export function MobileImageEraserPage() {
             <div className="flex items-center justify-center gap-2">
               <Select
                 value={downloadFormat}
-                onValueChange={(v) => setDownloadFormat(v as 'png' | 'jpeg' | 'webp')}
+                onValueChange={(v) =>
+                  setDownloadFormat(v as "png" | "jpeg" | "webp")
+                }
               >
                 <SelectTrigger className="h-9 w-24">
                   <SelectValue />
@@ -696,17 +783,22 @@ export function MobileImageEraserPage() {
 
               <Button onClick={handleDownload} className="gradient-bg">
                 <Download className="h-4 w-4 mr-2" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             </div>
           )}
 
           {/* Instructions - Mobile friendly */}
           <div className="text-xs text-muted-foreground text-center">
-            <p>{t('freeTools.imageEraser.hintMobile', 'Draw on the area you want to remove')}</p>
+            <p>
+              {t(
+                "freeTools.imageEraser.hintMobile",
+                "Draw on the area you want to remove",
+              )}
+            </p>
           </div>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileModelsPage.tsx b/mobile/src/pages/MobileModelsPage.tsx
index 148b2299..b5a9d12f 100644
--- a/mobile/src/pages/MobileModelsPage.tsx
+++ b/mobile/src/pages/MobileModelsPage.tsx
@@ -1,9 +1,9 @@
-import { ModelsPage } from '@/pages/ModelsPage'
+import { ModelsPage } from "@/pages/ModelsPage";
 
 export function MobileModelsPage() {
   return (
     <div className="mobile-models-page h-full">
       <ModelsPage />
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobilePlaygroundPage.tsx b/mobile/src/pages/MobilePlaygroundPage.tsx
index 17c25308..bcc38678 100644
--- a/mobile/src/pages/MobilePlaygroundPage.tsx
+++ b/mobile/src/pages/MobilePlaygroundPage.tsx
@@ -1,20 +1,20 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { usePlaygroundStore } from '@/stores/playgroundStore'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { useTemplateStore } from '@/stores/templateStore'
-import { usePredictionInputsStore } from '@mobile/stores/predictionInputsStore'
-import { apiClient } from '@/api/client'
-import { DynamicForm } from '@/components/playground/DynamicForm'
-import { OutputDisplay } from '@/components/playground/OutputDisplay'
-import { BatchControls } from '@/components/playground/BatchControls'
-import { BatchOutputGrid } from '@/components/playground/BatchOutputGrid'
-import { HistoryPanel } from '@/components/playground/HistoryPanel'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { usePlaygroundStore } from "@/stores/playgroundStore";
+import { useModelsStore } from "@/stores/modelsStore";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { useTemplateStore } from "@/stores/templateStore";
+import { usePredictionInputsStore } from "@mobile/stores/predictionInputsStore";
+import { apiClient } from "@/api/client";
+import { DynamicForm } from "@/components/playground/DynamicForm";
+import { OutputDisplay } from "@/components/playground/OutputDisplay";
+import { BatchControls } from "@/components/playground/BatchControls";
+import { BatchOutputGrid } from "@/components/playground/BatchOutputGrid";
+import { HistoryPanel } from "@/components/playground/HistoryPanel";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Dialog,
   DialogContent,
@@ -22,22 +22,29 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
-import { RotateCcw, Loader2, Save, Globe, Settings2, Image } from 'lucide-react'
-import { ModelSelector } from '@/components/playground/ModelSelector'
-import { cn } from '@/lib/utils'
-import { toast } from '@/hooks/useToast'
-
-type ViewTab = 'input' | 'output'
+} from "@/components/ui/dialog";
+import {
+  RotateCcw,
+  Loader2,
+  Save,
+  Globe,
+  Settings2,
+  Image,
+} from "lucide-react";
+import { ModelSelector } from "@/components/playground/ModelSelector";
+import { cn } from "@/lib/utils";
+import { toast } from "@/hooks/useToast";
+
+type ViewTab = "input" | "output";
 
 export function MobilePlaygroundPage() {
-  const { t } = useTranslation()
-  const params = useParams()
-  const modelId = params['*'] || params.modelId
-  const [searchParams, setSearchParams] = useSearchParams()
-  const navigate = useNavigate()
-  const { models } = useModelsStore()
-  const { isLoading: isLoadingApiKey, apiKey } = useApiKeyStore()
+  const { t } = useTranslation();
+  const params = useParams();
+  const modelId = params["*"] || params.modelId;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { models } = useModelsStore();
+  const { isLoading: isLoadingApiKey, apiKey } = useApiKeyStore();
   const {
     tabs,
     activeTabId,
@@ -52,210 +59,254 @@ export function MobilePlaygroundPage() {
     runBatch,
     clearBatchResults,
     selectHistoryItem,
-  } = usePlaygroundStore()
-  const { templates, loadTemplates, saveTemplate, isLoaded: templatesLoaded } = useTemplateStore()
-  const { save: savePredictionInputs, load: loadPredictionInputs, isLoaded: inputsLoaded } = usePredictionInputsStore()
+  } = usePlaygroundStore();
+  const {
+    templates,
+    loadTemplates,
+    saveTemplate,
+    isLoaded: templatesLoaded,
+  } = useTemplateStore();
+  const {
+    save: savePredictionInputs,
+    load: loadPredictionInputs,
+    isLoaded: inputsLoaded,
+  } = usePredictionInputsStore();
 
-  const activeTab = getActiveTab()
+  const activeTab = getActiveTab();
 
   // History-aware output display
-  const historyIndex = activeTab?.selectedHistoryIndex ?? null
-  const historyItem = historyIndex !== null ? activeTab?.generationHistory[historyIndex] : null
-  const displayedPrediction = historyItem ? historyItem.prediction : (activeTab?.currentPrediction ?? null)
-  const displayedOutputs = historyItem ? historyItem.outputs : (activeTab?.outputs ?? [])
-
-  const templateLoadedRef = useRef<string | null>(null)
-  const pendingTemplateRef = useRef<{ values: Record<string, unknown>, name: string } | null>(null)
-  const prevOutputsLengthRef = useRef(0)
-  const lastSavedPredictionRef = useRef<string | null>(null)
+  const historyIndex = activeTab?.selectedHistoryIndex ?? null;
+  const historyItem =
+    historyIndex !== null ? activeTab?.generationHistory[historyIndex] : null;
+  const displayedPrediction = historyItem
+    ? historyItem.prediction
+    : (activeTab?.currentPrediction ?? null);
+  const displayedOutputs = historyItem
+    ? historyItem.outputs
+    : (activeTab?.outputs ?? []);
+
+  const templateLoadedRef = useRef<string | null>(null);
+  const pendingTemplateRef = useRef<{
+    values: Record<string, unknown>;
+    name: string;
+  } | null>(null);
+  const prevOutputsLengthRef = useRef(0);
+  const lastSavedPredictionRef = useRef<string | null>(null);
 
   // Mobile: switch between input and output views
-  const [activeView, setActiveView] = useState<ViewTab>('input')
+  const [activeView, setActiveView] = useState<ViewTab>("input");
 
   // Template dialog states
-  const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false)
-  const [newTemplateName, setNewTemplateName] = useState('')
+  const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false);
+  const [newTemplateName, setNewTemplateName] = useState("");
 
   // Dynamic pricing state
-  const [calculatedPrice, setCalculatedPrice] = useState<number | null>(null)
-  const [isPricingLoading, setIsPricingLoading] = useState(false)
-  const pricingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const [calculatedPrice, setCalculatedPrice] = useState<number | null>(null);
+  const [isPricingLoading, setIsPricingLoading] = useState(false);
+  const pricingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Load templates and prediction inputs on mount
   useEffect(() => {
     if (!templatesLoaded) {
-      loadTemplates()
+      loadTemplates();
     }
     if (!inputsLoaded) {
-      loadPredictionInputs()
+      loadPredictionInputs();
     }
-  }, [templatesLoaded, loadTemplates, inputsLoaded, loadPredictionInputs])
+  }, [templatesLoaded, loadTemplates, inputsLoaded, loadPredictionInputs]);
 
   // Reset template loaded ref and view when modelId changes (navigating from templates page)
   useEffect(() => {
-    templateLoadedRef.current = null
+    templateLoadedRef.current = null;
     // Also reset to input view when navigating to a different model
-    setActiveView('input')
-  }, [modelId])
+    setActiveView("input");
+  }, [modelId]);
 
   // Calculate dynamic pricing with debounce
   useEffect(() => {
     if (!activeTab?.selectedModel || !apiKey) {
-      setCalculatedPrice(null)
-      return
+      setCalculatedPrice(null);
+      return;
     }
 
     if (pricingTimeoutRef.current) {
-      clearTimeout(pricingTimeoutRef.current)
+      clearTimeout(pricingTimeoutRef.current);
     }
 
     pricingTimeoutRef.current = setTimeout(async () => {
-      setIsPricingLoading(true)
+      setIsPricingLoading(true);
       try {
         const price = await apiClient.calculatePricing(
           activeTab.selectedModel!.model_id,
-          activeTab.formValues
-        )
-        setCalculatedPrice(price)
+          activeTab.formValues,
+        );
+        setCalculatedPrice(price);
       } catch {
-        setCalculatedPrice(null)
+        setCalculatedPrice(null);
       } finally {
-        setIsPricingLoading(false)
+        setIsPricingLoading(false);
       }
-    }, 500)
+    }, 500);
 
     return () => {
       if (pricingTimeoutRef.current) {
-        clearTimeout(pricingTimeoutRef.current)
+        clearTimeout(pricingTimeoutRef.current);
       }
-    }
-  }, [activeTab?.selectedModel, activeTab?.formValues, apiKey, tabs])
+    };
+  }, [activeTab?.selectedModel, activeTab?.formValues, apiKey, tabs]);
 
   // Load template from URL query param
   useEffect(() => {
-    const templateId = searchParams.get('template')
-    if (templateId && templatesLoaded && activeTab && templateLoadedRef.current !== templateId) {
-      const template = templates.find(t => t.id === templateId)
+    const templateId = searchParams.get("template");
+    if (
+      templateId &&
+      templatesLoaded &&
+      activeTab &&
+      templateLoadedRef.current !== templateId
+    ) {
+      const template = templates.find((t) => t.id === templateId);
       if (template) {
-        templateLoadedRef.current = templateId
-        setActiveView('input')
+        templateLoadedRef.current = templateId;
+        setActiveView("input");
         // Store template values as pending — they will be applied in handleSetDefaults
         // after DynamicForm loads the model schema and sets default values.
         // This avoids the race condition where defaults overwrite template values.
-        pendingTemplateRef.current = { values: template.values, name: template.name }
+        pendingTemplateRef.current = {
+          values: template.values,
+          name: template.name,
+        };
         // If model is already correct and form fields exist, apply immediately
-        if (activeTab.selectedModel?.model_id === template.modelId && activeTab.formFields.length > 0) {
-          setFormValues(template.values)
-          pendingTemplateRef.current = null
+        if (
+          activeTab.selectedModel?.model_id === template.modelId &&
+          activeTab.formFields.length > 0
+        ) {
+          setFormValues(template.values);
+          pendingTemplateRef.current = null;
           toast({
-            title: t('playground.templateLoaded'),
-            description: t('playground.loadedTemplate', { name: template.name }),
-          })
+            title: t("playground.templateLoaded"),
+            description: t("playground.loadedTemplate", {
+              name: template.name,
+            }),
+          });
         }
-        setSearchParams({}, { replace: true })
+        setSearchParams({}, { replace: true });
       }
     }
-  }, [searchParams, templates, templatesLoaded, activeTab, setFormValues, setSearchParams, t])
+  }, [
+    searchParams,
+    templates,
+    templatesLoaded,
+    activeTab,
+    setFormValues,
+    setSearchParams,
+    t,
+  ]);
 
   const handleSaveTemplate = () => {
-    if (!activeTab?.selectedModel || !newTemplateName.trim()) return
+    if (!activeTab?.selectedModel || !newTemplateName.trim()) return;
 
     saveTemplate(
       newTemplateName.trim(),
       activeTab.selectedModel.model_id,
       activeTab.selectedModel.name,
-      activeTab.formValues
-    )
-    setNewTemplateName('')
-    setShowSaveTemplateDialog(false)
+      activeTab.formValues,
+    );
+    setNewTemplateName("");
+    setShowSaveTemplateDialog(false);
     toast({
-      title: t('playground.templateSaved'),
-      description: t('playground.savedAs', { name: newTemplateName.trim() }),
-    })
-  }
+      title: t("playground.templateSaved"),
+      description: t("playground.savedAs", { name: newTemplateName.trim() }),
+    });
+  };
 
   // Create initial tab if none exist
   useEffect(() => {
     if (tabs.length === 0 && models.length > 0) {
       if (modelId) {
-        const decodedId = decodeURIComponent(modelId)
-        const model = models.find(m => m.model_id === decodedId)
-        createTab(model)
+        const decodedId = decodeURIComponent(modelId);
+        const model = models.find((m) => m.model_id === decodedId);
+        createTab(model);
       } else {
-        createTab()
+        createTab();
       }
     }
-  }, [tabs.length, models, modelId, createTab])
+  }, [tabs.length, models, modelId, createTab]);
 
   // Set model from URL param when navigating
   useEffect(() => {
     if (modelId && models.length > 0 && activeTab) {
-      const decodedId = decodeURIComponent(modelId)
-      const model = models.find(m => m.model_id === decodedId)
+      const decodedId = decodeURIComponent(modelId);
+      const model = models.find((m) => m.model_id === decodedId);
       if (model && activeTab.selectedModel?.model_id !== decodedId) {
-        setSelectedModel(model)
+        setSelectedModel(model);
       }
     }
-  }, [modelId, models, activeTab, setSelectedModel])
-
-  const handleSetDefaults = useCallback((defaults: Record<string, unknown>) => {
-    setFormValues(defaults)
-    // Apply pending template values after defaults are set (overrides defaults)
-    if (pendingTemplateRef.current) {
-      const { values, name } = pendingTemplateRef.current
-      pendingTemplateRef.current = null
-      setFormValues(values)
-      toast({
-        title: t('playground.templateLoaded'),
-        description: t('playground.loadedTemplate', { name }),
-      })
-    }
-  }, [setFormValues, t])
+  }, [modelId, models, activeTab, setSelectedModel]);
+
+  const handleSetDefaults = useCallback(
+    (defaults: Record<string, unknown>) => {
+      setFormValues(defaults);
+      // Apply pending template values after defaults are set (overrides defaults)
+      if (pendingTemplateRef.current) {
+        const { values, name } = pendingTemplateRef.current;
+        pendingTemplateRef.current = null;
+        setFormValues(values);
+        toast({
+          title: t("playground.templateLoaded"),
+          description: t("playground.loadedTemplate", { name }),
+        });
+      }
+    },
+    [setFormValues, t],
+  );
 
   const handleRun = async () => {
     // Switch to output view immediately so user can play game while waiting
-    setActiveView('output')
+    setActiveView("output");
 
     // Check if batch mode is enabled
-    if (activeTab?.batchConfig?.enabled && activeTab.batchConfig.repeatCount > 1) {
-      await runBatch()
+    if (
+      activeTab?.batchConfig?.enabled &&
+      activeTab.batchConfig.repeatCount > 1
+    ) {
+      await runBatch();
     } else {
-      await runPrediction()
+      await runPrediction();
     }
-  }
+  };
 
   const handleReset = () => {
-    resetForm()
-  }
+    resetForm();
+  };
 
   const handleViewWebPage = () => {
     if (activeTab?.selectedModel) {
-      const webUrl = `https://wavespeed.ai/models/${activeTab.selectedModel.model_id}`
-      window.open(webUrl, '_blank')
+      const webUrl = `https://wavespeed.ai/models/${activeTab.selectedModel.model_id}`;
+      window.open(webUrl, "_blank");
     }
-  }
+  };
 
   // Auto-switch to output only when NEW outputs appear (after running prediction)
   useEffect(() => {
-    const currentLength = activeTab?.outputs?.length ?? 0
-    const prevLength = prevOutputsLengthRef.current
+    const currentLength = activeTab?.outputs?.length ?? 0;
+    const prevLength = prevOutputsLengthRef.current;
 
     // Only auto-switch if outputs increased (new results) and not running
     if (currentLength > prevLength && !activeTab?.isRunning) {
-      setActiveView('output')
+      setActiveView("output");
     }
 
     // Update the ref to track current length
-    prevOutputsLengthRef.current = currentLength
-  }, [activeTab?.outputs, activeTab?.isRunning])
+    prevOutputsLengthRef.current = currentLength;
+  }, [activeTab?.outputs, activeTab?.isRunning]);
 
   // Save prediction inputs to local storage when prediction completes
   useEffect(() => {
-    const prediction = activeTab?.currentPrediction
-    const model = activeTab?.selectedModel
-    const formValues = activeTab?.formValues
-    const outputs = activeTab?.outputs
-    const isRunning = activeTab?.isRunning
+    const prediction = activeTab?.currentPrediction;
+    const model = activeTab?.selectedModel;
+    const formValues = activeTab?.formValues;
+    const outputs = activeTab?.outputs;
+    const isRunning = activeTab?.isRunning;
 
     // Check if we have a new completed prediction that hasn't been saved yet
     // We check for outputs and !isRunning instead of status because sync mode
@@ -270,29 +321,37 @@ export function MobilePlaygroundPage() {
       Object.keys(formValues).length > 0 &&
       lastSavedPredictionRef.current !== prediction.id
     ) {
-      console.log('[MobilePlaygroundPage] Saving prediction inputs:', {
+      console.log("[MobilePlaygroundPage] Saving prediction inputs:", {
         predictionId: prediction.id,
         modelId: model.model_id,
-        inputKeys: Object.keys(formValues)
-      })
+        inputKeys: Object.keys(formValues),
+      });
       savePredictionInputs(
         prediction.id,
         model.model_id,
         model.name,
-        formValues
-      )
-      lastSavedPredictionRef.current = prediction.id
+        formValues,
+      );
+      lastSavedPredictionRef.current = prediction.id;
     }
-  }, [activeTab?.currentPrediction, activeTab?.selectedModel, activeTab?.formValues, activeTab?.outputs, activeTab?.isRunning, savePredictionInputs])
+  }, [
+    activeTab?.currentPrediction,
+    activeTab?.selectedModel,
+    activeTab?.formValues,
+    activeTab?.outputs,
+    activeTab?.isRunning,
+    savePredictionInputs,
+  ]);
 
   // Save batch prediction inputs to local storage when batch completes
-  const lastSavedBatchRef = useRef<Set<string>>(new Set())
+  const lastSavedBatchRef = useRef<Set<string>>(new Set());
   useEffect(() => {
-    const batchResults = activeTab?.batchResults
-    const model = activeTab?.selectedModel
-    const isRunning = activeTab?.isRunning
+    const batchResults = activeTab?.batchResults;
+    const model = activeTab?.selectedModel;
+    const isRunning = activeTab?.isRunning;
 
-    if (!batchResults || batchResults.length === 0 || !model || isRunning) return
+    if (!batchResults || batchResults.length === 0 || !model || isRunning)
+      return;
 
     // Save inputs for each completed batch result
     for (const result of batchResults) {
@@ -304,28 +363,33 @@ export function MobilePlaygroundPage() {
         Object.keys(result.input).length > 0 &&
         !lastSavedBatchRef.current.has(result.prediction.id)
       ) {
-        console.log('[MobilePlaygroundPage] Saving batch prediction inputs:', {
+        console.log("[MobilePlaygroundPage] Saving batch prediction inputs:", {
           predictionId: result.prediction.id,
           modelId: model.model_id,
-          inputKeys: Object.keys(result.input)
-        })
+          inputKeys: Object.keys(result.input),
+        });
         savePredictionInputs(
           result.prediction.id,
           model.model_id,
           model.name,
-          result.input
-        )
-        lastSavedBatchRef.current.add(result.prediction.id)
+          result.input,
+        );
+        lastSavedBatchRef.current.add(result.prediction.id);
       }
     }
-  }, [activeTab?.batchResults, activeTab?.selectedModel, activeTab?.isRunning, savePredictionInputs])
+  }, [
+    activeTab?.batchResults,
+    activeTab?.selectedModel,
+    activeTab?.isRunning,
+    savePredictionInputs,
+  ]);
 
   if (isLoadingApiKey) {
     return (
       <div className="flex h-full items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   return (
@@ -333,15 +397,15 @@ export function MobilePlaygroundPage() {
       {/* Mobile Tab Switcher */}
       <div className="tab-bar">
         <button
-          className={cn('tab-item', activeView === 'input' && 'active')}
-          onClick={() => setActiveView('input')}
+          className={cn("tab-item", activeView === "input" && "active")}
+          onClick={() => setActiveView("input")}
         >
           <Settings2 className="h-4 w-4 inline-block mr-1.5" />
           Input
         </button>
         <button
-          className={cn('tab-item', activeView === 'output' && 'active')}
-          onClick={() => setActiveView('output')}
+          className={cn("tab-item", activeView === "output" && "active")}
+          onClick={() => setActiveView("output")}
         >
           <Image className="h-4 w-4 inline-block mr-1.5" />
           Output
@@ -354,7 +418,7 @@ export function MobilePlaygroundPage() {
       {/* Content Area */}
       {activeTab ? (
         <div className="flex-1 overflow-hidden flex flex-col">
-          {activeView === 'input' ? (
+          {activeView === "input" ? (
             /* Input View */
             <div className="flex-1 flex flex-col overflow-hidden">
               {/* Model Selector */}
@@ -363,7 +427,12 @@ export function MobilePlaygroundPage() {
                   <ModelSelector
                     models={models}
                     value={activeTab?.selectedModel?.model_id}
-                    onChange={(newModelId) => navigate(`/playground/${encodeURIComponent(newModelId)}`, { replace: true })}
+                    onChange={(newModelId) =>
+                      navigate(
+                        `/playground/${encodeURIComponent(newModelId)}`,
+                        { replace: true },
+                      )
+                    }
                     disabled={activeTab?.isRunning}
                   />
                 </div>
@@ -394,7 +463,9 @@ export function MobilePlaygroundPage() {
                   />
                 ) : (
                   <div className="h-full flex items-center justify-center text-muted-foreground">
-                    <p className="text-center px-4">{t('playground.selectModelPrompt')}</p>
+                    <p className="text-center px-4">
+                      {t("playground.selectModelPrompt")}
+                    </p>
                   </div>
                 )}
               </div>
@@ -406,11 +477,11 @@ export function MobilePlaygroundPage() {
                     disabled={!activeTab.selectedModel}
                     isRunning={activeTab.isRunning}
                     onRun={handleRun}
-                    runLabel={t('playground.run')}
-                    runningLabel={t('playground.running')}
+                    runLabel={t("playground.run")}
+                    runningLabel={t("playground.running")}
                     price={
                       isPricingLoading
-                        ? '...'
+                        ? "..."
                         : calculatedPrice != null
                           ? `$${calculatedPrice.toFixed(4)}`
                           : activeTab.selectedModel?.base_price != null
@@ -423,7 +494,7 @@ export function MobilePlaygroundPage() {
                     className="touch-target"
                     onClick={handleReset}
                     disabled={activeTab.isRunning}
-                    title={t('playground.resetForm')}
+                    title={t("playground.resetForm")}
                   >
                     <RotateCcw className="h-4 w-4" />
                   </Button>
@@ -432,7 +503,7 @@ export function MobilePlaygroundPage() {
                     className="touch-target"
                     onClick={() => setShowSaveTemplateDialog(true)}
                     disabled={!activeTab.selectedModel || activeTab.isRunning}
-                    title={t('playground.saveAsTemplate')}
+                    title={t("playground.saveAsTemplate")}
                   >
                     <Save className="h-4 w-4" />
                   </Button>
@@ -445,7 +516,7 @@ export function MobilePlaygroundPage() {
               <div className="px-4 py-3 border-b bg-muted/30">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <h2 className="font-semibold">{t('playground.output')}</h2>
+                    <h2 className="font-semibold">{t("playground.output")}</h2>
                     {activeTab.selectedModel && (
                       <span className="text-sm text-muted-foreground truncate max-w-[150px]">
                         · {activeTab.selectedModel.name}
@@ -455,15 +526,17 @@ export function MobilePlaygroundPage() {
                   {activeTab.isRunning && (
                     <div className="flex items-center gap-2 text-sm text-muted-foreground">
                       <Loader2 className="h-4 w-4 animate-spin" />
-                      {t('playground.running')}
+                      {t("playground.running")}
                     </div>
                   )}
                 </div>
               </div>
               <div className="flex-1 flex flex-col overflow-hidden">
                 <div className="flex-1 p-4 overflow-auto">
-                  {/* Show BatchOutputGrid for batch results, OutputDisplay for single results */}
-                  {activeTab.batchResults && activeTab.batchResults.length > 0 ? (
+                  {/* Show BatchOutputGrid for batch results (not when viewing history), OutputDisplay otherwise */}
+                  {activeTab.batchResults &&
+                  activeTab.batchResults.length > 0 &&
+                  historyIndex === null ? (
                     <BatchOutputGrid
                       results={activeTab.batchResults}
                       modelId={activeTab.selectedModel?.model_id}
@@ -499,31 +572,38 @@ export function MobilePlaygroundPage() {
         </div>
       ) : (
         <div className="flex-1 flex items-center justify-center text-muted-foreground p-4">
-          <p className="text-center">{t('playground.noTabs')}</p>
+          <p className="text-center">{t("playground.noTabs")}</p>
         </div>
       )}
 
       {/* Save Template Dialog */}
-      <Dialog open={showSaveTemplateDialog} onOpenChange={setShowSaveTemplateDialog}>
+      <Dialog
+        open={showSaveTemplateDialog}
+        onOpenChange={setShowSaveTemplateDialog}
+      >
         <DialogContent className="max-w-[90vw] sm:max-w-sm">
           <DialogHeader>
-            <DialogTitle>{t('playground.saveTemplate')}</DialogTitle>
+            <DialogTitle>{t("playground.saveTemplate")}</DialogTitle>
             <DialogDescription>
-              {t('playground.saveTemplateDesc', { model: activeTab?.selectedModel?.name })}
+              {t("playground.saveTemplateDesc", {
+                model: activeTab?.selectedModel?.name,
+              })}
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="templateName">{t('playground.templateName')}</Label>
+              <Label htmlFor="templateName">
+                {t("playground.templateName")}
+              </Label>
               <Input
                 id="templateName"
                 className="mobile-input"
                 value={newTemplateName}
                 onChange={(e) => setNewTemplateName(e.target.value)}
-                placeholder={t('templates.templateNamePlaceholder')}
+                placeholder={t("templates.templateNamePlaceholder")}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter' && newTemplateName.trim()) {
-                    handleSaveTemplate()
+                  if (e.key === "Enter" && newTemplateName.trim()) {
+                    handleSaveTemplate();
                   }
                 }}
               />
@@ -534,23 +614,22 @@ export function MobilePlaygroundPage() {
               variant="outline"
               className="w-full sm:w-auto"
               onClick={() => {
-                setNewTemplateName('')
-                setShowSaveTemplateDialog(false)
+                setNewTemplateName("");
+                setShowSaveTemplateDialog(false);
               }}
             >
-              {t('common.cancel')}
+              {t("common.cancel")}
             </Button>
             <Button
               className="w-full sm:w-auto"
               onClick={handleSaveTemplate}
               disabled={!newTemplateName.trim()}
             >
-              {t('common.save')}
+              {t("common.save")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileSegmentAnythingPage.tsx b/mobile/src/pages/MobileSegmentAnythingPage.tsx
index 888a947b..28f609af 100644
--- a/mobile/src/pages/MobileSegmentAnythingPage.tsx
+++ b/mobile/src/pages/MobileSegmentAnythingPage.tsx
@@ -1,19 +1,22 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useSegmentAnythingWorker, type MaskResult } from '@/hooks/useSegmentAnythingWorker'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  useSegmentAnythingWorker,
+  type MaskResult,
+} from "@/hooks/useSegmentAnythingWorker";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   ArrowLeft,
   Upload,
@@ -23,53 +26,61 @@ import {
   Download,
   Star,
   RefreshCw,
-  Eye
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { featherMask } from '@/lib/maskUtils'
+  Eye,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { featherMask } from "@/lib/maskUtils";
 
 // Phase configuration for segment anything (simplified to single phase)
 const PHASES = [
-  { id: 'process', labelKey: 'freeTools.progress.processing', weight: 1.0 }
-]
+  { id: "process", labelKey: "freeTools.progress.processing", weight: 1.0 },
+];
 
 // Mask overlay color (blue with transparency)
-const MASK_COLOR = { r: 0, g: 114, b: 189, a: 255 }
+const MASK_COLOR = { r: 0, g: 114, b: 189, a: 255 };
 
 interface Point {
-  x: number // Normalized 0-1
-  y: number // Normalized 0-1
-  label: 0 | 1 // 0 = negative, 1 = positive
+  x: number; // Normalized 0-1
+  y: number; // Normalized 0-1
+  label: 0 | 1; // 0 = negative, 1 = positive
 }
 
 export function MobileSegmentAnythingPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadFromDataUrl } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const imageContainerRef = useRef<HTMLDivElement>(null)
-  const maskCanvasRef = useRef<HTMLCanvasElement>(null)
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDecoding, setIsDecoding] = useState(false)
-  const [isEncoded, setIsEncoded] = useState(false)
-  const [canvasSize, setCanvasSize] = useState({ width: 300, height: 300 })
-  const [originalSize, setOriginalSize] = useState<{ width: number; height: number } | null>(null)
-  const [containerSize, setContainerSize] = useState({ width: 300, height: 400 })
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadFromDataUrl } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const imageContainerRef = useRef<HTMLDivElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDecoding, setIsDecoding] = useState(false);
+  const [isEncoded, setIsEncoded] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({ width: 300, height: 300 });
+  const [originalSize, setOriginalSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [containerSize, setContainerSize] = useState({
+    width: 300,
+    height: 400,
+  });
 
   // Multi-mask mode: starts false (hover preview), becomes true after first click
-  const [isMultiMaskMode, setIsMultiMaskMode] = useState(false)
-  const [points, setPoints] = useState<Point[]>([])
-  const lastDecodedPointRef = useRef<{ x: number; y: number } | null>(null)
-  const pendingPointRef = useRef<Point | null>(null)
+  const [isMultiMaskMode, setIsMultiMaskMode] = useState(false);
+  const [points, setPoints] = useState<Point[]>([]);
+  const lastDecodedPointRef = useRef<{ x: number; y: number } | null>(null);
+  const pendingPointRef = useRef<Point | null>(null);
 
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>('png')
-  const [lastMaskResult, setLastMaskResult] = useState<MaskResult | null>(null)
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "png",
+  );
+  const [lastMaskResult, setLastMaskResult] = useState<MaskResult | null>(null);
 
   // Preview state
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
   // Multi-phase progress tracking
   const {
@@ -78,10 +89,10 @@ export function MobileSegmentAnythingPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null);
 
   const {
     segmentImage,
@@ -90,477 +101,523 @@ export function MobileSegmentAnythingPage() {
     dispose,
     isSegmented,
     retryModel,
-    hasFailed
+    hasFailed,
   } = useSegmentAnythingWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
+      if (phase === "download") {
+        startPhase("download");
+      } else if (phase === "process") {
+        startPhase("process");
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : 'process'
-      updatePhase(phaseId, progressValue, detail)
+      const phaseId = phase === "download" ? "download" : "process";
+      updatePhase(phaseId, progressValue, detail);
     },
     onSegmented: () => {
-      setIsEncoded(true)
-      setIsProcessing(false)
-      completeAllPhases()
+      setIsEncoded(true);
+      setIsProcessing(false);
+      completeAllPhases();
     },
     onReady: () => {
-      setError(null)
+      setError(null);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      setIsDecoding(false)
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      setIsDecoding(false);
+    },
+  });
 
   // Measure available container size on mount and window resize
   useEffect(() => {
     const updateContainerSize = () => {
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-      const availableWidth = Math.min(viewportWidth - 32, 500)
-      const availableHeight = Math.max(300, viewportHeight - 400)
-      setContainerSize({ width: availableWidth, height: availableHeight })
-    }
-
-    updateContainerSize()
-    window.addEventListener('resize', updateContainerSize)
-    return () => window.removeEventListener('resize', updateContainerSize)
-  }, [])
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const availableWidth = Math.min(viewportWidth - 32, 500);
+      const availableHeight = Math.max(300, viewportHeight - 400);
+      setContainerSize({ width: availableWidth, height: availableHeight });
+    };
+
+    updateContainerSize();
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, []);
 
   // Recalculate canvas size when container or image changes
   useEffect(() => {
-    if (!loadedImage) return
+    if (!loadedImage) return;
 
-    const imgWidth = loadedImage.width
-    const imgHeight = loadedImage.height
+    const imgWidth = loadedImage.width;
+    const imgHeight = loadedImage.height;
 
-    let width = imgWidth
-    let height = imgHeight
+    let width = imgWidth;
+    let height = imgHeight;
 
     // Scale to fit container while maintaining aspect ratio
     if (width > containerSize.width) {
-      height = (height * containerSize.width) / width
-      width = containerSize.width
+      height = (height * containerSize.width) / width;
+      width = containerSize.width;
     }
     if (height > containerSize.height) {
-      width = (width * containerSize.height) / height
-      height = containerSize.height
+      width = (width * containerSize.height) / height;
+      height = containerSize.height;
     }
 
-    setCanvasSize({ width: Math.round(width), height: Math.round(height) })
-  }, [loadedImage, containerSize])
+    setCanvasSize({ width: Math.round(width), height: Math.round(height) });
+  }, [loadedImage, containerSize]);
 
   // Initialize mask canvas when image loads
   useEffect(() => {
-    if (!originalSize || !maskCanvasRef.current) return
+    if (!originalSize || !maskCanvasRef.current) return;
 
-    const maskCanvas = maskCanvasRef.current
-    maskCanvas.width = originalSize.width
-    maskCanvas.height = originalSize.height
+    const maskCanvas = maskCanvasRef.current;
+    maskCanvas.width = originalSize.width;
+    maskCanvas.height = originalSize.height;
 
-    const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx) return
+    const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx) return;
 
-    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height)
-  }, [originalSize])
+    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height);
+  }, [originalSize]);
 
   // Generate preview when mask result changes
   const generatePreview = useCallback(() => {
     if (!lastMaskResult || !loadedImage || !originalSize) {
-      setPreviewUrl(null)
-      return
+      setPreviewUrl(null);
+      return;
     }
 
     // Create canvas with original image
-    const imageCanvas = document.createElement('canvas')
-    imageCanvas.width = originalSize.width
-    imageCanvas.height = originalSize.height
-    const imageCtx = imageCanvas.getContext('2d', { willReadFrequently: true })
-    if (!imageCtx) return
-
-    imageCtx.drawImage(loadedImage, 0, 0, originalSize.width, originalSize.height)
-    const imageData = imageCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-    const imagePixels = imageData.data
+    const imageCanvas = document.createElement("canvas");
+    imageCanvas.width = originalSize.width;
+    imageCanvas.height = originalSize.height;
+    const imageCtx = imageCanvas.getContext("2d", { willReadFrequently: true });
+    if (!imageCtx) return;
+
+    imageCtx.drawImage(
+      loadedImage,
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    const imageData = imageCtx.getImageData(
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    const imagePixels = imageData.data;
 
     // Get mask data and apply feathering for smooth edges
-    const maskCanvas = maskCanvasRef.current
-    if (!maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    if (!maskCanvas) return;
 
     // Apply feathering to create smooth edges (4px soft falloff)
-    const featheredMask = featherMask(maskCanvas, 4)
-    const featheredCtx = featheredMask.getContext('2d', { willReadFrequently: true })
-    if (!featheredCtx) return
-    const featheredData = featheredCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-    const featheredPixels = featheredData.data
+    const featheredMask = featherMask(maskCanvas, 4);
+    const featheredCtx = featheredMask.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!featheredCtx) return;
+    const featheredData = featheredCtx.getImageData(
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    const featheredPixels = featheredData.data;
 
     // Create output canvas with transparent background
-    const outputCanvas = document.createElement('canvas')
-    outputCanvas.width = originalSize.width
-    outputCanvas.height = originalSize.height
-    const outputCtx = outputCanvas.getContext('2d')
-    if (!outputCtx) return
-
-    const outputData = outputCtx.createImageData(originalSize.width, originalSize.height)
-    const outputPixels = outputData.data
+    const outputCanvas = document.createElement("canvas");
+    outputCanvas.width = originalSize.width;
+    outputCanvas.height = originalSize.height;
+    const outputCtx = outputCanvas.getContext("2d");
+    if (!outputCtx) return;
+
+    const outputData = outputCtx.createImageData(
+      originalSize.width,
+      originalSize.height,
+    );
+    const outputPixels = outputData.data;
 
     // Copy pixels with feathered alpha for smooth edges
     for (let i = 3; i < featheredPixels.length; i += 4) {
-      const alpha = featheredPixels[i]
+      const alpha = featheredPixels[i];
       if (alpha > 0) {
-        outputPixels[i - 3] = imagePixels[i - 3] // R
-        outputPixels[i - 2] = imagePixels[i - 2] // G
-        outputPixels[i - 1] = imagePixels[i - 1] // B
-        outputPixels[i] = alpha                   // Use feathered alpha
+        outputPixels[i - 3] = imagePixels[i - 3]; // R
+        outputPixels[i - 2] = imagePixels[i - 2]; // G
+        outputPixels[i - 1] = imagePixels[i - 1]; // B
+        outputPixels[i] = alpha; // Use feathered alpha
       }
     }
 
-    outputCtx.putImageData(outputData, 0, 0)
+    outputCtx.putImageData(outputData, 0, 0);
 
     // Create preview URL
-    const url = outputCanvas.toDataURL('image/png')
-    setPreviewUrl(url)
-  }, [lastMaskResult, loadedImage, originalSize])
+    const url = outputCanvas.toDataURL("image/png");
+    setPreviewUrl(url);
+  }, [lastMaskResult, loadedImage, originalSize]);
 
   // Update preview when mask changes
   useEffect(() => {
     if (isMultiMaskMode && lastMaskResult) {
-      generatePreview()
+      generatePreview();
     } else {
-      setPreviewUrl(null)
+      setPreviewUrl(null);
     }
-  }, [isMultiMaskMode, lastMaskResult, generatePreview])
+  }, [isMultiMaskMode, lastMaskResult, generatePreview]);
 
   // Draw mask overlay on canvas
   const drawMask = useCallback(
     (result: MaskResult) => {
-      const maskCanvas = maskCanvasRef.current
-      if (!maskCanvas || !originalSize) return
+      const maskCanvas = maskCanvasRef.current;
+      if (!maskCanvas || !originalSize) return;
 
-      const ctx = maskCanvas.getContext('2d', { willReadFrequently: true })
-      if (!ctx) return
+      const ctx = maskCanvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) return;
 
-      ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
+      ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
 
-      const imageData = ctx.createImageData(result.width, result.height)
-      const pixelData = imageData.data
+      const imageData = ctx.createImageData(result.width, result.height);
+      const pixelData = imageData.data;
 
       // Select mask with highest score
-      const numMasks = result.scores.length
-      let bestIndex = 0
+      const numMasks = result.scores.length;
+      let bestIndex = 0;
       for (let i = 1; i < numMasks; i++) {
-        if (result.scores[i] > result.scores[bestIndex]) bestIndex = i
+        if (result.scores[i] > result.scores[bestIndex]) bestIndex = i;
       }
 
-      const pixelsPerMask = result.width * result.height
-      const maskOffset = bestIndex * pixelsPerMask
+      const pixelsPerMask = result.width * result.height;
+      const maskOffset = bestIndex * pixelsPerMask;
 
       for (let i = 0; i < pixelsPerMask; i++) {
         if (result.mask[maskOffset + i] === 1) {
-          const offset = 4 * i
-          pixelData[offset] = MASK_COLOR.r
-          pixelData[offset + 1] = MASK_COLOR.g
-          pixelData[offset + 2] = MASK_COLOR.b
-          pixelData[offset + 3] = MASK_COLOR.a
+          const offset = 4 * i;
+          pixelData[offset] = MASK_COLOR.r;
+          pixelData[offset + 1] = MASK_COLOR.g;
+          pixelData[offset + 2] = MASK_COLOR.b;
+          pixelData[offset + 3] = MASK_COLOR.a;
         }
       }
 
-      ctx.putImageData(imageData, 0, 0)
+      ctx.putImageData(imageData, 0, 0);
     },
-    [originalSize]
-  )
+    [originalSize],
+  );
 
   // Decode mask function
-  const decode = useCallback(async (pointsToUse: Point[], forMultiMask = false) => {
-    if (!isEncoded || pointsToUse.length === 0) return
-    if (isDecoding) {
-      pendingPointRef.current = pointsToUse[0]
-      return
-    }
-
-    setIsDecoding(true)
-    lastDecodedPointRef.current = { x: pointsToUse[0].x, y: pointsToUse[0].y }
-    try {
-      const result = await decodeMask(
-        pointsToUse.map((p) => ({
-          point: [p.x, p.y] as [number, number],
-          label: p.label
-        }))
-      )
-      if (forMultiMask) {
-        setLastMaskResult(result)
-        drawMask(result)
+  const decode = useCallback(
+    async (pointsToUse: Point[], forMultiMask = false) => {
+      if (!isEncoded || pointsToUse.length === 0) return;
+      if (isDecoding) {
+        pendingPointRef.current = pointsToUse[0];
+        return;
       }
-    } catch (error) {
-      console.error('Decode error:', error)
-    } finally {
-      setIsDecoding(false)
-      const pending = pendingPointRef.current
-      if (pending && (pending.x !== lastDecodedPointRef.current?.x || pending.y !== lastDecodedPointRef.current?.y)) {
-        pendingPointRef.current = null
-        decode([pending])
+
+      setIsDecoding(true);
+      lastDecodedPointRef.current = {
+        x: pointsToUse[0].x,
+        y: pointsToUse[0].y,
+      };
+      try {
+        const result = await decodeMask(
+          pointsToUse.map((p) => ({
+            point: [p.x, p.y] as [number, number],
+            label: p.label,
+          })),
+        );
+        if (forMultiMask) {
+          setLastMaskResult(result);
+          drawMask(result);
+        }
+      } catch (error) {
+        console.error("Decode error:", error);
+      } finally {
+        setIsDecoding(false);
+        const pending = pendingPointRef.current;
+        if (
+          pending &&
+          (pending.x !== lastDecodedPointRef.current?.x ||
+            pending.y !== lastDecodedPointRef.current?.y)
+        ) {
+          pendingPointRef.current = null;
+          decode([pending]);
+        }
       }
-    }
-  }, [isEncoded, isDecoding, decodeMask, drawMask])
+    },
+    [isEncoded, isDecoding, decodeMask, drawMask],
+  );
 
   // Clamp value between 0 and 1
-  const clamp = (x: number) => Math.max(0, Math.min(1, x))
+  const clamp = (x: number) => Math.max(0, Math.min(1, x));
 
   // Get normalized coordinates from touch/click event
   const getPoint = useCallback(
     (clientX: number, clientY: number, isNegative = false): Point | null => {
-      const container = imageContainerRef.current
-      if (!container) return null
+      const container = imageContainerRef.current;
+      if (!container) return null;
 
-      const rect = container.getBoundingClientRect()
-      const x = clamp((clientX - rect.left) / rect.width)
-      const y = clamp((clientY - rect.top) / rect.height)
+      const rect = container.getBoundingClientRect();
+      const x = clamp((clientX - rect.left) / rect.width);
+      const y = clamp((clientY - rect.top) / rect.height);
 
-      return { x, y, label: isNegative ? 0 : 1 }
+      return { x, y, label: isNegative ? 0 : 1 };
     },
-    []
-  )
+    [],
+  );
 
   // Handle touch/click - add point
   const handleInteraction = useCallback(
     (clientX: number, clientY: number, isNegative = false) => {
-      if (!isEncoded) return
+      if (!isEncoded) return;
 
-      const point = getPoint(clientX, clientY, isNegative)
-      if (!point) return
+      const point = getPoint(clientX, clientY, isNegative);
+      if (!point) return;
 
-      const newPoints = isMultiMaskMode ? [...points, point] : [point]
-      if (!isMultiMaskMode) setIsMultiMaskMode(true)
-      setPoints(newPoints)
-      decode(newPoints, true)
+      const newPoints = isMultiMaskMode ? [...points, point] : [point];
+      if (!isMultiMaskMode) setIsMultiMaskMode(true);
+      setPoints(newPoints);
+      decode(newPoints, true);
     },
-    [isEncoded, isMultiMaskMode, points, getPoint, decode]
-  )
+    [isEncoded, isMultiMaskMode, points, getPoint, decode],
+  );
 
   // Handle click
   const handleClick = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      handleInteraction(e.clientX, e.clientY, e.button === 2)
+      handleInteraction(e.clientX, e.clientY, e.button === 2);
     },
-    [handleInteraction]
-  )
+    [handleInteraction],
+  );
 
   // Handle touch
   const handleTouch = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
-      e.preventDefault()
-      const touch = e.touches[0]
+      e.preventDefault();
+      const touch = e.touches[0];
       if (touch) {
-        handleInteraction(touch.clientX, touch.clientY, false)
+        handleInteraction(touch.clientX, touch.clientY, false);
       }
     },
-    [handleInteraction]
-  )
+    [handleInteraction],
+  );
 
   // Handle long press for negative point
-  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null)
-  const longPressStartRef = useRef<{ x: number; y: number } | null>(null)
+  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
+  const longPressStartRef = useRef<{ x: number; y: number } | null>(null);
 
   const handleTouchStart = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
-      const touch = e.touches[0]
-      if (!touch) return
+      const touch = e.touches[0];
+      if (!touch) return;
 
-      longPressStartRef.current = { x: touch.clientX, y: touch.clientY }
+      longPressStartRef.current = { x: touch.clientX, y: touch.clientY };
       longPressTimerRef.current = setTimeout(() => {
         if (longPressStartRef.current) {
-          handleInteraction(longPressStartRef.current.x, longPressStartRef.current.y, true)
-          longPressStartRef.current = null
+          handleInteraction(
+            longPressStartRef.current.x,
+            longPressStartRef.current.y,
+            true,
+          );
+          longPressStartRef.current = null;
         }
-      }, 500)
+      }, 500);
     },
-    [handleInteraction]
-  )
+    [handleInteraction],
+  );
 
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent<HTMLDivElement>) => {
       if (longPressTimerRef.current) {
-        clearTimeout(longPressTimerRef.current)
-        longPressTimerRef.current = null
+        clearTimeout(longPressTimerRef.current);
+        longPressTimerRef.current = null;
       }
       if (longPressStartRef.current) {
         // Short tap - positive point
-        handleInteraction(longPressStartRef.current.x, longPressStartRef.current.y, false)
-        longPressStartRef.current = null
+        handleInteraction(
+          longPressStartRef.current.x,
+          longPressStartRef.current.y,
+          false,
+        );
+        longPressStartRef.current = null;
       }
-      e.preventDefault()
+      e.preventDefault();
     },
-    [handleInteraction]
-  )
+    [handleInteraction],
+  );
 
   const handleTouchMove = useCallback(() => {
     // Cancel long press if finger moves
     if (longPressTimerRef.current) {
-      clearTimeout(longPressTimerRef.current)
-      longPressTimerRef.current = null
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
     }
-    longPressStartRef.current = null
-  }, [])
+    longPressStartRef.current = null;
+  }, []);
 
   // Prevent context menu on long press
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-  }, [])
+    e.preventDefault();
+  }, []);
 
   // Clear all points and reset
   const clearPoints = useCallback(() => {
-    setPoints([])
-    setIsMultiMaskMode(false)
-    lastDecodedPointRef.current = null
-    pendingPointRef.current = null
-    setLastMaskResult(null)
-    setPreviewUrl(null)
-    const maskCanvas = maskCanvasRef.current
+    setPoints([]);
+    setIsMultiMaskMode(false);
+    lastDecodedPointRef.current = null;
+    pendingPointRef.current = null;
+    setLastMaskResult(null);
+    setPreviewUrl(null);
+    const maskCanvas = maskCanvasRef.current;
     if (maskCanvas) {
-      const ctx = maskCanvas.getContext('2d')
+      const ctx = maskCanvas.getContext("2d");
       if (ctx) {
-        ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
+        ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
       }
     }
-  }, [])
+  }, []);
 
   // Reset image
   const resetImage = useCallback(async () => {
-    setOriginalImage(null)
-    setLoadedImage(null)
-    setIsEncoded(false)
-    setIsMultiMaskMode(false)
-    setPoints([])
-    lastDecodedPointRef.current = null
-    pendingPointRef.current = null
-    setLastMaskResult(null)
-    setPreviewUrl(null)
-    setOriginalSize(null)
-    resetProgress()
+    setOriginalImage(null);
+    setLoadedImage(null);
+    setIsEncoded(false);
+    setIsMultiMaskMode(false);
+    setPoints([]);
+    lastDecodedPointRef.current = null;
+    pendingPointRef.current = null;
+    setLastMaskResult(null);
+    setPreviewUrl(null);
+    setOriginalSize(null);
+    resetProgress();
 
     if (isSegmented()) {
-      await resetWorker()
+      await resetWorker();
     }
-  }, [resetProgress, resetWorker, isSegmented])
+  }, [resetProgress, resetWorker, isSegmented]);
 
   const handleFileSelect = useCallback(
     async (file: File) => {
-      if (!file.type.startsWith('image/')) return
+      if (!file.type.startsWith("image/")) return;
 
-      await resetImage()
+      await resetImage();
 
-      const reader = new FileReader()
+      const reader = new FileReader();
       reader.onload = async (e) => {
-        const dataUrl = e.target?.result as string
-        setOriginalImage(dataUrl)
+        const dataUrl = e.target?.result as string;
+        setOriginalImage(dataUrl);
 
-        const img = new Image()
+        const img = new Image();
         img.onload = async () => {
-          setOriginalSize({ width: img.width, height: img.height })
-          setLoadedImage(img)
+          setOriginalSize({ width: img.width, height: img.height });
+          setLoadedImage(img);
 
-          setIsProcessing(true)
-          resetAndStart('download')
+          setIsProcessing(true);
+          resetAndStart("download");
 
           try {
-            await segmentImage(dataUrl)
+            await segmentImage(dataUrl);
           } catch (error) {
-            console.error('Segmentation failed:', error)
-            setIsProcessing(false)
+            console.error("Segmentation failed:", error);
+            setIsProcessing(false);
           }
-        }
-        img.src = dataUrl
-      }
-      reader.readAsDataURL(file)
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
     },
-    [resetImage, resetAndStart, segmentImage]
-  )
+    [resetImage, resetAndStart, segmentImage],
+  );
 
   // Download the preview
   const handleDownload = useCallback(async () => {
-    if (!previewUrl || !originalSize) return
+    if (!previewUrl || !originalSize) return;
 
-    const filename = `segment-${Date.now()}.${downloadFormat}`
+    const filename = `segment-${Date.now()}.${downloadFormat}`;
 
     // For formats other than PNG, we need to convert
-    if (downloadFormat === 'png') {
-      await downloadFromDataUrl(previewUrl, filename)
+    if (downloadFormat === "png") {
+      await downloadFromDataUrl(previewUrl, filename);
     } else {
       // Create a new canvas for the selected format
-      const img = new Image()
+      const img = new Image();
       await new Promise<void>((resolve) => {
         img.onload = async () => {
-          const canvas = document.createElement('canvas')
-          canvas.width = originalSize.width
-          canvas.height = originalSize.height
-          const ctx = canvas.getContext('2d')
+          const canvas = document.createElement("canvas");
+          canvas.width = originalSize.width;
+          canvas.height = originalSize.height;
+          const ctx = canvas.getContext("2d");
           if (!ctx) {
-            resolve()
-            return
+            resolve();
+            return;
           }
 
-          if (downloadFormat === 'jpeg') {
+          if (downloadFormat === "jpeg") {
             // JPEG needs white background
-            ctx.fillStyle = 'white'
-            ctx.fillRect(0, 0, canvas.width, canvas.height)
+            ctx.fillStyle = "white";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
           }
-          ctx.drawImage(img, 0, 0)
+          ctx.drawImage(img, 0, 0);
 
-          const mimeType = downloadFormat === 'jpeg' ? 'image/jpeg' : 'image/webp'
-          const dataUrl = canvas.toDataURL(mimeType, 0.95)
+          const mimeType =
+            downloadFormat === "jpeg" ? "image/jpeg" : "image/webp";
+          const dataUrl = canvas.toDataURL(mimeType, 0.95);
 
-          await downloadFromDataUrl(dataUrl, filename)
-          resolve()
-        }
-        img.src = previewUrl
-      })
+          await downloadFromDataUrl(dataUrl, filename);
+          resolve();
+        };
+        img.src = previewUrl;
+      });
     }
-  }, [previewUrl, downloadFormat, originalSize, downloadFromDataUrl])
+  }, [previewUrl, downloadFormat, originalSize, downloadFromDataUrl]);
 
   // Handle retry
   const handleRetry = useCallback(async () => {
-    setError(null)
-    setIsProcessing(true)
-    resetAndStart('download')
+    setError(null);
+    setIsProcessing(true);
+    resetAndStart("download");
     try {
-      await retryModel()
+      await retryModel();
       if (originalImage) {
-        await segmentImage(originalImage)
+        await segmentImage(originalImage);
       }
     } catch (err) {
-      console.error('Retry failed:', err)
+      console.error("Retry failed:", err);
     }
-  }, [retryModel, resetAndStart, originalImage, segmentImage])
+  }, [retryModel, resetAndStart, originalImage, segmentImage]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      dispose()
+      dispose();
       if (longPressTimerRef.current) {
-        clearTimeout(longPressTimerRef.current)
+        clearTimeout(longPressTimerRef.current);
       }
-    }
-  }, [dispose])
+    };
+  }, [dispose]);
 
-  const canDownload = isMultiMaskMode && previewUrl !== null
+  const canDownload = isMultiMaskMode && previewUrl !== null;
 
   return (
     <div className="p-4 h-full overflow-auto">
       {/* Header with back button */}
       <div className="flex items-center gap-3 mb-4">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.segmentAnything.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.segmentAnything.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.segmentAnything.description')}
+            {t("freeTools.segmentAnything.description")}
           </p>
         </div>
       </div>
@@ -575,7 +632,9 @@ export function MobileSegmentAnythingPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-base font-medium">{t('freeTools.segmentAnything.selectImage')}</p>
+            <p className="text-base font-medium">
+              {t("freeTools.segmentAnything.selectImage")}
+            </p>
           </CardContent>
         </Card>
       )}
@@ -586,9 +645,9 @@ export function MobileSegmentAnythingPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
+          e.target.value = "";
         }}
       />
 
@@ -597,25 +656,36 @@ export function MobileSegmentAnythingPage() {
         <div className="flex flex-col gap-4">
           {/* Progress display */}
           {isProcessing && (
-            <ProcessingProgress progress={progress} showPhases={true} showOverall={true} showEta={true} />
+            <ProcessingProgress
+              progress={progress}
+              showPhases={true}
+              showOverall={true}
+              showEta={true}
+            />
           )}
 
           {/* Error with retry button */}
           {error && hasFailed() && !isProcessing && (
             <div className="flex items-center justify-center gap-3 p-4 bg-destructive/10 border border-destructive/20 rounded-lg">
-              <span className="text-sm text-destructive">{t('common.downloadFailed')}</span>
+              <span className="text-sm text-destructive">
+                {t("common.downloadFailed")}
+              </span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
 
           {/* Status */}
           <div className="text-sm text-muted-foreground text-center">
-            {isProcessing && t('freeTools.segmentAnything.processing')}
-            {isEncoded && !isMultiMaskMode && t('freeTools.segmentAnything.hoverToPreviewMobile')}
-            {isEncoded && isMultiMaskMode && t('freeTools.segmentAnything.clickToRefineMobile')}
+            {isProcessing && t("freeTools.segmentAnything.processing")}
+            {isEncoded &&
+              !isMultiMaskMode &&
+              t("freeTools.segmentAnything.hoverToPreviewMobile")}
+            {isEncoded &&
+              isMultiMaskMode &&
+              t("freeTools.segmentAnything.clickToRefineMobile")}
           </div>
 
           {/* Canvas area */}
@@ -624,12 +694,12 @@ export function MobileSegmentAnythingPage() {
               <div
                 ref={imageContainerRef}
                 className={cn(
-                  'relative mx-auto bg-muted rounded-lg overflow-hidden touch-none',
-                  loadedImage ? 'cursor-crosshair' : 'cursor-default'
+                  "relative mx-auto bg-muted rounded-lg overflow-hidden touch-none",
+                  loadedImage ? "cursor-crosshair" : "cursor-default",
                 )}
                 style={{
                   width: canvasSize.width,
-                  height: canvasSize.height
+                  height: canvasSize.height,
                 }}
                 onClick={handleClick}
                 onTouchStart={handleTouchStart}
@@ -653,27 +723,31 @@ export function MobileSegmentAnythingPage() {
                   className="absolute inset-0 pointer-events-none opacity-50"
                   style={{
                     width: canvasSize.width,
-                    height: canvasSize.height
+                    height: canvasSize.height,
                   }}
                 />
 
                 {/* Point markers */}
-                {isMultiMaskMode && points.map((point, index) => (
-                  <div
-                    key={index}
-                    className="absolute pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
-                    style={{
-                      left: `${point.x * 100}%`,
-                      top: `${point.y * 100}%`
-                    }}
-                  >
-                    {point.label === 1 ? (
-                      <Star className="h-5 w-5 text-yellow-400 fill-yellow-400 drop-shadow-lg" />
-                    ) : (
-                      <X className="h-5 w-5 text-red-500 drop-shadow-lg" strokeWidth={3} />
-                    )}
-                  </div>
-                ))}
+                {isMultiMaskMode &&
+                  points.map((point, index) => (
+                    <div
+                      key={index}
+                      className="absolute pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
+                      style={{
+                        left: `${point.x * 100}%`,
+                        top: `${point.y * 100}%`,
+                      }}
+                    >
+                      {point.label === 1 ? (
+                        <Star className="h-5 w-5 text-yellow-400 fill-yellow-400 drop-shadow-lg" />
+                      ) : (
+                        <X
+                          className="h-5 w-5 text-red-500 drop-shadow-lg"
+                          strokeWidth={3}
+                        />
+                      )}
+                    </div>
+                  ))}
 
                 {/* Processing overlay */}
                 {isProcessing && (
@@ -698,16 +772,19 @@ export function MobileSegmentAnythingPage() {
               <CardContent className="p-3">
                 <div className="flex items-center gap-2 mb-2">
                   <Eye className="h-4 w-4 text-muted-foreground" />
-                  <span className="text-sm font-medium">{t('freeTools.backgroundRemover.result')}</span>
+                  <span className="text-sm font-medium">
+                    {t("freeTools.backgroundRemover.result")}
+                  </span>
                 </div>
                 <div
                   className="relative mx-auto rounded-lg overflow-hidden"
                   style={{
                     width: canvasSize.width,
                     height: canvasSize.height,
-                    backgroundImage: 'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)',
-                    backgroundSize: '20px 20px',
-                    backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px'
+                    backgroundImage:
+                      "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+                    backgroundSize: "20px 20px",
+                    backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
                   }}
                 >
                   <img
@@ -730,7 +807,7 @@ export function MobileSegmentAnythingPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.segmentAnything.resetImage')}
+              {t("freeTools.segmentAnything.resetImage")}
             </Button>
 
             <Button
@@ -740,7 +817,7 @@ export function MobileSegmentAnythingPage() {
               disabled={!isMultiMaskMode || isProcessing}
             >
               <Trash2 className="h-4 w-4 mr-2" />
-              {t('freeTools.segmentAnything.clearPoints')}
+              {t("freeTools.segmentAnything.clearPoints")}
             </Button>
           </div>
 
@@ -749,7 +826,9 @@ export function MobileSegmentAnythingPage() {
             <div className="flex items-center justify-center gap-2">
               <Select
                 value={downloadFormat}
-                onValueChange={(v) => setDownloadFormat(v as 'png' | 'jpeg' | 'webp')}
+                onValueChange={(v) =>
+                  setDownloadFormat(v as "png" | "jpeg" | "webp")
+                }
               >
                 <SelectTrigger className="h-9 w-24">
                   <SelectValue />
@@ -763,17 +842,17 @@ export function MobileSegmentAnythingPage() {
 
               <Button onClick={handleDownload} className="gradient-bg">
                 <Download className="h-4 w-4 mr-2" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             </div>
           )}
 
           {/* Instructions - Mobile friendly */}
           <div className="text-xs text-muted-foreground text-center">
-            <p>{t('freeTools.segmentAnything.hintMobile')}</p>
+            <p>{t("freeTools.segmentAnything.hintMobile")}</p>
           </div>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/MobileTemplatesPage.tsx b/mobile/src/pages/MobileTemplatesPage.tsx
index 5bfd6fc3..b41318b2 100644
--- a/mobile/src/pages/MobileTemplatesPage.tsx
+++ b/mobile/src/pages/MobileTemplatesPage.tsx
@@ -1,10 +1,20 @@
-import { useState, useMemo, useEffect, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useTemplateStore, type Template, type TemplateExport } from '@/stores/templateStore'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { useState, useMemo, useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  useTemplateStore,
+  type Template,
+  type TemplateExport,
+} from "@/stores/templateStore";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -12,237 +22,274 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Label } from '@/components/ui/label'
-import { toast } from '@/hooks/useToast'
-import { Search, FolderOpen, Play, Trash2, Pencil, Download, Upload, MoreVertical } from 'lucide-react'
-import { fuzzyMatch } from '@/lib/fuzzySearch'
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import { toast } from "@/hooks/useToast";
+import {
+  Search,
+  FolderOpen,
+  Play,
+  Trash2,
+  Pencil,
+  Download,
+  Upload,
+  MoreVertical,
+} from "lucide-react";
+import { fuzzyMatch } from "@/lib/fuzzySearch";
 
 export function MobileTemplatesPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { templates, loadTemplates, updateTemplate, deleteTemplate, deleteTemplates, exportTemplates, importTemplates, isLoaded } = useTemplateStore()
-  const [searchQuery, setSearchQuery] = useState('')
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const {
+    templates,
+    loadTemplates,
+    updateTemplate,
+    deleteTemplate,
+    deleteTemplates,
+    exportTemplates,
+    importTemplates,
+    isLoaded,
+  } = useTemplateStore();
+  const [searchQuery, setSearchQuery] = useState("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Edit dialog state
-  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null)
-  const [editName, setEditName] = useState('')
+  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
+  const [editName, setEditName] = useState("");
 
   // Delete confirmation state
-  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(null)
+  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
+    null,
+  );
 
   // Batch selection state
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-  const [showBatchDeleteDialog, setShowBatchDeleteDialog] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [showBatchDeleteDialog, setShowBatchDeleteDialog] = useState(false);
 
   // Import dialog state
-  const [importData, setImportData] = useState<TemplateExport | null>(null)
-  const [importMode, setImportMode] = useState<'merge' | 'replace'>('merge')
+  const [importData, setImportData] = useState<TemplateExport | null>(null);
+  const [importMode, setImportMode] = useState<"merge" | "replace">("merge");
 
   // Load templates on mount
   useEffect(() => {
     if (!isLoaded) {
-      loadTemplates()
+      loadTemplates();
     }
-  }, [isLoaded, loadTemplates])
+  }, [isLoaded, loadTemplates]);
 
   // Export all templates
   const handleExportAll = () => {
     if (templates.length === 0) {
       toast({
-        title: t('templates.noTemplatesToExport'),
-        description: t('templates.createSomeFirst'),
-        variant: 'destructive',
-      })
-      return
+        title: t("templates.noTemplatesToExport"),
+        description: t("templates.createSomeFirst"),
+        variant: "destructive",
+      });
+      return;
     }
 
-    const data = exportTemplates()
-    downloadJson(data, 'wavespeed-templates.json')
+    const data = exportTemplates();
+    downloadJson(data, "wavespeed-templates.json");
     toast({
-      title: t('templates.templatesExported'),
-      description: t('templates.exportedCount', { count: templates.length }),
-    })
-  }
+      title: t("templates.templatesExported"),
+      description: t("templates.exportedCount", { count: templates.length }),
+    });
+  };
 
   // Export single template
   const handleExportSingle = (template: Template) => {
-    const data = exportTemplates([template.id])
-    const fileName = `${template.name.toLowerCase().replace(/\s+/g, '-')}.json`
-    downloadJson(data, fileName)
+    const data = exportTemplates([template.id]);
+    const fileName = `${template.name.toLowerCase().replace(/\s+/g, "-")}.json`;
+    downloadJson(data, fileName);
     toast({
-      title: t('templates.templateExported'),
-      description: t('templates.exported', { name: template.name }),
-    })
-  }
+      title: t("templates.templateExported"),
+      description: t("templates.exported", { name: template.name }),
+    });
+  };
 
   // Download JSON helper
   const downloadJson = (data: TemplateExport, filename: string) => {
-    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = filename
-    document.body.appendChild(a)
-    a.click()
-    document.body.removeChild(a)
-    URL.revokeObjectURL(url)
-  }
+    const blob = new Blob([JSON.stringify(data, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
 
   // Handle file selection for import
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-    const reader = new FileReader()
+    const reader = new FileReader();
     reader.onload = (event) => {
       try {
-        const data = JSON.parse(event.target?.result as string) as TemplateExport
+        const data = JSON.parse(
+          event.target?.result as string,
+        ) as TemplateExport;
         if (!data.templates || !Array.isArray(data.templates)) {
-          throw new Error('Invalid file format')
+          throw new Error("Invalid file format");
         }
-        setImportData(data)
+        setImportData(data);
       } catch {
         toast({
-          title: t('templates.invalidFile'),
-          description: t('templates.invalidFileDesc'),
-          variant: 'destructive',
-        })
+          title: t("templates.invalidFile"),
+          description: t("templates.invalidFileDesc"),
+          variant: "destructive",
+        });
       }
-    }
-    reader.readAsText(file)
-    e.target.value = ''
-  }
+    };
+    reader.readAsText(file);
+    e.target.value = "";
+  };
 
   // Handle import confirmation
   const handleImportConfirm = () => {
-    if (!importData) return
+    if (!importData) return;
 
     try {
-      const result = importTemplates(importData, importMode)
-      const skippedText = result.skipped > 0 ? t('templates.skippedCount', { count: result.skipped }) : ''
+      const result = importTemplates(importData, importMode);
+      const skippedText =
+        result.skipped > 0
+          ? t("templates.skippedCount", { count: result.skipped })
+          : "";
       toast({
-        title: t('templates.templatesImported'),
-        description: t('templates.importedCount', { imported: result.imported, skipped: skippedText }),
-      })
+        title: t("templates.templatesImported"),
+        description: t("templates.importedCount", {
+          imported: result.imported,
+          skipped: skippedText,
+        }),
+      });
     } catch (err) {
       toast({
-        title: t('templates.importFailed'),
-        description: err instanceof Error ? err.message : t('common.error'),
-        variant: 'destructive',
-      })
+        title: t("templates.importFailed"),
+        description: err instanceof Error ? err.message : t("common.error"),
+        variant: "destructive",
+      });
     }
-    setImportData(null)
-  }
+    setImportData(null);
+  };
 
   // Group templates by model
   const groupedTemplates = useMemo(() => {
     const filtered = searchQuery
-      ? templates.filter(t =>
-          fuzzyMatch(searchQuery, t.name) ||
-          fuzzyMatch(searchQuery, t.modelName)
+      ? templates.filter(
+          (t) =>
+            fuzzyMatch(searchQuery, t.name) ||
+            fuzzyMatch(searchQuery, t.modelName),
         )
-      : templates
+      : templates;
 
-    const groups: Record<string, { modelName: string; templates: Template[] }> = {}
+    const groups: Record<string, { modelName: string; templates: Template[] }> =
+      {};
 
     for (const template of filtered) {
       if (!groups[template.modelId]) {
         groups[template.modelId] = {
           modelName: template.modelName,
-          templates: []
-        }
+          templates: [],
+        };
       }
-      groups[template.modelId].templates.push(template)
+      groups[template.modelId].templates.push(template);
     }
 
     for (const group of Object.values(groups)) {
-      group.templates.sort((a, b) =>
-        new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-      )
+      group.templates.sort(
+        (a, b) =>
+          new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+      );
     }
 
-    return groups
-  }, [templates, searchQuery])
+    return groups;
+  }, [templates, searchQuery]);
 
   const handleUseTemplate = (template: Template) => {
-    navigate(`/playground/${encodeURIComponent(template.modelId)}?template=${template.id}`)
-  }
+    navigate(
+      `/playground/${encodeURIComponent(template.modelId)}?template=${template.id}`,
+    );
+  };
 
   const handleEditTemplate = (template: Template) => {
-    setEditingTemplate(template)
-    setEditName(template.name)
-  }
+    setEditingTemplate(template);
+    setEditName(template.name);
+  };
 
   const handleSaveEdit = () => {
-    if (!editingTemplate || !editName.trim()) return
+    if (!editingTemplate || !editName.trim()) return;
 
-    updateTemplate(editingTemplate.id, { name: editName.trim() })
+    updateTemplate(editingTemplate.id, { name: editName.trim() });
     toast({
-      title: t('templates.templateUpdated', 'Template updated'),
-      description: t('templates.renamedTo', { name: editName.trim() }),
-    })
-    setEditingTemplate(null)
-    setEditName('')
-  }
+      title: t("templates.templateUpdated", "Template updated"),
+      description: t("templates.renamedTo", { name: editName.trim() }),
+    });
+    setEditingTemplate(null);
+    setEditName("");
+  };
 
   const handleDeleteTemplate = () => {
-    if (!deletingTemplate) return
+    if (!deletingTemplate) return;
 
-    deleteTemplate(deletingTemplate.id)
+    deleteTemplate(deletingTemplate.id);
     toast({
-      title: t('templates.templateDeleted', 'Template deleted'),
-      description: t('templates.deleted', { name: deletingTemplate.name }),
-    })
-    setDeletingTemplate(null)
-  }
+      title: t("templates.templateDeleted", "Template deleted"),
+      description: t("templates.deleted", { name: deletingTemplate.name }),
+    });
+    setDeletingTemplate(null);
+  };
 
   // Batch selection helpers
   const toggleSelection = (id: string) => {
-    setSelectedIds(prev => {
-      const next = new Set(prev)
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
       if (next.has(id)) {
-        next.delete(id)
+        next.delete(id);
       } else {
-        next.add(id)
+        next.add(id);
       }
-      return next
-    })
-  }
+      return next;
+    });
+  };
 
   const handleBatchDelete = () => {
-    if (selectedIds.size === 0) return
-    deleteTemplates(Array.from(selectedIds))
+    if (selectedIds.size === 0) return;
+    deleteTemplates(Array.from(selectedIds));
     toast({
-      title: t('templates.templatesDeleted'),
-      description: t('templates.deletedCount', { count: selectedIds.size }),
-    })
-    setSelectedIds(new Set())
-    setShowBatchDeleteDialog(false)
-  }
+      title: t("templates.templatesDeleted"),
+      description: t("templates.deletedCount", { count: selectedIds.size }),
+    });
+    setSelectedIds(new Set());
+    setShowBatchDeleteDialog(false);
+  };
 
-  const modelIds = Object.keys(groupedTemplates)
+  const modelIds = Object.keys(groupedTemplates);
 
   return (
     <div className="p-4 pb-20">
       {/* Header */}
       <div className="mb-4">
-        <h1 className="text-xl font-bold">{t('templates.title')}</h1>
-        <p className="text-muted-foreground text-sm">{t('templates.description')}</p>
+        <h1 className="text-xl font-bold">{t("templates.title")}</h1>
+        <p className="text-muted-foreground text-sm">
+          {t("templates.description")}
+        </p>
       </div>
 
       {/* Search */}
       <div className="relative mb-4">
         <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <Input
-          placeholder={t('templates.searchPlaceholder')}
+          placeholder={t("templates.searchPlaceholder")}
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           className="pl-10"
@@ -265,7 +312,7 @@ export function MobileTemplatesPage() {
           onClick={() => fileInputRef.current?.click()}
         >
           <Upload className="mr-1.5 h-4 w-4" />
-          {t('templates.import')}
+          {t("templates.import")}
         </Button>
         <Button
           variant="outline"
@@ -275,7 +322,7 @@ export function MobileTemplatesPage() {
           disabled={templates.length === 0}
         >
           <Download className="mr-1.5 h-4 w-4" />
-          {t('templates.exportAll')}
+          {t("templates.exportAll")}
         </Button>
       </div>
 
@@ -288,7 +335,7 @@ export function MobileTemplatesPage() {
           onClick={() => setShowBatchDeleteDialog(true)}
         >
           <Trash2 className="mr-2 h-4 w-4" />
-          {t('templates.deleteSelected', { count: selectedIds.size })}
+          {t("templates.deleteSelected", { count: selectedIds.size })}
         </Button>
       )}
 
@@ -298,10 +345,10 @@ export function MobileTemplatesPage() {
           <CardContent className="py-12">
             <div className="text-center text-muted-foreground">
               <FolderOpen className="mx-auto h-12 w-12 mb-4 opacity-50" />
-              <h3 className="text-lg font-medium mb-2">{t('templates.noTemplates')}</h3>
-              <p className="text-sm">
-                {t('templates.noTemplatesDesc')}
-              </p>
+              <h3 className="text-lg font-medium mb-2">
+                {t("templates.noTemplates")}
+              </h3>
+              <p className="text-sm">{t("templates.noTemplatesDesc")}</p>
             </div>
           </CardContent>
         </Card>
@@ -310,21 +357,25 @@ export function MobileTemplatesPage() {
           <CardContent className="py-12">
             <div className="text-center text-muted-foreground">
               <Search className="mx-auto h-12 w-12 mb-4 opacity-50" />
-              <h3 className="text-lg font-medium mb-2">{t('templates.noResults')}</h3>
-              <p className="text-sm">{t('templates.noResultsDesc')}</p>
+              <h3 className="text-lg font-medium mb-2">
+                {t("templates.noResults")}
+              </h3>
+              <p className="text-sm">{t("templates.noResultsDesc")}</p>
             </div>
           </CardContent>
         </Card>
       ) : (
         <div className="space-y-4">
           {modelIds.map((modelId) => {
-            const group = groupedTemplates[modelId]
+            const group = groupedTemplates[modelId];
             return (
               <Card key={modelId}>
                 <CardHeader className="pb-2 px-4 pt-4">
                   <CardTitle className="text-base">{group.modelName}</CardTitle>
                   <CardDescription className="text-xs">
-                    {t('templates.templateCount', { count: group.templates.length })}
+                    {t("templates.templateCount", {
+                      count: group.templates.length,
+                    })}
                   </CardDescription>
                 </CardHeader>
                 <CardContent className="px-4 pb-4">
@@ -343,8 +394,13 @@ export function MobileTemplatesPage() {
                         />
 
                         {/* Template info */}
-                        <div className="flex-1 min-w-0" onClick={() => handleUseTemplate(template)}>
-                          <p className="font-medium text-sm truncate">{template.name}</p>
+                        <div
+                          className="flex-1 min-w-0"
+                          onClick={() => handleUseTemplate(template)}
+                        >
+                          <p className="font-medium text-sm truncate">
+                            {template.name}
+                          </p>
                           <p className="text-xs text-muted-foreground">
                             {new Date(template.updatedAt).toLocaleDateString()}
                           </p>
@@ -356,8 +412,8 @@ export function MobileTemplatesPage() {
                           variant="default"
                           className="h-8 px-3 shrink-0"
                           onClick={(e) => {
-                            e.stopPropagation()
-                            handleUseTemplate(template)
+                            e.stopPropagation();
+                            handleUseTemplate(template);
                           }}
                         >
                           <Play className="h-3.5 w-3.5" />
@@ -366,25 +422,33 @@ export function MobileTemplatesPage() {
                         {/* More actions dropdown */}
                         <DropdownMenu>
                           <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-8 w-8 shrink-0"
+                            >
                               <MoreVertical className="h-4 w-4" />
                             </Button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">
-                            <DropdownMenuItem onClick={() => handleEditTemplate(template)}>
+                            <DropdownMenuItem
+                              onClick={() => handleEditTemplate(template)}
+                            >
                               <Pencil className="mr-2 h-4 w-4" />
-                              {t('templates.rename')}
+                              {t("templates.rename")}
                             </DropdownMenuItem>
-                            <DropdownMenuItem onClick={() => handleExportSingle(template)}>
+                            <DropdownMenuItem
+                              onClick={() => handleExportSingle(template)}
+                            >
                               <Download className="mr-2 h-4 w-4" />
-                              {t('templates.export')}
+                              {t("templates.export")}
                             </DropdownMenuItem>
                             <DropdownMenuItem
                               onClick={() => setDeletingTemplate(template)}
                               className="text-destructive focus:text-destructive"
                             >
                               <Trash2 className="mr-2 h-4 w-4" />
-                              {t('common.delete')}
+                              {t("common.delete")}
                             </DropdownMenuItem>
                           </DropdownMenuContent>
                         </DropdownMenu>
@@ -393,93 +457,122 @@ export function MobileTemplatesPage() {
                   </div>
                 </CardContent>
               </Card>
-            )
+            );
           })}
         </div>
       )}
 
       {/* Edit Dialog */}
-      <Dialog open={!!editingTemplate} onOpenChange={(open) => !open && setEditingTemplate(null)}>
+      <Dialog
+        open={!!editingTemplate}
+        onOpenChange={(open) => !open && setEditingTemplate(null)}
+      >
         <DialogContent className="max-w-[90vw] sm:max-w-sm">
           <DialogHeader>
-            <DialogTitle>{t('templates.renameTemplate')}</DialogTitle>
-            <DialogDescription>
-              {t('templates.renameDesc')}
-            </DialogDescription>
+            <DialogTitle>{t("templates.renameTemplate")}</DialogTitle>
+            <DialogDescription>{t("templates.renameDesc")}</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-2">
-              <Label htmlFor="editTemplateName">{t('templates.templateName')}</Label>
+              <Label htmlFor="editTemplateName">
+                {t("templates.templateName")}
+              </Label>
               <Input
                 id="editTemplateName"
                 value={editName}
                 onChange={(e) => setEditName(e.target.value)}
-                placeholder={t('templates.templateNamePlaceholder')}
+                placeholder={t("templates.templateNamePlaceholder")}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter' && editName.trim()) {
-                    handleSaveEdit()
+                  if (e.key === "Enter" && editName.trim()) {
+                    handleSaveEdit();
                   }
                 }}
               />
             </div>
           </div>
           <DialogFooter className="flex-row gap-2">
-            <Button variant="outline" className="flex-1" onClick={() => setEditingTemplate(null)}>
-              {t('common.cancel')}
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={() => setEditingTemplate(null)}
+            >
+              {t("common.cancel")}
             </Button>
-            <Button className="flex-1" onClick={handleSaveEdit} disabled={!editName.trim()}>
-              {t('common.save')}
+            <Button
+              className="flex-1"
+              onClick={handleSaveEdit}
+              disabled={!editName.trim()}
+            >
+              {t("common.save")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* Delete Confirmation Dialog */}
-      <Dialog open={!!deletingTemplate} onOpenChange={(open) => !open && setDeletingTemplate(null)}>
+      <Dialog
+        open={!!deletingTemplate}
+        onOpenChange={(open) => !open && setDeletingTemplate(null)}
+      >
         <DialogContent className="max-w-[90vw] sm:max-w-sm">
           <DialogHeader>
-            <DialogTitle>{t('templates.deleteTemplate')}</DialogTitle>
+            <DialogTitle>{t("templates.deleteTemplate")}</DialogTitle>
             <DialogDescription>
-              {t('templates.deleteConfirm', { name: deletingTemplate?.name })}
+              {t("templates.deleteConfirm", { name: deletingTemplate?.name })}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter className="flex-row gap-2">
-            <Button variant="outline" className="flex-1" onClick={() => setDeletingTemplate(null)}>
-              {t('common.cancel')}
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={() => setDeletingTemplate(null)}
+            >
+              {t("common.cancel")}
             </Button>
-            <Button variant="destructive" className="flex-1" onClick={handleDeleteTemplate}>
-              {t('common.delete')}
+            <Button
+              variant="destructive"
+              className="flex-1"
+              onClick={handleDeleteTemplate}
+            >
+              {t("common.delete")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* Import Dialog */}
-      <Dialog open={!!importData} onOpenChange={(open) => !open && setImportData(null)}>
+      <Dialog
+        open={!!importData}
+        onOpenChange={(open) => !open && setImportData(null)}
+      >
         <DialogContent className="max-w-[90vw] sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>{t('templates.importTemplates')}</DialogTitle>
+            <DialogTitle>{t("templates.importTemplates")}</DialogTitle>
             <DialogDescription>
-              {t('templates.foundTemplates', { count: importData?.templates.length || 0 })}
+              {t("templates.foundTemplates", {
+                count: importData?.templates.length || 0,
+              })}
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-3">
-              <Label>{t('templates.importMode')}</Label>
+              <Label>{t("templates.importMode")}</Label>
               <div className="space-y-2">
                 <label className="flex items-start gap-3 p-3 border rounded-lg cursor-pointer">
                   <input
                     type="radio"
                     name="importMode"
                     value="merge"
-                    checked={importMode === 'merge'}
-                    onChange={() => setImportMode('merge')}
+                    checked={importMode === "merge"}
+                    onChange={() => setImportMode("merge")}
                     className="mt-0.5"
                   />
                   <div>
-                    <div className="font-medium text-sm">{t('templates.merge')}</div>
+                    <div className="font-medium text-sm">
+                      {t("templates.merge")}
+                    </div>
                     <div className="text-xs text-muted-foreground">
-                      {t('templates.mergeDesc')}
+                      {t("templates.mergeDesc")}
                     </div>
                   </div>
                 </label>
@@ -488,14 +581,16 @@ export function MobileTemplatesPage() {
                     type="radio"
                     name="importMode"
                     value="replace"
-                    checked={importMode === 'replace'}
-                    onChange={() => setImportMode('replace')}
+                    checked={importMode === "replace"}
+                    onChange={() => setImportMode("replace")}
                     className="mt-0.5"
                   />
                   <div>
-                    <div className="font-medium text-sm">{t('templates.replaceAll')}</div>
+                    <div className="font-medium text-sm">
+                      {t("templates.replaceAll")}
+                    </div>
                     <div className="text-xs text-muted-foreground">
-                      {t('templates.replaceAllDesc')}
+                      {t("templates.replaceAllDesc")}
                     </div>
                   </div>
                 </label>
@@ -503,35 +598,50 @@ export function MobileTemplatesPage() {
             </div>
           </div>
           <DialogFooter className="flex-row gap-2">
-            <Button variant="outline" className="flex-1" onClick={() => setImportData(null)}>
-              {t('common.cancel')}
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={() => setImportData(null)}
+            >
+              {t("common.cancel")}
             </Button>
             <Button className="flex-1" onClick={handleImportConfirm}>
-              {t('templates.import')}
+              {t("templates.import")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* Batch Delete Confirmation Dialog */}
-      <Dialog open={showBatchDeleteDialog} onOpenChange={setShowBatchDeleteDialog}>
+      <Dialog
+        open={showBatchDeleteDialog}
+        onOpenChange={setShowBatchDeleteDialog}
+      >
         <DialogContent className="max-w-[90vw] sm:max-w-sm">
           <DialogHeader>
-            <DialogTitle>{t('templates.deleteTemplates')}</DialogTitle>
+            <DialogTitle>{t("templates.deleteTemplates")}</DialogTitle>
             <DialogDescription>
-              {t('templates.batchDeleteConfirm', { count: selectedIds.size })}
+              {t("templates.batchDeleteConfirm", { count: selectedIds.size })}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter className="flex-row gap-2">
-            <Button variant="outline" className="flex-1" onClick={() => setShowBatchDeleteDialog(false)}>
-              {t('common.cancel')}
+            <Button
+              variant="outline"
+              className="flex-1"
+              onClick={() => setShowBatchDeleteDialog(false)}
+            >
+              {t("common.cancel")}
             </Button>
-            <Button variant="destructive" className="flex-1" onClick={handleBatchDelete}>
-              {t('common.delete')}
+            <Button
+              variant="destructive"
+              className="flex-1"
+              onClick={handleBatchDelete}
+            >
+              {t("common.delete")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/SettingsPage.tsx b/mobile/src/pages/SettingsPage.tsx
index 19fb7eae..61f68d91 100644
--- a/mobile/src/pages/SettingsPage.tsx
+++ b/mobile/src/pages/SettingsPage.tsx
@@ -1,238 +1,300 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { apiClient } from '@/api/client'
-import { useThemeStore, type Theme } from '@/stores/themeStore'
-import { languages } from '@/i18n'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Progress } from '@/components/ui/progress'
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { apiClient } from "@/api/client";
+import { useThemeStore, type Theme } from "@/stores/themeStore";
+import { languages } from "@/i18n";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from "@/components/ui/select";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
-import { toast } from '@/hooks/useToast'
-import { Eye, EyeOff, Check, Loader2, Monitor, Moon, Sun, Download, RefreshCw, Github, Globe, Database, ChevronRight, X, Trash2, CheckCircle2, Circle, AlertCircle, Settings, ExternalLink } from 'lucide-react'
+} from "@/components/ui/dialog";
+import { toast } from "@/hooks/useToast";
+import {
+  Eye,
+  EyeOff,
+  Check,
+  Loader2,
+  Monitor,
+  Moon,
+  Sun,
+  Download,
+  RefreshCw,
+  Github,
+  Globe,
+  Database,
+  ChevronRight,
+  X,
+  Trash2,
+  CheckCircle2,
+  Circle,
+  AlertCircle,
+  Settings,
+  ExternalLink,
+} from "lucide-react";
 
 interface CacheItem {
-  cacheName: string
-  url: string
-  size: number
+  cacheName: string;
+  url: string;
+  size: number;
 }
 
 interface ModelDownloadState {
-  name: string
-  status: 'pending' | 'downloading' | 'completed' | 'error' | 'cached'
-  progress: number
-  error?: string
-  type?: 'direct' | 'worker' | 'sam-worker'  // direct = fetch URL, worker = bg remover, sam-worker = segment anything
+  name: string;
+  status: "pending" | "downloading" | "completed" | "error" | "cached";
+  progress: number;
+  error?: string;
+  type?: "direct" | "worker" | "sam-worker"; // direct = fetch URL, worker = bg remover, sam-worker = segment anything
 }
 
 export function SettingsPage() {
-  const { t, i18n } = useTranslation()
-  const { apiKey, setApiKey, isValidated, isValidating: storeIsValidating, validateApiKey } = useApiKeyStore()
-  const { theme, setTheme } = useThemeStore()
-  const [inputKey, setInputKey] = useState(apiKey)
-  const [showKey, setShowKey] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
+  const { t, i18n } = useTranslation();
+  const {
+    apiKey,
+    setApiKey,
+    isValidated,
+    isValidating: storeIsValidating,
+    validateApiKey,
+  } = useApiKeyStore();
+  const { theme, setTheme } = useThemeStore();
+  const [inputKey, setInputKey] = useState(apiKey);
+  const [showKey, setShowKey] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   // Balance state
-  const [balance, setBalance] = useState<number | null>(null)
-  const [isLoadingBalance, setIsLoadingBalance] = useState(false)
+  const [balance, setBalance] = useState<number | null>(null);
+  const [isLoadingBalance, setIsLoadingBalance] = useState(false);
 
   // Cache state
-  const [cacheSize, setCacheSize] = useState<number | null>(null)
-  const [isClearingCache, setIsClearingCache] = useState(false)
-  const [cacheItems, setCacheItems] = useState<CacheItem[]>([])
-  const [showCacheDialog, setShowCacheDialog] = useState(false)
-  const [isDeletingItem, setIsDeletingItem] = useState<string | null>(null)
+  const [cacheSize, setCacheSize] = useState<number | null>(null);
+  const [isClearingCache, setIsClearingCache] = useState(false);
+  const [cacheItems, setCacheItems] = useState<CacheItem[]>([]);
+  const [showCacheDialog, setShowCacheDialog] = useState(false);
+  const [isDeletingItem, setIsDeletingItem] = useState<string | null>(null);
 
   // Model download state
-  const [isDownloadingModels, setIsDownloadingModels] = useState(false)
-  const [modelDownloadStates, setModelDownloadStates] = useState<ModelDownloadState[]>([])
-  const [overallProgress, setOverallProgress] = useState(0)
-  const abortControllerRef = useRef<AbortController | null>(null)
+  const [isDownloadingModels, setIsDownloadingModels] = useState(false);
+  const [modelDownloadStates, setModelDownloadStates] = useState<
+    ModelDownloadState[]
+  >([]);
+  const [overallProgress, setOverallProgress] = useState(0);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   // Update state
-  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false)
+  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
   const [updateInfo, setUpdateInfo] = useState<{
-    hasUpdate: boolean
-    currentVersion: string
-    latestVersion: string
-    downloadUrl: string
-    releaseUrl: string
-    releaseNotes?: string
-  } | null>(null)
+    hasUpdate: boolean;
+    currentVersion: string;
+    latestVersion: string;
+    downloadUrl: string;
+    releaseUrl: string;
+    releaseNotes?: string;
+  } | null>(null);
 
   // Current app version - keep in sync with package.json and build.gradle
-  const currentVersion = '0.8.2'
+  const currentVersion = "0.8.2";
 
   // (APK download progress state removed - now opens browser directly)
 
   // Get the saved language preference (including 'auto')
   const [languagePreference, setLanguagePreference] = useState(() => {
-    return localStorage.getItem('wavespeed_language') || 'auto'
-  })
-
-  const handleLanguageChange = useCallback((langCode: string) => {
-    setLanguagePreference(langCode)
-    localStorage.setItem('wavespeed_language', langCode)
-
-    if (langCode === 'auto') {
-      const browserLang = navigator.language || 'en'
-      const supportedLangs = ['en', 'zh-CN', 'zh-TW', 'ja', 'ko', 'es', 'fr', 'de', 'it', 'ru', 'pt', 'hi', 'id', 'ms', 'th', 'vi', 'tr', 'ar']
-      const matchedLang = supportedLangs.find(l => browserLang.startsWith(l.split('-')[0])) || 'en'
-      i18n.changeLanguage(matchedLang)
-    } else {
-      i18n.changeLanguage(langCode)
-    }
+    return localStorage.getItem("wavespeed_language") || "auto";
+  });
+
+  const handleLanguageChange = useCallback(
+    (langCode: string) => {
+      setLanguagePreference(langCode);
+      localStorage.setItem("wavespeed_language", langCode);
+
+      if (langCode === "auto") {
+        const browserLang = navigator.language || "en";
+        const supportedLangs = [
+          "en",
+          "zh-CN",
+          "zh-TW",
+          "ja",
+          "ko",
+          "es",
+          "fr",
+          "de",
+          "it",
+          "ru",
+          "pt",
+          "hi",
+          "id",
+          "ms",
+          "th",
+          "vi",
+          "tr",
+          "ar",
+        ];
+        const matchedLang =
+          supportedLangs.find((l) => browserLang.startsWith(l.split("-")[0])) ||
+          "en";
+        i18n.changeLanguage(matchedLang);
+      } else {
+        i18n.changeLanguage(langCode);
+      }
 
-    toast({
-      title: t('settings.language.changed'),
-      description: t('settings.language.changedDesc'),
-    })
-  }, [i18n, t])
+      toast({
+        title: t("settings.language.changed"),
+        description: t("settings.language.changedDesc"),
+      });
+    },
+    [i18n, t],
+  );
 
   // Load cache details
   const loadCacheDetails = useCallback(async () => {
     try {
-      const cacheNames = await caches.keys()
-      const items: CacheItem[] = []
-      let totalSize = 0
+      const cacheNames = await caches.keys();
+      const items: CacheItem[] = [];
+      let totalSize = 0;
 
       for (const name of cacheNames) {
-        const cache = await caches.open(name)
-        const keys = await cache.keys()
+        const cache = await caches.open(name);
+        const keys = await cache.keys();
         for (const request of keys) {
-          const response = await cache.match(request)
+          const response = await cache.match(request);
           if (response) {
-            const blob = await response.blob()
+            const blob = await response.blob();
             items.push({
               cacheName: name,
               url: request.url,
-              size: blob.size
-            })
-            totalSize += blob.size
+              size: blob.size,
+            });
+            totalSize += blob.size;
           }
         }
       }
 
-      setCacheItems(items)
-      setCacheSize(totalSize)
+      setCacheItems(items);
+      setCacheSize(totalSize);
     } catch {
-      setCacheItems([])
-      setCacheSize(0)
+      setCacheItems([]);
+      setCacheSize(0);
     }
-  }, [])
+  }, []);
 
   // Fetch account balance
   const fetchBalance = useCallback(async () => {
-    if (!isValidated) return
-    setIsLoadingBalance(true)
+    if (!isValidated) return;
+    setIsLoadingBalance(true);
     try {
-      const bal = await apiClient.getBalance()
-      setBalance(bal)
+      const bal = await apiClient.getBalance();
+      setBalance(bal);
     } catch {
       toast({
-        title: t('common.error'),
-        description: t('settings.balance.refreshFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description: t("settings.balance.refreshFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsLoadingBalance(false)
+      setIsLoadingBalance(false);
     }
-  }, [isValidated, t])
+  }, [isValidated, t]);
 
   // Delete a single cache item
-  const handleDeleteCacheItem = useCallback(async (cacheName: string, url: string) => {
-    setIsDeletingItem(url)
-    try {
-      const cache = await caches.open(cacheName)
-      await cache.delete(url)
-      await loadCacheDetails()
-    } catch {
-      toast({
-        title: t('common.error'),
-        description: t('settings.cache.clearFailed'),
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDeletingItem(null)
-    }
-  }, [loadCacheDetails, t])
+  const handleDeleteCacheItem = useCallback(
+    async (cacheName: string, url: string) => {
+      setIsDeletingItem(url);
+      try {
+        const cache = await caches.open(cacheName);
+        await cache.delete(url);
+        await loadCacheDetails();
+      } catch {
+        toast({
+          title: t("common.error"),
+          description: t("settings.cache.clearFailed"),
+          variant: "destructive",
+        });
+      } finally {
+        setIsDeletingItem(null);
+      }
+    },
+    [loadCacheDetails, t],
+  );
 
   // Clear all caches
   const handleClearCache = useCallback(async () => {
-    setIsClearingCache(true)
+    setIsClearingCache(true);
     try {
-      const cacheNames = await caches.keys()
-      await Promise.all(cacheNames.map((name) => caches.delete(name)))
-      setCacheSize(0)
-      setCacheItems([])
-      setShowCacheDialog(false)
+      const cacheNames = await caches.keys();
+      await Promise.all(cacheNames.map((name) => caches.delete(name)));
+      setCacheSize(0);
+      setCacheItems([]);
+      setShowCacheDialog(false);
       toast({
-        title: t('settings.cache.cleared'),
-        description: t('settings.cache.clearedDesc'),
-      })
+        title: t("settings.cache.cleared"),
+        description: t("settings.cache.clearedDesc"),
+      });
     } catch {
       toast({
-        title: t('common.error'),
-        description: t('settings.cache.clearFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description: t("settings.cache.clearFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsClearingCache(false)
+      setIsClearingCache(false);
     }
-  }, [t])
+  }, [t]);
 
   // Check for updates via GitHub API
   const handleCheckForUpdates = useCallback(async () => {
-    setIsCheckingUpdate(true)
-    setUpdateInfo(null)
+    setIsCheckingUpdate(true);
+    setUpdateInfo(null);
 
     try {
       // Check GitHub releases for mobile APK
       const response = await fetch(
-        'https://api.github.com/repos/WaveSpeedAI/wavespeed-desktop/releases',
-        { headers: { 'Accept': 'application/vnd.github.v3+json' } }
-      )
+        "https://api.github.com/repos/WaveSpeedAI/wavespeed-desktop/releases",
+        { headers: { Accept: "application/vnd.github.v3+json" } },
+      );
 
       if (!response.ok) {
-        throw new Error('Failed to fetch releases')
+        throw new Error("Failed to fetch releases");
       }
 
-      const releases = await response.json()
+      const releases = await response.json();
 
       // Find the latest release that has an APK asset
-      let latestMobileRelease = null
-      let apkAsset = null
+      let latestMobileRelease = null;
+      let apkAsset = null;
 
       for (const release of releases) {
         // Skip drafts and prereleases
-        if (release.draft || release.prerelease) continue
+        if (release.draft || release.prerelease) continue;
 
         // Look for APK asset
         const apk = release.assets?.find((asset: { name: string }) =>
-          asset.name.endsWith('.apk')
-        )
+          asset.name.endsWith(".apk"),
+        );
 
         if (apk) {
-          latestMobileRelease = release
-          apkAsset = apk
-          break
+          latestMobileRelease = release;
+          apkAsset = apk;
+          break;
         }
       }
 
@@ -242,32 +304,37 @@ export function SettingsPage() {
           hasUpdate: false,
           currentVersion,
           latestVersion: currentVersion,
-          downloadUrl: '',
-          releaseUrl: '',
-        })
+          downloadUrl: "",
+          releaseUrl: "",
+        });
         toast({
-          title: t('settings.updates.notAvailable', { version: currentVersion }),
-        })
-        return
+          title: t("settings.updates.notAvailable", {
+            version: currentVersion,
+          }),
+        });
+        return;
       }
 
       // Extract version from tag (e.g., "mobile-v0.8.2" -> "0.8.2" or "v0.8.2" -> "0.8.2")
-      const latestVersion = latestMobileRelease.tag_name.replace(/^(mobile-)?v/, '')
+      const latestVersion = latestMobileRelease.tag_name.replace(
+        /^(mobile-)?v/,
+        "",
+      );
 
       // Compare versions
       const compareVersions = (v1: string, v2: string): number => {
-        const parts1 = v1.split('.').map(Number)
-        const parts2 = v2.split('.').map(Number)
+        const parts1 = v1.split(".").map(Number);
+        const parts2 = v2.split(".").map(Number);
         for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
-          const p1 = parts1[i] || 0
-          const p2 = parts2[i] || 0
-          if (p1 < p2) return -1
-          if (p1 > p2) return 1
+          const p1 = parts1[i] || 0;
+          const p2 = parts2[i] || 0;
+          if (p1 < p2) return -1;
+          if (p1 > p2) return 1;
         }
-        return 0
-      }
+        return 0;
+      };
 
-      const hasUpdate = compareVersions(currentVersion, latestVersion) < 0
+      const hasUpdate = compareVersions(currentVersion, latestVersion) < 0;
 
       setUpdateInfo({
         hasUpdate,
@@ -276,577 +343,607 @@ export function SettingsPage() {
         downloadUrl: apkAsset.browser_download_url,
         releaseUrl: latestMobileRelease.html_url,
         releaseNotes: latestMobileRelease.body,
-      })
+      });
 
       if (hasUpdate) {
         toast({
-          title: t('settings.updates.available', { version: latestVersion }),
-        })
+          title: t("settings.updates.available", { version: latestVersion }),
+        });
       } else {
         toast({
-          title: t('settings.updates.notAvailable', { version: currentVersion }),
-        })
+          title: t("settings.updates.notAvailable", {
+            version: currentVersion,
+          }),
+        });
       }
     } catch (error) {
-      console.error('Failed to check for updates:', error)
+      console.error("Failed to check for updates:", error);
       toast({
-        title: t('settings.updates.checkFailed'),
-        variant: 'destructive',
-      })
+        title: t("settings.updates.checkFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsCheckingUpdate(false)
+      setIsCheckingUpdate(false);
     }
-  }, [currentVersion, t])
+  }, [currentVersion, t]);
 
   // Open release page in browser so user can download APK directly
   const handleDownloadUpdate = useCallback(async () => {
-    if (!updateInfo) return
+    if (!updateInfo) return;
 
-    const url = updateInfo.releaseUrl || updateInfo.downloadUrl
-    if (!url) return
+    const url = updateInfo.releaseUrl || updateInfo.downloadUrl;
+    if (!url) return;
 
     try {
-      const { Browser } = await import(/* @vite-ignore */ '@capacitor/browser')
-      await Browser.open({ url })
+      const { Browser } = await import(/* @vite-ignore */ "@capacitor/browser");
+      await Browser.open({ url });
     } catch {
-      window.open(url, '_blank')
+      window.open(url, "_blank");
     }
-  }, [updateInfo])
+  }, [updateInfo]);
 
   // Check if a model is already cached
-  const checkModelCached = async (url: string, cacheName: string): Promise<boolean> => {
+  const checkModelCached = async (
+    url: string,
+    cacheName: string,
+  ): Promise<boolean> => {
     try {
-      const cache = await caches.open(cacheName)
-      const response = await cache.match(url)
-      return !!response
+      const cache = await caches.open(cacheName);
+      const response = await cache.match(url);
+      return !!response;
     } catch {
-      return false
+      return false;
     }
-  }
+  };
 
   // Download a single model with progress
   const downloadModel = async (
     url: string,
     cacheName: string,
     onProgress: (progress: number) => void,
-    signal: AbortSignal
+    signal: AbortSignal,
   ): Promise<void> => {
-    const response = await fetch(url, { mode: 'cors', signal })
-    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+    const response = await fetch(url, { mode: "cors", signal });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
-    const contentLength = response.headers.get('content-length')
-    const total = contentLength ? parseInt(contentLength, 10) : 0
-    const reader = response.body?.getReader()
+    const contentLength = response.headers.get("content-length");
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
+    const reader = response.body?.getReader();
 
-    if (!reader) throw new Error('Failed to get response reader')
+    if (!reader) throw new Error("Failed to get response reader");
 
-    const chunks: Uint8Array[] = []
-    let received = 0
+    const chunks: Uint8Array[] = [];
+    let received = 0;
 
     while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
+      const { done, value } = await reader.read();
+      if (done) break;
 
-      chunks.push(value)
-      received += value.length
+      chunks.push(value);
+      received += value.length;
 
       if (total > 0) {
-        onProgress((received / total) * 100)
+        onProgress((received / total) * 100);
       }
     }
 
     // Combine chunks and cache
-    const buffer = new Uint8Array(received)
-    let position = 0
+    const buffer = new Uint8Array(received);
+    let position = 0;
     for (const chunk of chunks) {
-      buffer.set(chunk, position)
-      position += chunk.length
+      buffer.set(chunk, position);
+      position += chunk.length;
     }
 
-    const cache = await caches.open(cacheName)
+    const cache = await caches.open(cacheName);
     const cacheResponse = new Response(buffer.buffer, {
       headers: {
-        'Content-Type': 'application/octet-stream',
-        'Content-Length': buffer.byteLength.toString()
-      }
-    })
-    await cache.put(url, cacheResponse)
-  }
+        "Content-Type": "application/octet-stream",
+        "Content-Length": buffer.byteLength.toString(),
+      },
+    });
+    await cache.put(url, cacheResponse);
+  };
 
   // Background remover worker ref for pre-download
-  const bgRemoverWorkerRef = useRef<Worker | null>(null)
+  const bgRemoverWorkerRef = useRef<Worker | null>(null);
   // SAM worker ref for pre-download
-  const samWorkerRef = useRef<Worker | null>(null)
+  const samWorkerRef = useRef<Worker | null>(null);
 
   // Download all Free Tools models
   const handleDownloadModels = useCallback(async () => {
     // Use UMD build of FFmpeg - more stable
-    const ffmpegBase = 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd'
+    const ffmpegBase = "https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd";
 
     // Define all models to download
     // Note: Upscaler models are bundled with npm packages, no download needed
     const models: Array<{
-      name: string
-      url: string
-      cacheName: string
-      size: string
-      type: 'direct' | 'worker'
+      name: string;
+      url: string;
+      cacheName: string;
+      size: string;
+      type: "direct" | "worker";
     }> = [
       {
-        name: t('settings.cache.models.ffmpegJs'),
+        name: t("settings.cache.models.ffmpegJs"),
         url: `${ffmpegBase}/ffmpeg-core.js`,
-        cacheName: 'ffmpeg-wasm-cache',
-        size: '~150KB',
-        type: 'direct'
+        cacheName: "ffmpeg-wasm-cache",
+        size: "~150KB",
+        type: "direct",
       },
       {
-        name: t('settings.cache.models.ffmpegWasm'),
+        name: t("settings.cache.models.ffmpegWasm"),
         url: `${ffmpegBase}/ffmpeg-core.wasm`,
-        cacheName: 'ffmpeg-wasm-cache',
-        size: '~24MB',
-        type: 'direct'
+        cacheName: "ffmpeg-wasm-cache",
+        size: "~24MB",
+        type: "direct",
       },
       {
-        name: t('settings.cache.models.backgroundRemover'),
-        url: '', // Uses worker-based warm-up
-        cacheName: 'background-removal-assets', // Library's internal cache name
-        size: '~44MB',
-        type: 'worker'
+        name: t("settings.cache.models.backgroundRemover"),
+        url: "", // Uses worker-based warm-up
+        cacheName: "background-removal-assets", // Library's internal cache name
+        size: "~44MB",
+        type: "worker",
       },
       {
-        name: t('settings.cache.models.imageEraser'),
-        url: 'https://huggingface.co/opencv/inpainting_lama/resolve/main/inpainting_lama_2025jan.onnx',
-        cacheName: 'lama-model-cache',
-        size: '~200MB',
-        type: 'direct'
+        name: t("settings.cache.models.imageEraser"),
+        url: "https://huggingface.co/opencv/inpainting_lama/resolve/main/inpainting_lama_2025jan.onnx",
+        cacheName: "lama-model-cache",
+        size: "~200MB",
+        type: "direct",
       },
       {
-        name: `${t('settings.cache.models.samEncoder')} + ${t('settings.cache.models.samDecoder')}`,
-        url: '',
-        cacheName: '',
-        size: '~14MB',
-        type: 'sam-worker'
-      }
-    ]
+        name: `${t("settings.cache.models.samEncoder")} + ${t("settings.cache.models.samDecoder")}`,
+        url: "",
+        cacheName: "",
+        size: "~14MB",
+        type: "sam-worker",
+      },
+    ];
 
     // Initialize states
-    const initialStates: ModelDownloadState[] = models.map(m => ({
+    const initialStates: ModelDownloadState[] = models.map((m) => ({
       name: m.name,
-      status: 'pending',
+      status: "pending",
       progress: 0,
-      type: m.type
-    }))
-    setModelDownloadStates(initialStates)
-    setIsDownloadingModels(true)
-    setOverallProgress(0)
+      type: m.type,
+    }));
+    setModelDownloadStates(initialStates);
+    setIsDownloadingModels(true);
+    setOverallProgress(0);
 
     // Create abort controller
-    abortControllerRef.current = new AbortController()
-    const signal = abortControllerRef.current.signal
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
 
     // Helper to check if Background Remover model is cached
     const checkBgRemoverCached = async (): Promise<boolean> => {
       try {
         // Check if the library's cache has any model data
-        const cacheNames = await caches.keys()
+        const cacheNames = await caches.keys();
         // The @imgly/background-removal library uses 'background-removal-assets' cache
-        const bgCache = cacheNames.find(name => name.includes('background-removal') || name.includes('imgly'))
+        const bgCache = cacheNames.find(
+          (name) =>
+            name.includes("background-removal") || name.includes("imgly"),
+        );
         if (bgCache) {
-          const cache = await caches.open(bgCache)
-          const keys = await cache.keys()
+          const cache = await caches.open(bgCache);
+          const keys = await cache.keys();
           // If there are multiple entries (model chunks), consider it cached
-          return keys.length > 5
+          return keys.length > 5;
         }
-        return false
+        return false;
       } catch {
-        return false
+        return false;
       }
-    }
+    };
 
     // Helper to check if SAM model is cached (by @huggingface/transformers)
     const checkSamCached = async (): Promise<boolean> => {
       try {
-        const cacheNames = await caches.keys()
+        const cacheNames = await caches.keys();
         for (const name of cacheNames) {
-          const cache = await caches.open(name)
-          const keys = await cache.keys()
-          if (keys.some(req => req.url.includes('slimsam-77-uniform'))) return true
+          const cache = await caches.open(name);
+          const keys = await cache.keys();
+          if (keys.some((req) => req.url.includes("slimsam-77-uniform")))
+            return true;
         }
-        return false
+        return false;
       } catch {
-        return false
+        return false;
       }
-    }
+    };
 
     // Helper to download Background Remover via worker warm-up
     const downloadBgRemover = (
-      onProgress: (progress: number) => void
+      onProgress: (progress: number) => void,
     ): Promise<void> => {
       return new Promise((resolve, reject) => {
         // Create worker
         const worker = new Worker(
-          new URL('../workers/backgroundRemover.worker.ts', import.meta.url),
-          { type: 'module' }
-        )
-        bgRemoverWorkerRef.current = worker
+          new URL("../workers/backgroundRemover.worker.ts", import.meta.url),
+          { type: "module" },
+        );
+        bgRemoverWorkerRef.current = worker;
 
         // Create a tiny 1x1 pixel test image as blob
-        const canvas = document.createElement('canvas')
-        canvas.width = 1
-        canvas.height = 1
-        const ctx = canvas.getContext('2d')!
-        ctx.fillStyle = '#000000'
-        ctx.fillRect(0, 0, 1, 1)
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        const ctx = canvas.getContext("2d")!;
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(0, 0, 1, 1);
 
         canvas.toBlob((blob) => {
           if (!blob) {
-            reject(new Error('Failed to create test image'))
-            return
+            reject(new Error("Failed to create test image"));
+            return;
           }
 
           worker.onmessage = (e) => {
-            const { type, payload } = e.data
+            const { type, payload } = e.data;
 
-            if (type === 'progress') {
-              const { phase, progress } = payload as { phase: string; progress: number }
+            if (type === "progress") {
+              const { phase, progress } = payload as {
+                phase: string;
+                progress: number;
+              };
               // Only report download phase progress
-              if (phase === 'download') {
-                onProgress(progress)
+              if (phase === "download") {
+                onProgress(progress);
               }
-            } else if (type === 'result' || type === 'resultAll') {
+            } else if (type === "result" || type === "resultAll") {
               // Model downloaded and cached
-              worker.terminate()
-              bgRemoverWorkerRef.current = null
-              resolve()
-            } else if (type === 'error') {
-              worker.terminate()
-              bgRemoverWorkerRef.current = null
-              reject(new Error(payload as string))
+              worker.terminate();
+              bgRemoverWorkerRef.current = null;
+              resolve();
+            } else if (type === "error") {
+              worker.terminate();
+              bgRemoverWorkerRef.current = null;
+              reject(new Error(payload as string));
             }
-          }
+          };
 
           worker.onerror = (e) => {
-            worker.terminate()
-            bgRemoverWorkerRef.current = null
-            reject(new Error(e.message))
-          }
+            worker.terminate();
+            bgRemoverWorkerRef.current = null;
+            reject(new Error(e.message));
+          };
 
           // Process the tiny image to trigger model download
           worker.postMessage({
-            type: 'process',
+            type: "process",
             payload: {
               imageBlob: blob,
-              model: 'isnet_quint8',
-              outputType: 'foreground',
-              id: 0
-            }
-          })
-        }, 'image/png')
-      })
-    }
+              model: "isnet_quint8",
+              outputType: "foreground",
+              id: 0,
+            },
+          });
+        }, "image/png");
+      });
+    };
 
     // Helper to download SAM model via worker warm-up
     const downloadSam = (
-      onProgress: (progress: number) => void
+      onProgress: (progress: number) => void,
     ): Promise<void> => {
       return new Promise((resolve, reject) => {
         const worker = new Worker(
-          new URL('../workers/segmentAnything.worker.ts', import.meta.url),
-          { type: 'module' }
-        )
-        samWorkerRef.current = worker
+          new URL("../workers/segmentAnything.worker.ts", import.meta.url),
+          { type: "module" },
+        );
+        samWorkerRef.current = worker;
 
         worker.onmessage = (e) => {
-          const { type, payload } = e.data
-
-          if (type === 'progress') {
-            const { phase, progress } = payload as { phase: string; progress: number }
-            if (phase === 'download') {
-              onProgress(progress)
+          const { type, payload } = e.data;
+
+          if (type === "progress") {
+            const { phase, progress } = payload as {
+              phase: string;
+              progress: number;
+            };
+            if (phase === "download") {
+              onProgress(progress);
             }
-          } else if (type === 'ready') {
-            worker.terminate()
-            samWorkerRef.current = null
-            resolve()
-          } else if (type === 'error') {
-            worker.terminate()
-            samWorkerRef.current = null
-            reject(new Error((payload as { message: string }).message))
+          } else if (type === "ready") {
+            worker.terminate();
+            samWorkerRef.current = null;
+            resolve();
+          } else if (type === "error") {
+            worker.terminate();
+            samWorkerRef.current = null;
+            reject(new Error((payload as { message: string }).message));
           }
-        }
+        };
 
         worker.onerror = (e) => {
-          worker.terminate()
-          samWorkerRef.current = null
-          reject(new Error(e.message))
-        }
+          worker.terminate();
+          samWorkerRef.current = null;
+          reject(new Error(e.message));
+        };
 
         // Send init to trigger model download and caching
-        worker.postMessage({ type: 'init', payload: { id: 0 } })
-      })
-    }
+        worker.postMessage({ type: "init", payload: { id: 0 } });
+      });
+    };
 
     try {
       // Check which models are already cached
       for (let i = 0; i < models.length; i++) {
-        const model = models[i]
-        let isCached: boolean
-        if (model.type === 'worker') {
-          isCached = await checkBgRemoverCached()
-        } else if (model.type === 'sam-worker') {
-          isCached = await checkSamCached()
+        const model = models[i];
+        let isCached: boolean;
+        if (model.type === "worker") {
+          isCached = await checkBgRemoverCached();
+        } else if (model.type === "sam-worker") {
+          isCached = await checkSamCached();
         } else {
-          isCached = await checkModelCached(model.url, model.cacheName)
+          isCached = await checkModelCached(model.url, model.cacheName);
         }
         if (isCached) {
-          setModelDownloadStates(prev => {
-            const newStates = [...prev]
-            newStates[i] = { ...newStates[i], status: 'cached', progress: 100 }
-            return newStates
-          })
+          setModelDownloadStates((prev) => {
+            const newStates = [...prev];
+            newStates[i] = { ...newStates[i], status: "cached", progress: 100 };
+            return newStates;
+          });
         }
       }
 
       // Download each model
       for (let i = 0; i < models.length; i++) {
-        if (signal.aborted) break
+        if (signal.aborted) break;
 
-        const model = models[i]
+        const model = models[i];
 
         // Check if already cached
-        let isCached: boolean
-        if (model.type === 'worker') {
-          isCached = await checkBgRemoverCached()
-        } else if (model.type === 'sam-worker') {
-          isCached = await checkSamCached()
+        let isCached: boolean;
+        if (model.type === "worker") {
+          isCached = await checkBgRemoverCached();
+        } else if (model.type === "sam-worker") {
+          isCached = await checkSamCached();
         } else {
-          isCached = await checkModelCached(model.url, model.cacheName)
+          isCached = await checkModelCached(model.url, model.cacheName);
         }
         if (isCached) {
-          setModelDownloadStates(prev => {
-            const newStates = [...prev]
-            newStates[i] = { ...newStates[i], status: 'cached', progress: 100 }
-            return newStates
-          })
-          continue
+          setModelDownloadStates((prev) => {
+            const newStates = [...prev];
+            newStates[i] = { ...newStates[i], status: "cached", progress: 100 };
+            return newStates;
+          });
+          continue;
         }
 
         // Update to downloading state
-        setModelDownloadStates(prev => {
-          const newStates = [...prev]
-          newStates[i] = { ...newStates[i], status: 'downloading', progress: 0 }
-          return newStates
-        })
+        setModelDownloadStates((prev) => {
+          const newStates = [...prev];
+          newStates[i] = {
+            ...newStates[i],
+            status: "downloading",
+            progress: 0,
+          };
+          return newStates;
+        });
 
         try {
           const updateProgress = (progress: number) => {
-            setModelDownloadStates(prev => {
-              const newStates = [...prev]
-              newStates[i] = { ...newStates[i], progress }
-              return newStates
-            })
+            setModelDownloadStates((prev) => {
+              const newStates = [...prev];
+              newStates[i] = { ...newStates[i], progress };
+              return newStates;
+            });
             // Update overall progress
             const completedCount = models.slice(0, i).filter((_, idx) => {
-              const state = initialStates[idx]
-              return state.status === 'completed' || state.status === 'cached'
-            }).length
-            const currentProgress = progress / 100
-            setOverallProgress(((completedCount + currentProgress) / models.length) * 100)
-          }
-
-          if (model.type === 'worker') {
+              const state = initialStates[idx];
+              return state.status === "completed" || state.status === "cached";
+            }).length;
+            const currentProgress = progress / 100;
+            setOverallProgress(
+              ((completedCount + currentProgress) / models.length) * 100,
+            );
+          };
+
+          if (model.type === "worker") {
             // Download via worker warm-up (Background Remover)
-            await downloadBgRemover(updateProgress)
-          } else if (model.type === 'sam-worker') {
+            await downloadBgRemover(updateProgress);
+          } else if (model.type === "sam-worker") {
             // Download via worker warm-up (Segment Anything)
-            await downloadSam(updateProgress)
+            await downloadSam(updateProgress);
           } else {
             // Download directly
-            await downloadModel(model.url, model.cacheName, updateProgress, signal)
+            await downloadModel(
+              model.url,
+              model.cacheName,
+              updateProgress,
+              signal,
+            );
           }
 
           // Mark as completed
-          setModelDownloadStates(prev => {
-            const newStates = [...prev]
-            newStates[i] = { ...newStates[i], status: 'completed', progress: 100 }
-            return newStates
-          })
+          setModelDownloadStates((prev) => {
+            const newStates = [...prev];
+            newStates[i] = {
+              ...newStates[i],
+              status: "completed",
+              progress: 100,
+            };
+            return newStates;
+          });
         } catch (error) {
-          if (signal.aborted) break
-          setModelDownloadStates(prev => {
-            const newStates = [...prev]
+          if (signal.aborted) break;
+          setModelDownloadStates((prev) => {
+            const newStates = [...prev];
             newStates[i] = {
               ...newStates[i],
-              status: 'error',
-              error: (error as Error).message
-            }
-            return newStates
-          })
+              status: "error",
+              error: (error as Error).message,
+            };
+            return newStates;
+          });
         }
       }
 
       // Refresh cache details
-      await loadCacheDetails()
+      await loadCacheDetails();
 
       if (!signal.aborted) {
-        const hasErrors = modelDownloadStates.some(s => s.status === 'error')
+        const hasErrors = modelDownloadStates.some((s) => s.status === "error");
         if (hasErrors) {
           toast({
-            title: t('settings.cache.downloadPartial'),
-            description: t('settings.cache.downloadPartialDesc'),
-            variant: 'destructive',
-          })
+            title: t("settings.cache.downloadPartial"),
+            description: t("settings.cache.downloadPartialDesc"),
+            variant: "destructive",
+          });
         } else {
           toast({
-            title: t('settings.cache.downloadComplete'),
-            description: t('settings.cache.downloadCompleteDesc'),
-          })
+            title: t("settings.cache.downloadComplete"),
+            description: t("settings.cache.downloadCompleteDesc"),
+          });
         }
       }
     } catch (error) {
       if (!signal.aborted) {
         toast({
-          title: t('common.error'),
+          title: t("common.error"),
           description: (error as Error).message,
-          variant: 'destructive',
-        })
+          variant: "destructive",
+        });
       }
     } finally {
-      setIsDownloadingModels(false)
-      setOverallProgress(100)
-      abortControllerRef.current = null
+      setIsDownloadingModels(false);
+      setOverallProgress(100);
+      abortControllerRef.current = null;
     }
-  }, [t, loadCacheDetails])
+  }, [t, loadCacheDetails]);
 
   // Cancel download
   const handleCancelDownload = useCallback(() => {
     if (abortControllerRef.current) {
-      abortControllerRef.current.abort()
+      abortControllerRef.current.abort();
     }
     // Also terminate workers if running
     if (bgRemoverWorkerRef.current) {
-      bgRemoverWorkerRef.current.terminate()
-      bgRemoverWorkerRef.current = null
+      bgRemoverWorkerRef.current.terminate();
+      bgRemoverWorkerRef.current = null;
     }
     if (samWorkerRef.current) {
-      samWorkerRef.current.terminate()
-      samWorkerRef.current = null
+      samWorkerRef.current.terminate();
+      samWorkerRef.current = null;
     }
-    setIsDownloadingModels(false)
+    setIsDownloadingModels(false);
     toast({
-      title: t('settings.cache.downloadCancelled'),
-      description: t('settings.cache.downloadCancelledDesc'),
-    })
-  }, [t])
+      title: t("settings.cache.downloadCancelled"),
+      description: t("settings.cache.downloadCancelledDesc"),
+    });
+  }, [t]);
 
   // Format file size
   const formatSize = (bytes: number) => {
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  }
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  };
 
   // Get display name from URL
   const getDisplayName = (url: string) => {
     try {
-      const urlObj = new URL(url)
-      const path = urlObj.pathname
-      const filename = path.split('/').pop() || path
-      return filename.length > 40 ? filename.slice(0, 37) + '...' : filename
+      const urlObj = new URL(url);
+      const path = urlObj.pathname;
+      const filename = path.split("/").pop() || path;
+      return filename.length > 40 ? filename.slice(0, 37) + "..." : filename;
     } catch {
-      return url.slice(0, 40)
+      return url.slice(0, 40);
     }
-  }
+  };
 
   // Load settings on mount
   useEffect(() => {
-    loadCacheDetails()
-  }, [loadCacheDetails])
+    loadCacheDetails();
+  }, [loadCacheDetails]);
 
   // Fetch balance when authenticated
   useEffect(() => {
     if (isValidated) {
-      fetchBalance()
+      fetchBalance();
     } else {
-      setBalance(null)
+      setBalance(null);
     }
-  }, [isValidated, fetchBalance])
+  }, [isValidated, fetchBalance]);
 
   // Check for updates on mount (only once per session)
   useEffect(() => {
-    const hasCheckedUpdate = sessionStorage.getItem('wavespeed_update_checked')
+    const hasCheckedUpdate = sessionStorage.getItem("wavespeed_update_checked");
     if (!hasCheckedUpdate) {
       // Delay check slightly to not block initial render
       const timer = setTimeout(() => {
-        handleCheckForUpdates()
-        sessionStorage.setItem('wavespeed_update_checked', 'true')
-      }, 2000)
-      return () => clearTimeout(timer)
+        handleCheckForUpdates();
+        sessionStorage.setItem("wavespeed_update_checked", "true");
+      }, 2000);
+      return () => clearTimeout(timer);
     }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handleSave = async () => {
-    setIsSaving(true)
+    setIsSaving(true);
     try {
-      await setApiKey(inputKey)
-      const isValid = await validateApiKey()
+      await setApiKey(inputKey);
+      const isValid = await validateApiKey();
       if (isValid) {
         toast({
-          title: t('settings.apiKey.saved'),
-          description: t('settings.apiKey.savedDesc'),
-        })
+          title: t("settings.apiKey.saved"),
+          description: t("settings.apiKey.savedDesc"),
+        });
       } else {
         toast({
-          title: t('settings.apiKey.invalid'),
-          description: t('settings.apiKey.invalidDesc'),
-          variant: 'destructive',
-        })
+          title: t("settings.apiKey.invalid"),
+          description: t("settings.apiKey.invalidDesc"),
+          variant: "destructive",
+        });
       }
     } catch {
       toast({
-        title: t('settings.apiKey.error'),
-        description: t('settings.apiKey.errorDesc'),
-        variant: 'destructive',
-      })
+        title: t("settings.apiKey.error"),
+        description: t("settings.apiKey.errorDesc"),
+        variant: "destructive",
+      });
     } finally {
-      setIsSaving(false)
+      setIsSaving(false);
     }
-  }
+  };
 
   const handleClear = async () => {
-    setInputKey('')
-    await setApiKey('')
+    setInputKey("");
+    await setApiKey("");
     toast({
-      title: t('settings.apiKey.cleared'),
-      description: t('settings.apiKey.clearedDesc'),
-    })
-  }
+      title: t("settings.apiKey.cleared"),
+      description: t("settings.apiKey.clearedDesc"),
+    });
+  };
 
   // Render model download status icon
-  const renderStatusIcon = (status: ModelDownloadState['status']) => {
+  const renderStatusIcon = (status: ModelDownloadState["status"]) => {
     switch (status) {
-      case 'pending':
-        return <Circle className="h-4 w-4 text-muted-foreground" />
-      case 'downloading':
-        return <Loader2 className="h-4 w-4 animate-spin text-primary" />
-      case 'completed':
-        return <CheckCircle2 className="h-4 w-4 text-green-500" />
-      case 'cached':
-        return <CheckCircle2 className="h-4 w-4 text-blue-500" />
-      case 'error':
-        return <AlertCircle className="h-4 w-4 text-destructive" />
+      case "pending":
+        return <Circle className="h-4 w-4 text-muted-foreground" />;
+      case "downloading":
+        return <Loader2 className="h-4 w-4 animate-spin text-primary" />;
+      case "completed":
+        return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+      case "cached":
+        return <CheckCircle2 className="h-4 w-4 text-blue-500" />;
+      case "error":
+        return <AlertCircle className="h-4 w-4 text-destructive" />;
     }
-  }
+  };
 
   return (
     <div className="container max-w-2xl py-6 px-4 pt-14 md:pt-4">
       <div className="mb-6">
         <h1 className="text-xl font-bold tracking-tight flex items-center gap-2">
           <Settings className="h-5 w-5 text-primary" />
-          {t('settings.title')}
+          {t("settings.title")}
         </h1>
         <p className="text-muted-foreground text-sm mt-1">
-          {t('settings.mobileDescription')}
+          {t("settings.mobileDescription")}
         </p>
       </div>
 
@@ -854,14 +951,15 @@ export function SettingsPage() {
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle>{t('settings.apiKey.title')}</CardTitle>
+              <CardTitle>{t("settings.apiKey.title")}</CardTitle>
               <CardDescription>
-                {t('settings.apiKey.description')}
+                {t("settings.apiKey.description")}
               </CardDescription>
             </div>
             {apiKey && storeIsValidating && (
               <Badge variant="secondary">
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" /> {t('settings.apiKey.validating')}
+                <Loader2 className="mr-1 h-3 w-3 animate-spin" />{" "}
+                {t("settings.apiKey.validating")}
               </Badge>
             )}
             {apiKey && !storeIsValidating && isValidated && (
@@ -873,15 +971,15 @@ export function SettingsPage() {
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="apiKey">{t('settings.apiKey.label')}</Label>
+            <Label htmlFor="apiKey">{t("settings.apiKey.label")}</Label>
             <div className="flex gap-2">
               <div className="relative flex-1">
                 <Input
                   id="apiKey"
-                  type={showKey ? 'text' : 'password'}
+                  type={showKey ? "text" : "password"}
                   value={inputKey}
                   onChange={(e) => setInputKey(e.target.value)}
-                  placeholder={t('settings.apiKey.placeholder')}
+                  placeholder={t("settings.apiKey.placeholder")}
                   className="pr-10"
                 />
                 <Button
@@ -900,7 +998,7 @@ export function SettingsPage() {
               </div>
             </div>
             <p className="text-xs text-muted-foreground">
-              {t('settings.apiKey.getKey')}{' '}
+              {t("settings.apiKey.getKey")}{" "}
               <a
                 href="https://wavespeed.ai/accesskey"
                 target="_blank"
@@ -917,14 +1015,14 @@ export function SettingsPage() {
               {isSaving ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('settings.apiKey.validating')}
+                  {t("settings.apiKey.validating")}
                 </>
               ) : (
-                t('settings.apiKey.save')
+                t("settings.apiKey.save")
               )}
             </Button>
             <Button variant="outline" onClick={handleClear} disabled={!apiKey}>
-              {t('common.clear')}
+              {t("common.clear")}
             </Button>
           </div>
         </CardContent>
@@ -935,9 +1033,9 @@ export function SettingsPage() {
           <CardHeader>
             <div className="flex items-center justify-between">
               <div>
-                <CardTitle>{t('settings.balance.title')}</CardTitle>
+                <CardTitle>{t("settings.balance.title")}</CardTitle>
                 <CardDescription>
-                  {t('settings.balance.description')}
+                  {t("settings.balance.description")}
                 </CardDescription>
               </div>
               <Button
@@ -946,7 +1044,9 @@ export function SettingsPage() {
                 onClick={fetchBalance}
                 disabled={isLoadingBalance}
               >
-                <RefreshCw className={`h-4 w-4 ${isLoadingBalance ? 'animate-spin' : ''}`} />
+                <RefreshCw
+                  className={`h-4 w-4 ${isLoadingBalance ? "animate-spin" : ""}`}
+                />
               </Button>
             </div>
           </CardHeader>
@@ -958,7 +1058,7 @@ export function SettingsPage() {
                 ) : balance !== null ? (
                   `$${balance.toFixed(2)}`
                 ) : (
-                  '—'
+                  "—"
                 )}
               </span>
             </div>
@@ -968,41 +1068,44 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.appearance.title')}</CardTitle>
+          <CardTitle>{t("settings.appearance.title")}</CardTitle>
           <CardDescription>
-            {t('settings.appearance.description')}
+            {t("settings.appearance.description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="theme">{t('settings.appearance.theme')}</Label>
-            <Select value={theme} onValueChange={(value) => setTheme(value as Theme)}>
+            <Label htmlFor="theme">{t("settings.appearance.theme")}</Label>
+            <Select
+              value={theme}
+              onValueChange={(value) => setTheme(value as Theme)}
+            >
               <SelectTrigger id="theme" className="w-full sm:w-[200px]">
-                <SelectValue placeholder={t('settings.appearance.theme')} />
+                <SelectValue placeholder={t("settings.appearance.theme")} />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="auto">
                   <div className="flex items-center gap-2">
                     <Monitor className="h-4 w-4" />
-                    <span>{t('settings.appearance.themeAuto')}</span>
+                    <span>{t("settings.appearance.themeAuto")}</span>
                   </div>
                 </SelectItem>
                 <SelectItem value="light">
                   <div className="flex items-center gap-2">
                     <Sun className="h-4 w-4" />
-                    <span>{t('settings.appearance.themeLight')}</span>
+                    <span>{t("settings.appearance.themeLight")}</span>
                   </div>
                 </SelectItem>
                 <SelectItem value="dark">
                   <div className="flex items-center gap-2">
                     <Moon className="h-4 w-4" />
-                    <span>{t('settings.appearance.themeDark')}</span>
+                    <span>{t("settings.appearance.themeDark")}</span>
                   </div>
                 </SelectItem>
               </SelectContent>
             </Select>
             <p className="text-xs text-muted-foreground">
-              {t('settings.appearance.themeDesc')}
+              {t("settings.appearance.themeDesc")}
             </p>
           </div>
         </CardContent>
@@ -1010,24 +1113,31 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.language.title')}</CardTitle>
+          <CardTitle>{t("settings.language.title")}</CardTitle>
           <CardDescription>
-            {t('settings.language.description')}
+            {t("settings.language.description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="language">{t('settings.language.label')}</Label>
-            <Select value={languagePreference} onValueChange={handleLanguageChange}>
+            <Label htmlFor="language">{t("settings.language.label")}</Label>
+            <Select
+              value={languagePreference}
+              onValueChange={handleLanguageChange}
+            >
               <SelectTrigger id="language" className="w-full sm:w-[200px]">
-                <SelectValue placeholder={t('settings.language.label')} />
+                <SelectValue placeholder={t("settings.language.label")} />
               </SelectTrigger>
               <SelectContent>
                 {languages.map((lang) => (
                   <SelectItem key={lang.code} value={lang.code}>
                     <div className="flex items-center gap-2">
                       <Globe className="h-4 w-4" />
-                      <span>{lang.code === 'auto' ? t('settings.language.auto') : lang.nativeName}</span>
+                      <span>
+                        {lang.code === "auto"
+                          ? t("settings.language.auto")
+                          : lang.nativeName}
+                      </span>
                     </div>
                   </SelectItem>
                 ))}
@@ -1039,10 +1149,8 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.cache.title')}</CardTitle>
-          <CardDescription>
-            {t('settings.cache.description')}
-          </CardDescription>
+          <CardTitle>{t("settings.cache.title")}</CardTitle>
+          <CardDescription>{t("settings.cache.description")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-center justify-between gap-2">
@@ -1053,13 +1161,15 @@ export function SettingsPage() {
             >
               <Database className="h-4 w-4 text-muted-foreground shrink-0" />
               <div className="min-w-0">
-                <Label className="cursor-pointer text-sm">{t('settings.cache.aiModels')}</Label>
+                <Label className="cursor-pointer text-sm">
+                  {t("settings.cache.aiModels")}
+                </Label>
                 <p className="text-xs text-muted-foreground truncate">
                   {cacheSize !== null
                     ? cacheSize > 0
                       ? formatSize(cacheSize)
-                      : t('settings.cache.empty')
-                    : t('settings.cache.calculating')}
+                      : t("settings.cache.empty")
+                    : t("settings.cache.calculating")}
                 </p>
               </div>
               {cacheSize !== null && cacheSize > 0 && (
@@ -1087,10 +1197,12 @@ export function SettingsPage() {
               <div className="space-y-0.5 min-w-0 flex-1">
                 <div className="flex items-center gap-2">
                   <Download className="h-4 w-4 text-muted-foreground shrink-0" />
-                  <Label className="text-sm">{t('settings.cache.predownload')}</Label>
+                  <Label className="text-sm">
+                    {t("settings.cache.predownload")}
+                  </Label>
                 </div>
                 <p className="text-xs text-muted-foreground truncate">
-                  {t('settings.cache.predownloadDesc')}
+                  {t("settings.cache.predownloadDesc")}
                 </p>
               </div>
               {isDownloadingModels ? (
@@ -1122,18 +1234,25 @@ export function SettingsPage() {
                     <div className="flex items-center justify-between text-sm">
                       <div className="flex items-center gap-2">
                         {renderStatusIcon(model.status)}
-                        <span className={model.status === 'error' ? 'text-destructive' : ''}>
+                        <span
+                          className={
+                            model.status === "error" ? "text-destructive" : ""
+                          }
+                        >
                           {model.name}
                         </span>
                       </div>
                       <span className="text-muted-foreground text-xs">
-                        {model.status === 'cached' && t('settings.cache.alreadyCached')}
-                        {model.status === 'completed' && t('settings.cache.downloaded')}
-                        {model.status === 'downloading' && `${Math.round(model.progress)}%`}
-                        {model.status === 'error' && model.error}
+                        {model.status === "cached" &&
+                          t("settings.cache.alreadyCached")}
+                        {model.status === "completed" &&
+                          t("settings.cache.downloaded")}
+                        {model.status === "downloading" &&
+                          `${Math.round(model.progress)}%`}
+                        {model.status === "error" && model.error}
                       </span>
                     </div>
-                    {model.status === 'downloading' && (
+                    {model.status === "downloading" && (
                       <Progress value={model.progress} className="h-1" />
                     )}
                   </div>
@@ -1143,8 +1262,12 @@ export function SettingsPage() {
                 {isDownloadingModels && (
                   <div className="pt-2 border-t">
                     <div className="flex items-center justify-between text-sm mb-1">
-                      <span className="text-muted-foreground">{t('settings.cache.overallProgress')}</span>
-                      <span className="text-muted-foreground">{Math.round(overallProgress)}%</span>
+                      <span className="text-muted-foreground">
+                        {t("settings.cache.overallProgress")}
+                      </span>
+                      <span className="text-muted-foreground">
+                        {Math.round(overallProgress)}%
+                      </span>
                     </div>
                     <Progress value={overallProgress} />
                   </div>
@@ -1160,19 +1283,19 @@ export function SettingsPage() {
         <DialogContent className="max-w-lg max-h-[80vh] flex flex-col">
           <DialogHeader>
             <DialogTitle className="flex items-center justify-between">
-              <span>{t('settings.cache.title')}</span>
+              <span>{t("settings.cache.title")}</span>
               <span className="text-sm font-normal text-muted-foreground">
                 {formatSize(cacheSize || 0)}
               </span>
             </DialogTitle>
             <DialogDescription className="sr-only">
-              {t('settings.cache.description')}
+              {t("settings.cache.description")}
             </DialogDescription>
           </DialogHeader>
           <div className="flex-1 overflow-auto -mx-6 px-6">
             {cacheItems.length === 0 ? (
               <p className="text-sm text-muted-foreground text-center py-8">
-                {t('settings.cache.empty')}
+                {t("settings.cache.empty")}
               </p>
             ) : (
               <div className="space-y-2">
@@ -1182,10 +1305,16 @@ export function SettingsPage() {
                     className="flex items-center justify-between gap-3 p-2 rounded-md bg-muted/50 group"
                   >
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate" title={item.url}>
+                      <p
+                        className="text-sm font-medium truncate"
+                        title={item.url}
+                      >
                         {getDisplayName(item.url)}
                       </p>
-                      <p className="text-xs text-muted-foreground truncate" title={item.cacheName}>
+                      <p
+                        className="text-xs text-muted-foreground truncate"
+                        title={item.cacheName}
+                      >
                         {item.cacheName}
                       </p>
                     </div>
@@ -1197,7 +1326,9 @@ export function SettingsPage() {
                         variant="ghost"
                         size="icon"
                         className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
-                        onClick={() => handleDeleteCacheItem(item.cacheName, item.url)}
+                        onClick={() =>
+                          handleDeleteCacheItem(item.cacheName, item.url)
+                        }
                         disabled={isDeletingItem === item.url}
                       >
                         {isDeletingItem === item.url ? (
@@ -1225,7 +1356,7 @@ export function SettingsPage() {
                 ) : (
                   <Trash2 className="h-4 w-4 mr-2" />
                 )}
-                {t('settings.cache.clear')}
+                {t("settings.cache.clear")}
               </Button>
             </div>
           )}
@@ -1235,22 +1366,24 @@ export function SettingsPage() {
       {/* Updates Card */}
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.updates.title')}</CardTitle>
-          <CardDescription>
-            {t('settings.updates.description')}
-          </CardDescription>
+          <CardTitle>{t("settings.updates.title")}</CardTitle>
+          <CardDescription>{t("settings.updates.description")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-center justify-between gap-3">
             <div className="space-y-1 min-w-0">
               <p className="text-sm font-medium">
-                {t('settings.about.version')}: {currentVersion}
+                {t("settings.about.version")}: {currentVersion}
               </p>
               {updateInfo && (
                 <p className="text-xs text-muted-foreground truncate">
                   {updateInfo.hasUpdate
-                    ? t('settings.updates.available', { version: updateInfo.latestVersion })
-                    : t('settings.updates.notAvailable', { version: currentVersion })}
+                    ? t("settings.updates.available", {
+                        version: updateInfo.latestVersion,
+                      })
+                    : t("settings.updates.notAvailable", {
+                        version: currentVersion,
+                      })}
                 </p>
               )}
             </div>
@@ -1275,12 +1408,14 @@ export function SettingsPage() {
               <div className="flex items-center gap-2">
                 <Download className="h-4 w-4 text-primary" />
                 <span className="text-sm font-medium">
-                  {t('settings.updates.available', { version: updateInfo.latestVersion })}
+                  {t("settings.updates.available", {
+                    version: updateInfo.latestVersion,
+                  })}
                 </span>
               </div>
               <Button onClick={handleDownloadUpdate}>
                 <ExternalLink className="mr-2 h-4 w-4" />
-                {t('settings.updates.goToRelease')}
+                {t("settings.updates.goToRelease")}
               </Button>
             </div>
           )}
@@ -1289,24 +1424,29 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.about.title')}</CardTitle>
+          <CardTitle>{t("settings.about.title")}</CardTitle>
           <CardDescription>
-            {t('settings.about.mobileDescription')}
+            {t("settings.about.mobileDescription")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <p className="text-sm text-muted-foreground">
-            {t('settings.about.mobileAboutText')}
+            {t("settings.about.mobileAboutText")}
           </p>
           <Button
             variant="outline"
-            onClick={() => window.open('https://github.com/WaveSpeedAI/wavespeed-desktop', '_blank')}
+            onClick={() =>
+              window.open(
+                "https://github.com/WaveSpeedAI/wavespeed-desktop",
+                "_blank",
+              )
+            }
           >
             <Github className="mr-2 h-4 w-4" />
-            {t('settings.about.viewOnGitHub')}
+            {t("settings.about.viewOnGitHub")}
           </Button>
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/mobile/src/pages/VideoConverterPage.tsx b/mobile/src/pages/VideoConverterPage.tsx
index 411b72b1..a97f56e0 100644
--- a/mobile/src/pages/VideoConverterPage.tsx
+++ b/mobile/src/pages/VideoConverterPage.tsx
@@ -1,274 +1,316 @@
-import { useState, useRef, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useMobileDownload } from '@mobile/hooks/useMobileDownload'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Progress } from '@/components/ui/progress'
-import { ArrowLeft, Upload, Video, Download, Loader2, X, FileVideo, AlertCircle } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-type OutputFormat = 'webm' | 'mp4'
-type VideoCodec = 'vp8' | 'vp9' | 'h264' | 'av1'
+import { useState, useRef, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useMobileDownload } from "@mobile/hooks/useMobileDownload";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Progress } from "@/components/ui/progress";
+import {
+  ArrowLeft,
+  Upload,
+  Video,
+  Download,
+  Loader2,
+  X,
+  FileVideo,
+  AlertCircle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type OutputFormat = "webm" | "mp4";
+type VideoCodec = "vp8" | "vp9" | "h264" | "av1";
 
 interface ConversionResult {
-  blob: Blob
-  url: string
-  filename: string
-  codec: VideoCodec
+  blob: Blob;
+  url: string;
+  filename: string;
+  codec: VideoCodec;
 }
 
 export function VideoConverterPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { downloadBlob } = useMobileDownload()
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const resultVideoRef = useRef<HTMLVideoElement>(null)
-
-  const [inputVideo, setInputVideo] = useState<{ file: File; url: string } | null>(null)
-  const [outputFormat, setOutputFormat] = useState<OutputFormat>('webm')
-  const [isConverting, setIsConverting] = useState(false)
-  const [progress, setProgress] = useState(0)
-  const [result, setResult] = useState<ConversionResult | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  const handleFileSelect = useCallback((file: File) => {
-    if (!file.type.startsWith('video/')) {
-      setError(t('freeTools.videoConverter.invalidFile'))
-      return
-    }
-
-    // Clean up previous
-    if (inputVideo?.url) {
-      URL.revokeObjectURL(inputVideo.url)
-    }
-    if (result?.url) {
-      URL.revokeObjectURL(result.url)
-    }
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { downloadBlob } = useMobileDownload();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const resultVideoRef = useRef<HTMLVideoElement>(null);
+
+  const [inputVideo, setInputVideo] = useState<{
+    file: File;
+    url: string;
+  } | null>(null);
+  const [outputFormat, setOutputFormat] = useState<OutputFormat>("webm");
+  const [isConverting, setIsConverting] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [result, setResult] = useState<ConversionResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("video/")) {
+        setError(t("freeTools.videoConverter.invalidFile"));
+        return;
+      }
 
-    setInputVideo({
-      file,
-      url: URL.createObjectURL(file)
-    })
-    setResult(null)
-    setError(null)
-    setProgress(0)
-  }, [inputVideo, result])
-
-  const handleDrop = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    const file = e.dataTransfer.files[0]
-    if (file) {
-      handleFileSelect(file)
-    }
-  }, [handleFileSelect])
+      // Clean up previous
+      if (inputVideo?.url) {
+        URL.revokeObjectURL(inputVideo.url);
+      }
+      if (result?.url) {
+        URL.revokeObjectURL(result.url);
+      }
 
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (file) {
-      handleFileSelect(file)
-    }
-  }, [handleFileSelect])
+      setInputVideo({
+        file,
+        url: URL.createObjectURL(file),
+      });
+      setResult(null);
+      setError(null);
+      setProgress(0);
+    },
+    [inputVideo, result],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      const file = e.dataTransfer.files[0];
+      if (file) {
+        handleFileSelect(file);
+      }
+    },
+    [handleFileSelect],
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        handleFileSelect(file);
+      }
+    },
+    [handleFileSelect],
+  );
 
   const clearInput = useCallback(() => {
     if (inputVideo?.url) {
-      URL.revokeObjectURL(inputVideo.url)
+      URL.revokeObjectURL(inputVideo.url);
     }
     if (result?.url) {
-      URL.revokeObjectURL(result.url)
+      URL.revokeObjectURL(result.url);
     }
-    setInputVideo(null)
-    setResult(null)
-    setError(null)
-    setProgress(0)
+    setInputVideo(null);
+    setResult(null);
+    setError(null);
+    setProgress(0);
     if (fileInputRef.current) {
-      fileInputRef.current.value = ''
+      fileInputRef.current.value = "";
     }
-  }, [inputVideo, result])
+  }, [inputVideo, result]);
 
   const convertVideo = useCallback(async () => {
-    if (!inputVideo) return
+    if (!inputVideo) return;
 
-    setIsConverting(true)
-    setError(null)
-    setProgress(0)
+    setIsConverting(true);
+    setError(null);
+    setProgress(0);
 
     try {
       // Create video element for playback
-      const video = document.createElement('video')
-      video.muted = true
-      video.playsInline = true
+      const video = document.createElement("video");
+      video.muted = true;
+      video.playsInline = true;
 
       // Create canvas for rendering
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')!
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d")!;
 
       // Create audio context for capturing audio
-      const audioContext = new AudioContext()
-      const audioDestination = audioContext.createMediaStreamDestination()
+      const audioContext = new AudioContext();
+      const audioDestination = audioContext.createMediaStreamDestination();
 
       // Wait for video metadata
       await new Promise<void>((resolve, reject) => {
-        video.onloadedmetadata = () => resolve()
-        video.onerror = () => reject(new Error('Failed to load video'))
-        video.src = inputVideo.url
-      })
+        video.onloadedmetadata = () => resolve();
+        video.onerror = () => reject(new Error("Failed to load video"));
+        video.src = inputVideo.url;
+      });
 
       // Set canvas size to match video
-      canvas.width = video.videoWidth
-      canvas.height = video.videoHeight
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
 
-      const duration = video.duration
+      const duration = video.duration;
 
       // Try different codecs based on format
-      const codecsToTry: { codec: VideoCodec; mimeType: string }[] = outputFormat === 'webm'
-        ? [
-            { codec: 'vp9', mimeType: 'video/webm;codecs=vp9' },
-            { codec: 'vp8', mimeType: 'video/webm;codecs=vp8' },
-            { codec: 'av1', mimeType: 'video/webm;codecs=av01' }
-          ]
-        : [
-            { codec: 'h264', mimeType: 'video/mp4;codecs=avc1' },
-            { codec: 'vp9', mimeType: 'video/webm;codecs=vp9' }
-          ]
-
-      let selectedCodec: VideoCodec | null = null
-      let mimeType: string | null = null
+      const codecsToTry: { codec: VideoCodec; mimeType: string }[] =
+        outputFormat === "webm"
+          ? [
+              { codec: "vp9", mimeType: "video/webm;codecs=vp9" },
+              { codec: "vp8", mimeType: "video/webm;codecs=vp8" },
+              { codec: "av1", mimeType: "video/webm;codecs=av01" },
+            ]
+          : [
+              { codec: "h264", mimeType: "video/mp4;codecs=avc1" },
+              { codec: "vp9", mimeType: "video/webm;codecs=vp9" },
+            ];
+
+      let selectedCodec: VideoCodec | null = null;
+      let mimeType: string | null = null;
 
       for (const { codec, mimeType: mime } of codecsToTry) {
         if (MediaRecorder.isTypeSupported(mime)) {
-          selectedCodec = codec
-          mimeType = mime
-          break
+          selectedCodec = codec;
+          mimeType = mime;
+          break;
         }
       }
 
       if (!mimeType || !selectedCodec) {
-        throw new Error('No supported video codec found')
+        throw new Error("No supported video codec found");
       }
 
       // Create combined stream (video from canvas + audio from video)
-      const canvasStream = canvas.captureStream(30)
+      const canvasStream = canvas.captureStream(30);
       const combinedStream = new MediaStream([
         ...canvasStream.getVideoTracks(),
-        ...audioDestination.stream.getAudioTracks()
-      ])
+        ...audioDestination.stream.getAudioTracks(),
+      ]);
 
       // Create MediaRecorder
       const recorder = new MediaRecorder(combinedStream, {
         mimeType,
-        videoBitsPerSecond: 5000000
-      })
+        videoBitsPerSecond: 5000000,
+      });
 
-      const chunks: Blob[] = []
+      const chunks: Blob[] = [];
       recorder.ondataavailable = (e) => {
         if (e.data.size > 0) {
-          chunks.push(e.data)
+          chunks.push(e.data);
         }
-      }
+      };
 
       // Connect video audio to recorder
-      let audioSourceConnected = false
+      let audioSourceConnected = false;
       video.onplay = () => {
         if (!audioSourceConnected) {
           try {
-            const source = audioContext.createMediaElementSource(video)
-            source.connect(audioDestination)
-            audioSourceConnected = true
+            const source = audioContext.createMediaElementSource(video);
+            source.connect(audioDestination);
+            audioSourceConnected = true;
           } catch {
             // Already connected or no audio
           }
         }
-      }
+      };
 
       // Start recording
-      recorder.start(100)
+      recorder.start(100);
 
       // Draw frames to canvas in real-time
-      let animationId: number
+      let animationId: number;
       const drawFrame = () => {
         if (video.readyState >= 2) {
-          ctx.drawImage(video, 0, 0)
+          ctx.drawImage(video, 0, 0);
         }
 
         // Update progress
-        const currentProgress = (video.currentTime / duration) * 100
-        setProgress(Math.min(95, Math.round(currentProgress)))
+        const currentProgress = (video.currentTime / duration) * 100;
+        setProgress(Math.min(95, Math.round(currentProgress)));
 
         if (!video.ended && !video.paused) {
-          animationId = requestAnimationFrame(drawFrame)
+          animationId = requestAnimationFrame(drawFrame);
         }
-      }
+      };
 
       // Play video and start drawing
-      video.currentTime = 0
-      await video.play()
-      drawFrame()
+      video.currentTime = 0;
+      await video.play();
+      drawFrame();
 
       // Wait for video to end
       await new Promise<void>((resolve) => {
         video.onended = () => {
-          cancelAnimationFrame(animationId)
-          resolve()
-        }
-      })
+          cancelAnimationFrame(animationId);
+          resolve();
+        };
+      });
 
       // Stop recording
-      recorder.stop()
+      recorder.stop();
 
       // Wait for recorder to finish
       await new Promise<void>((resolve) => {
-        recorder.onstop = () => resolve()
-      })
+        recorder.onstop = () => resolve();
+      });
 
       // Cleanup
-      await audioContext.close()
-      video.remove()
-      canvas.remove()
+      await audioContext.close();
+      video.remove();
+      canvas.remove();
 
       // Create result blob
-      const resultBlob = new Blob(chunks, { type: mimeType })
-      const resultUrl = URL.createObjectURL(resultBlob)
+      const resultBlob = new Blob(chunks, { type: mimeType });
+      const resultUrl = URL.createObjectURL(resultBlob);
 
       // Generate filename
-      const baseName = inputVideo.file.name.replace(/\.[^/.]+$/, '')
-      const ext = outputFormat === 'mp4' && selectedCodec !== 'h264' ? 'webm' : outputFormat
-      const filename = `${baseName}_converted.${ext}`
+      const baseName = inputVideo.file.name.replace(/\.[^/.]+$/, "");
+      const ext =
+        outputFormat === "mp4" && selectedCodec !== "h264"
+          ? "webm"
+          : outputFormat;
+      const filename = `${baseName}_converted.${ext}`;
 
       setResult({
         blob: resultBlob,
         url: resultUrl,
         filename,
-        codec: selectedCodec
-      })
-      setProgress(100)
-
+        codec: selectedCodec,
+      });
+      setProgress(100);
     } catch (err) {
-      setError((err as Error).message)
+      setError((err as Error).message);
     } finally {
-      setIsConverting(false)
+      setIsConverting(false);
     }
-  }, [inputVideo, outputFormat])
+  }, [inputVideo, outputFormat]);
 
   const downloadResult = useCallback(async () => {
-    if (!result) return
-    await downloadBlob(result.blob, result.filename)
-  }, [result, downloadBlob])
+    if (!result) return;
+    await downloadBlob(result.blob, result.filename);
+  }, [result, downloadBlob]);
 
   return (
     <div className="container mx-auto p-4 max-w-4xl space-y-6">
       {/* Header with back button */}
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" onClick={() => navigate('/free-tools')}>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/free-tools")}
+        >
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.videoConverter.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.videoConverter.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.videoConverter.description')}
+            {t("freeTools.videoConverter.description")}
           </p>
         </div>
       </div>
@@ -278,10 +320,10 @@ export function VideoConverterPage() {
         <CardHeader>
           <CardTitle className="text-lg flex items-center gap-2">
             <Upload className="h-5 w-5" />
-            {t('freeTools.videoConverter.inputVideo')}
+            {t("freeTools.videoConverter.inputVideo")}
           </CardTitle>
           <CardDescription>
-            {t('freeTools.videoConverter.selectVideoDesc')}
+            {t("freeTools.videoConverter.selectVideoDesc")}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -289,7 +331,7 @@ export function VideoConverterPage() {
             <div
               className={cn(
                 "border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors",
-                "hover:border-primary hover:bg-primary/5"
+                "hover:border-primary hover:bg-primary/5",
               )}
               onClick={() => fileInputRef.current?.click()}
               onDrop={handleDrop}
@@ -297,10 +339,10 @@ export function VideoConverterPage() {
             >
               <Video className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
               <p className="text-sm text-muted-foreground mb-2">
-                {t('freeTools.videoConverter.selectVideo')}
+                {t("freeTools.videoConverter.selectVideo")}
               </p>
               <p className="text-xs text-muted-foreground">
-                {t('freeTools.videoConverter.supportedFormats')}
+                {t("freeTools.videoConverter.supportedFormats")}
               </p>
             </div>
           ) : (
@@ -315,8 +357,11 @@ export function VideoConverterPage() {
                   preload="metadata"
                   onLoadedMetadata={() => {
                     // Force show first frame on mobile
-                    if (videoRef.current && videoRef.current.currentTime === 0) {
-                      videoRef.current.currentTime = 0.001
+                    if (
+                      videoRef.current &&
+                      videoRef.current.currentTime === 0
+                    ) {
+                      videoRef.current.currentTime = 0.001;
                     }
                   }}
                 />
@@ -332,7 +377,9 @@ export function VideoConverterPage() {
               <div className="flex items-center gap-2 text-sm text-muted-foreground">
                 <FileVideo className="h-4 w-4" />
                 <span>{inputVideo.file.name}</span>
-                <span className="text-xs">({(inputVideo.file.size / 1024 / 1024).toFixed(2)} MB)</span>
+                <span className="text-xs">
+                  ({(inputVideo.file.size / 1024 / 1024).toFixed(2)} MB)
+                </span>
               </div>
             </div>
           )}
@@ -350,12 +397,15 @@ export function VideoConverterPage() {
       {inputVideo && (
         <Card>
           <CardHeader>
-            <CardTitle className="text-lg">{t('common.settings')}</CardTitle>
+            <CardTitle className="text-lg">{t("common.settings")}</CardTitle>
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="space-y-2">
-              <Label>{t('freeTools.videoConverter.outputFormat')}</Label>
-              <Select value={outputFormat} onValueChange={(v) => setOutputFormat(v as OutputFormat)}>
+              <Label>{t("freeTools.videoConverter.outputFormat")}</Label>
+              <Select
+                value={outputFormat}
+                onValueChange={(v) => setOutputFormat(v as OutputFormat)}
+              >
                 <SelectTrigger>
                   <SelectValue />
                 </SelectTrigger>
@@ -374,17 +424,19 @@ export function VideoConverterPage() {
               {isConverting ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('freeTools.videoConverter.converting')}
+                  {t("freeTools.videoConverter.converting")}
                 </>
               ) : (
-                t('freeTools.videoConverter.convert')
+                t("freeTools.videoConverter.convert")
               )}
             </Button>
 
             {isConverting && (
               <div className="space-y-2">
                 <Progress value={progress} />
-                <p className="text-sm text-center text-muted-foreground">{progress}%</p>
+                <p className="text-sm text-center text-muted-foreground">
+                  {progress}%
+                </p>
               </div>
             )}
 
@@ -404,10 +456,11 @@ export function VideoConverterPage() {
           <CardHeader>
             <CardTitle className="text-lg flex items-center gap-2">
               <Download className="h-5 w-5" />
-              {t('freeTools.videoConverter.result')}
+              {t("freeTools.videoConverter.result")}
             </CardTitle>
             <CardDescription>
-              {t('freeTools.videoConverter.codecUsed')}: {result.codec.toUpperCase()}
+              {t("freeTools.videoConverter.codecUsed")}:{" "}
+              {result.codec.toUpperCase()}
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
@@ -420,24 +473,28 @@ export function VideoConverterPage() {
                 playsInline
                 preload="metadata"
                 onLoadedMetadata={() => {
-                  if (resultVideoRef.current && resultVideoRef.current.currentTime === 0) {
-                    resultVideoRef.current.currentTime = 0.001
+                  if (
+                    resultVideoRef.current &&
+                    resultVideoRef.current.currentTime === 0
+                  ) {
+                    resultVideoRef.current.currentTime = 0.001;
                   }
                 }}
               />
             </div>
             <div className="space-y-3">
               <div className="text-sm text-muted-foreground text-center">
-                {result.filename} ({(result.blob.size / 1024 / 1024).toFixed(2)} MB)
+                {result.filename} ({(result.blob.size / 1024 / 1024).toFixed(2)}{" "}
+                MB)
               </div>
               <Button className="w-full" onClick={downloadResult}>
                 <Download className="mr-2 h-4 w-4" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             </div>
           </CardContent>
         </Card>
       )}
     </div>
-  )
+  );
 }
diff --git a/mobile/src/platform/index.ts b/mobile/src/platform/index.ts
index b9a6122c..ecffe015 100644
--- a/mobile/src/platform/index.ts
+++ b/mobile/src/platform/index.ts
@@ -4,181 +4,194 @@
  * Includes fallbacks for localhost development mode
  */
 
-import { Preferences } from '@capacitor/preferences'
-import { Filesystem, Directory } from '@capacitor/filesystem'
-import { Browser } from '@capacitor/browser'
-import { Share } from '@capacitor/share'
-import { App } from '@capacitor/app'
-import { CapacitorHttp } from '@capacitor/core'
-import { Capacitor } from '@capacitor/core'
+import { Preferences } from "@capacitor/preferences";
+import { Filesystem, Directory } from "@capacitor/filesystem";
+import { Browser } from "@capacitor/browser";
+import { Share } from "@capacitor/share";
+import { App } from "@capacitor/app";
+import { CapacitorHttp } from "@capacitor/core";
+import { Capacitor } from "@capacitor/core";
 
 // Check if running in native Capacitor environment
-const isNative = Capacitor.isNativePlatform()
+const isNative = Capacitor.isNativePlatform();
 
 // Types
-export type AssetType = 'image' | 'video' | 'audio' | 'text'
+export type AssetType = "image" | "video" | "audio" | "text";
 
 export interface AssetMetadata {
-  id: string
-  filePath: string
-  fileName: string
-  type: AssetType
-  modelSlug: string
-  createdAt: string
-  tags: string[]
-  isFavorite: boolean
-  previewUrl?: string
+  id: string;
+  filePath: string;
+  fileName: string;
+  type: AssetType;
+  modelSlug: string;
+  createdAt: string;
+  tags: string[];
+  isFavorite: boolean;
+  previewUrl?: string;
 }
 
 export interface SaveAssetResult {
-  success: boolean
-  filePath?: string
-  error?: string
+  success: boolean;
+  filePath?: string;
+  error?: string;
 }
 
 export interface DeleteAssetResult {
-  success: boolean
-  error?: string
+  success: boolean;
+  error?: string;
 }
 
 export interface DeleteAssetsBulkResult {
-  success: boolean
-  deletedCount: number
-  errors: string[]
+  success: boolean;
+  deletedCount: number;
+  errors: string[];
 }
 
 export interface DownloadResult {
-  success: boolean
-  filePath?: string
-  error?: string
+  success: boolean;
+  filePath?: string;
+  error?: string;
 }
 
 export interface AppSettings {
-  theme: 'auto' | 'dark' | 'light'
-  language: string
-  autoSaveAssets: boolean
-  assetsDirectory: string
+  theme: "auto" | "dark" | "light";
+  language: string;
+  autoSaveAssets: boolean;
+  assetsDirectory: string;
 }
 
 // Storage keys
 const KEYS = {
-  API_KEY: 'wavespeed_api_key',
-  SETTINGS: 'wavespeed_settings',
-  ASSETS_METADATA: 'wavespeed_assets_metadata'
-}
+  API_KEY: "wavespeed_api_key",
+  SETTINGS: "wavespeed_settings",
+  ASSETS_METADATA: "wavespeed_assets_metadata",
+};
 
 // Default settings
 const DEFAULT_SETTINGS: AppSettings = {
-  theme: 'auto',
-  language: 'en',
+  theme: "auto",
+  language: "en",
   autoSaveAssets: true,
-  assetsDirectory: 'WaveSpeed'
-}
+  assetsDirectory: "WaveSpeed",
+};
 
 // Platform Service Interface
 export interface PlatformService {
   // Storage
-  getApiKey(): Promise<string | null>
-  setApiKey(apiKey: string): Promise<void>
-  getSettings(): Promise<AppSettings>
-  setSettings(settings: Partial<AppSettings>): Promise<void>
-  clearAllData(): Promise<void>
+  getApiKey(): Promise<string | null>;
+  setApiKey(apiKey: string): Promise<void>;
+  getSettings(): Promise<AppSettings>;
+  setSettings(settings: Partial<AppSettings>): Promise<void>;
+  clearAllData(): Promise<void>;
 
   // File operations
-  saveAsset(url: string, type: AssetType, fileName: string, subDir: string): Promise<SaveAssetResult>
-  deleteAsset(filePath: string): Promise<DeleteAssetResult>
-  deleteAssetsBulk(filePaths: string[]): Promise<DeleteAssetsBulkResult>
-  getAssetsMetadata(): Promise<AssetMetadata[]>
-  saveAssetsMetadata(metadata: AssetMetadata[]): Promise<void>
-  checkFileExists(filePath: string): Promise<boolean>
-  getDefaultAssetsDirectory(): Promise<string>
+  saveAsset(
+    url: string,
+    type: AssetType,
+    fileName: string,
+    subDir: string,
+  ): Promise<SaveAssetResult>;
+  deleteAsset(filePath: string): Promise<DeleteAssetResult>;
+  deleteAssetsBulk(filePaths: string[]): Promise<DeleteAssetsBulkResult>;
+  getAssetsMetadata(): Promise<AssetMetadata[]>;
+  saveAssetsMetadata(metadata: AssetMetadata[]): Promise<void>;
+  checkFileExists(filePath: string): Promise<boolean>;
+  getDefaultAssetsDirectory(): Promise<string>;
 
   // Download/Share
-  downloadFile(url: string, filename: string): Promise<DownloadResult>
-  shareAsset(filePath: string): Promise<void>
+  downloadFile(url: string, filename: string): Promise<DownloadResult>;
+  shareAsset(filePath: string): Promise<void>;
 
   // External links
-  openExternal(url: string): Promise<void>
+  openExternal(url: string): Promise<void>;
 
   // Platform info
-  getPlatform(): 'electron' | 'capacitor' | 'web'
-  getAppVersion(): Promise<string>
-  isMobile(): boolean
+  getPlatform(): "electron" | "capacitor" | "web";
+  getAppVersion(): Promise<string>;
+  isMobile(): boolean;
 
   // HTTP proxy for CORS-free image loading
-  fetchImageAsDataUrl(url: string): Promise<string | null>
+  fetchImageAsDataUrl(url: string): Promise<string | null>;
 
   // Clipboard operations
-  copyToClipboard(text: string): Promise<boolean>
+  copyToClipboard(text: string): Promise<boolean>;
 
   // Simple key-value storage (for language preference, etc.)
-  getItem(key: string): Promise<string | null>
-  setItem(key: string, value: string): Promise<void>
-  removeItem(key: string): Promise<void>
+  getItem(key: string): Promise<string | null>;
+  setItem(key: string, value: string): Promise<void>;
+  removeItem(key: string): Promise<void>;
 }
 
 // Capacitor Implementation
 class CapacitorPlatformService implements PlatformService {
   // Storage
   async getApiKey(): Promise<string | null> {
-    const { value } = await Preferences.get({ key: KEYS.API_KEY })
-    return value
+    const { value } = await Preferences.get({ key: KEYS.API_KEY });
+    return value;
   }
 
   async setApiKey(apiKey: string): Promise<void> {
-    await Preferences.set({ key: KEYS.API_KEY, value: apiKey })
+    await Preferences.set({ key: KEYS.API_KEY, value: apiKey });
   }
 
   async getSettings(): Promise<AppSettings> {
-    const { value } = await Preferences.get({ key: KEYS.SETTINGS })
+    const { value } = await Preferences.get({ key: KEYS.SETTINGS });
     if (value) {
-      return { ...DEFAULT_SETTINGS, ...JSON.parse(value) }
+      return { ...DEFAULT_SETTINGS, ...JSON.parse(value) };
     }
-    return DEFAULT_SETTINGS
+    return DEFAULT_SETTINGS;
   }
 
   async setSettings(settings: Partial<AppSettings>): Promise<void> {
-    const current = await this.getSettings()
-    const updated = { ...current, ...settings }
-    await Preferences.set({ key: KEYS.SETTINGS, value: JSON.stringify(updated) })
+    const current = await this.getSettings();
+    const updated = { ...current, ...settings };
+    await Preferences.set({
+      key: KEYS.SETTINGS,
+      value: JSON.stringify(updated),
+    });
   }
 
   async clearAllData(): Promise<void> {
-    await Preferences.clear()
+    await Preferences.clear();
   }
 
   // File operations
-  async saveAsset(url: string, type: AssetType, fileName: string, subDir: string): Promise<SaveAssetResult> {
+  async saveAsset(
+    url: string,
+    type: AssetType,
+    fileName: string,
+    subDir: string,
+  ): Promise<SaveAssetResult> {
     try {
       // For blob URLs, we need to fetch and convert to base64
-      const response = await fetch(url)
-      const blob = await response.blob()
-      const base64 = await this.blobToBase64(blob)
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const base64 = await this.blobToBase64(blob);
 
-      const directory = `WaveSpeed/${subDir}`
+      const directory = `WaveSpeed/${subDir}`;
 
       // Ensure directory exists
       try {
         await Filesystem.mkdir({
           path: directory,
           directory: Directory.Documents,
-          recursive: true
-        })
+          recursive: true,
+        });
       } catch {
         // Directory might already exist
       }
 
-      const filePath = `${directory}/${fileName}`
+      const filePath = `${directory}/${fileName}`;
 
       await Filesystem.writeFile({
         path: filePath,
         data: base64,
-        directory: Directory.Documents
-      })
+        directory: Directory.Documents,
+      });
 
-      return { success: true, filePath }
+      return { success: true, filePath };
     } catch (error) {
-      return { success: false, error: (error as Error).message }
+      return { success: false, error: (error as Error).message };
     }
   }
 
@@ -186,56 +199,59 @@ class CapacitorPlatformService implements PlatformService {
     try {
       await Filesystem.deleteFile({
         path: filePath,
-        directory: Directory.Documents
-      })
-      return { success: true }
+        directory: Directory.Documents,
+      });
+      return { success: true };
     } catch (error) {
-      return { success: false, error: (error as Error).message }
+      return { success: false, error: (error as Error).message };
     }
   }
 
   async deleteAssetsBulk(filePaths: string[]): Promise<DeleteAssetsBulkResult> {
-    const errors: string[] = []
-    let deletedCount = 0
+    const errors: string[] = [];
+    let deletedCount = 0;
 
     for (const filePath of filePaths) {
-      const result = await this.deleteAsset(filePath)
+      const result = await this.deleteAsset(filePath);
       if (result.success) {
-        deletedCount++
+        deletedCount++;
       } else if (result.error) {
-        errors.push(result.error)
+        errors.push(result.error);
       }
     }
 
-    return { success: errors.length === 0, deletedCount, errors }
+    return { success: errors.length === 0, deletedCount, errors };
   }
 
   async getAssetsMetadata(): Promise<AssetMetadata[]> {
-    const { value } = await Preferences.get({ key: KEYS.ASSETS_METADATA })
+    const { value } = await Preferences.get({ key: KEYS.ASSETS_METADATA });
     if (value) {
-      return JSON.parse(value)
+      return JSON.parse(value);
     }
-    return []
+    return [];
   }
 
   async saveAssetsMetadata(metadata: AssetMetadata[]): Promise<void> {
-    await Preferences.set({ key: KEYS.ASSETS_METADATA, value: JSON.stringify(metadata) })
+    await Preferences.set({
+      key: KEYS.ASSETS_METADATA,
+      value: JSON.stringify(metadata),
+    });
   }
 
   async checkFileExists(filePath: string): Promise<boolean> {
     try {
       await Filesystem.stat({
         path: filePath,
-        directory: Directory.Documents
-      })
-      return true
+        directory: Directory.Documents,
+      });
+      return true;
     } catch {
-      return false
+      return false;
     }
   }
 
   async getDefaultAssetsDirectory(): Promise<string> {
-    return 'Documents/WaveSpeed'
+    return "Documents/WaveSpeed";
   }
 
   // Download/Share
@@ -246,64 +262,64 @@ class CapacitorPlatformService implements PlatformService {
         // Use CapacitorHttp to fetch the file (bypasses CORS)
         const response = await CapacitorHttp.get({
           url,
-          responseType: 'blob'
-        })
+          responseType: "blob",
+        });
 
         if (response.status !== 200) {
-          return { success: false, error: `HTTP ${response.status}` }
+          return { success: false, error: `HTTP ${response.status}` };
         }
 
         // The response.data is already base64 when responseType is 'blob'
-        const base64 = response.data as string
+        const base64 = response.data as string;
 
         // Ensure Downloads directory exists
-        const directory = 'Downloads'
+        const directory = "Downloads";
         try {
           await Filesystem.mkdir({
             path: directory,
             directory: Directory.Documents,
-            recursive: true
-          })
+            recursive: true,
+          });
         } catch {
           // Directory might already exist
         }
 
-        const filePath = `${directory}/${filename}`
+        const filePath = `${directory}/${filename}`;
 
         await Filesystem.writeFile({
           path: filePath,
           data: base64,
-          directory: Directory.Documents
-        })
+          directory: Directory.Documents,
+        });
 
-        return { success: true, filePath }
+        return { success: true, filePath };
       } catch (error) {
-        return { success: false, error: (error as Error).message }
+        return { success: false, error: (error as Error).message };
       }
     }
 
     // Web fallback: use browser download
     try {
-      const response = await fetch(url, { mode: 'cors' })
-      const blob = await response.blob()
-      const blobUrl = URL.createObjectURL(blob)
-
-      const link = document.createElement('a')
-      link.href = blobUrl
-      link.download = filename
-      link.style.display = 'none'
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
+      const response = await fetch(url, { mode: "cors" });
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = filename;
+      link.style.display = "none";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
 
       // Clean up blob URL after a short delay
-      setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
 
-      return { success: true, filePath: filename }
+      return { success: true, filePath: filename };
     } catch (error) {
       // Final fallback: open in new tab
-      window.open(url, '_blank')
-      return { success: true, filePath: url }
+      window.open(url, "_blank");
+      return { success: true, filePath: url };
     }
   }
 
@@ -311,46 +327,48 @@ class CapacitorPlatformService implements PlatformService {
     try {
       const file = await Filesystem.getUri({
         path: filePath,
-        directory: Directory.Documents
-      })
+        directory: Directory.Documents,
+      });
 
       await Share.share({
-        url: file.uri
-      })
+        url: file.uri,
+      });
     } catch (error) {
-      console.error('Share failed:', error)
+      console.error("Share failed:", error);
     }
   }
 
   // External links
   async openExternal(url: string): Promise<void> {
     try {
-      await Browser.open({ url })
+      await Browser.open({ url });
     } catch {
       // Fallback for web
-      window.open(url, '_blank', 'noopener,noreferrer')
+      window.open(url, "_blank", "noopener,noreferrer");
     }
   }
 
   // Platform info
-  getPlatform(): 'electron' | 'capacitor' | 'web' {
-    return isNative ? 'capacitor' : 'web'
+  getPlatform(): "electron" | "capacitor" | "web" {
+    return isNative ? "capacitor" : "web";
   }
 
   async getAppVersion(): Promise<string> {
     try {
-      const info = await App.getInfo()
-      return info.version
+      const info = await App.getInfo();
+      return info.version;
     } catch {
-      return '1.0.0'
+      return "1.0.0";
     }
   }
 
   isMobile(): boolean {
     // In native mode, always true
-    if (isNative) return true
+    if (isNative) return true;
     // In web mode, check if it's a mobile browser
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    );
   }
 
   // HTTP proxy for CORS-free image loading
@@ -360,47 +378,48 @@ class CapacitorPlatformService implements PlatformService {
       try {
         const response = await CapacitorHttp.get({
           url,
-          responseType: 'blob'
-        })
+          responseType: "blob",
+        });
 
         if (response.status !== 200) {
-          console.error('Failed to fetch image:', response.status)
-          return null
+          console.error("Failed to fetch image:", response.status);
+          return null;
         }
 
         // The response.data is a base64 string when responseType is 'blob'
-        const base64Data = response.data as string
+        const base64Data = response.data as string;
 
         // Determine content type from response headers or URL
-        const contentType = response.headers['content-type'] ||
+        const contentType =
+          response.headers["content-type"] ||
           this.getContentTypeFromUrl(url) ||
-          'image/jpeg'
+          "image/jpeg";
 
-        return `data:${contentType};base64,${base64Data}`
+        return `data:${contentType};base64,${base64Data}`;
       } catch (error) {
-        console.error('Failed to fetch image as data URL:', error)
-        return null
+        console.error("Failed to fetch image as data URL:", error);
+        return null;
       }
     }
 
     // In web mode, try regular fetch (may have CORS issues in production)
     try {
-      const response = await fetch(url, { mode: 'cors' })
+      const response = await fetch(url, { mode: "cors" });
       if (!response.ok) {
-        console.error('Failed to fetch image:', response.status)
-        return null
+        console.error("Failed to fetch image:", response.status);
+        return null;
       }
-      const blob = await response.blob()
+      const blob = await response.blob();
       return new Promise((resolve) => {
-        const reader = new FileReader()
-        reader.onloadend = () => resolve(reader.result as string)
-        reader.onerror = () => resolve(null)
-        reader.readAsDataURL(blob)
-      })
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result as string);
+        reader.onerror = () => resolve(null);
+        reader.readAsDataURL(blob);
+      });
     } catch (error) {
-      console.error('Failed to fetch image as data URL (web fallback):', error)
+      console.error("Failed to fetch image as data URL (web fallback):", error);
       // Return the original URL as fallback for localhost development
-      return url
+      return url;
     }
   }
 
@@ -409,102 +428,102 @@ class CapacitorPlatformService implements PlatformService {
     try {
       // Try modern Clipboard API first
       if (navigator.clipboard && navigator.clipboard.writeText) {
-        await navigator.clipboard.writeText(text)
-        return true
+        await navigator.clipboard.writeText(text);
+        return true;
       }
       // Fallback for older devices
-      return this.copyToClipboardFallback(text)
+      return this.copyToClipboardFallback(text);
     } catch {
-      return this.copyToClipboardFallback(text)
+      return this.copyToClipboardFallback(text);
     }
   }
 
   private copyToClipboardFallback(text: string): boolean {
     try {
-      const textArea = document.createElement('textarea')
-      textArea.value = text
-      textArea.style.position = 'fixed'
-      textArea.style.left = '-999999px'
-      textArea.style.top = '-999999px'
-      document.body.appendChild(textArea)
-      textArea.focus()
-      textArea.select()
-      const result = document.execCommand('copy')
-      document.body.removeChild(textArea)
-      return result
+      const textArea = document.createElement("textarea");
+      textArea.value = text;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      textArea.style.top = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      const result = document.execCommand("copy");
+      document.body.removeChild(textArea);
+      return result;
     } catch {
-      return false
+      return false;
     }
   }
 
   // Simple key-value storage using Capacitor Preferences
   async getItem(key: string): Promise<string | null> {
     try {
-      const { value } = await Preferences.get({ key })
-      return value
+      const { value } = await Preferences.get({ key });
+      return value;
     } catch {
       // Fallback to localStorage for web
-      return localStorage.getItem(key)
+      return localStorage.getItem(key);
     }
   }
 
   async setItem(key: string, value: string): Promise<void> {
     try {
-      await Preferences.set({ key, value })
+      await Preferences.set({ key, value });
     } catch {
       // Fallback to localStorage for web
-      localStorage.setItem(key, value)
+      localStorage.setItem(key, value);
     }
   }
 
   async removeItem(key: string): Promise<void> {
     try {
-      await Preferences.remove({ key })
+      await Preferences.remove({ key });
     } catch {
       // Fallback to localStorage for web
-      localStorage.removeItem(key)
+      localStorage.removeItem(key);
     }
   }
 
   private getContentTypeFromUrl(url: string): string | null {
-    const ext = url.split('.').pop()?.toLowerCase().split('?')[0]
+    const ext = url.split(".").pop()?.toLowerCase().split("?")[0];
     const mimeTypes: Record<string, string> = {
-      'jpg': 'image/jpeg',
-      'jpeg': 'image/jpeg',
-      'png': 'image/png',
-      'gif': 'image/gif',
-      'webp': 'image/webp',
-      'svg': 'image/svg+xml',
-      'mp4': 'video/mp4',
-      'webm': 'video/webm',
-      'mov': 'video/quicktime'
-    }
-    return ext ? mimeTypes[ext] || null : null
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      png: "image/png",
+      gif: "image/gif",
+      webp: "image/webp",
+      svg: "image/svg+xml",
+      mp4: "video/mp4",
+      webm: "video/webm",
+      mov: "video/quicktime",
+    };
+    return ext ? mimeTypes[ext] || null : null;
   }
 
   // Helper methods
   private blobToBase64(blob: Blob): Promise<string> {
     return new Promise((resolve, reject) => {
-      const reader = new FileReader()
+      const reader = new FileReader();
       reader.onloadend = () => {
-        const base64 = reader.result as string
+        const base64 = reader.result as string;
         // Remove data URL prefix
-        resolve(base64.split(',')[1])
-      }
-      reader.onerror = reject
-      reader.readAsDataURL(blob)
-    })
+        resolve(base64.split(",")[1]);
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
   }
 }
 
 // Singleton instance
-let platformService: PlatformService | null = null
+let platformService: PlatformService | null = null;
 
 export function getPlatformService(): PlatformService {
   if (!platformService) {
-    platformService = new CapacitorPlatformService()
+    platformService = new CapacitorPlatformService();
   }
-  return platformService
+  return platformService;
 }
 
-export default getPlatformService
+export default getPlatformService;
diff --git a/mobile/src/stores/predictionInputsStore.ts b/mobile/src/stores/predictionInputsStore.ts
index 1db24cc2..091fc347 100644
--- a/mobile/src/stores/predictionInputsStore.ts
+++ b/mobile/src/stores/predictionInputsStore.ts
@@ -1,115 +1,161 @@
-import { create } from 'zustand'
+import { create } from "zustand";
 
-const STORAGE_KEY = 'wavespeed_prediction_inputs'
-const MAX_ENTRIES = 10000 // Keep last 10000 predictions
-const ARCHIVE_AGE_DAYS = 7 // Entries older than 7 days are considered archived
+const STORAGE_KEY = "wavespeed_prediction_inputs";
+const MAX_ENTRIES = 10000; // Keep last 10000 predictions
+const ARCHIVE_AGE_DAYS = 7; // Entries older than 7 days are considered archived
 
 interface PredictionInputEntry {
-  predictionId: string
-  modelId: string
-  modelName: string
-  inputs: Record<string, unknown>
-  createdAt: string
+  predictionId: string;
+  modelId: string;
+  modelName: string;
+  inputs: Record<string, unknown>;
+  createdAt: string;
 }
 
 interface PredictionInputsState {
-  entries: Map<string, PredictionInputEntry>
-  isLoaded: boolean
+  entries: Map<string, PredictionInputEntry>;
+  isLoaded: boolean;
 
-  load: () => void
-  save: (predictionId: string, modelId: string, modelName: string, inputs: Record<string, unknown>) => void
-  get: (predictionId: string) => PredictionInputEntry | undefined
-  getArchived: () => PredictionInputEntry[]
-  clear: () => void
+  load: () => void;
+  save: (
+    predictionId: string,
+    modelId: string,
+    modelName: string,
+    inputs: Record<string, unknown>,
+  ) => void;
+  get: (predictionId: string) => PredictionInputEntry | undefined;
+  getArchived: () => PredictionInputEntry[];
+  clear: () => void;
 }
 
 function isArchived(createdAt: string): boolean {
-  const created = new Date(createdAt).getTime()
-  const now = Date.now()
-  const archiveAge = ARCHIVE_AGE_DAYS * 24 * 60 * 60 * 1000
-  return now - created > archiveAge
+  const created = new Date(createdAt).getTime();
+  const now = Date.now();
+  const archiveAge = ARCHIVE_AGE_DAYS * 24 * 60 * 60 * 1000;
+  return now - created > archiveAge;
 }
 
 function loadFromStorage(): Map<string, PredictionInputEntry> {
   try {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    console.log('[PredictionInputsStore] Loading from storage, raw:', stored?.substring(0, 200))
+    const stored = localStorage.getItem(STORAGE_KEY);
+    console.log(
+      "[PredictionInputsStore] Loading from storage, raw:",
+      stored?.substring(0, 200),
+    );
     if (stored) {
-      const entries = JSON.parse(stored) as PredictionInputEntry[]
-      console.log('[PredictionInputsStore] Parsed entries count:', entries.length)
+      const entries = JSON.parse(stored) as PredictionInputEntry[];
+      console.log(
+        "[PredictionInputsStore] Parsed entries count:",
+        entries.length,
+      );
       if (entries.length > 0) {
-        console.log('[PredictionInputsStore] First entry predictionId:', entries[0].predictionId)
+        console.log(
+          "[PredictionInputsStore] First entry predictionId:",
+          entries[0].predictionId,
+        );
       }
-      return new Map(entries.map(e => [e.predictionId, e]))
+      return new Map(entries.map((e) => [e.predictionId, e]));
     }
-    console.log('[PredictionInputsStore] No stored data found')
+    console.log("[PredictionInputsStore] No stored data found");
   } catch (e) {
-    console.error('Failed to load prediction inputs:', e)
+    console.error("Failed to load prediction inputs:", e);
   }
-  return new Map()
+  return new Map();
 }
 
 function saveToStorage(entries: Map<string, PredictionInputEntry>) {
   try {
     // Convert to array, sort by date (newest first), limit count
     const array = Array.from(entries.values())
-      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-      .slice(0, MAX_ENTRIES) // Keep only last MAX_ENTRIES
+      .sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+      )
+      .slice(0, MAX_ENTRIES); // Keep only last MAX_ENTRIES
 
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(array))
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(array));
   } catch (e) {
-    console.error('Failed to save prediction inputs:', e)
+    console.error("Failed to save prediction inputs:", e);
   }
 }
 
-export const usePredictionInputsStore = create<PredictionInputsState>((set, get) => ({
-  entries: new Map(),
-  isLoaded: false,
+export const usePredictionInputsStore = create<PredictionInputsState>(
+  (set, get) => ({
+    entries: new Map(),
+    isLoaded: false,
 
-  load: () => {
-    console.log('[PredictionInputsStore] load() called')
-    const entries = loadFromStorage()
-    console.log('[PredictionInputsStore] Loaded entries Map size:', entries.size)
-    set({ entries, isLoaded: true })
-  },
+    load: () => {
+      console.log("[PredictionInputsStore] load() called");
+      const entries = loadFromStorage();
+      console.log(
+        "[PredictionInputsStore] Loaded entries Map size:",
+        entries.size,
+      );
+      set({ entries, isLoaded: true });
+    },
 
-  save: (predictionId: string, modelId: string, modelName: string, inputs: Record<string, unknown>) => {
-    console.log('[PredictionInputsStore] save() called:', { predictionId, modelId, modelName, inputKeys: Object.keys(inputs) })
-    const entry: PredictionInputEntry = {
-      predictionId,
-      modelId,
-      modelName,
-      inputs,
-      createdAt: new Date().toISOString()
-    }
+    save: (
+      predictionId: string,
+      modelId: string,
+      modelName: string,
+      inputs: Record<string, unknown>,
+    ) => {
+      console.log("[PredictionInputsStore] save() called:", {
+        predictionId,
+        modelId,
+        modelName,
+        inputKeys: Object.keys(inputs),
+      });
+      const entry: PredictionInputEntry = {
+        predictionId,
+        modelId,
+        modelName,
+        inputs,
+        createdAt: new Date().toISOString(),
+      };
 
-    set(state => {
-      const newEntries = new Map(state.entries)
-      newEntries.set(predictionId, entry)
-      console.log('[PredictionInputsStore] Saving to storage, new size:', newEntries.size)
-      saveToStorage(newEntries)
-      return { entries: newEntries }
-    })
-  },
+      set((state) => {
+        const newEntries = new Map(state.entries);
+        newEntries.set(predictionId, entry);
+        console.log(
+          "[PredictionInputsStore] Saving to storage, new size:",
+          newEntries.size,
+        );
+        saveToStorage(newEntries);
+        return { entries: newEntries };
+      });
+    },
 
-  get: (predictionId: string) => {
-    const entries = get().entries
-    console.log('[PredictionInputsStore] get() called for:', predictionId, 'entries size:', entries.size)
-    const result = entries.get(predictionId)
-    console.log('[PredictionInputsStore] get() result:', result ? 'found' : 'not found')
-    return result
-  },
+    get: (predictionId: string) => {
+      const entries = get().entries;
+      console.log(
+        "[PredictionInputsStore] get() called for:",
+        predictionId,
+        "entries size:",
+        entries.size,
+      );
+      const result = entries.get(predictionId);
+      console.log(
+        "[PredictionInputsStore] get() result:",
+        result ? "found" : "not found",
+      );
+      return result;
+    },
 
-  getArchived: () => {
-    const entries = get().entries
-    const archived = Array.from(entries.values())
-      .filter(e => isArchived(e.createdAt))
-      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-    return archived
-  },
+    getArchived: () => {
+      const entries = get().entries;
+      const archived = Array.from(entries.values())
+        .filter((e) => isArchived(e.createdAt))
+        .sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        );
+      return archived;
+    },
 
-  clear: () => {
-    localStorage.removeItem(STORAGE_KEY)
-    set({ entries: new Map() })
-  }
-}))
+    clear: () => {
+      localStorage.removeItem(STORAGE_KEY);
+      set({ entries: new Map() });
+    },
+  }),
+);
diff --git a/mobile/src/workers/audioConverter.worker.ts b/mobile/src/workers/audioConverter.worker.ts
index de97226f..ff84cd1e 100644
--- a/mobile/src/workers/audioConverter.worker.ts
+++ b/mobile/src/workers/audioConverter.worker.ts
@@ -6,16 +6,16 @@
  * - MP3 ↔ WAV (receives decoded PCM data from main thread)
  */
 
-import { Mp3Encoder } from '@breezystack/lamejs'
+import { Mp3Encoder } from "@breezystack/lamejs";
 
 interface ConvertPayload {
   // Decoded audio data from main thread
-  channelData: Float32Array[] // Array of channel data
-  sampleRate: number
-  numberOfChannels: number
-  outputFormat: 'mp3' | 'wav'
-  bitrate?: number // kbps for MP3 (default: 192)
-  id: number
+  channelData: Float32Array[]; // Array of channel data
+  sampleRate: number;
+  numberOfChannels: number;
+  outputFormat: "mp3" | "wav";
+  bitrate?: number; // kbps for MP3 (default: 192)
+  id: number;
 }
 
 /**
@@ -24,55 +24,55 @@ interface ConvertPayload {
 function pcmToWav(
   channelData: Float32Array[],
   sampleRate: number,
-  numberOfChannels: number
+  numberOfChannels: number,
 ): ArrayBuffer {
-  const samples = channelData[0].length
-  const bitDepth = 16
-  const bytesPerSample = bitDepth / 8
+  const samples = channelData[0].length;
+  const bitDepth = 16;
+  const bytesPerSample = bitDepth / 8;
 
   // Calculate buffer size
-  const dataSize = samples * numberOfChannels * bytesPerSample
-  const buffer = new ArrayBuffer(44 + dataSize)
-  const view = new DataView(buffer)
+  const dataSize = samples * numberOfChannels * bytesPerSample;
+  const buffer = new ArrayBuffer(44 + dataSize);
+  const view = new DataView(buffer);
 
   // WAV header helper
   const writeString = (offset: number, str: string) => {
     for (let i = 0; i < str.length; i++) {
-      view.setUint8(offset + i, str.charCodeAt(i))
+      view.setUint8(offset + i, str.charCodeAt(i));
     }
-  }
+  };
 
   // RIFF header
-  writeString(0, 'RIFF')
-  view.setUint32(4, 36 + dataSize, true)
-  writeString(8, 'WAVE')
+  writeString(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  writeString(8, "WAVE");
 
   // fmt chunk
-  writeString(12, 'fmt ')
-  view.setUint32(16, 16, true) // fmt chunk size
-  view.setUint16(20, 1, true) // PCM format
-  view.setUint16(22, numberOfChannels, true)
-  view.setUint32(24, sampleRate, true)
-  view.setUint32(28, sampleRate * numberOfChannels * bytesPerSample, true) // byte rate
-  view.setUint16(32, numberOfChannels * bytesPerSample, true) // block align
-  view.setUint16(34, bitDepth, true)
+  writeString(12, "fmt ");
+  view.setUint32(16, 16, true); // fmt chunk size
+  view.setUint16(20, 1, true); // PCM format
+  view.setUint16(22, numberOfChannels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * numberOfChannels * bytesPerSample, true); // byte rate
+  view.setUint16(32, numberOfChannels * bytesPerSample, true); // block align
+  view.setUint16(34, bitDepth, true);
 
   // data chunk
-  writeString(36, 'data')
-  view.setUint32(40, dataSize, true)
+  writeString(36, "data");
+  view.setUint32(40, dataSize, true);
 
   // Write interleaved audio data
-  let offset = 44
+  let offset = 44;
   for (let i = 0; i < samples; i++) {
     for (let ch = 0; ch < numberOfChannels; ch++) {
-      const sample = Math.max(-1, Math.min(1, channelData[ch][i]))
-      const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7fff
-      view.setInt16(offset, intSample, true)
-      offset += 2
+      const sample = Math.max(-1, Math.min(1, channelData[ch][i]));
+      const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+      view.setInt16(offset, intSample, true);
+      offset += 2;
     }
   }
 
-  return buffer
+  return buffer;
 }
 
 /**
@@ -83,126 +83,148 @@ function pcmToMp3(
   sampleRate: number,
   numberOfChannels: number,
   bitrate: number,
-  onProgress?: (progress: number) => void
+  onProgress?: (progress: number) => void,
 ): ArrayBuffer {
-  const samples = channelData[0].length
+  const samples = channelData[0].length;
 
   // Create MP3 encoder
-  const mp3encoder = new Mp3Encoder(numberOfChannels, sampleRate, bitrate)
-  const mp3Data: Int8Array[] = []
+  const mp3encoder = new Mp3Encoder(numberOfChannels, sampleRate, bitrate);
+  const mp3Data: Int8Array[] = [];
 
   // Get channel data
-  const left = channelData[0]
-  const right = numberOfChannels > 1 ? channelData[1] : channelData[0]
+  const left = channelData[0];
+  const right = numberOfChannels > 1 ? channelData[1] : channelData[0];
 
   // Convert to Int16
-  const leftInt16 = new Int16Array(samples)
-  const rightInt16 = new Int16Array(samples)
+  const leftInt16 = new Int16Array(samples);
+  const rightInt16 = new Int16Array(samples);
 
   for (let i = 0; i < samples; i++) {
-    leftInt16[i] = Math.max(-32768, Math.min(32767, Math.floor(left[i] * 32768)))
-    rightInt16[i] = Math.max(-32768, Math.min(32767, Math.floor(right[i] * 32768)))
+    leftInt16[i] = Math.max(
+      -32768,
+      Math.min(32767, Math.floor(left[i] * 32768)),
+    );
+    rightInt16[i] = Math.max(
+      -32768,
+      Math.min(32767, Math.floor(right[i] * 32768)),
+    );
   }
 
   // Encode in chunks
-  const chunkSize = 1152 // MP3 frame size
-  const totalChunks = Math.ceil(samples / chunkSize)
+  const chunkSize = 1152; // MP3 frame size
+  const totalChunks = Math.ceil(samples / chunkSize);
 
   for (let i = 0; i < samples; i += chunkSize) {
-    const leftChunk = leftInt16.subarray(i, i + chunkSize)
-    const rightChunk = rightInt16.subarray(i, i + chunkSize)
+    const leftChunk = leftInt16.subarray(i, i + chunkSize);
+    const rightChunk = rightInt16.subarray(i, i + chunkSize);
 
-    let mp3buf: Int8Array
+    let mp3buf: Int8Array;
     if (numberOfChannels === 1) {
-      mp3buf = mp3encoder.encodeBuffer(leftChunk)
+      mp3buf = mp3encoder.encodeBuffer(leftChunk);
     } else {
-      mp3buf = mp3encoder.encodeBuffer(leftChunk, rightChunk)
+      mp3buf = mp3encoder.encodeBuffer(leftChunk, rightChunk);
     }
 
     if (mp3buf.length > 0) {
-      mp3Data.push(mp3buf)
+      mp3Data.push(mp3buf);
     }
 
     // Report progress
-    const currentChunk = Math.floor(i / chunkSize)
+    const currentChunk = Math.floor(i / chunkSize);
     if (currentChunk % 50 === 0) {
-      onProgress?.(Math.round((currentChunk / totalChunks) * 100))
+      onProgress?.(Math.round((currentChunk / totalChunks) * 100));
     }
   }
 
   // Flush remaining data
-  const mp3buf = mp3encoder.flush()
+  const mp3buf = mp3encoder.flush();
   if (mp3buf.length > 0) {
-    mp3Data.push(mp3buf)
+    mp3Data.push(mp3buf);
   }
 
   // Combine chunks
-  const totalLength = mp3Data.reduce((acc, buf) => acc + buf.length, 0)
-  const result = new Uint8Array(totalLength)
-  let offset = 0
+  const totalLength = mp3Data.reduce((acc, buf) => acc + buf.length, 0);
+  const result = new Uint8Array(totalLength);
+  let offset = 0;
   for (const buf of mp3Data) {
-    result.set(new Uint8Array(buf.buffer, buf.byteOffset, buf.length), offset)
-    offset += buf.length
+    result.set(new Uint8Array(buf.buffer, buf.byteOffset, buf.length), offset);
+    offset += buf.length;
   }
 
-  return result.buffer
+  return result.buffer;
 }
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'convert': {
+      case "convert": {
         const {
           channelData,
           sampleRate,
           numberOfChannels,
           outputFormat,
           bitrate = 192,
-          id
-        } = payload as ConvertPayload
-
-        console.log(`[AudioConverter] Converting to ${outputFormat}, ${sampleRate}Hz, ${numberOfChannels}ch`)
-        self.postMessage({ type: 'progress', payload: { progress: 5, id } })
-
-        let outputBuffer: ArrayBuffer
-        let mimeType: string
-
-        if (outputFormat === 'mp3') {
-          console.log(`[AudioConverter] Encoding to MP3 at ${bitrate}kbps...`)
-          outputBuffer = pcmToMp3(channelData, sampleRate, numberOfChannels, bitrate, (progress) => {
-            self.postMessage({ type: 'progress', payload: { progress: 5 + progress * 0.9, id } })
-          })
-          mimeType = 'audio/mpeg'
+          id,
+        } = payload as ConvertPayload;
+
+        console.log(
+          `[AudioConverter] Converting to ${outputFormat}, ${sampleRate}Hz, ${numberOfChannels}ch`,
+        );
+        self.postMessage({ type: "progress", payload: { progress: 5, id } });
+
+        let outputBuffer: ArrayBuffer;
+        let mimeType: string;
+
+        if (outputFormat === "mp3") {
+          console.log(`[AudioConverter] Encoding to MP3 at ${bitrate}kbps...`);
+          outputBuffer = pcmToMp3(
+            channelData,
+            sampleRate,
+            numberOfChannels,
+            bitrate,
+            (progress) => {
+              self.postMessage({
+                type: "progress",
+                payload: { progress: 5 + progress * 0.9, id },
+              });
+            },
+          );
+          mimeType = "audio/mpeg";
         } else {
-          console.log('[AudioConverter] Converting to WAV...')
-          outputBuffer = pcmToWav(channelData, sampleRate, numberOfChannels)
-          mimeType = 'audio/wav'
-          self.postMessage({ type: 'progress', payload: { progress: 95, id } })
+          console.log("[AudioConverter] Converting to WAV...");
+          outputBuffer = pcmToWav(channelData, sampleRate, numberOfChannels);
+          mimeType = "audio/wav";
+          self.postMessage({ type: "progress", payload: { progress: 95, id } });
         }
 
-        console.log(`[AudioConverter] Done! Output size: ${(outputBuffer.byteLength / 1024 / 1024).toFixed(2)}MB`)
-
-        self.postMessage({
-          type: 'result',
-          payload: {
-            data: outputBuffer,
-            filename: `output.${outputFormat}`,
-            mimeType,
-            id
-          }
-        }, { transfer: [outputBuffer] })
-        break
+        console.log(
+          `[AudioConverter] Done! Output size: ${(outputBuffer.byteLength / 1024 / 1024).toFixed(2)}MB`,
+        );
+
+        self.postMessage(
+          {
+            type: "result",
+            payload: {
+              data: outputBuffer,
+              filename: `output.${outputFormat}`,
+              mimeType,
+              id,
+            },
+          },
+          { transfer: [outputBuffer] },
+        );
+        break;
       }
 
-      case 'cancel': {
+      case "cancel": {
         // Not much to cancel in this simple implementation
-        break
+        break;
       }
     }
   } catch (error) {
-    console.error('[AudioConverter] Error:', error)
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    console.error("[AudioConverter] Error:", error);
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/mobile/src/workers/backgroundRemover.worker.ts b/mobile/src/workers/backgroundRemover.worker.ts
index 4bffb52f..e5afe6bc 100644
--- a/mobile/src/workers/backgroundRemover.worker.ts
+++ b/mobile/src/workers/backgroundRemover.worker.ts
@@ -2,209 +2,219 @@ import {
   removeBackground,
   removeForeground,
   segmentForeground,
-  type Config
-} from '@imgly/background-removal'
+  type Config,
+} from "@imgly/background-removal";
 
-type ModelType = 'isnet_quint8' | 'isnet_fp16' | 'isnet'
-type OutputType = 'foreground' | 'background' | 'mask'
+type ModelType = "isnet_quint8" | "isnet_fp16" | "isnet";
+type OutputType = "foreground" | "background" | "mask";
 
 // Track last emitted phase to detect phase changes
-let lastPhase = ''
+let lastPhase = "";
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'process': {
+      case "process": {
         const { imageBlob, model, outputType, id } = payload as {
-          imageBlob: Blob
-          model: ModelType
-          outputType: OutputType
-          id: number
-        }
+          imageBlob: Blob;
+          model: ModelType;
+          outputType: OutputType;
+          id: number;
+        };
 
         // Reset phase tracking
-        lastPhase = ''
+        lastPhase = "";
 
         // Force CPU mode to avoid WebGPU compatibility issues with different ONNX Runtime versions
         // The @imgly/background-removal library has its own bundled ONNX Runtime that may conflict with global versions
         const config: Config = {
           model,
-          device: 'cpu',
+          device: "cpu",
           output: {
-            format: 'image/png',
-            quality: 1
+            format: "image/png",
+            quality: 1,
           },
           progress: (key: string, current: number, total: number) => {
             // Map library progress keys to standardized phases
             // Keys from @imgly/background-removal:
             // - fetch:* for model downloading
             // - compute:* for processing
-            const isDownload = key.startsWith('fetch')
-            const phase = isDownload ? 'download' : 'process'
+            const isDownload = key.startsWith("fetch");
+            const phase = isDownload ? "download" : "process";
 
             // Notify of phase change
             if (phase !== lastPhase) {
               self.postMessage({
-                type: 'phase',
-                payload: { phase, id }
-              })
-              lastPhase = phase
+                type: "phase",
+                payload: { phase, id },
+              });
+              lastPhase = phase;
             }
 
             // Emit standardized progress
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
                 phase,
                 progress: total > 0 ? (current / total) * 100 : 0,
                 detail: isDownload
-                  ? { current, total, unit: 'bytes' as const }
+                  ? { current, total, unit: "bytes" as const }
                   : undefined,
-                id
-              }
-            })
-          }
-        }
+                id,
+              },
+            });
+          },
+        };
 
         // Start in process phase - download phase only emitted if library fetches model
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id }
-        })
-        lastPhase = 'process'
+          type: "phase",
+          payload: { phase: "process", id },
+        });
+        lastPhase = "process";
 
         // Call the appropriate function based on output type
-        let resultBlob: Blob
+        let resultBlob: Blob;
         switch (outputType) {
-          case 'foreground':
-            resultBlob = await removeBackground(imageBlob, config)
-            break
-          case 'background':
-            resultBlob = await removeForeground(imageBlob, config)
-            break
-          case 'mask':
-            resultBlob = await segmentForeground(imageBlob, config)
-            break
+          case "foreground":
+            resultBlob = await removeBackground(imageBlob, config);
+            break;
+          case "background":
+            resultBlob = await removeForeground(imageBlob, config);
+            break;
+          case "mask":
+            resultBlob = await segmentForeground(imageBlob, config);
+            break;
           default:
-            resultBlob = await removeBackground(imageBlob, config)
+            resultBlob = await removeBackground(imageBlob, config);
         }
 
         // Convert blob to ArrayBuffer for transfer
-        const arrayBuffer = await resultBlob.arrayBuffer()
+        const arrayBuffer = await resultBlob.arrayBuffer();
 
         self.postMessage(
           {
-            type: 'result',
-            payload: { arrayBuffer, id }
+            type: "result",
+            payload: { arrayBuffer, id },
           },
-          { transfer: [arrayBuffer] }
-        )
-        break
+          { transfer: [arrayBuffer] },
+        );
+        break;
       }
 
-      case 'processAll': {
+      case "processAll": {
         const { imageBlob, model, id } = payload as {
-          imageBlob: Blob
-          model: ModelType
-          id: number
-        }
+          imageBlob: Blob;
+          model: ModelType;
+          id: number;
+        };
 
         // Reset phase tracking
-        lastPhase = ''
+        lastPhase = "";
 
         // Total operations for progress calculation
-        const totalOps = 3
-        const downloadWeight = 10 // Download is 10% of total progress
-        const processWeight = 90 // Processing is 90% of total progress
-        const perOpWeight = processWeight / totalOps // 30% per operation
+        const totalOps = 3;
+        const downloadWeight = 10; // Download is 10% of total progress
+        const processWeight = 90; // Processing is 90% of total progress
+        const perOpWeight = processWeight / totalOps; // 30% per operation
 
         // Force CPU mode to avoid WebGPU compatibility issues
         const createConfig = (opIndex: number): Config => ({
           model,
-          device: 'cpu',
+          device: "cpu",
           output: {
-            format: 'image/png',
-            quality: 1
+            format: "image/png",
+            quality: 1,
           },
           progress: (key: string, current: number, total: number) => {
-            const isDownload = key.startsWith('fetch')
-            const phase = isDownload ? 'download' : 'process'
+            const isDownload = key.startsWith("fetch");
+            const phase = isDownload ? "download" : "process";
 
             if (phase !== lastPhase) {
               self.postMessage({
-                type: 'phase',
-                payload: { phase, id }
-              })
-              lastPhase = phase
+                type: "phase",
+                payload: { phase, id },
+              });
+              lastPhase = phase;
             }
 
             // Calculate progress using opIndex for deterministic mapping:
             // Download: 0-10%, Op 0: 10-40%, Op 1: 40-70%, Op 2: 70-100%
-            let overallProgress: number
+            let overallProgress: number;
             if (isDownload) {
               // Download progress scales to first 10%
-              overallProgress = total > 0 ? (current / total) * downloadWeight : 0
+              overallProgress =
+                total > 0 ? (current / total) * downloadWeight : 0;
             } else {
               // Each operation gets equal share of remaining 90%
-              const opProgress = total > 0 ? (current / total) * 100 : 0
-              overallProgress = downloadWeight + (opIndex * perOpWeight) + (opProgress / 100 * perOpWeight)
+              const opProgress = total > 0 ? (current / total) * 100 : 0;
+              overallProgress =
+                downloadWeight +
+                opIndex * perOpWeight +
+                (opProgress / 100) * perOpWeight;
             }
 
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
                 phase,
                 progress: Math.min(overallProgress, 100),
                 detail: isDownload
-                  ? { current, total, unit: 'bytes' as const }
+                  ? { current, total, unit: "bytes" as const }
                   : undefined,
-                id
-              }
-            })
-          }
-        })
+                id,
+              },
+            });
+          },
+        });
 
         // Start in process phase - download phase only emitted if library fetches model
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id }
-        })
-        lastPhase = 'process'
+          type: "phase",
+          payload: { phase: "process", id },
+        });
+        lastPhase = "process";
 
         // Process all three outputs (model is cached after first call)
-        const foregroundBlob = await removeBackground(imageBlob, createConfig(0))
-        const backgroundBlob = await removeForeground(imageBlob, createConfig(1))
-        const maskBlob = await segmentForeground(imageBlob, createConfig(2))
+        const foregroundBlob = await removeBackground(
+          imageBlob,
+          createConfig(0),
+        );
+        const backgroundBlob = await removeForeground(
+          imageBlob,
+          createConfig(1),
+        );
+        const maskBlob = await segmentForeground(imageBlob, createConfig(2));
 
         // Convert blobs to ArrayBuffers for transfer
-        const foregroundBuffer = await foregroundBlob.arrayBuffer()
-        const backgroundBuffer = await backgroundBlob.arrayBuffer()
-        const maskBuffer = await maskBlob.arrayBuffer()
+        const foregroundBuffer = await foregroundBlob.arrayBuffer();
+        const backgroundBuffer = await backgroundBlob.arrayBuffer();
+        const maskBuffer = await maskBlob.arrayBuffer();
 
         self.postMessage(
           {
-            type: 'resultAll',
+            type: "resultAll",
             payload: {
               foreground: foregroundBuffer,
               background: backgroundBuffer,
               mask: maskBuffer,
-              id
-            }
+              id,
+            },
           },
-          { transfer: [foregroundBuffer, backgroundBuffer, maskBuffer] }
-        )
-        break
+          { transfer: [foregroundBuffer, backgroundBuffer, maskBuffer] },
+        );
+        break;
       }
 
-      case 'dispose': {
+      case "dispose": {
         // Clean up if needed (library handles its own cleanup)
-        self.postMessage({ type: 'disposed' })
-        break
+        self.postMessage({ type: "disposed" });
+        break;
       }
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/mobile/src/workers/faceEnhancer.worker.ts b/mobile/src/workers/faceEnhancer.worker.ts
index 6cecfeb3..e740f115 100644
--- a/mobile/src/workers/faceEnhancer.worker.ts
+++ b/mobile/src/workers/faceEnhancer.worker.ts
@@ -5,68 +5,70 @@
  */
 
 // @ts-expect-error - onnxruntime-web types not resolved due to package.json exports
-import * as ort from 'onnxruntime-web'
+import * as ort from "onnxruntime-web";
 
 // Configure WASM paths to use CDN
-const ORT_WASM_VERSION = '1.21.0'
-ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`
+const ORT_WASM_VERSION = "1.21.0";
+ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`;
 
 // Track which backend is being used
-let useWebGPU = false
+let useWebGPU = false;
 
 /**
  * Check if WebGPU is available
  */
 async function checkWebGPU(): Promise<boolean> {
   try {
-    if (!navigator.gpu) return false
-    const adapter = await navigator.gpu.requestAdapter()
-    return adapter !== null
+    if (!navigator.gpu) return false;
+    const adapter = await navigator.gpu.requestAdapter();
+    return adapter !== null;
   } catch {
-    return false
+    return false;
   }
 }
 
 // Model URLs
-const YOLO_MODEL_URL = 'https://huggingface.co/deepghs/yolo-face/resolve/main/yolov8n-face/model.onnx'
-const GFPGAN_MODEL_URL = 'https://huggingface.co/facefusion/models-3.0.0/resolve/main/gfpgan_1.4.onnx'
+const YOLO_MODEL_URL =
+  "https://huggingface.co/deepghs/yolo-face/resolve/main/yolov8n-face/model.onnx";
+const GFPGAN_MODEL_URL =
+  "https://huggingface.co/facefusion/models-3.0.0/resolve/main/gfpgan_1.4.onnx";
 
 // Model sizes
-const YOLO_INPUT_SIZE = 640
-const GFPGAN_INPUT_SIZE = 512
+const YOLO_INPUT_SIZE = 640;
+const GFPGAN_INPUT_SIZE = 512;
 
 // Detection thresholds
-const CONFIDENCE_THRESHOLD = 0.5
-const IOU_THRESHOLD = 0.45
+const CONFIDENCE_THRESHOLD = 0.5;
+const IOU_THRESHOLD = 0.45;
 
 // Cache names
-const CACHE_NAME = 'face-enhancer-models'
+const CACHE_NAME = "face-enhancer-models";
 
 // ONNX sessions
-let yoloSession: ort.InferenceSession | null = null
-let gfpganSession: ort.InferenceSession | null = null
+let yoloSession: ort.InferenceSession | null = null;
+let gfpganSession: ort.InferenceSession | null = null;
 
 interface FaceBox {
-  x: number
-  y: number
-  width: number
-  height: number
-  confidence: number
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  confidence: number;
 }
 
 interface WorkerMessage {
-  type: 'init' | 'enhance' | 'dispose'
+  type: "init" | "enhance" | "dispose";
   payload?: {
-    imageData?: Float32Array
-    width?: number
-    height?: number
-    id?: number
-    timeout?: number
-  }
+    imageData?: Float32Array;
+    width?: number;
+    height?: number;
+    id?: number;
+    timeout?: number;
+  };
 }
 
 // Default timeout (60 minutes)
-const DEFAULT_TIMEOUT = 3600000
+const DEFAULT_TIMEOUT = 3600000;
 
 /**
  * Download model with progress tracking
@@ -74,88 +76,92 @@ const DEFAULT_TIMEOUT = 3600000
 async function downloadModel(
   url: string,
   onProgress: (current: number, total: number) => void,
-  timeout: number = DEFAULT_TIMEOUT
+  timeout: number = DEFAULT_TIMEOUT,
 ): Promise<ArrayBuffer> {
   // Try to get from cache first
-  const cache = await caches.open(CACHE_NAME)
-  const cachedResponse = await cache.match(url)
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(url);
 
   if (cachedResponse) {
-    const buffer = await cachedResponse.arrayBuffer()
-    onProgress(buffer.byteLength, buffer.byteLength)
-    return buffer
+    const buffer = await cachedResponse.arrayBuffer();
+    onProgress(buffer.byteLength, buffer.byteLength);
+    return buffer;
   }
 
   // Download with progress and configurable timeout
-  const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), timeout)
-  const timeoutSeconds = Math.round(timeout / 1000)
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+  const timeoutSeconds = Math.round(timeout / 1000);
 
   try {
     const response = await fetch(url, {
       headers: { Origin: self.location.origin },
-      signal: controller.signal
-    })
+      signal: controller.signal,
+    });
 
     if (!response.ok) {
-      throw new Error(`Failed to download model: ${response.status}`)
+      throw new Error(`Failed to download model: ${response.status}`);
     }
 
-    const contentLength = response.headers.get('content-length')
-    const total = contentLength ? parseInt(contentLength, 10) : 0
+    const contentLength = response.headers.get("content-length");
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
 
-    const reader = response.body?.getReader()
+    const reader = response.body?.getReader();
     if (!reader) {
-      throw new Error('Failed to get response reader')
+      throw new Error("Failed to get response reader");
     }
 
-    const chunks: Uint8Array[] = []
-    let received = 0
+    const chunks: Uint8Array[] = [];
+    let received = 0;
 
     while (true) {
       if (controller.signal.aborted) {
-        reader.cancel()
-        throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+        reader.cancel();
+        throw new Error(
+          `Model download timed out after ${timeoutSeconds} seconds`,
+        );
       }
 
-      const { done, value } = await reader.read()
-      if (done) break
+      const { done, value } = await reader.read();
+      if (done) break;
 
-      chunks.push(value)
-      received += value.length
-      onProgress(received, total)
+      chunks.push(value);
+      received += value.length;
+      onProgress(received, total);
     }
 
-    clearTimeout(timeoutId)
+    clearTimeout(timeoutId);
 
     // Combine chunks
-    const buffer = new Uint8Array(received)
-    let position = 0
+    const buffer = new Uint8Array(received);
+    let position = 0;
     for (const chunk of chunks) {
-      buffer.set(chunk, position)
-      position += chunk.length
+      buffer.set(chunk, position);
+      position += chunk.length;
     }
 
     // Cache the model
     try {
       const cacheResponse = new Response(buffer.buffer, {
         headers: {
-          'Content-Type': 'application/octet-stream',
-          'Content-Length': buffer.byteLength.toString()
-        }
-      })
-      await cache.put(url, cacheResponse)
+          "Content-Type": "application/octet-stream",
+          "Content-Length": buffer.byteLength.toString(),
+        },
+      });
+      await cache.put(url, cacheResponse);
     } catch (e) {
-      console.warn('Failed to cache model:', e)
+      console.warn("Failed to cache model:", e);
     }
 
-    return buffer.buffer
+    return buffer.buffer;
   } catch (error) {
-    clearTimeout(timeoutId)
-    if ((error as Error).name === 'AbortError') {
-      throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+    clearTimeout(timeoutId);
+    if ((error as Error).name === "AbortError") {
+      throw new Error(
+        `Model download timed out after ${timeoutSeconds} seconds`,
+      );
     }
-    throw error
+    throw error;
   }
 }
 
@@ -163,33 +169,35 @@ async function downloadModel(
  * Check if model is cached
  */
 async function isModelCached(url: string): Promise<boolean> {
-  const cache = await caches.open(CACHE_NAME)
-  const cachedResponse = await cache.match(url)
-  return cachedResponse !== undefined
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(url);
+  return cachedResponse !== undefined;
 }
 
 /**
  * Initialize ONNX session with WebGPU (fallback to WASM)
  */
-async function createSession(modelBuffer: ArrayBuffer): Promise<ort.InferenceSession> {
+async function createSession(
+  modelBuffer: ArrayBuffer,
+): Promise<ort.InferenceSession> {
   if (useWebGPU) {
     try {
       return await ort.InferenceSession.create(modelBuffer, {
-        executionProviders: ['webgpu'],
-        graphOptimizationLevel: 'all'
-      })
+        executionProviders: ["webgpu"],
+        graphOptimizationLevel: "all",
+      });
     } catch (e) {
-      console.warn('WebGPU session creation failed, falling back to WASM:', e)
-      useWebGPU = false
+      console.warn("WebGPU session creation failed, falling back to WASM:", e);
+      useWebGPU = false;
     }
   }
 
   return await ort.InferenceSession.create(modelBuffer, {
-    executionProviders: ['wasm'],
-    graphOptimizationLevel: 'all',
+    executionProviders: ["wasm"],
+    graphOptimizationLevel: "all",
     enableCpuMemArena: true,
-    executionMode: 'parallel'
-  })
+    executionMode: "parallel",
+  });
 }
 
 /**
@@ -199,91 +207,94 @@ function letterboxResize(
   imageData: Float32Array,
   srcW: number,
   srcH: number,
-  targetSize: number
+  targetSize: number,
 ): { data: Float32Array; scale: number; padX: number; padY: number } {
-  const scale = Math.min(targetSize / srcW, targetSize / srcH)
-  const newW = Math.round(srcW * scale)
-  const newH = Math.round(srcH * scale)
+  const scale = Math.min(targetSize / srcW, targetSize / srcH);
+  const newW = Math.round(srcW * scale);
+  const newH = Math.round(srcH * scale);
 
-  const padX = (targetSize - newW) / 2
-  const padY = (targetSize - newH) / 2
+  const padX = (targetSize - newW) / 2;
+  const padY = (targetSize - newH) / 2;
 
-  const output = new Float32Array(3 * targetSize * targetSize)
-  output.fill(0.5)
+  const output = new Float32Array(3 * targetSize * targetSize);
+  output.fill(0.5);
 
-  const padXInt = Math.floor(padX)
-  const padYInt = Math.floor(padY)
+  const padXInt = Math.floor(padX);
+  const padYInt = Math.floor(padY);
 
   for (let c = 0; c < 3; c++) {
     for (let y = 0; y < newH; y++) {
       for (let x = 0; x < newW; x++) {
-        const srcX = x / scale
-        const srcY = y / scale
-
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, srcW - 1)
-        const y1 = Math.min(y0 + 1, srcH - 1)
-
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
-
-        const v00 = imageData[(y0 * srcW + x0) * 3 + c]
-        const v10 = imageData[(y0 * srcW + x1) * 3 + c]
-        const v01 = imageData[(y1 * srcW + x0) * 3 + c]
-        const v11 = imageData[(y1 * srcW + x1) * 3 + c]
-
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
-
-        const outIdx = c * targetSize * targetSize + (padYInt + y) * targetSize + (padXInt + x)
-        output[outIdx] = v
+        const srcX = x / scale;
+        const srcY = y / scale;
+
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, srcW - 1);
+        const y1 = Math.min(y0 + 1, srcH - 1);
+
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
+
+        const v00 = imageData[(y0 * srcW + x0) * 3 + c];
+        const v10 = imageData[(y0 * srcW + x1) * 3 + c];
+        const v01 = imageData[(y1 * srcW + x0) * 3 + c];
+        const v11 = imageData[(y1 * srcW + x1) * 3 + c];
+
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
+
+        const outIdx =
+          c * targetSize * targetSize +
+          (padYInt + y) * targetSize +
+          (padXInt + x);
+        output[outIdx] = v;
       }
     }
   }
 
-  return { data: output, scale, padX, padY }
+  return { data: output, scale, padX, padY };
 }
 
 /**
  * Non-Maximum Suppression
  */
 function nms(boxes: FaceBox[], iouThreshold: number): FaceBox[] {
-  if (boxes.length === 0) return []
+  if (boxes.length === 0) return [];
 
-  const sorted = [...boxes].sort((a, b) => b.confidence - a.confidence)
-  const selected: FaceBox[] = []
+  const sorted = [...boxes].sort((a, b) => b.confidence - a.confidence);
+  const selected: FaceBox[] = [];
 
   while (sorted.length > 0) {
-    const best = sorted.shift()!
-    selected.push(best)
+    const best = sorted.shift()!;
+    selected.push(best);
 
     for (let i = sorted.length - 1; i >= 0; i--) {
       if (iou(best, sorted[i]) > iouThreshold) {
-        sorted.splice(i, 1)
+        sorted.splice(i, 1);
       }
     }
   }
 
-  return selected
+  return selected;
 }
 
 /**
  * Calculate IoU between two boxes
  */
 function iou(a: FaceBox, b: FaceBox): number {
-  const x1 = Math.max(a.x, b.x)
-  const y1 = Math.max(a.y, b.y)
-  const x2 = Math.min(a.x + a.width, b.x + b.width)
-  const y2 = Math.min(a.y + a.height, b.y + b.height)
+  const x1 = Math.max(a.x, b.x);
+  const y1 = Math.max(a.y, b.y);
+  const x2 = Math.min(a.x + a.width, b.x + b.width);
+  const y2 = Math.min(a.y + a.height, b.y + b.height);
 
-  const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1)
-  const aArea = a.width * a.height
-  const bArea = b.width * b.height
-  const union = aArea + bArea - intersection
+  const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
+  const aArea = a.width * a.height;
+  const bArea = b.width * b.height;
+  const union = aArea + bArea - intersection;
 
-  return intersection / union
+  return intersection / union;
 }
 
 /**
@@ -295,30 +306,30 @@ function parseYoloOutput(
   imgH: number,
   scale: number,
   padX: number,
-  padY: number
+  padY: number,
 ): FaceBox[] {
-  const boxes: FaceBox[] = []
-  const numDetections = output.length / 5
+  const boxes: FaceBox[] = [];
+  const numDetections = output.length / 5;
 
   for (let i = 0; i < numDetections; i++) {
-    const confidence = output[4 * numDetections + i]
+    const confidence = output[4 * numDetections + i];
 
-    if (confidence < CONFIDENCE_THRESHOLD) continue
+    if (confidence < CONFIDENCE_THRESHOLD) continue;
 
-    const xCenter = output[0 * numDetections + i]
-    const yCenter = output[1 * numDetections + i]
-    const width = output[2 * numDetections + i]
-    const height = output[3 * numDetections + i]
+    const xCenter = output[0 * numDetections + i];
+    const yCenter = output[1 * numDetections + i];
+    const width = output[2 * numDetections + i];
+    const height = output[3 * numDetections + i];
 
-    const x = (xCenter - padX) / scale - width / (2 * scale)
-    const y = (yCenter - padY) / scale - height / (2 * scale)
-    const w = width / scale
-    const h = height / scale
+    const x = (xCenter - padX) / scale - width / (2 * scale);
+    const y = (yCenter - padY) / scale - height / (2 * scale);
+    const w = width / scale;
+    const h = height / scale;
 
-    const clampedX = Math.max(0, Math.min(x, imgW))
-    const clampedY = Math.max(0, Math.min(y, imgH))
-    const clampedW = Math.min(w, imgW - clampedX)
-    const clampedH = Math.min(h, imgH - clampedY)
+    const clampedX = Math.max(0, Math.min(x, imgW));
+    const clampedY = Math.max(0, Math.min(y, imgH));
+    const clampedW = Math.min(w, imgW - clampedX);
+    const clampedH = Math.min(h, imgH - clampedY);
 
     if (clampedW > 0 && clampedH > 0) {
       boxes.push({
@@ -326,12 +337,12 @@ function parseYoloOutput(
         y: clampedY,
         width: clampedW,
         height: clampedH,
-        confidence
-      })
+        confidence,
+      });
     }
   }
 
-  return nms(boxes, IOU_THRESHOLD)
+  return nms(boxes, IOU_THRESHOLD);
 }
 
 /**
@@ -340,17 +351,27 @@ function parseYoloOutput(
 async function detectFaces(
   imageData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): Promise<FaceBox[]> {
-  if (!yoloSession) throw new Error('YOLO session not initialized')
-
-  const { data, scale, padX, padY } = letterboxResize(imageData, width, height, YOLO_INPUT_SIZE)
-  const inputTensor = new ort.Tensor('float32', data, [1, 3, YOLO_INPUT_SIZE, YOLO_INPUT_SIZE])
-  const results = await yoloSession.run({ images: inputTensor })
-  const outputName = Object.keys(results)[0]
-  const output = results[outputName].data as Float32Array
-
-  return parseYoloOutput(output, width, height, scale, padX, padY)
+  if (!yoloSession) throw new Error("YOLO session not initialized");
+
+  const { data, scale, padX, padY } = letterboxResize(
+    imageData,
+    width,
+    height,
+    YOLO_INPUT_SIZE,
+  );
+  const inputTensor = new ort.Tensor("float32", data, [
+    1,
+    3,
+    YOLO_INPUT_SIZE,
+    YOLO_INPUT_SIZE,
+  ]);
+  const results = await yoloSession.run({ images: inputTensor });
+  const outputName = Object.keys(results)[0];
+  const output = results[outputName].data as Float32Array;
+
+  return parseYoloOutput(output, width, height, scale, padX, padY);
 }
 
 /**
@@ -362,74 +383,82 @@ function cropAndResizeFace(
   imgH: number,
   box: FaceBox,
   targetSize: number,
-  padding: number = 0.3
-): { data: Float32Array; cropBox: { x: number; y: number; w: number; h: number } } {
-  const expandW = box.width * padding
-  const expandH = box.height * padding
-
-  let cropX = box.x - expandW
-  let cropY = box.y - expandH
-  let cropW = box.width + expandW * 2
-  let cropH = box.height + expandH * 2
-
-  const size = Math.max(cropW, cropH)
-  cropX = cropX - (size - cropW) / 2
-  cropY = cropY - (size - cropH) / 2
-  cropW = size
-  cropH = size
-
-  cropX = Math.max(0, cropX)
-  cropY = Math.max(0, cropY)
-  cropW = Math.min(cropW, imgW - cropX)
-  cropH = Math.min(cropH, imgH - cropY)
-
-  const output = new Float32Array(3 * targetSize * targetSize)
+  padding: number = 0.3,
+): {
+  data: Float32Array;
+  cropBox: { x: number; y: number; w: number; h: number };
+} {
+  const expandW = box.width * padding;
+  const expandH = box.height * padding;
+
+  let cropX = box.x - expandW;
+  let cropY = box.y - expandH;
+  let cropW = box.width + expandW * 2;
+  let cropH = box.height + expandH * 2;
+
+  const size = Math.max(cropW, cropH);
+  cropX = cropX - (size - cropW) / 2;
+  cropY = cropY - (size - cropH) / 2;
+  cropW = size;
+  cropH = size;
+
+  cropX = Math.max(0, cropX);
+  cropY = Math.max(0, cropY);
+  cropW = Math.min(cropW, imgW - cropX);
+  cropH = Math.min(cropH, imgH - cropY);
+
+  const output = new Float32Array(3 * targetSize * targetSize);
 
   for (let c = 0; c < 3; c++) {
     for (let y = 0; y < targetSize; y++) {
       for (let x = 0; x < targetSize; x++) {
-        const srcX = cropX + (x / targetSize) * cropW
-        const srcY = cropY + (y / targetSize) * cropH
+        const srcX = cropX + (x / targetSize) * cropW;
+        const srcY = cropY + (y / targetSize) * cropH;
 
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, imgW - 1)
-        const y1 = Math.min(y0 + 1, imgH - 1)
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, imgW - 1);
+        const y1 = Math.min(y0 + 1, imgH - 1);
 
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
 
-        const v00 = imageData[(y0 * imgW + x0) * 3 + c]
-        const v10 = imageData[(y0 * imgW + x1) * 3 + c]
-        const v01 = imageData[(y1 * imgW + x0) * 3 + c]
-        const v11 = imageData[(y1 * imgW + x1) * 3 + c]
+        const v00 = imageData[(y0 * imgW + x0) * 3 + c];
+        const v10 = imageData[(y0 * imgW + x1) * 3 + c];
+        const v01 = imageData[(y1 * imgW + x0) * 3 + c];
+        const v11 = imageData[(y1 * imgW + x1) * 3 + c];
 
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        let v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        let v = v0 * (1 - yFrac) + v1 * yFrac;
 
-        v = (v - 0.5) / 0.5
+        v = (v - 0.5) / 0.5;
 
-        output[c * targetSize * targetSize + y * targetSize + x] = v
+        output[c * targetSize * targetSize + y * targetSize + x] = v;
       }
     }
   }
 
-  return { data: output, cropBox: { x: cropX, y: cropY, w: cropW, h: cropH } }
+  return { data: output, cropBox: { x: cropX, y: cropY, w: cropW, h: cropH } };
 }
 
 /**
  * Enhance a single face using GFPGAN
  */
 async function enhanceFace(faceData: Float32Array): Promise<Float32Array> {
-  if (!gfpganSession) throw new Error('GFPGAN session not initialized')
-
-  const inputTensor = new ort.Tensor('float32', faceData, [1, 3, GFPGAN_INPUT_SIZE, GFPGAN_INPUT_SIZE])
-  const results = await gfpganSession.run({ input: inputTensor })
-  const outputName = Object.keys(results)[0]
-  const output = results[outputName].data as Float32Array
-
-  return output
+  if (!gfpganSession) throw new Error("GFPGAN session not initialized");
+
+  const inputTensor = new ort.Tensor("float32", faceData, [
+    1,
+    3,
+    GFPGAN_INPUT_SIZE,
+    GFPGAN_INPUT_SIZE,
+  ]);
+  const results = await gfpganSession.run({ input: inputTensor });
+  const outputName = Object.keys(results)[0];
+  const output = results[outputName].data as Float32Array;
+
+  return output;
 }
 
 /**
@@ -441,55 +470,81 @@ function pasteEnhancedFace(
   imgW: number,
   imgH: number,
   cropBox: { x: number; y: number; w: number; h: number },
-  featherSize: number = 16
+  featherSize: number = 16,
 ): Float32Array {
-  const result = new Float32Array(originalData)
-  const { x: cropX, y: cropY, w: cropW, h: cropH } = cropBox
+  const result = new Float32Array(originalData);
+  const { x: cropX, y: cropY, w: cropW, h: cropH } = cropBox;
 
   for (let y = 0; y < imgH; y++) {
     for (let x = 0; x < imgW; x++) {
       if (x >= cropX && x < cropX + cropW && y >= cropY && y < cropY + cropH) {
-        const faceX = ((x - cropX) / cropW) * GFPGAN_INPUT_SIZE
-        const faceY = ((y - cropY) / cropH) * GFPGAN_INPUT_SIZE
-
-        const fx0 = Math.floor(faceX)
-        const fy0 = Math.floor(faceY)
-        const fx1 = Math.min(fx0 + 1, GFPGAN_INPUT_SIZE - 1)
-        const fy1 = Math.min(fy0 + 1, GFPGAN_INPUT_SIZE - 1)
-
-        const xFrac = faceX - fx0
-        const yFrac = faceY - fy0
-
-        const distToLeft = x - cropX
-        const distToRight = cropX + cropW - 1 - x
-        const distToTop = y - cropY
-        const distToBottom = cropY + cropH - 1 - y
-        const minDist = Math.min(distToLeft, distToRight, distToTop, distToBottom)
-        const blendFactor = Math.min(1.0, minDist / featherSize)
+        const faceX = ((x - cropX) / cropW) * GFPGAN_INPUT_SIZE;
+        const faceY = ((y - cropY) / cropH) * GFPGAN_INPUT_SIZE;
+
+        const fx0 = Math.floor(faceX);
+        const fy0 = Math.floor(faceY);
+        const fx1 = Math.min(fx0 + 1, GFPGAN_INPUT_SIZE - 1);
+        const fy1 = Math.min(fy0 + 1, GFPGAN_INPUT_SIZE - 1);
+
+        const xFrac = faceX - fx0;
+        const yFrac = faceY - fy0;
+
+        const distToLeft = x - cropX;
+        const distToRight = cropX + cropW - 1 - x;
+        const distToTop = y - cropY;
+        const distToBottom = cropY + cropH - 1 - y;
+        const minDist = Math.min(
+          distToLeft,
+          distToRight,
+          distToTop,
+          distToBottom,
+        );
+        const blendFactor = Math.min(1.0, minDist / featherSize);
 
         for (let c = 0; c < 3; c++) {
-          const v00 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy0 * GFPGAN_INPUT_SIZE + fx0]
-          const v10 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy0 * GFPGAN_INPUT_SIZE + fx1]
-          const v01 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy1 * GFPGAN_INPUT_SIZE + fx0]
-          const v11 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy1 * GFPGAN_INPUT_SIZE + fx1]
-
-          const v0 = v00 * (1 - xFrac) + v10 * xFrac
-          const v1 = v01 * (1 - xFrac) + v11 * xFrac
-          let enhanced = v0 * (1 - yFrac) + v1 * yFrac
-
-          enhanced = (enhanced + 1) / 2
-          enhanced = Math.max(0, Math.min(1, enhanced))
-
-          const origIdx = (y * imgW + x) * 3 + c
-          const original = originalData[origIdx]
-
-          result[origIdx] = original * (1 - blendFactor) + enhanced * blendFactor
+          const v00 =
+            enhancedFace[
+              c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                fy0 * GFPGAN_INPUT_SIZE +
+                fx0
+            ];
+          const v10 =
+            enhancedFace[
+              c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                fy0 * GFPGAN_INPUT_SIZE +
+                fx1
+            ];
+          const v01 =
+            enhancedFace[
+              c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                fy1 * GFPGAN_INPUT_SIZE +
+                fx0
+            ];
+          const v11 =
+            enhancedFace[
+              c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                fy1 * GFPGAN_INPUT_SIZE +
+                fx1
+            ];
+
+          const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+          const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+          let enhanced = v0 * (1 - yFrac) + v1 * yFrac;
+
+          enhanced = (enhanced + 1) / 2;
+          enhanced = Math.max(0, Math.min(1, enhanced));
+
+          const origIdx = (y * imgW + x) * 3 + c;
+          const original = originalData[origIdx];
+
+          result[origIdx] =
+            original * (1 - blendFactor) + enhanced * blendFactor;
         }
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -499,22 +554,22 @@ async function processImage(
   imageData: Float32Array,
   width: number,
   height: number,
-  onProgress: (progress: number, faces?: number) => void
+  onProgress: (progress: number, faces?: number) => void,
 ): Promise<{ result: Float32Array; faceCount: number }> {
-  onProgress(10)
-  const faces = await detectFaces(imageData, width, height)
+  onProgress(10);
+  const faces = await detectFaces(imageData, width, height);
 
   if (faces.length === 0) {
-    return { result: new Float32Array(imageData), faceCount: 0 }
+    return { result: new Float32Array(imageData), faceCount: 0 };
   }
 
-  onProgress(20, faces.length)
+  onProgress(20, faces.length);
 
-  let result = new Float32Array(imageData)
-  const progressPerFace = 80 / faces.length
+  let result = new Float32Array(imageData);
+  const progressPerFace = 80 / faces.length;
 
   for (let i = 0; i < faces.length; i++) {
-    const face = faces[i]
+    const face = faces[i];
 
     const { data: faceData, cropBox } = cropAndResizeFace(
       result,
@@ -522,149 +577,185 @@ async function processImage(
       height,
       face,
       GFPGAN_INPUT_SIZE,
-      0.3
-    )
+      0.3,
+    );
 
-    const enhancedFace = await enhanceFace(faceData)
-    result = pasteEnhancedFace(result, enhancedFace, width, height, cropBox)
+    const enhancedFace = await enhanceFace(faceData);
+    result = pasteEnhancedFace(result, enhancedFace, width, height, cropBox);
 
-    onProgress(20 + (i + 1) * progressPerFace, faces.length)
+    onProgress(20 + (i + 1) * progressPerFace, faces.length);
   }
 
-  return { result, faceCount: faces.length }
+  return { result, faceCount: faces.length };
 }
 
 /**
  * Handle incoming messages
  */
 self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   switch (type) {
-    case 'init': {
+    case "init": {
       try {
-        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT
+        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT;
 
-        useWebGPU = await checkWebGPU()
-        console.log(`Face Enhancer using ${useWebGPU ? 'WebGPU' : 'WASM'} backend`)
+        useWebGPU = await checkWebGPU();
+        console.log(
+          `Face Enhancer using ${useWebGPU ? "WebGPU" : "WASM"} backend`,
+        );
 
-        const yoloCached = await isModelCached(YOLO_MODEL_URL)
-        const gfpganCached = await isModelCached(GFPGAN_MODEL_URL)
+        const yoloCached = await isModelCached(YOLO_MODEL_URL);
+        const gfpganCached = await isModelCached(GFPGAN_MODEL_URL);
 
-        let totalProgress = 0
-        const yoloWeight = 0.03
-        const gfpganWeight = 0.97
+        let totalProgress = 0;
+        const yoloWeight = 0.03;
+        const gfpganWeight = 0.97;
 
         if (!yoloCached) {
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id: payload?.id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
         }
 
-        const yoloBuffer = await downloadModel(YOLO_MODEL_URL, (current, total) => {
-          const progress = total > 0 ? (current / total) * yoloWeight * 100 : 0
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: yoloCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
-        totalProgress = yoloWeight * 100
+        const yoloBuffer = await downloadModel(
+          YOLO_MODEL_URL,
+          (current, total) => {
+            const progress =
+              total > 0 ? (current / total) * yoloWeight * 100 : 0;
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: yoloCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
+        totalProgress = yoloWeight * 100;
 
         if (!gfpganCached) {
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id: payload?.id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
         }
 
-        const gfpganBuffer = await downloadModel(GFPGAN_MODEL_URL, (current, total) => {
-          const progress = totalProgress + (total > 0 ? (current / total) * gfpganWeight * 100 : 0)
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: gfpganCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
+        const gfpganBuffer = await downloadModel(
+          GFPGAN_MODEL_URL,
+          (current, total) => {
+            const progress =
+              totalProgress +
+              (total > 0 ? (current / total) * gfpganWeight * 100 : 0);
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: gfpganCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
 
-        self.postMessage({ type: 'phase', payload: { phase: 'loading', id: payload?.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "loading", id: payload?.id },
+        });
 
-        yoloSession = await createSession(yoloBuffer)
-        gfpganSession = await createSession(gfpganBuffer)
+        yoloSession = await createSession(yoloBuffer);
+        gfpganSession = await createSession(gfpganBuffer);
 
-        self.postMessage({ type: 'ready', payload: { id: payload?.id } })
+        self.postMessage({ type: "ready", payload: { id: payload?.id } });
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to initialize models'
-        })
+          type: "error",
+          payload:
+            error instanceof Error
+              ? error.message
+              : "Failed to initialize models",
+        });
       }
-      break
+      break;
     }
 
-    case 'enhance': {
+    case "enhance": {
       if (!payload?.imageData || !payload?.width || !payload?.height) {
-        self.postMessage({ type: 'error', payload: 'Missing image data' })
-        return
+        self.postMessage({ type: "error", payload: "Missing image data" });
+        return;
       }
 
       try {
-        self.postMessage({ type: 'phase', payload: { phase: 'detect', id: payload.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "detect", id: payload.id },
+        });
 
-        let faceCount = 0
+        let faceCount = 0;
 
         const { result, faceCount: count } = await processImage(
           payload.imageData,
           payload.width,
           payload.height,
           (progress, faces) => {
-            if (faces !== undefined) faceCount = faces
+            if (faces !== undefined) faceCount = faces;
             if (progress >= 20 && faceCount > 0) {
-              self.postMessage({ type: 'phase', payload: { phase: 'enhance', id: payload.id } })
+              self.postMessage({
+                type: "phase",
+                payload: { phase: "enhance", id: payload.id },
+              });
             }
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: progress < 20 ? 'detect' : 'enhance',
+                phase: progress < 20 ? "detect" : "enhance",
                 progress,
-                id: payload.id
-              }
-            })
-          }
-        )
+                id: payload.id,
+              },
+            });
+          },
+        );
 
-        faceCount = count
+        faceCount = count;
 
         self.postMessage(
           {
-            type: 'result',
+            type: "result",
             payload: {
               data: result,
               width: payload.width,
               height: payload.height,
               faces: faceCount,
-              id: payload.id
-            }
+              id: payload.id,
+            },
           },
-          { transfer: [result.buffer] }
-        )
+          { transfer: [result.buffer] },
+        );
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to enhance image'
-        })
+          type: "error",
+          payload:
+            error instanceof Error ? error.message : "Failed to enhance image",
+        });
       }
-      break
+      break;
     }
 
-    case 'dispose': {
-      yoloSession = null
-      gfpganSession = null
-      self.postMessage({ type: 'disposed' })
-      break
+    case "dispose": {
+      yoloSession = null;
+      gfpganSession = null;
+      self.postMessage({ type: "disposed" });
+      break;
     }
   }
-}
+};
diff --git a/mobile/src/workers/ffmpeg.worker.ts b/mobile/src/workers/ffmpeg.worker.ts
index 613170e1..929a9d70 100644
--- a/mobile/src/workers/ffmpeg.worker.ts
+++ b/mobile/src/workers/ffmpeg.worker.ts
@@ -1,23 +1,23 @@
-import { FFmpeg } from '@ffmpeg/ffmpeg'
-import { toBlobURL } from '@ffmpeg/util'
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { toBlobURL } from "@ffmpeg/util";
 
-let ffmpeg: FFmpeg | null = null
-let isLoaded = false
-let loadingPromise: Promise<void> | null = null
-let currentOperationId: number | null = null
+let ffmpeg: FFmpeg | null = null;
+let isLoaded = false;
+let loadingPromise: Promise<void> | null = null;
+let currentOperationId: number | null = null;
 
 // Cache configuration
-const CACHE_NAME = 'ffmpeg-wasm-cache'
+const CACHE_NAME = "ffmpeg-wasm-cache";
 
 // Use the older, more stable 0.12.4 version with UMD build (not ESM)
 // This version is smaller and initializes faster
 function getFFmpegURLs() {
   // Try unpkg first, fallback to jsdelivr
-  const base = 'https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd'
+  const base = "https://unpkg.com/@ffmpeg/core@0.12.4/dist/umd";
   return {
     coreURL: `${base}/ffmpeg-core.js`,
     wasmURL: `${base}/ffmpeg-core.wasm`,
-  }
+  };
 }
 
 /**
@@ -25,13 +25,13 @@ function getFFmpegURLs() {
  */
 async function isFFmpegCached(): Promise<boolean> {
   try {
-    const urls = getFFmpegURLs()
-    const cache = await caches.open(CACHE_NAME)
-    const coreResponse = await cache.match(urls.coreURL)
-    const wasmResponse = await cache.match(urls.wasmURL)
-    return coreResponse !== undefined && wasmResponse !== undefined
+    const urls = getFFmpegURLs();
+    const cache = await caches.open(CACHE_NAME);
+    const coreResponse = await cache.match(urls.coreURL);
+    const wasmResponse = await cache.match(urls.wasmURL);
+    return coreResponse !== undefined && wasmResponse !== undefined;
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -41,108 +41,108 @@ async function isFFmpegCached(): Promise<boolean> {
 async function downloadAndCache(
   url: string,
   mimeType: string,
-  onProgress?: (received: number, total: number) => void
+  onProgress?: (received: number, total: number) => void,
 ): Promise<string> {
-  const cache = await caches.open(CACHE_NAME)
+  const cache = await caches.open(CACHE_NAME);
 
   // Check cache first
-  const cachedResponse = await cache.match(url)
+  const cachedResponse = await cache.match(url);
   if (cachedResponse) {
-    const blob = await cachedResponse.blob()
-    onProgress?.(blob.size, blob.size)
-    return URL.createObjectURL(blob)
+    const blob = await cachedResponse.blob();
+    onProgress?.(blob.size, blob.size);
+    return URL.createObjectURL(blob);
   }
 
   // Download with progress
-  const response = await fetch(url)
-  if (!response.ok) throw new Error(`Failed to fetch ${url}`)
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Failed to fetch ${url}`);
 
-  const contentLength = response.headers.get('content-length')
-  const total = contentLength ? parseInt(contentLength, 10) : 0
-  const reader = response.body?.getReader()
+  const contentLength = response.headers.get("content-length");
+  const total = contentLength ? parseInt(contentLength, 10) : 0;
+  const reader = response.body?.getReader();
 
-  if (!reader) throw new Error('Failed to get response reader')
+  if (!reader) throw new Error("Failed to get response reader");
 
-  const chunks: Uint8Array[] = []
-  let received = 0
+  const chunks: Uint8Array[] = [];
+  let received = 0;
 
   while (true) {
-    const { done, value } = await reader.read()
-    if (done) break
+    const { done, value } = await reader.read();
+    if (done) break;
 
-    chunks.push(value)
-    received += value.length
-    onProgress?.(received, total)
+    chunks.push(value);
+    received += value.length;
+    onProgress?.(received, total);
   }
 
   // Combine chunks
-  const buffer = new Uint8Array(received)
-  let position = 0
+  const buffer = new Uint8Array(received);
+  let position = 0;
   for (const chunk of chunks) {
-    buffer.set(chunk, position)
-    position += chunk.length
+    buffer.set(chunk, position);
+    position += chunk.length;
   }
 
   // Cache the file
   try {
     const cacheResponse = new Response(buffer.buffer, {
       headers: {
-        'Content-Type': mimeType,
-        'Content-Length': buffer.byteLength.toString()
-      }
-    })
-    await cache.put(url, cacheResponse)
+        "Content-Type": mimeType,
+        "Content-Length": buffer.byteLength.toString(),
+      },
+    });
+    await cache.put(url, cacheResponse);
   } catch (e) {
-    console.warn('[FFmpeg] Failed to cache:', e)
+    console.warn("[FFmpeg] Failed to cache:", e);
   }
 
   // Return blob URL
-  const blob = new Blob([buffer], { type: mimeType })
-  return URL.createObjectURL(blob)
+  const blob = new Blob([buffer], { type: mimeType });
+  return URL.createObjectURL(blob);
 }
 
 interface ConvertOptions {
-  videoCodec?: string
-  videoBitrate?: string
-  resolution?: string
-  fps?: number
-  audioCodec?: string
-  audioBitrate?: string
-  sampleRate?: number
-  quality?: number
+  videoCodec?: string;
+  videoBitrate?: string;
+  resolution?: string;
+  fps?: number;
+  audioCodec?: string;
+  audioBitrate?: string;
+  sampleRate?: number;
+  quality?: number;
 }
 
 interface ConvertPayload {
-  file: ArrayBuffer
-  fileName: string
-  outputFormat: string
-  outputExt: string
-  options?: ConvertOptions
-  id: number
+  file: ArrayBuffer;
+  fileName: string;
+  outputFormat: string;
+  outputExt: string;
+  options?: ConvertOptions;
+  id: number;
 }
 
 interface MergePayload {
-  files: ArrayBuffer[]
-  fileNames: string[]
-  outputFormat: string
-  outputExt: string
-  id: number
+  files: ArrayBuffer[];
+  fileNames: string[];
+  outputFormat: string;
+  outputExt: string;
+  id: number;
 }
 
 interface TrimPayload {
-  file: ArrayBuffer
-  fileName: string
-  startTime: number
-  endTime: number
-  outputFormat: string
-  outputExt: string
-  id: number
+  file: ArrayBuffer;
+  fileName: string;
+  startTime: number;
+  endTime: number;
+  outputFormat: string;
+  outputExt: string;
+  id: number;
 }
 
 interface InfoPayload {
-  file: ArrayBuffer
-  fileName: string
-  id: number
+  file: ArrayBuffer;
+  fileName: string;
+  id: number;
 }
 
 /**
@@ -152,409 +152,528 @@ interface InfoPayload {
  */
 async function ensureLoaded(
   onProgress?: (progress: number) => void,
-  skipIfCached?: boolean
+  skipIfCached?: boolean,
 ): Promise<{ ffmpeg: FFmpeg; wasCached: boolean }> {
-  if (isLoaded && ffmpeg) return { ffmpeg, wasCached: true }
+  if (isLoaded && ffmpeg) return { ffmpeg, wasCached: true };
 
   if (loadingPromise) {
-    await loadingPromise
-    return { ffmpeg: ffmpeg!, wasCached: true }
+    await loadingPromise;
+    return { ffmpeg: ffmpeg!, wasCached: true };
   }
 
-  let wasCached = false
+  let wasCached = false;
 
   loadingPromise = (async () => {
-    ffmpeg = new FFmpeg()
+    ffmpeg = new FFmpeg();
 
     // Get FFmpeg URLs (single-threaded version for better compatibility)
-    const urls = getFFmpegURLs()
-    console.log('[FFmpeg] Using single-threaded version for browser compatibility')
+    const urls = getFFmpegURLs();
+    console.log(
+      "[FFmpeg] Using single-threaded version for browser compatibility",
+    );
 
     // Check if files are already cached
-    const cached = await isFFmpegCached()
-    wasCached = cached
-    console.log(`[FFmpeg] Files cached: ${cached}`)
+    const cached = await isFFmpegCached();
+    wasCached = cached;
+    console.log(`[FFmpeg] Files cached: ${cached}`);
 
     // Always use toBlobURL for loading - it handles caching internally via browser HTTP cache
     // This is the recommended approach by ffmpeg.wasm
-    console.log('[FFmpeg] Loading FFmpeg using toBlobURL (uses browser HTTP cache)...')
-    const startTime = Date.now()
+    console.log(
+      "[FFmpeg] Loading FFmpeg using toBlobURL (uses browser HTTP cache)...",
+    );
+    const startTime = Date.now();
 
     try {
-      onProgress?.(10)
-      console.log('[FFmpeg] Fetching ffmpeg-core.js...')
-      const coreURL = await toBlobURL(urls.coreURL, 'text/javascript')
-      console.log('[FFmpeg] ffmpeg-core.js ready')
+      onProgress?.(10);
+      console.log("[FFmpeg] Fetching ffmpeg-core.js...");
+      const coreURL = await toBlobURL(urls.coreURL, "text/javascript");
+      console.log("[FFmpeg] ffmpeg-core.js ready");
 
-      onProgress?.(40)
-      console.log('[FFmpeg] Fetching ffmpeg-core.wasm (~24MB, uses HTTP cache if available)...')
-      const wasmURL = await toBlobURL(urls.wasmURL, 'application/wasm')
-      console.log('[FFmpeg] ffmpeg-core.wasm ready')
+      onProgress?.(40);
+      console.log(
+        "[FFmpeg] Fetching ffmpeg-core.wasm (~24MB, uses HTTP cache if available)...",
+      );
+      const wasmURL = await toBlobURL(urls.wasmURL, "application/wasm");
+      console.log("[FFmpeg] ffmpeg-core.wasm ready");
 
-      onProgress?.(70)
-      console.log('[FFmpeg] Calling ffmpeg.load()...')
+      onProgress?.(70);
+      console.log("[FFmpeg] Calling ffmpeg.load()...");
 
       // Progress simulation during load
-      let loadProgress = 70
+      let loadProgress = 70;
       const progressInterval = setInterval(() => {
-        const elapsed = Math.floor((Date.now() - startTime) / 1000)
-        console.log(`[FFmpeg] Still in ffmpeg.load()... (${elapsed}s elapsed)`)
+        const elapsed = Math.floor((Date.now() - startTime) / 1000);
+        console.log(`[FFmpeg] Still in ffmpeg.load()... (${elapsed}s elapsed)`);
         if (loadProgress < 95) {
-          loadProgress += 2
-          onProgress?.(loadProgress)
+          loadProgress += 2;
+          onProgress?.(loadProgress);
         }
-      }, 2000)
+      }, 2000);
 
       try {
         // 60 second timeout for ffmpeg.load()
-        const loadPromise = ffmpeg.load({ coreURL, wasmURL })
+        const loadPromise = ffmpeg.load({ coreURL, wasmURL });
         const timeoutPromise = new Promise<never>((_, reject) => {
-          setTimeout(() => reject(new Error('FFmpeg initialization timed out (60s). Try refreshing the page.')), 60000)
-        })
-
-        await Promise.race([loadPromise, timeoutPromise])
-
-        const totalTime = Math.floor((Date.now() - startTime) / 1000)
-        console.log(`[FFmpeg] Ready! (took ${totalTime}s)`)
-
-        isLoaded = true
-        onProgress?.(100)
-        return
+          setTimeout(
+            () =>
+              reject(
+                new Error(
+                  "FFmpeg initialization timed out (60s). Try refreshing the page.",
+                ),
+              ),
+            60000,
+          );
+        });
+
+        await Promise.race([loadPromise, timeoutPromise]);
+
+        const totalTime = Math.floor((Date.now() - startTime) / 1000);
+        console.log(`[FFmpeg] Ready! (took ${totalTime}s)`);
+
+        isLoaded = true;
+        onProgress?.(100);
+        return;
       } finally {
-        clearInterval(progressInterval)
+        clearInterval(progressInterval);
       }
     } catch (err) {
-      console.error('[FFmpeg] Load failed:', err)
+      console.error("[FFmpeg] Load failed:", err);
       // Reset state so user can retry
-      ffmpeg = null
-      isLoaded = false
-      loadingPromise = null
-      throw err
+      ffmpeg = null;
+      isLoaded = false;
+      loadingPromise = null;
+      throw err;
     }
-  })()
+  })();
 
-  await loadingPromise
-  return { ffmpeg: ffmpeg!, wasCached }
+  await loadingPromise;
+  return { ffmpeg: ffmpeg!, wasCached };
 }
 
 function buildConvertArgs(
   inputFile: string,
   outputFile: string,
   outputFormat: string,
-  options?: ConvertOptions
+  options?: ConvertOptions,
 ): string[] {
-  console.log(`[FFmpeg] Building args for format: ${outputFormat}, options:`, options)
-  const args: string[] = ['-i', inputFile]
+  console.log(
+    `[FFmpeg] Building args for format: ${outputFormat}, options:`,
+    options,
+  );
+  const args: string[] = ["-i", inputFile];
 
   // Image conversion
-  if (['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp'].includes(outputFormat)) {
-    if (options?.quality && ['jpg', 'jpeg', 'webp'].includes(outputFormat)) {
-      if (outputFormat === 'webp') {
-        args.push('-quality', String(options.quality))
+  if (["jpg", "jpeg", "png", "webp", "gif", "bmp"].includes(outputFormat)) {
+    if (options?.quality && ["jpg", "jpeg", "webp"].includes(outputFormat)) {
+      if (outputFormat === "webp") {
+        args.push("-quality", String(options.quality));
       } else {
-        const qscale = Math.round(31 - (options.quality / 100) * 29)
-        args.push('-qscale:v', String(qscale))
+        const qscale = Math.round(31 - (options.quality / 100) * 29);
+        args.push("-qscale:v", String(qscale));
       }
     }
-    args.push('-frames:v', '1', '-update', '1', outputFile)
-    return args
+    args.push("-frames:v", "1", "-update", "1", outputFile);
+    return args;
   }
 
   // Lossless/uncompressed audio formats (no bitrate)
-  const losslessAudioFormats = ['wav', 'flac']
-  const isLossless = losslessAudioFormats.includes(outputFormat)
+  const losslessAudioFormats = ["wav", "flac"];
+  const isLossless = losslessAudioFormats.includes(outputFormat);
 
   // Video/Audio options
-  if (options?.videoCodec) args.push('-c:v', options.videoCodec)
-  if (options?.videoBitrate) args.push('-b:v', options.videoBitrate)
-  if (options?.resolution && options.resolution !== 'original') {
-    args.push('-vf', `scale=${options.resolution.replace('x', ':')}`)
+  if (options?.videoCodec) args.push("-c:v", options.videoCodec);
+  if (options?.videoBitrate) args.push("-b:v", options.videoBitrate);
+  if (options?.resolution && options.resolution !== "original") {
+    args.push("-vf", `scale=${options.resolution.replace("x", ":")}`);
   }
-  if (options?.fps) args.push('-r', String(options.fps))
+  if (options?.fps) args.push("-r", String(options.fps));
 
   // Audio codec handling
   if (options?.audioCodec) {
     // For WAV, use pcm_s16le which is widely supported
-    if (outputFormat === 'wav') {
-      args.push('-c:a', 'pcm_s16le')
+    if (outputFormat === "wav") {
+      args.push("-c:a", "pcm_s16le");
     } else {
-      args.push('-c:a', options.audioCodec)
+      args.push("-c:a", options.audioCodec);
     }
   }
 
   // Only add bitrate for lossy formats
   if (options?.audioBitrate && !isLossless) {
-    args.push('-b:a', options.audioBitrate)
+    args.push("-b:a", options.audioBitrate);
   }
 
-  if (options?.sampleRate) args.push('-ar', String(options.sampleRate))
+  if (options?.sampleRate) args.push("-ar", String(options.sampleRate));
 
-  args.push(outputFile)
-  return args
+  args.push(outputFile);
+  return args;
 }
 
 function parseDuration(log: string): number | null {
-  const match = log.match(/Duration: (\d{2}):(\d{2}):(\d{2})\.(\d{2})/)
+  const match = log.match(/Duration: (\d{2}):(\d{2}):(\d{2})\.(\d{2})/);
   if (match) {
-    return parseInt(match[1]) * 3600 + parseInt(match[2]) * 60 + parseInt(match[3]) + parseInt(match[4]) / 100
+    return (
+      parseInt(match[1]) * 3600 +
+      parseInt(match[2]) * 60 +
+      parseInt(match[3]) +
+      parseInt(match[4]) / 100
+    );
   }
-  return null
+  return null;
 }
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'checkCache': {
-        const cached = await isFFmpegCached()
-        self.postMessage({ type: 'cacheStatus', payload: { cached } })
-        break
+      case "checkCache": {
+        const cached = await isFFmpegCached();
+        self.postMessage({ type: "cacheStatus", payload: { cached } });
+        break;
       }
 
-      case 'load': {
-        self.postMessage({ type: 'phase', payload: { phase: 'download' } })
+      case "load": {
+        self.postMessage({ type: "phase", payload: { phase: "download" } });
         await ensureLoaded((progress) => {
-          self.postMessage({ type: 'progress', payload: { phase: 'download', progress } })
-        }, false) // Don't skip - show full progress for preload
-        self.postMessage({ type: 'loaded' })
-        break
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "download", progress },
+          });
+        }, false); // Don't skip - show full progress for preload
+        self.postMessage({ type: "loaded" });
+        break;
       }
 
-      case 'convert': {
-        const { file, fileName, outputFormat, outputExt, options, id } = payload as ConvertPayload
-        currentOperationId = id
+      case "convert": {
+        const { file, fileName, outputFormat, outputExt, options, id } =
+          payload as ConvertPayload;
+        currentOperationId = id;
 
         // Check if cached first
-        const cached = await isFFmpegCached()
+        const cached = await isFFmpegCached();
 
         if (!cached) {
           // Not cached - show download phase
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id },
+          });
         }
 
         const { ffmpeg: ff, wasCached } = await ensureLoaded((progress) => {
           if (!cached) {
-            self.postMessage({ type: 'progress', payload: { phase: 'download', progress, id } })
+            self.postMessage({
+              type: "progress",
+              payload: { phase: "download", progress, id },
+            });
           }
-        }, cached) // Skip download progress display if cached
+        }, cached); // Skip download progress display if cached
 
         // Notify that we're skipping download phase if cached
         if (wasCached) {
-          self.postMessage({ type: 'cached', payload: { id } })
+          self.postMessage({ type: "cached", payload: { id } });
         }
 
-        self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
+        self.postMessage({ type: "phase", payload: { phase: "process", id } });
 
-        await ff.writeFile(fileName, new Uint8Array(file))
+        await ff.writeFile(fileName, new Uint8Array(file));
 
-        let totalDuration: number | null = null
-        let lastProgress = 0
+        let totalDuration: number | null = null;
+        let lastProgress = 0;
 
         // Set up logging to capture duration and debug info
         const logHandler = ({ message }: { message: string }) => {
-          if (!totalDuration) totalDuration = parseDuration(message)
+          if (!totalDuration) totalDuration = parseDuration(message);
           // Log errors for debugging
-          if (message.includes('Error') || message.includes('error')) {
-            console.warn('[FFmpeg]', message)
+          if (message.includes("Error") || message.includes("error")) {
+            console.warn("[FFmpeg]", message);
           }
-        }
-        ff.on('log', logHandler)
+        };
+        ff.on("log", logHandler);
 
         // Progress handler
-        const progressHandler = ({ progress, time }: { progress: number; time: number }) => {
-          if (currentOperationId !== id) return
-          const progressPercent = Math.max(progress * 100, lastProgress)
-          lastProgress = progressPercent
+        const progressHandler = ({
+          progress,
+          time,
+        }: {
+          progress: number;
+          time: number;
+        }) => {
+          if (currentOperationId !== id) return;
+          const progressPercent = Math.max(progress * 100, lastProgress);
+          lastProgress = progressPercent;
           self.postMessage({
-            type: 'progress',
+            type: "progress",
             payload: {
-              phase: 'process',
+              phase: "process",
               progress: progressPercent,
-              detail: totalDuration ? { current: Math.floor(time / 1000000), total: Math.floor(totalDuration), unit: 'seconds' } : undefined,
-              id
-            }
-          })
-        }
-        ff.on('progress', progressHandler)
-
-        const outputFile = `output.${outputExt}`
-        const args = buildConvertArgs(fileName, outputFile, outputFormat, options)
-        console.log('[FFmpeg] Running:', args.join(' '))
+              detail: totalDuration
+                ? {
+                    current: Math.floor(time / 1000000),
+                    total: Math.floor(totalDuration),
+                    unit: "seconds",
+                  }
+                : undefined,
+              id,
+            },
+          });
+        };
+        ff.on("progress", progressHandler);
+
+        const outputFile = `output.${outputExt}`;
+        const args = buildConvertArgs(
+          fileName,
+          outputFile,
+          outputFormat,
+          options,
+        );
+        console.log("[FFmpeg] Running:", args.join(" "));
 
         try {
-          const exitCode = await ff.exec(args)
-          console.log('[FFmpeg] Exit code:', exitCode)
+          const exitCode = await ff.exec(args);
+          console.log("[FFmpeg] Exit code:", exitCode);
 
           if (exitCode !== 0) {
-            throw new Error(`FFmpeg exited with code ${exitCode}`)
+            throw new Error(`FFmpeg exited with code ${exitCode}`);
           }
 
-          const data = await ff.readFile(outputFile)
-          await ff.deleteFile(fileName)
-          await ff.deleteFile(outputFile)
-
-          const buffer = (data as Uint8Array).buffer
-          self.postMessage({ type: 'result', payload: { data: buffer, filename: outputFile, id } }, { transfer: [buffer] })
+          const data = await ff.readFile(outputFile);
+          await ff.deleteFile(fileName);
+          await ff.deleteFile(outputFile);
+
+          const buffer = (data as Uint8Array).buffer;
+          self.postMessage(
+            {
+              type: "result",
+              payload: { data: buffer, filename: outputFile, id },
+            },
+            { transfer: [buffer] },
+          );
         } finally {
           // Clean up event listeners
-          ff.off('log', logHandler)
-          ff.off('progress', progressHandler)
-          currentOperationId = null
+          ff.off("log", logHandler);
+          ff.off("progress", progressHandler);
+          currentOperationId = null;
         }
-        break
+        break;
       }
 
-      case 'merge': {
-        const { files, fileNames, outputFormat, outputExt, id } = payload as MergePayload
-        currentOperationId = id
+      case "merge": {
+        const { files, fileNames, outputFormat, outputExt, id } =
+          payload as MergePayload;
+        currentOperationId = id;
 
         // Check if cached first
-        const cached = await isFFmpegCached()
+        const cached = await isFFmpegCached();
 
         if (!cached) {
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id },
+          });
         }
 
         const { ffmpeg: ff, wasCached } = await ensureLoaded((progress) => {
           if (!cached) {
-            self.postMessage({ type: 'progress', payload: { phase: 'download', progress, id } })
+            self.postMessage({
+              type: "progress",
+              payload: { phase: "download", progress, id },
+            });
           }
-        }, cached)
+        }, cached);
 
         if (wasCached) {
-          self.postMessage({ type: 'cached', payload: { id } })
+          self.postMessage({ type: "cached", payload: { id } });
         }
 
-        self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
+        self.postMessage({ type: "phase", payload: { phase: "process", id } });
 
         for (let i = 0; i < files.length; i++) {
-          await ff.writeFile(fileNames[i], new Uint8Array(files[i]))
+          await ff.writeFile(fileNames[i], new Uint8Array(files[i]));
         }
 
-        const concatList = fileNames.map(name => `file '${name}'`).join('\n')
-        await ff.writeFile('concat.txt', concatList)
-
-        ff.on('progress', ({ progress }) => {
-          if (currentOperationId !== id) return
-          self.postMessage({ type: 'progress', payload: { phase: 'process', progress: progress * 100, id } })
-        })
-
-        const outputFile = `output.${outputExt}`
-        await ff.exec(['-f', 'concat', '-safe', '0', '-i', 'concat.txt', '-c', 'copy', outputFile])
-
-        const data = await ff.readFile(outputFile)
-        for (const name of fileNames) await ff.deleteFile(name)
-        await ff.deleteFile('concat.txt')
-        await ff.deleteFile(outputFile)
+        const concatList = fileNames.map((name) => `file '${name}'`).join("\n");
+        await ff.writeFile("concat.txt", concatList);
 
-        const buffer = (data as Uint8Array).buffer
-        self.postMessage({ type: 'result', payload: { data: buffer, filename: outputFile, id } }, { transfer: [buffer] })
-        currentOperationId = null
-        break
+        ff.on("progress", ({ progress }) => {
+          if (currentOperationId !== id) return;
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "process", progress: progress * 100, id },
+          });
+        });
+
+        const outputFile = `output.${outputExt}`;
+        await ff.exec([
+          "-f",
+          "concat",
+          "-safe",
+          "0",
+          "-i",
+          "concat.txt",
+          "-c",
+          "copy",
+          outputFile,
+        ]);
+
+        const data = await ff.readFile(outputFile);
+        for (const name of fileNames) await ff.deleteFile(name);
+        await ff.deleteFile("concat.txt");
+        await ff.deleteFile(outputFile);
+
+        const buffer = (data as Uint8Array).buffer;
+        self.postMessage(
+          {
+            type: "result",
+            payload: { data: buffer, filename: outputFile, id },
+          },
+          { transfer: [buffer] },
+        );
+        currentOperationId = null;
+        break;
       }
 
-      case 'trim': {
-        const { file, fileName, startTime, endTime, outputFormat, outputExt, id } = payload as TrimPayload
-        currentOperationId = id
+      case "trim": {
+        const {
+          file,
+          fileName,
+          startTime,
+          endTime,
+          outputFormat,
+          outputExt,
+          id,
+        } = payload as TrimPayload;
+        currentOperationId = id;
 
         // Check if cached first
-        const cached = await isFFmpegCached()
+        const cached = await isFFmpegCached();
 
         if (!cached) {
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id },
+          });
         }
 
         const { ffmpeg: ff, wasCached } = await ensureLoaded((progress) => {
           if (!cached) {
-            self.postMessage({ type: 'progress', payload: { phase: 'download', progress, id } })
+            self.postMessage({
+              type: "progress",
+              payload: { phase: "download", progress, id },
+            });
           }
-        }, cached)
+        }, cached);
 
         if (wasCached) {
-          self.postMessage({ type: 'cached', payload: { id } })
+          self.postMessage({ type: "cached", payload: { id } });
         }
 
-        self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
+        self.postMessage({ type: "phase", payload: { phase: "process", id } });
 
-        await ff.writeFile(fileName, new Uint8Array(file))
-        const duration = endTime - startTime
+        await ff.writeFile(fileName, new Uint8Array(file));
+        const duration = endTime - startTime;
 
-        ff.on('progress', ({ progress }) => {
-          if (currentOperationId !== id) return
+        ff.on("progress", ({ progress }) => {
+          if (currentOperationId !== id) return;
           self.postMessage({
-            type: 'progress',
+            type: "progress",
             payload: {
-              phase: 'process',
+              phase: "process",
               progress: progress * 100,
-              detail: { current: Math.floor(progress * duration), total: Math.floor(duration), unit: 'seconds' },
-              id
-            }
-          })
-        })
-
-        const outputFile = `output.${outputExt}`
-        await ff.exec(['-ss', String(startTime), '-i', fileName, '-t', String(duration), '-c', 'copy', outputFile])
-
-        const data = await ff.readFile(outputFile)
-        await ff.deleteFile(fileName)
-        await ff.deleteFile(outputFile)
-
-        const buffer = (data as Uint8Array).buffer
-        self.postMessage({ type: 'result', payload: { data: buffer, filename: outputFile, id } }, { transfer: [buffer] })
-        currentOperationId = null
-        break
+              detail: {
+                current: Math.floor(progress * duration),
+                total: Math.floor(duration),
+                unit: "seconds",
+              },
+              id,
+            },
+          });
+        });
+
+        const outputFile = `output.${outputExt}`;
+        await ff.exec([
+          "-ss",
+          String(startTime),
+          "-i",
+          fileName,
+          "-t",
+          String(duration),
+          "-c",
+          "copy",
+          outputFile,
+        ]);
+
+        const data = await ff.readFile(outputFile);
+        await ff.deleteFile(fileName);
+        await ff.deleteFile(outputFile);
+
+        const buffer = (data as Uint8Array).buffer;
+        self.postMessage(
+          {
+            type: "result",
+            payload: { data: buffer, filename: outputFile, id },
+          },
+          { transfer: [buffer] },
+        );
+        currentOperationId = null;
+        break;
       }
 
-      case 'getInfo': {
-        const { file, fileName, id } = payload as InfoPayload
-        const { ffmpeg: ff } = await ensureLoaded(undefined, true)
+      case "getInfo": {
+        const { file, fileName, id } = payload as InfoPayload;
+        const { ffmpeg: ff } = await ensureLoaded(undefined, true);
 
-        await ff.writeFile(fileName, new Uint8Array(file))
+        await ff.writeFile(fileName, new Uint8Array(file));
 
-        let logOutput = ''
-        ff.on('log', ({ message }) => { logOutput += message + '\n' })
+        let logOutput = "";
+        ff.on("log", ({ message }) => {
+          logOutput += message + "\n";
+        });
 
         try {
-          await ff.exec(['-i', fileName, '-f', 'null', '-'])
+          await ff.exec(["-i", fileName, "-f", "null", "-"]);
         } catch {
           // Expected to fail, but logs contain info
         }
 
-        const duration = parseDuration(logOutput)
-        const resMatch = logOutput.match(/(\d{2,4})x(\d{2,4})/)
-        const videoCodecMatch = logOutput.match(/Video: (\w+)/)
-        const audioCodecMatch = logOutput.match(/Audio: (\w+)/)
+        const duration = parseDuration(logOutput);
+        const resMatch = logOutput.match(/(\d{2,4})x(\d{2,4})/);
+        const videoCodecMatch = logOutput.match(/Video: (\w+)/);
+        const audioCodecMatch = logOutput.match(/Audio: (\w+)/);
 
-        await ff.deleteFile(fileName)
+        await ff.deleteFile(fileName);
 
         self.postMessage({
-          type: 'info',
+          type: "info",
           payload: {
             duration,
-            resolution: resMatch ? { width: parseInt(resMatch[1]), height: parseInt(resMatch[2]) } : null,
+            resolution: resMatch
+              ? { width: parseInt(resMatch[1]), height: parseInt(resMatch[2]) }
+              : null,
             videoCodec: videoCodecMatch?.[1] || null,
             audioCodec: audioCodecMatch?.[1] || null,
-            id
-          }
-        })
-        break
+            id,
+          },
+        });
+        break;
       }
 
-      case 'cancel': {
-        currentOperationId = null
-        break
+      case "cancel": {
+        currentOperationId = null;
+        break;
       }
 
-      case 'dispose': {
-        ffmpeg = null
-        isLoaded = false
-        loadingPromise = null
-        self.postMessage({ type: 'disposed' })
-        break
+      case "dispose": {
+        ffmpeg = null;
+        isLoaded = false;
+        loadingPromise = null;
+        self.postMessage({ type: "disposed" });
+        break;
       }
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/mobile/src/workers/imageEraser.worker.ts b/mobile/src/workers/imageEraser.worker.ts
index c72ff9f4..d97e428f 100644
--- a/mobile/src/workers/imageEraser.worker.ts
+++ b/mobile/src/workers/imageEraser.worker.ts
@@ -4,100 +4,100 @@
  */
 
 // @ts-expect-error - onnxruntime-web types not resolved due to package.json exports
-import * as ort from 'onnxruntime-web'
+import * as ort from "onnxruntime-web";
 
 // Configure WASM paths to use CDN (required for Vite bundling)
 // Must match the installed onnxruntime-web version
-const ORT_WASM_VERSION = '1.21.0'
-ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`
+const ORT_WASM_VERSION = "1.21.0";
+ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`;
 
 // LaMa model from Hugging Face (quantized)
 const MODEL_URL =
-  'https://huggingface.co/opencv/inpainting_lama/resolve/main/inpainting_lama_2025jan.onnx'
-const MODEL_SIZE = 512
-const CACHE_NAME = 'lama-model-cache'
+  "https://huggingface.co/opencv/inpainting_lama/resolve/main/inpainting_lama_2025jan.onnx";
+const MODEL_SIZE = 512;
+const CACHE_NAME = "lama-model-cache";
 
 // ONNX Runtime session
-let session: ort.InferenceSession | null = null
+let session: ort.InferenceSession | null = null;
 
 interface WorkerMessage {
-  type: 'init' | 'process' | 'dispose'
+  type: "init" | "process" | "dispose";
   payload?: {
-    imageData?: Float32Array
-    maskData?: Float32Array
-    width?: number
-    height?: number
-    id?: number
-  }
+    imageData?: Float32Array;
+    maskData?: Float32Array;
+    width?: number;
+    height?: number;
+    id?: number;
+  };
 }
 
 /**
  * Download model with progress tracking
  */
 async function downloadModel(
-  onProgress: (current: number, total: number) => void
+  onProgress: (current: number, total: number) => void,
 ): Promise<ArrayBuffer> {
   // Try to get from cache first
-  const cache = await caches.open(CACHE_NAME)
-  const cachedResponse = await cache.match(MODEL_URL)
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(MODEL_URL);
 
   if (cachedResponse) {
-    const buffer = await cachedResponse.arrayBuffer()
-    onProgress(buffer.byteLength, buffer.byteLength)
-    return buffer
+    const buffer = await cachedResponse.arrayBuffer();
+    onProgress(buffer.byteLength, buffer.byteLength);
+    return buffer;
   }
 
   // Download with progress
   const response = await fetch(MODEL_URL, {
-    mode: 'cors'
-  })
+    mode: "cors",
+  });
 
   if (!response.ok) {
-    throw new Error(`Failed to download model: ${response.status}`)
+    throw new Error(`Failed to download model: ${response.status}`);
   }
 
-  const contentLength = response.headers.get('content-length')
-  const total = contentLength ? parseInt(contentLength, 10) : 0
+  const contentLength = response.headers.get("content-length");
+  const total = contentLength ? parseInt(contentLength, 10) : 0;
 
-  const reader = response.body?.getReader()
+  const reader = response.body?.getReader();
   if (!reader) {
-    throw new Error('Failed to get response reader')
+    throw new Error("Failed to get response reader");
   }
 
-  const chunks: Uint8Array[] = []
-  let received = 0
+  const chunks: Uint8Array[] = [];
+  let received = 0;
 
   while (true) {
-    const { done, value } = await reader.read()
-    if (done) break
+    const { done, value } = await reader.read();
+    if (done) break;
 
-    chunks.push(value)
-    received += value.length
-    onProgress(received, total)
+    chunks.push(value);
+    received += value.length;
+    onProgress(received, total);
   }
 
   // Combine chunks
-  const buffer = new Uint8Array(received)
-  let position = 0
+  const buffer = new Uint8Array(received);
+  let position = 0;
   for (const chunk of chunks) {
-    buffer.set(chunk, position)
-    position += chunk.length
+    buffer.set(chunk, position);
+    position += chunk.length;
   }
 
   // Cache the model for future use
   try {
     const cacheResponse = new Response(buffer.buffer, {
       headers: {
-        'Content-Type': 'application/octet-stream',
-        'Content-Length': buffer.byteLength.toString()
-      }
-    })
-    await cache.put(MODEL_URL, cacheResponse)
+        "Content-Type": "application/octet-stream",
+        "Content-Length": buffer.byteLength.toString(),
+      },
+    });
+    await cache.put(MODEL_URL, cacheResponse);
   } catch (e) {
     // Model cache failed
   }
 
-  return buffer.buffer
+  return buffer.buffer;
 }
 
 /**
@@ -105,11 +105,11 @@ async function downloadModel(
  */
 async function initSession(modelBuffer: ArrayBuffer): Promise<void> {
   session = await ort.InferenceSession.create(modelBuffer, {
-    executionProviders: ['wasm'],
-    graphOptimizationLevel: 'all',
+    executionProviders: ["wasm"],
+    graphOptimizationLevel: "all",
     enableCpuMemArena: true,
-    executionMode: 'sequential'
-  })
+    executionMode: "sequential",
+  });
   // WASM backend initialized
 }
 
@@ -122,42 +122,42 @@ function resizeCHW(
   srcH: number,
   dstW: number,
   dstH: number,
-  channels: number
+  channels: number,
 ): Float32Array {
-  const result = new Float32Array(channels * dstH * dstW)
+  const result = new Float32Array(channels * dstH * dstW);
 
   for (let c = 0; c < channels; c++) {
     for (let y = 0; y < dstH; y++) {
       for (let x = 0; x < dstW; x++) {
         // Map to source coordinates
-        const srcX = (x * (srcW - 1)) / (dstW - 1)
-        const srcY = (y * (srcH - 1)) / (dstH - 1)
+        const srcX = (x * (srcW - 1)) / (dstW - 1);
+        const srcY = (y * (srcH - 1)) / (dstH - 1);
 
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, srcW - 1)
-        const y1 = Math.min(y0 + 1, srcH - 1)
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, srcW - 1);
+        const y1 = Math.min(y0 + 1, srcH - 1);
 
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
 
         // Get source values
-        const v00 = data[c * srcH * srcW + y0 * srcW + x0]
-        const v10 = data[c * srcH * srcW + y0 * srcW + x1]
-        const v01 = data[c * srcH * srcW + y1 * srcW + x0]
-        const v11 = data[c * srcH * srcW + y1 * srcW + x1]
+        const v00 = data[c * srcH * srcW + y0 * srcW + x0];
+        const v10 = data[c * srcH * srcW + y0 * srcW + x1];
+        const v01 = data[c * srcH * srcW + y1 * srcW + x0];
+        const v11 = data[c * srcH * srcW + y1 * srcW + x1];
 
         // Bilinear interpolation
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
 
-        result[c * dstH * dstW + y * dstW + x] = v
+        result[c * dstH * dstW + y * dstW + x] = v;
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -168,19 +168,19 @@ function resizeMaskCHW(
   srcW: number,
   srcH: number,
   dstW: number,
-  dstH: number
+  dstH: number,
 ): Float32Array {
-  const result = new Float32Array(dstH * dstW)
+  const result = new Float32Array(dstH * dstW);
 
   for (let y = 0; y < dstH; y++) {
     for (let x = 0; x < dstW; x++) {
-      const srcX = Math.round((x * (srcW - 1)) / (dstW - 1))
-      const srcY = Math.round((y * (srcH - 1)) / (dstH - 1))
-      result[y * dstW + x] = data[srcY * srcW + srcX]
+      const srcX = Math.round((x * (srcW - 1)) / (dstW - 1));
+      const srcY = Math.round((y * (srcH - 1)) / (dstH - 1));
+      result[y * dstW + x] = data[srcY * srcW + srcX];
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -189,27 +189,27 @@ function resizeMaskCHW(
 function getMaskBoundingBox(
   maskData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): { minX: number; minY: number; maxX: number; maxY: number } | null {
-  let minX = width
-  let minY = height
-  let maxX = 0
-  let maxY = 0
-  let hasMask = false
+  let minX = width;
+  let minY = height;
+  let maxX = 0;
+  let maxY = 0;
+  let hasMask = false;
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
       if (maskData[y * width + x] > 0.5) {
-        hasMask = true
-        minX = Math.min(minX, x)
-        minY = Math.min(minY, y)
-        maxX = Math.max(maxX, x)
-        maxY = Math.max(maxY, y)
+        hasMask = true;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
       }
     }
   }
 
-  return hasMask ? { minX, minY, maxX, maxY } : null
+  return hasMask ? { minX, minY, maxX, maxY } : null;
 }
 
 /**
@@ -218,29 +218,29 @@ function getMaskBoundingBox(
 function calculateCropRegion(
   maskBbox: { minX: number; minY: number; maxX: number; maxY: number },
   imgWidth: number,
-  imgHeight: number
+  imgHeight: number,
 ): { x: number; y: number; w: number; h: number } {
-  const maskW = maskBbox.maxX - maskBbox.minX + 1
-  const maskH = maskBbox.maxY - maskBbox.minY + 1
-  const maskCenterX = (maskBbox.minX + maskBbox.maxX) / 2
-  const maskCenterY = (maskBbox.minY + maskBbox.maxY) / 2
+  const maskW = maskBbox.maxX - maskBbox.minX + 1;
+  const maskH = maskBbox.maxY - maskBbox.minY + 1;
+  const maskCenterX = (maskBbox.minX + maskBbox.maxX) / 2;
+  const maskCenterY = (maskBbox.minY + maskBbox.maxY) / 2;
 
   // Target size: 3x mask size, but at least MODEL_SIZE
-  let cropW = Math.max(maskW * 3, MODEL_SIZE)
-  let cropH = Math.max(maskH * 3, MODEL_SIZE)
+  let cropW = Math.max(maskW * 3, MODEL_SIZE);
+  let cropH = Math.max(maskH * 3, MODEL_SIZE);
 
   // Clamp to image dimensions
-  cropW = Math.min(cropW, imgWidth)
-  cropH = Math.min(cropH, imgHeight)
+  cropW = Math.min(cropW, imgWidth);
+  cropH = Math.min(cropH, imgHeight);
 
   // Center crop on mask, but clamp to image bounds
-  let cropX = Math.round(maskCenterX - cropW / 2)
-  let cropY = Math.round(maskCenterY - cropH / 2)
+  let cropX = Math.round(maskCenterX - cropW / 2);
+  let cropY = Math.round(maskCenterY - cropH / 2);
 
-  cropX = Math.max(0, Math.min(cropX, imgWidth - cropW))
-  cropY = Math.max(0, Math.min(cropY, imgHeight - cropH))
+  cropX = Math.max(0, Math.min(cropX, imgWidth - cropW));
+  cropY = Math.max(0, Math.min(cropY, imgHeight - cropH));
 
-  return { x: cropX, y: cropY, w: cropW, h: cropH }
+  return { x: cropX, y: cropY, w: cropW, h: cropH };
 }
 
 /**
@@ -254,21 +254,21 @@ function extractCropCHW(
   cropY: number,
   cropW: number,
   cropH: number,
-  channels: number
+  channels: number,
 ): Float32Array {
-  const result = new Float32Array(channels * cropH * cropW)
+  const result = new Float32Array(channels * cropH * cropW);
 
   for (let c = 0; c < channels; c++) {
     for (let y = 0; y < cropH; y++) {
       for (let x = 0; x < cropW; x++) {
-        const srcIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x)
-        const dstIdx = c * cropH * cropW + y * cropW + x
-        result[dstIdx] = data[srcIdx]
+        const srcIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x);
+        const dstIdx = c * cropH * cropW + y * cropW + x;
+        result[dstIdx] = data[srcIdx];
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -280,17 +280,17 @@ function extractCropMask(
   cropX: number,
   cropY: number,
   cropW: number,
-  cropH: number
+  cropH: number,
 ): Float32Array {
-  const result = new Float32Array(cropH * cropW)
+  const result = new Float32Array(cropH * cropW);
 
   for (let y = 0; y < cropH; y++) {
     for (let x = 0; x < cropW; x++) {
-      result[y * cropW + x] = data[(cropY + y) * imgW + (cropX + x)]
+      result[y * cropW + x] = data[(cropY + y) * imgW + (cropX + x)];
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -307,41 +307,46 @@ function pasteCropWithBlend(
   cropW: number,
   cropH: number,
   channels: number,
-  featherSize: number = 8
+  featherSize: number = 8,
 ): Float32Array {
-  const result = new Float32Array(original)
+  const result = new Float32Array(original);
 
   // Create blend mask: 1.0 in center, fading to 0 at edges
   for (let c = 0; c < channels; c++) {
     for (let y = 0; y < cropH; y++) {
       for (let x = 0; x < cropW; x++) {
-        const maskVal = mask[y * cropW + x]
+        const maskVal = mask[y * cropW + x];
 
         // Only blend where mask is active
-        if (maskVal < 0.01) continue
+        if (maskVal < 0.01) continue;
 
         // Calculate edge feather factor
-        const distToLeft = x
-        const distToRight = cropW - 1 - x
-        const distToTop = y
-        const distToBottom = cropH - 1 - y
-        const minDist = Math.min(distToLeft, distToRight, distToTop, distToBottom)
-        const edgeFactor = Math.min(1.0, minDist / featherSize)
+        const distToLeft = x;
+        const distToRight = cropW - 1 - x;
+        const distToTop = y;
+        const distToBottom = cropH - 1 - y;
+        const minDist = Math.min(
+          distToLeft,
+          distToRight,
+          distToTop,
+          distToBottom,
+        );
+        const edgeFactor = Math.min(1.0, minDist / featherSize);
 
         // Blend factor: full blend in masked area, feathered at crop edges
-        const blendFactor = maskVal * edgeFactor
+        const blendFactor = maskVal * edgeFactor;
 
-        const srcIdx = c * cropH * cropW + y * cropW + x
-        const dstIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x)
+        const srcIdx = c * cropH * cropW + y * cropW + x;
+        const dstIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x);
 
         // Blend: original * (1 - blend) + inpainted * blend
         result[dstIdx] =
-          original[dstIdx] * (1 - blendFactor) + crop[srcIdx] * blendFactor
+          original[dstIdx] * (1 - blendFactor) + crop[srcIdx] * blendFactor;
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -351,21 +356,21 @@ async function removeArea(
   imageData: Float32Array,
   maskData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): Promise<Float32Array> {
   if (!session) {
-    throw new Error('Session not initialized')
+    throw new Error("Session not initialized");
   }
 
   // Find mask bounding box
-  const maskBbox = getMaskBoundingBox(maskData, width, height)
+  const maskBbox = getMaskBoundingBox(maskData, width, height);
   if (!maskBbox) {
     // No mask - return original
-    return new Float32Array(imageData)
+    return new Float32Array(imageData);
   }
 
   // Calculate crop region (3x mask size, min MODEL_SIZE)
-  const crop = calculateCropRegion(maskBbox, width, height)
+  const crop = calculateCropRegion(maskBbox, width, height);
 
   // Extract crops
   const croppedImage = extractCropCHW(
@@ -376,24 +381,24 @@ async function removeArea(
     crop.y,
     crop.w,
     crop.h,
-    3
-  )
+    3,
+  );
   const croppedMask = extractCropMask(
     maskData,
     width,
     crop.x,
     crop.y,
     crop.w,
-    crop.h
-  )
+    crop.h,
+  );
 
   // Resize to model input size
-  let resizedImage: Float32Array
-  let resizedMask: Float32Array
+  let resizedImage: Float32Array;
+  let resizedMask: Float32Array;
 
   if (crop.w === MODEL_SIZE && crop.h === MODEL_SIZE) {
-    resizedImage = croppedImage
-    resizedMask = croppedMask
+    resizedImage = croppedImage;
+    resizedMask = croppedMask;
   } else {
     resizedImage = resizeCHW(
       croppedImage,
@@ -401,52 +406,65 @@ async function removeArea(
       crop.h,
       MODEL_SIZE,
       MODEL_SIZE,
-      3
-    )
-    resizedMask = resizeMaskCHW(croppedMask, crop.w, crop.h, MODEL_SIZE, MODEL_SIZE)
+      3,
+    );
+    resizedMask = resizeMaskCHW(
+      croppedMask,
+      crop.w,
+      crop.h,
+      MODEL_SIZE,
+      MODEL_SIZE,
+    );
   }
 
   // Binarize mask (model expects 0 or 1)
-  const maskBinary = new Float32Array(resizedMask.length)
+  const maskBinary = new Float32Array(resizedMask.length);
   for (let i = 0; i < resizedMask.length; i++) {
-    maskBinary[i] = resizedMask[i] > 0.5 ? 1.0 : 0.0
+    maskBinary[i] = resizedMask[i] > 0.5 ? 1.0 : 0.0;
   }
 
   // Create tensors (image in 0-1 range, mask binary 0/1)
-  const imageTensor = new ort.Tensor('float32', resizedImage, [
+  const imageTensor = new ort.Tensor("float32", resizedImage, [
     1,
     3,
     MODEL_SIZE,
-    MODEL_SIZE
-  ])
-  const maskTensor = new ort.Tensor('float32', maskBinary, [
+    MODEL_SIZE,
+  ]);
+  const maskTensor = new ort.Tensor("float32", maskBinary, [
     1,
     1,
     MODEL_SIZE,
-    MODEL_SIZE
-  ])
+    MODEL_SIZE,
+  ]);
 
   // Run inference
   const feeds: Record<string, ort.Tensor> = {
     image: imageTensor,
-    mask: maskTensor
-  }
+    mask: maskTensor,
+  };
 
-  const results = await session.run(feeds)
-  const rawOutput = results['output'].data as Float32Array
+  const results = await session.run(feeds);
+  const rawOutput = results["output"].data as Float32Array;
 
   // Model outputs 0-255 range, convert to 0-1
-  const output = new Float32Array(rawOutput.length)
+  const output = new Float32Array(rawOutput.length);
   for (let i = 0; i < rawOutput.length; i++) {
-    output[i] = Math.max(0, Math.min(1, rawOutput[i] / 255.0))
+    output[i] = Math.max(0, Math.min(1, rawOutput[i] / 255.0));
   }
 
   // Resize output back to crop size
-  let resizedOutput: Float32Array
+  let resizedOutput: Float32Array;
   if (crop.w === MODEL_SIZE && crop.h === MODEL_SIZE) {
-    resizedOutput = output
+    resizedOutput = output;
   } else {
-    resizedOutput = resizeCHW(output, MODEL_SIZE, MODEL_SIZE, crop.w, crop.h, 3)
+    resizedOutput = resizeCHW(
+      output,
+      MODEL_SIZE,
+      MODEL_SIZE,
+      crop.w,
+      crop.h,
+      3,
+    );
   }
 
   // Paste back with blending
@@ -460,87 +478,91 @@ async function removeArea(
     crop.y,
     crop.w,
     crop.h,
-    3
-  )
+    3,
+  );
 
-  return result
+  return result;
 }
 
 /**
  * Handle incoming messages
  */
 self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   switch (type) {
-    case 'init': {
+    case "init": {
       try {
         // Check if model is cached first
-        const cache = await caches.open(CACHE_NAME)
-        const cachedResponse = await cache.match(MODEL_URL)
+        const cache = await caches.open(CACHE_NAME);
+        const cachedResponse = await cache.match(MODEL_URL);
 
-        let modelBuffer: ArrayBuffer
+        let modelBuffer: ArrayBuffer;
 
         if (cachedResponse) {
           // Model is cached - skip download phase, go straight to loading
           self.postMessage({
-            type: 'phase',
-            payload: { phase: 'loading', id: payload?.id }
-          })
-          modelBuffer = await cachedResponse.arrayBuffer()
+            type: "phase",
+            payload: { phase: "loading", id: payload?.id },
+          });
+          modelBuffer = await cachedResponse.arrayBuffer();
         } else {
           // Model not cached - show download phase
           self.postMessage({
-            type: 'phase',
-            payload: { phase: 'download', id: payload?.id }
-          })
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
 
           modelBuffer = await downloadModel((current, total) => {
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: 'download',
+                phase: "download",
                 progress: total > 0 ? (current / total) * 100 : 0,
-                detail: { current, total, unit: 'bytes' },
-                id: payload?.id
-              }
-            })
-          })
+                detail: { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          });
 
           // Phase: loading (after download)
           self.postMessage({
-            type: 'phase',
-            payload: { phase: 'loading', id: payload?.id }
-          })
+            type: "phase",
+            payload: { phase: "loading", id: payload?.id },
+          });
         }
 
-        await initSession(modelBuffer)
+        await initSession(modelBuffer);
 
         self.postMessage({
-          type: 'ready',
-          payload: { id: payload?.id }
-        })
+          type: "ready",
+          payload: { id: payload?.id },
+        });
       } catch (error) {
-        console.error('Model initialization error:', error)
-        let errorMessage = 'Failed to initialize model'
+        console.error("Model initialization error:", error);
+        let errorMessage = "Failed to initialize model";
         if (error instanceof Error) {
-          errorMessage = error.message
+          errorMessage = error.message;
           // Add more context for common errors
-          if (error.message.includes('Failed to download')) {
-            errorMessage = `Model download failed. Please check your network connection. (${error.message})`
-          } else if (error.message.includes('CORS') || error.message.includes('cross-origin')) {
-            errorMessage = 'Cross-origin request blocked. Try refreshing the page.'
+          if (error.message.includes("Failed to download")) {
+            errorMessage = `Model download failed. Please check your network connection. (${error.message})`;
+          } else if (
+            error.message.includes("CORS") ||
+            error.message.includes("cross-origin")
+          ) {
+            errorMessage =
+              "Cross-origin request blocked. Try refreshing the page.";
           }
         }
         self.postMessage({
-          type: 'error',
-          payload: errorMessage
-        })
+          type: "error",
+          payload: errorMessage,
+        });
       }
-      break
+      break;
     }
 
-    case 'process': {
+    case "process": {
       if (
         !payload?.imageData ||
         !payload?.maskData ||
@@ -548,74 +570,74 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
         !payload?.height
       ) {
         self.postMessage({
-          type: 'error',
-          payload: 'Missing image or mask data'
-        })
-        return
+          type: "error",
+          payload: "Missing image or mask data",
+        });
+        return;
       }
 
       try {
         // Phase: process
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id: payload.id }
-        })
+          type: "phase",
+          payload: { phase: "process", id: payload.id },
+        });
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'process',
+            phase: "process",
             progress: 10,
-            id: payload.id
-          }
-        })
+            id: payload.id,
+          },
+        });
 
         const result = await removeArea(
           payload.imageData,
           payload.maskData,
           payload.width,
-          payload.height
-        )
+          payload.height,
+        );
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'process',
+            phase: "process",
             progress: 100,
-            id: payload.id
-          }
-        })
+            id: payload.id,
+          },
+        });
 
         // Transfer the result buffer for efficiency
         // DeepFillv2 output is normalized 0-1
         self.postMessage(
           {
-            type: 'result',
+            type: "result",
             payload: {
               data: result,
               width: payload.width,
               height: payload.height,
-              id: payload.id
-            }
+              id: payload.id,
+            },
           },
-          { transfer: [result.buffer] }
-        )
+          { transfer: [result.buffer] },
+        );
       } catch (error) {
         self.postMessage({
-          type: 'error',
+          type: "error",
           payload:
-            error instanceof Error ? error.message : 'Failed to process image'
-        })
+            error instanceof Error ? error.message : "Failed to process image",
+        });
       }
-      break
+      break;
     }
 
-    case 'dispose': {
+    case "dispose": {
       if (session) {
-        session = null
+        session = null;
       }
-      self.postMessage({ type: 'disposed' })
-      break
+      self.postMessage({ type: "disposed" });
+      break;
     }
   }
-}
+};
diff --git a/mobile/src/workers/segmentAnything.worker.ts b/mobile/src/workers/segmentAnything.worker.ts
index 3ed6258a..c9b4f5fc 100644
--- a/mobile/src/workers/segmentAnything.worker.ts
+++ b/mobile/src/workers/segmentAnything.worker.ts
@@ -1,33 +1,45 @@
-import { env, SamModel, AutoProcessor, RawImage, Tensor } from '@huggingface/transformers'
+import {
+  env,
+  SamModel,
+  AutoProcessor,
+  RawImage,
+  Tensor,
+} from "@huggingface/transformers";
 
-env.allowLocalModels = false
+env.allowLocalModels = false;
 
-const MODEL_ID = 'Xenova/slimsam-77-uniform'
+const MODEL_ID = "Xenova/slimsam-77-uniform";
 
 // State
-let model: Awaited<ReturnType<typeof SamModel.from_pretrained>> | null = null
-let processor: Awaited<ReturnType<typeof AutoProcessor.from_pretrained>> | null = null
-let imageInputs: { pixel_values: Tensor; original_sizes: [number, number][]; reshaped_input_sizes: [number, number][] } | null = null
-let imageEmbeddings: Record<string, Tensor> | null = null
-let device: 'webgpu' | 'wasm' = 'wasm'
-let isLoading = false
-let isProcessing = false
-let isDecoding = false
+let model: Awaited<ReturnType<typeof SamModel.from_pretrained>> | null = null;
+let processor: Awaited<
+  ReturnType<typeof AutoProcessor.from_pretrained>
+> | null = null;
+let imageInputs: {
+  pixel_values: Tensor;
+  original_sizes: [number, number][];
+  reshaped_input_sizes: [number, number][];
+} | null = null;
+let imageEmbeddings: Record<string, Tensor> | null = null;
+let device: "webgpu" | "wasm" = "wasm";
+let isLoading = false;
+let isProcessing = false;
+let isDecoding = false;
 
 // Queue for pending decode requests
-let pendingDecodeRequest: { id: number; points: PointPrompt[] } | null = null
+let pendingDecodeRequest: { id: number; points: PointPrompt[] } | null = null;
 
 interface PointPrompt {
-  point: [number, number]
-  label: 0 | 1
+  point: [number, number];
+  label: 0 | 1;
 }
 
 // Detect WebGPU
 async function hasWebGPU(): Promise<boolean> {
   try {
-    return !!(navigator.gpu && await navigator.gpu.requestAdapter())
+    return !!(navigator.gpu && (await navigator.gpu.requestAdapter()));
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -35,163 +47,259 @@ async function hasWebGPU(): Promise<boolean> {
 async function loadModel(id: number): Promise<void> {
   // If already loaded, just return ready
   if (model && processor) {
-    self.postMessage({ type: 'ready', payload: { id, device } })
-    return
+    self.postMessage({ type: "ready", payload: { id, device } });
+    return;
   }
 
   // If already loading, wait for it
   if (isLoading) {
     // Wait for loading to complete
     while (isLoading) {
-      await new Promise(resolve => setTimeout(resolve, 100))
+      await new Promise((resolve) => setTimeout(resolve, 100));
     }
     if (model && processor) {
-      self.postMessage({ type: 'ready', payload: { id, device } })
-      return
+      self.postMessage({ type: "ready", payload: { id, device } });
+      return;
     }
-    throw new Error('Model failed to load')
+    throw new Error("Model failed to load");
   }
 
-  isLoading = true
+  isLoading = true;
 
   try {
     // Mobile: prefer WASM for stability
-    device = 'wasm'
-    const hasGPU = await hasWebGPU()
+    device = "wasm";
+    const hasGPU = await hasWebGPU();
     if (hasGPU) {
-      device = 'webgpu'
+      device = "webgpu";
     }
 
-    self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
-
-    const fileProgress: Record<string, { loaded: number; total: number }> = {}
-    const progress_callback = (p: { status: string; file?: string; loaded?: number; total?: number }) => {
-      if (p.status === 'progress' && p.file) {
-        fileProgress[p.file] = { loaded: p.loaded || 0, total: p.total || 1 }
-        const totals = Object.values(fileProgress).reduce((acc, f) => ({ loaded: acc.loaded + f.loaded, total: acc.total + f.total }), { loaded: 0, total: 0 })
+    self.postMessage({ type: "phase", payload: { phase: "download", id } });
+
+    const fileProgress: Record<string, { loaded: number; total: number }> = {};
+    const progress_callback = (p: {
+      status: string;
+      file?: string;
+      loaded?: number;
+      total?: number;
+    }) => {
+      if (p.status === "progress" && p.file) {
+        fileProgress[p.file] = { loaded: p.loaded || 0, total: p.total || 1 };
+        const totals = Object.values(fileProgress).reduce(
+          (acc, f) => ({
+            loaded: acc.loaded + f.loaded,
+            total: acc.total + f.total,
+          }),
+          { loaded: 0, total: 0 },
+        );
         if (totals.total > 0) {
-          self.postMessage({ type: 'progress', payload: { phase: 'download', progress: (totals.loaded / totals.total) * 100, detail: { current: totals.loaded, total: totals.total, unit: 'bytes' }, id } })
+          self.postMessage({
+            type: "progress",
+            payload: {
+              phase: "download",
+              progress: (totals.loaded / totals.total) * 100,
+              detail: {
+                current: totals.loaded,
+                total: totals.total,
+                unit: "bytes",
+              },
+              id,
+            },
+          });
         }
       }
-    }
+    };
 
     // Always use fp32 and wasm on mobile for stability
-    const dtype = 'fp32'
-    const useDevice = 'wasm'
+    const dtype = "fp32";
+    const useDevice = "wasm";
 
     try {
-      ;[model, processor] = await Promise.all([
-        SamModel.from_pretrained(MODEL_ID, { dtype, device: useDevice, progress_callback } as Parameters<typeof SamModel.from_pretrained>[1]),
-        AutoProcessor.from_pretrained(MODEL_ID, { progress_callback })
-      ])
-      device = useDevice
+      [model, processor] = await Promise.all([
+        SamModel.from_pretrained(MODEL_ID, {
+          dtype,
+          device: useDevice,
+          progress_callback,
+        } as Parameters<typeof SamModel.from_pretrained>[1]),
+        AutoProcessor.from_pretrained(MODEL_ID, { progress_callback }),
+      ]);
+      device = useDevice;
     } catch (e) {
-      console.error('Model loading error:', e)
-      throw e
+      console.error("Model loading error:", e);
+      throw e;
     }
 
-    self.postMessage({ type: 'progress', payload: { phase: 'download', progress: 100, id } })
-    self.postMessage({ type: 'ready', payload: { id, device } })
+    self.postMessage({
+      type: "progress",
+      payload: { phase: "download", progress: 100, id },
+    });
+    self.postMessage({ type: "ready", payload: { id, device } });
   } finally {
-    isLoading = false
+    isLoading = false;
   }
 }
 
 // Encode image with mutex
 async function segmentImage(id: number, imageDataUrl: string): Promise<void> {
-  if (!model || !processor) throw new Error('Model not initialized')
+  if (!model || !processor) throw new Error("Model not initialized");
 
   if (isProcessing) {
-    throw new Error('Another image is being processed')
+    throw new Error("Another image is being processed");
   }
 
-  isProcessing = true
+  isProcessing = true;
 
   try {
-    self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
-    self.postMessage({ type: 'progress', payload: { phase: 'process', progress: 0, id } })
-
-    const image = await RawImage.read(imageDataUrl)
-    imageInputs = await (processor as unknown as (img: RawImage) => Promise<typeof imageInputs>)(image)
-    self.postMessage({ type: 'progress', payload: { phase: 'process', progress: 50, id } })
-
-    imageEmbeddings = await (model as unknown as { get_image_embeddings: (i: typeof imageInputs) => Promise<Record<string, Tensor>> }).get_image_embeddings(imageInputs)
-    self.postMessage({ type: 'progress', payload: { phase: 'process', progress: 100, id } })
-    self.postMessage({ type: 'segmented', payload: { id } })
+    self.postMessage({ type: "phase", payload: { phase: "process", id } });
+    self.postMessage({
+      type: "progress",
+      payload: { phase: "process", progress: 0, id },
+    });
+
+    const image = await RawImage.read(imageDataUrl);
+    imageInputs = await (
+      processor as unknown as (img: RawImage) => Promise<typeof imageInputs>
+    )(image);
+    self.postMessage({
+      type: "progress",
+      payload: { phase: "process", progress: 50, id },
+    });
+
+    imageEmbeddings = await (
+      model as unknown as {
+        get_image_embeddings: (
+          i: typeof imageInputs,
+        ) => Promise<Record<string, Tensor>>;
+      }
+    ).get_image_embeddings(imageInputs);
+    self.postMessage({
+      type: "progress",
+      payload: { phase: "process", progress: 100, id },
+    });
+    self.postMessage({ type: "segmented", payload: { id } });
   } finally {
-    isProcessing = false
+    isProcessing = false;
   }
 }
 
 // Decode mask with mutex to prevent concurrent ONNX sessions
 async function decodeMask(id: number, points: PointPrompt[]): Promise<void> {
-  if (!model || !processor || !imageInputs || !imageEmbeddings) throw new Error('Image not segmented')
+  if (!model || !processor || !imageInputs || !imageEmbeddings)
+    throw new Error("Image not segmented");
 
   // If already decoding, queue this request and skip
   if (isDecoding) {
-    pendingDecodeRequest = { id, points }
-    return
+    pendingDecodeRequest = { id, points };
+    return;
   }
 
-  isDecoding = true
+  isDecoding = true;
 
   try {
-    const [reshaped, original] = [imageInputs.reshaped_input_sizes[0], imageInputs.original_sizes[0]]
-    const inputPoints = new Tensor('float32', points.flatMap(p => [p.point[0] * reshaped[1], p.point[1] * reshaped[0]]), [1, 1, points.length, 2])
-    const inputLabels = new Tensor('int64', points.map(p => BigInt(p.label)), [1, 1, points.length])
-
-    const outputs = await (model as unknown as (i: Record<string, Tensor>) => Promise<{ pred_masks: Tensor; iou_scores: Tensor }>)({
-      ...imageEmbeddings, input_points: inputPoints, input_labels: inputLabels
-    })
-
-    const masks = await (processor as unknown as { post_process_masks: (m: Tensor, o: [number, number][], r: [number, number][]) => Promise<Tensor[][]> })
-      .post_process_masks(outputs.pred_masks, imageInputs.original_sizes, imageInputs.reshaped_input_sizes)
-
-    const maskBuffer = (masks[0][0].data as Uint8Array).buffer.slice(0)
-    const scoresBuffer = new Float32Array(outputs.iou_scores.data as Float32Array).buffer
-
-    self.postMessage({ type: 'maskResult', payload: { mask: maskBuffer, width: original[1], height: original[0], scores: scoresBuffer, id } }, { transfer: [maskBuffer, scoresBuffer] })
+    const [reshaped, original] = [
+      imageInputs.reshaped_input_sizes[0],
+      imageInputs.original_sizes[0],
+    ];
+    const inputPoints = new Tensor(
+      "float32",
+      points.flatMap((p) => [
+        p.point[0] * reshaped[1],
+        p.point[1] * reshaped[0],
+      ]),
+      [1, 1, points.length, 2],
+    );
+    const inputLabels = new Tensor(
+      "int64",
+      points.map((p) => BigInt(p.label)),
+      [1, 1, points.length],
+    );
+
+    const outputs = await (
+      model as unknown as (
+        i: Record<string, Tensor>,
+      ) => Promise<{ pred_masks: Tensor; iou_scores: Tensor }>
+    )({
+      ...imageEmbeddings,
+      input_points: inputPoints,
+      input_labels: inputLabels,
+    });
+
+    const masks = await (
+      processor as unknown as {
+        post_process_masks: (
+          m: Tensor,
+          o: [number, number][],
+          r: [number, number][],
+        ) => Promise<Tensor[][]>;
+      }
+    ).post_process_masks(
+      outputs.pred_masks,
+      imageInputs.original_sizes,
+      imageInputs.reshaped_input_sizes,
+    );
+
+    const maskBuffer = (masks[0][0].data as Uint8Array).buffer.slice(0);
+    const scoresBuffer = new Float32Array(
+      outputs.iou_scores.data as Float32Array,
+    ).buffer;
+
+    self.postMessage(
+      {
+        type: "maskResult",
+        payload: {
+          mask: maskBuffer,
+          width: original[1],
+          height: original[0],
+          scores: scoresBuffer,
+          id,
+        },
+      },
+      { transfer: [maskBuffer, scoresBuffer] },
+    );
   } finally {
-    isDecoding = false
+    isDecoding = false;
 
     // Process pending request if any
     if (pendingDecodeRequest) {
-      const pending = pendingDecodeRequest
-      pendingDecodeRequest = null
+      const pending = pendingDecodeRequest;
+      pendingDecodeRequest = null;
       // Process asynchronously to avoid stack overflow
-      setTimeout(() => decodeMask(pending.id, pending.points), 0)
+      setTimeout(() => decodeMask(pending.id, pending.points), 0);
     }
   }
 }
 
 // Message handler
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
-  const id = payload?.id ?? 0
+  const { type, payload } = e.data;
+  const id = payload?.id ?? 0;
 
   try {
     switch (type) {
-      case 'init':
-        await loadModel(id)
-        break
-      case 'segment':
-        if (!model) await loadModel(id)
-        await segmentImage(id, payload.imageDataUrl)
-        break
-      case 'decodeMask':
-        await decodeMask(id, payload.points)
-        break
-      case 'reset':
-        imageInputs = imageEmbeddings = null
-        self.postMessage({ type: 'reset', payload: { id } })
-        break
-      case 'dispose':
-        imageInputs = imageEmbeddings = null
+      case "init":
+        await loadModel(id);
+        break;
+      case "segment":
+        if (!model) await loadModel(id);
+        await segmentImage(id, payload.imageDataUrl);
+        break;
+      case "decodeMask":
+        await decodeMask(id, payload.points);
+        break;
+      case "reset":
+        imageInputs = imageEmbeddings = null;
+        self.postMessage({ type: "reset", payload: { id } });
+        break;
+      case "dispose":
+        imageInputs = imageEmbeddings = null;
         // Don't dispose model, keep it for reuse
-        self.postMessage({ type: 'disposed', payload: { id } })
-        break
+        self.postMessage({ type: "disposed", payload: { id } });
+        break;
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: { message: (error as Error).message, id } })
+    self.postMessage({
+      type: "error",
+      payload: { message: (error as Error).message, id },
+    });
   }
-}
+};
diff --git a/mobile/src/workers/upscaler.worker.ts b/mobile/src/workers/upscaler.worker.ts
index 33b74506..b632bb27 100644
--- a/mobile/src/workers/upscaler.worker.ts
+++ b/mobile/src/workers/upscaler.worker.ts
@@ -1,214 +1,219 @@
-import Upscaler from 'upscaler'
-import * as tf from '@tensorflow/tfjs-core'
-import '@tensorflow/tfjs-backend-wasm'
+import Upscaler from "upscaler";
+import * as tf from "@tensorflow/tfjs-core";
+import "@tensorflow/tfjs-backend-wasm";
 
-type ModelType = 'slim' | 'medium' | 'thick'
-type ScaleType = '2x' | '3x' | '4x'
+type ModelType = "slim" | "medium" | "thick";
+type ScaleType = "2x" | "3x" | "4x";
 
-let upscaler: InstanceType<typeof Upscaler> | null = null
-let backendInitialized = false
+let upscaler: InstanceType<typeof Upscaler> | null = null;
+let backendInitialized = false;
 
 // Initialize WASM backend (more reliable than WebGL, avoids CONTEXT_LOST errors)
 async function initBackend() {
-  if (backendInitialized) return
+  if (backendInitialized) return;
 
   try {
     // Try WASM backend first (most reliable)
-    await tf.setBackend('wasm')
-    await tf.ready()
-    backendInitialized = true
-    console.log('[Upscaler] Using WASM backend')
+    await tf.setBackend("wasm");
+    await tf.ready();
+    backendInitialized = true;
+    console.log("[Upscaler] Using WASM backend");
   } catch (e) {
-    console.warn('[Upscaler] WASM backend failed, falling back to default:', e)
+    console.warn("[Upscaler] WASM backend failed, falling back to default:", e);
     // Fall back to default (WebGL)
-    await tf.ready()
-    backendInitialized = true
-    console.log('[Upscaler] Using default backend:', tf.getBackend())
+    await tf.ready();
+    backendInitialized = true;
+    console.log("[Upscaler] Using default backend:", tf.getBackend());
   }
 }
 
 const getModel = async (model: ModelType, scale: ScaleType) => {
   const modelMap = {
     slim: {
-      '2x': () => import('@upscalerjs/esrgan-slim/2x'),
-      '3x': () => import('@upscalerjs/esrgan-slim/3x'),
-      '4x': () => import('@upscalerjs/esrgan-slim/4x')
+      "2x": () => import("@upscalerjs/esrgan-slim/2x"),
+      "3x": () => import("@upscalerjs/esrgan-slim/3x"),
+      "4x": () => import("@upscalerjs/esrgan-slim/4x"),
     },
     medium: {
-      '2x': () => import('@upscalerjs/esrgan-medium/2x'),
-      '3x': () => import('@upscalerjs/esrgan-medium/3x'),
-      '4x': () => import('@upscalerjs/esrgan-medium/4x')
+      "2x": () => import("@upscalerjs/esrgan-medium/2x"),
+      "3x": () => import("@upscalerjs/esrgan-medium/3x"),
+      "4x": () => import("@upscalerjs/esrgan-medium/4x"),
     },
     thick: {
-      '2x': () => import('@upscalerjs/esrgan-thick/2x'),
-      '3x': () => import('@upscalerjs/esrgan-thick/3x'),
-      '4x': () => import('@upscalerjs/esrgan-thick/4x')
-    }
-  }
-  return (await modelMap[model][scale]()).default
-}
+      "2x": () => import("@upscalerjs/esrgan-thick/2x"),
+      "3x": () => import("@upscalerjs/esrgan-thick/3x"),
+      "4x": () => import("@upscalerjs/esrgan-thick/4x"),
+    },
+  };
+  return (await modelMap[model][scale]()).default;
+};
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'load': {
+      case "load": {
         const { model, scale, id } = payload as {
-          model: ModelType
-          scale: ScaleType
-          id?: number
-        }
+          model: ModelType;
+          scale: ScaleType;
+          id?: number;
+        };
 
         // Dispose previous upscaler if exists
         if (upscaler) {
-          upscaler.dispose()
-          upscaler = null
+          upscaler.dispose();
+          upscaler = null;
         }
 
         // Signal start of download phase
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'download', id }
-        })
+          type: "phase",
+          payload: { phase: "download", id },
+        });
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'download',
+            phase: "download",
             progress: 0,
-            id
-          }
-        })
+            id,
+          },
+        });
 
         // Initialize WASM backend before loading model (fixes CONTEXT_LOST_WEBGL errors)
-        await initBackend()
+        await initBackend();
 
-        const modelDef = await getModel(model, scale)
+        const modelDef = await getModel(model, scale);
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'download',
+            phase: "download",
             progress: 50,
-            id
-          }
-        })
+            id,
+          },
+        });
 
-        upscaler = new Upscaler({ model: modelDef })
+        upscaler = new Upscaler({ model: modelDef });
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'download',
+            phase: "download",
             progress: 100,
-            id
-          }
-        })
+            id,
+          },
+        });
 
-        self.postMessage({ type: 'loaded', payload: { id } })
-        break
+        self.postMessage({ type: "loaded", payload: { id } });
+        break;
       }
 
-      case 'upscale': {
+      case "upscale": {
         if (!upscaler) {
-          throw new Error('Model not loaded')
+          throw new Error("Model not loaded");
         }
 
-        const { imageData, id } = payload as { imageData: ImageData; id: number }
+        const { imageData, id } = payload as {
+          imageData: ImageData;
+          id: number;
+        };
 
         // Signal start of process phase
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id }
-        })
+          type: "phase",
+          payload: { phase: "process", id },
+        });
 
         // Upscale using ImageData directly, output as tensor to avoid base64 issues in worker
         const result = await upscaler.upscale(imageData, {
-          output: 'tensor',
+          output: "tensor",
           patchSize: 64,
           padding: 2,
           progress: (percent: number) => {
             // Emit standardized progress (percent is 0-1 from upscaler)
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: 'process',
+                phase: "process",
                 progress: percent * 100,
                 detail: {
                   current: Math.round(percent * 100),
                   total: 100,
-                  unit: 'percent' as const
+                  unit: "percent" as const,
                 },
-                id
-              }
-            })
-          }
-        })
+                id,
+              },
+            });
+          },
+        });
 
         // Convert tensor to ImageData
         // Result tensor shape is [height, width, channels] (RGB, 3 channels)
-        const [height, width, channels] = result.shape
-        const data = await result.data()
-        result.dispose()
+        const [height, width, channels] = result.shape;
+        const data = await result.data();
+        result.dispose();
 
         // Create Uint8ClampedArray for ImageData (needs RGBA, 4 channels)
-        const pixelCount = width * height
-        const uint8Data = new Uint8ClampedArray(pixelCount * 4)
+        const pixelCount = width * height;
+        const uint8Data = new Uint8ClampedArray(pixelCount * 4);
 
         // Track if result is all black (indicates processing failure)
-        let hasNonBlackPixel = false
+        let hasNonBlackPixel = false;
 
         for (let i = 0; i < pixelCount; i++) {
-          const srcIdx = i * channels
-          const dstIdx = i * 4
-          const r = Math.round(data[srcIdx])
-          const g = Math.round(data[srcIdx + 1])
-          const b = Math.round(data[srcIdx + 2])
-          uint8Data[dstIdx] = r // R
-          uint8Data[dstIdx + 1] = g // G
-          uint8Data[dstIdx + 2] = b // B
-          uint8Data[dstIdx + 3] = 255 // A (fully opaque)
+          const srcIdx = i * channels;
+          const dstIdx = i * 4;
+          const r = Math.round(data[srcIdx]);
+          const g = Math.round(data[srcIdx + 1]);
+          const b = Math.round(data[srcIdx + 2]);
+          uint8Data[dstIdx] = r; // R
+          uint8Data[dstIdx + 1] = g; // G
+          uint8Data[dstIdx + 2] = b; // B
+          uint8Data[dstIdx + 3] = 255; // A (fully opaque)
 
           // Check if any pixel is non-black (threshold > 5 to account for noise)
           if (!hasNonBlackPixel && (r > 5 || g > 5 || b > 5)) {
-            hasNonBlackPixel = true
+            hasNonBlackPixel = true;
           }
         }
 
         // If result is all black, processing likely failed
         if (!hasNonBlackPixel) {
-          throw new Error('Processing failed: output is all black. Please try again.')
+          throw new Error(
+            "Processing failed: output is all black. Please try again.",
+          );
         }
 
-        const resultImageData = new ImageData(uint8Data, width, height)
+        const resultImageData = new ImageData(uint8Data, width, height);
 
         // Transfer the buffer back to main thread for efficiency
         self.postMessage(
           {
-            type: 'result',
+            type: "result",
             payload: {
               imageData: resultImageData,
               width,
               height,
-              id
-            }
+              id,
+            },
           },
-          { transfer: [resultImageData.data.buffer] }
-        )
-        break
+          { transfer: [resultImageData.data.buffer] },
+        );
+        break;
       }
 
-      case 'dispose': {
+      case "dispose": {
         if (upscaler) {
-          upscaler.dispose()
-          upscaler = null
+          upscaler.dispose();
+          upscaler = null;
         }
-        self.postMessage({ type: 'disposed' })
-        break
+        self.postMessage({ type: "disposed" });
+        break;
       }
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/mobile/tailwind.config.cjs b/mobile/tailwind.config.cjs
index 915df5d4..0af945ee 100644
--- a/mobile/tailwind.config.cjs
+++ b/mobile/tailwind.config.cjs
@@ -2,10 +2,10 @@
 module.exports = {
   darkMode: ["class"],
   content: [
-    './index.html',
-    './src/**/*.{ts,tsx}',
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
     // Include shared components from main project
-    '../src/**/*.{ts,tsx}',
+    "../src/**/*.{ts,tsx}",
   ],
   theme: {
     container: {
@@ -86,21 +86,21 @@ module.exports = {
       },
       // Mobile-specific spacing
       spacing: {
-        'safe-top': 'env(safe-area-inset-top)',
-        'safe-bottom': 'env(safe-area-inset-bottom)',
-        'safe-left': 'env(safe-area-inset-left)',
-        'safe-right': 'env(safe-area-inset-right)',
+        "safe-top": "env(safe-area-inset-top)",
+        "safe-bottom": "env(safe-area-inset-bottom)",
+        "safe-left": "env(safe-area-inset-left)",
+        "safe-right": "env(safe-area-inset-right)",
       },
       // Touch-friendly minimum sizes
       minHeight: {
-        'touch': '44px',
-        'touch-lg': '48px',
+        touch: "44px",
+        "touch-lg": "48px",
       },
       minWidth: {
-        'touch': '44px',
-        'touch-lg': '48px',
+        touch: "44px",
+        "touch-lg": "48px",
       },
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};
diff --git a/mobile/tsconfig.json b/mobile/tsconfig.json
index 3b2c490c..aaad9c3f 100644
--- a/mobile/tsconfig.json
+++ b/mobile/tsconfig.json
@@ -28,9 +28,6 @@
       "@mobile/*": ["./src/*"]
     }
   },
-  "include": [
-    "src",
-    "../src"
-  ],
+  "include": ["src", "../src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/mobile/vite.config.ts b/mobile/vite.config.ts
index 2b515a7e..e0b31fa7 100644
--- a/mobile/vite.config.ts
+++ b/mobile/vite.config.ts
@@ -1,74 +1,74 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { viteStaticCopy } from 'vite-plugin-static-copy'
-import path from 'path'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import path from "path";
 
 // All shared packages that need to be resolved from mobile/node_modules
 const sharedPackages = [
   // React ecosystem
-  'react',
-  'react-dom',
-  'react-router-dom',
-  'react-dropzone',
+  "react",
+  "react-dom",
+  "react-router-dom",
+  "react-dropzone",
   // i18n
-  'react-i18next',
-  'i18next',
-  'i18next-browser-languagedetector',
+  "react-i18next",
+  "i18next",
+  "i18next-browser-languagedetector",
   // State management
-  'zustand',
+  "zustand",
   // HTTP
-  'axios',
+  "axios",
   // UI
-  'lucide-react',
-  'class-variance-authority',
-  'clsx',
-  'tailwind-merge',
-  '@tanstack/react-virtual',
+  "lucide-react",
+  "class-variance-authority",
+  "clsx",
+  "tailwind-merge",
+  "@tanstack/react-virtual",
   // Radix UI
-  '@radix-ui/react-alert-dialog',
-  '@radix-ui/react-checkbox',
-  '@radix-ui/react-dialog',
-  '@radix-ui/react-dropdown-menu',
-  '@radix-ui/react-hover-card',
-  '@radix-ui/react-label',
-  '@radix-ui/react-progress',
-  '@radix-ui/react-scroll-area',
-  '@radix-ui/react-select',
-  '@radix-ui/react-separator',
-  '@radix-ui/react-slider',
-  '@radix-ui/react-slot',
-  '@radix-ui/react-switch',
-  '@radix-ui/react-tabs',
-  '@radix-ui/react-toast',
-  '@radix-ui/react-tooltip',
+  "@radix-ui/react-alert-dialog",
+  "@radix-ui/react-checkbox",
+  "@radix-ui/react-dialog",
+  "@radix-ui/react-dropdown-menu",
+  "@radix-ui/react-hover-card",
+  "@radix-ui/react-label",
+  "@radix-ui/react-progress",
+  "@radix-ui/react-scroll-area",
+  "@radix-ui/react-select",
+  "@radix-ui/react-separator",
+  "@radix-ui/react-slider",
+  "@radix-ui/react-slot",
+  "@radix-ui/react-switch",
+  "@radix-ui/react-tabs",
+  "@radix-ui/react-toast",
+  "@radix-ui/react-tooltip",
   // AI/ML
-  '@huggingface/transformers',
-  '@imgly/background-removal',
-  'upscaler',
-  '@upscalerjs/default-model',
-  '@upscalerjs/esrgan-medium',
-  '@upscalerjs/esrgan-slim',
-  '@upscalerjs/esrgan-thick',
+  "@huggingface/transformers",
+  "@imgly/background-removal",
+  "upscaler",
+  "@upscalerjs/default-model",
+  "@upscalerjs/esrgan-medium",
+  "@upscalerjs/esrgan-slim",
+  "@upscalerjs/esrgan-thick",
   // Video encoding
-  'webm-muxer',
-  'mp4-muxer',
+  "webm-muxer",
+  "mp4-muxer",
   // ONNX Runtime
-  'onnxruntime-web',
+  "onnxruntime-web",
   // TensorFlow
-  '@tensorflow/tfjs-core',
-  '@tensorflow/tfjs-backend-wasm',
+  "@tensorflow/tfjs-core",
+  "@tensorflow/tfjs-backend-wasm",
   // Capacitor plugins (used by platform service)
-  '@capacitor/core',
-  '@capacitor/preferences',
-  '@capacitor/filesystem',
-  '@capacitor/browser',
-  '@capacitor/share',
-  '@capacitor/app',
-  '@capacitor/camera',
-  '@capacitor/status-bar',
-  '@capacitor/splash-screen',
-  '@capacitor/keyboard',
-]
+  "@capacitor/core",
+  "@capacitor/preferences",
+  "@capacitor/filesystem",
+  "@capacitor/browser",
+  "@capacitor/share",
+  "@capacitor/app",
+  "@capacitor/camera",
+  "@capacitor/status-bar",
+  "@capacitor/splash-screen",
+  "@capacitor/keyboard",
+];
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -80,62 +80,75 @@ export default defineConfig({
     viteStaticCopy({
       targets: [
         {
-          src: 'node_modules/@upscalerjs/esrgan-slim/models/*',
-          dest: 'models'
-        }
-      ]
-    })
+          src: "node_modules/@upscalerjs/esrgan-slim/models/*",
+          dest: "models",
+        },
+      ],
+    }),
   ],
   resolve: {
     alias: {
       // Mobile-specific overrides (must come before @/)
-      '@/pages/SettingsPage': path.resolve(__dirname, './src/pages/SettingsPage'),
+      "@/pages/SettingsPage": path.resolve(
+        __dirname,
+        "./src/pages/SettingsPage",
+      ),
       // Mobile-specific code (must come before @/ to avoid prefix matching issues)
-      '@mobile': path.resolve(__dirname, './src'),
+      "@mobile": path.resolve(__dirname, "./src"),
       // Share code from the main src directory
-      '@': path.resolve(__dirname, '../src')
+      "@": path.resolve(__dirname, "../src"),
     },
     // Dedupe these packages to ensure they're resolved from mobile/node_modules
-    dedupe: sharedPackages
+    dedupe: sharedPackages,
   },
   build: {
-    outDir: 'dist',
+    outDir: "dist",
     sourcemap: true,
     commonjsOptions: {
       include: [/node_modules/],
-      transformMixedEsModules: true
+      transformMixedEsModules: true,
     },
     rollupOptions: {
       output: {
         manualChunks: {
-          'react-vendor': ['react', 'react-dom', 'react-router-dom'],
-          'ui-vendor': ['@radix-ui/react-dialog', '@radix-ui/react-select', '@radix-ui/react-slider'],
-          'ai-vendor': ['upscaler', '@imgly/background-removal', 'onnxruntime-web']
-        }
-      }
-    }
+          "react-vendor": ["react", "react-dom", "react-router-dom"],
+          "ui-vendor": [
+            "@radix-ui/react-dialog",
+            "@radix-ui/react-select",
+            "@radix-ui/react-slider",
+          ],
+          "ai-vendor": [
+            "upscaler",
+            "@imgly/background-removal",
+            "onnxruntime-web",
+          ],
+        },
+      },
+    },
   },
   worker: {
-    format: 'es'
+    format: "es",
   },
   optimizeDeps: {
-    include: sharedPackages.filter(p => !['@huggingface/transformers', 'onnxruntime-web'].includes(p)),
-    exclude: ['@huggingface/transformers', 'onnxruntime-web']
+    include: sharedPackages.filter(
+      (p) => !["@huggingface/transformers", "onnxruntime-web"].includes(p),
+    ),
+    exclude: ["@huggingface/transformers", "onnxruntime-web"],
   },
   // Ensure WASM files are properly served
-  assetsInclude: ['**/*.wasm'],
+  assetsInclude: ["**/*.wasm"],
   server: {
     port: 5173,
     host: true, // Allow access from network for mobile device testing
     headers: {
       // Required for SharedArrayBuffer support (ONNX Runtime multi-threading)
       // Using 'credentialless' instead of 'require-corp' to allow loading external images
-      'Cross-Origin-Opener-Policy': 'same-origin',
-      'Cross-Origin-Embedder-Policy': 'credentialless'
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "credentialless",
     },
     fs: {
       // Allow serving files from parent directory (for shared src)
-      allow: ['..']
-    }
-  }
-})
+      allow: [".."],
+    },
+  },
+});
diff --git a/mobile/vitest.config.ts b/mobile/vitest.config.ts
index e3a52293..b10c6244 100644
--- a/mobile/vitest.config.ts
+++ b/mobile/vitest.config.ts
@@ -1,29 +1,25 @@
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-import path from 'path'
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
 
 export default defineConfig({
   plugins: [react()],
   test: {
-    environment: 'happy-dom',
+    environment: "happy-dom",
     globals: true,
-    setupFiles: ['./src/__tests__/setup.ts'],
-    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    setupFiles: ["./src/__tests__/setup.ts"],
+    include: ["src/**/*.{test,spec}.{ts,tsx}"],
     coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-      include: ['src/**/*.{ts,tsx}'],
-      exclude: [
-        'src/**/*.d.ts',
-        'src/__tests__/**',
-        'src/workers/**'
-      ]
-    }
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["src/**/*.d.ts", "src/__tests__/**", "src/workers/**"],
+    },
   },
   resolve: {
     alias: {
-      '@mobile': path.resolve(__dirname, './src'),
-      '@': path.resolve(__dirname, '../src')
-    }
-  }
-})
+      "@mobile": path.resolve(__dirname, "./src"),
+      "@": path.resolve(__dirname, "../src"),
+    },
+  },
+});
diff --git a/package-lock.json b/package-lock.json
index 14621bf6..34e2849d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12064,4 +12064,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 04344194..2913a130 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wavespeed-desktop",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "WaveSpeedAI Desktop Application - A playground for AI models",
   "main": "./out/main/index.js",
   "author": {
@@ -213,4 +213,4 @@
       "releaseType": "release"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/postcss.config.js b/postcss.config.js
index 33ad091d..12a703d9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/scripts/find-unused-i18n.js b/scripts/find-unused-i18n.js
index cc2417d3..45424fe9 100644
--- a/scripts/find-unused-i18n.js
+++ b/scripts/find-unused-i18n.js
@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require("fs");
+const path = require("path");
 
 function extractKeysFromFile(content) {
   const used = new Set();
@@ -22,32 +22,39 @@ function walk(dir) {
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   for (const e of entries) {
     const full = path.join(dir, e.name);
-    if (e.isDirectory() && e.name !== 'node_modules' && e.name !== 'dist') walk(full);
+    if (e.isDirectory() && e.name !== "node_modules" && e.name !== "dist")
+      walk(full);
     else if (e.isFile() && /\.(tsx?|jsx?)$/.test(e.name)) {
-      const content = fs.readFileSync(full, 'utf8');
+      const content = fs.readFileSync(full, "utf8");
       const keys = extractKeysFromFile(content);
       keys.forEach((k) => {
-        if (k.includes('${')) return;
+        if (k.includes("${")) return;
         usedLiterals.add(k);
-        const parts = k.split('.');
+        const parts = k.split(".");
         for (let i = 1; i < parts.length; i++) {
-          usedPrefixes.add(parts.slice(0, i).join('.') + '.');
+          usedPrefixes.add(parts.slice(0, i).join(".") + ".");
         }
       });
     }
   }
 }
 
-walk('src');
-walk('electron');
+walk("src");
+walk("electron");
 
-const en = JSON.parse(fs.readFileSync(path.join('src/i18n/locales', 'en.json'), 'utf8'));
+const en = JSON.parse(
+  fs.readFileSync(path.join("src/i18n/locales", "en.json"), "utf8"),
+);
 
-function allKeys(obj, prefix = '') {
+function allKeys(obj, prefix = "") {
   const keys = [];
   for (const k of Object.keys(obj)) {
-    const p = prefix ? prefix + '.' + k : k;
-    if (obj[k] !== null && typeof obj[k] === 'object' && !Array.isArray(obj[k])) {
+    const p = prefix ? prefix + "." + k : k;
+    if (
+      obj[k] !== null &&
+      typeof obj[k] === "object" &&
+      !Array.isArray(obj[k])
+    ) {
       keys.push(...allKeys(obj[k], p));
     } else {
       keys.push(p);
@@ -61,15 +68,15 @@ const allLocaleKeys = allKeys(en);
 function isKeyUsed(key) {
   if (usedLiterals.has(key)) return true;
   for (const lit of usedLiterals) {
-    if (lit.startsWith(key + '.') || lit === key) return true;
+    if (lit.startsWith(key + ".") || lit === key) return true;
   }
   for (const p of usedPrefixes) {
-    if (key.startsWith(p) || p.startsWith(key + '.')) return true;
+    if (key.startsWith(p) || p.startsWith(key + ".")) return true;
   }
   return false;
 }
 
 const unused = allLocaleKeys.filter((k) => !isKeyUsed(k));
-console.log('Total locale keys:', allLocaleKeys.length);
-console.log('Unused keys count:', unused.length);
+console.log("Total locale keys:", allLocaleKeys.length);
+console.log("Unused keys count:", unused.length);
 console.log(JSON.stringify(unused, null, 2));
diff --git a/scripts/remove-unused-i18n.js b/scripts/remove-unused-i18n.js
index 7739d807..e47e280f 100644
--- a/scripts/remove-unused-i18n.js
+++ b/scripts/remove-unused-i18n.js
@@ -1,7 +1,7 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require("fs");
+const path = require("path");
 
-const LOCALES_DIR = path.join(__dirname, '../src/i18n/locales');
+const LOCALES_DIR = path.join(__dirname, "../src/i18n/locales");
 
 // Unused: top-level "game" (2 keys) and top-level "videoConverter" (15 keys)
 function removeUnusedFromObject(obj) {
@@ -11,12 +11,16 @@ function removeUnusedFromObject(obj) {
   return copy;
 }
 
-const files = fs.readdirSync(LOCALES_DIR).filter((f) => f.endsWith('.json'));
+const files = fs.readdirSync(LOCALES_DIR).filter((f) => f.endsWith(".json"));
 for (const f of files) {
   const filePath = path.join(LOCALES_DIR, f);
-  const data = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  const data = JSON.parse(fs.readFileSync(filePath, "utf8"));
   const cleaned = removeUnusedFromObject(data);
-  fs.writeFileSync(filePath, JSON.stringify(cleaned, null, 2) + '\n', 'utf8');
-  console.log('Cleaned:', f);
+  fs.writeFileSync(filePath, JSON.stringify(cleaned, null, 2) + "\n", "utf8");
+  console.log("Cleaned:", f);
 }
-console.log('Done. Removed "game" and "videoConverter" from', files.length, 'locales.');
+console.log(
+  'Done. Removed "game" and "videoConverter" from',
+  files.length,
+  "locales.",
+);
diff --git a/src/App.tsx b/src/App.tsx
index 38e44334..a2e47b93 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,97 +1,133 @@
-import { useEffect } from 'react'
-import { Routes, Route } from 'react-router-dom'
-import { Layout } from '@/components/layout/Layout'
-import { WelcomePage } from '@/pages/WelcomePage'
-import { ModelsPage } from '@/pages/ModelsPage'
-import { PlaygroundPage } from '@/pages/PlaygroundPage'
-import { TemplatesPage } from '@/pages/TemplatesPage'
-import { HistoryPage } from '@/pages/HistoryPage'
-import { AssetsPage } from '@/pages/AssetsPage'
-import { SettingsPage } from '@/pages/SettingsPage'
-import { FeaturedModelsPage } from '@/pages/FeaturedModelsPage'
-import { SmartPlaygroundPage } from '@/pages/SmartPlaygroundPage'
-import { FreeToolsPage } from '@/pages/FreeToolsPage'
-import { ZImagePage } from '@/pages/ZImagePage'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useThemeStore } from '@/stores/themeStore'
-import i18n, { languages } from '@/i18n'
+import { useEffect } from "react";
+import { Routes, Route } from "react-router-dom";
+import { Layout } from "@/components/layout/Layout";
+import { WelcomePage } from "@/pages/WelcomePage";
+import { PlaygroundPage } from "@/pages/PlaygroundPage";
+import { ModelsPage } from "@/pages/ModelsPage";
+import { TemplatesPage } from "@/pages/TemplatesPage";
+// HistoryPage and AssetsPage are rendered persistently in Layout
+import { SettingsPage } from "@/pages/SettingsPage";
+import { SmartPlaygroundPage } from "@/pages/SmartPlaygroundPage";
+import { FreeToolsPage } from "@/pages/FreeToolsPage";
+import { ZImagePage } from "@/pages/ZImagePage";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { useModelsStore } from "@/stores/modelsStore";
+import { useThemeStore } from "@/stores/themeStore";
+import i18n, { languages } from "@/i18n";
 
 // Placeholder for persistent pages (rendered in Layout, not via router)
-const PersistentPagePlaceholder = () => null
+const PersistentPagePlaceholder = () => null;
 
 function App() {
-  const { loadApiKey, isValidated } = useApiKeyStore()
-  const { fetchModels } = useModelsStore()
-  const { initTheme } = useThemeStore()
+  const { loadApiKey, isValidated } = useApiKeyStore();
+  const { fetchModels } = useModelsStore();
+  const { initTheme } = useThemeStore();
 
   useEffect(() => {
-    initTheme()
-    loadApiKey()
-  }, [initTheme, loadApiKey])
+    initTheme();
+    loadApiKey();
+  }, [initTheme, loadApiKey]);
 
   useEffect(() => {
     const syncLanguageFromSettings = async () => {
-      if (!window.electronAPI?.getSettings) return
-      const settings = await window.electronAPI.getSettings()
-      const storedLanguage = settings.language
-      if (!storedLanguage) return
+      if (!window.electronAPI?.getSettings) return;
+      const settings = await window.electronAPI.getSettings();
+      const storedLanguage = settings.language;
+      if (!storedLanguage) return;
 
-      localStorage.setItem('wavespeed_language', storedLanguage)
-      if (storedLanguage === 'auto') return
+      localStorage.setItem("wavespeed_language", storedLanguage);
+      if (storedLanguage === "auto") return;
 
       const supportedLangs = languages
         .map((lang) => lang.code)
-        .filter((code) => code !== 'auto')
-      if (!supportedLangs.includes(storedLanguage)) return
+        .filter((code) => code !== "auto");
+      if (!supportedLangs.includes(storedLanguage)) return;
 
       if (i18n.language !== storedLanguage) {
-        await i18n.changeLanguage(storedLanguage)
+        await i18n.changeLanguage(storedLanguage);
       }
-    }
+    };
 
-    syncLanguageFromSettings()
-  }, [])
+    syncLanguageFromSettings();
+  }, []);
 
   useEffect(() => {
     if (isValidated) {
-      fetchModels()
+      fetchModels();
     }
-  }, [isValidated, fetchModels])
+  }, [isValidated, fetchModels]);
 
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
         <Route index element={<WelcomePage />} />
-        <Route path="featured-models" element={<FeaturedModelsPage />} />
-        <Route path="featured-models/:familyId" element={<SmartPlaygroundPage />} />
+        <Route
+          path="featured-models/:familyId"
+          element={<SmartPlaygroundPage />}
+        />
         <Route path="models" element={<ModelsPage />} />
         <Route path="playground" element={<PlaygroundPage />} />
         <Route path="playground/*" element={<PlaygroundPage />} />
         <Route path="templates" element={<TemplatesPage />} />
-        <Route path="history" element={<HistoryPage />} />
-        <Route path="assets" element={<AssetsPage />} />
+        <Route path="history" element={<PersistentPagePlaceholder />} />
+        <Route path="assets" element={<PersistentPagePlaceholder />} />
         <Route path="z-image" element={<ZImagePage />} />
         <Route path="free-tools" element={<FreeToolsPage />} />
         {/* Workflow page - persistent rendered */}
         <Route path="workflow" element={<PersistentPagePlaceholder />} />
         {/* Free tools pages are rendered persistently in Layout */}
-        <Route path="free-tools/video-enhancer" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/image-enhancer" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/background-remover" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/image-eraser" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/face-enhancer" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/face-swapper" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/segment-anything" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/video-converter" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/audio-converter" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/image-converter" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/media-trimmer" element={<PersistentPagePlaceholder />} />
-        <Route path="free-tools/media-merger" element={<PersistentPagePlaceholder />} />
+        <Route
+          path="free-tools/video-enhancer"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/image-enhancer"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/background-remover"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/image-eraser"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/face-enhancer"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/face-swapper"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/segment-anything"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/video-converter"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/audio-converter"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/image-converter"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/media-trimmer"
+          element={<PersistentPagePlaceholder />}
+        />
+        <Route
+          path="free-tools/media-merger"
+          element={<PersistentPagePlaceholder />}
+        />
         <Route path="settings" element={<SettingsPage />} />
       </Route>
     </Routes>
-  )
+  );
 }
 
-export default App
+export default App;
diff --git a/src/api/client.ts b/src/api/client.ts
index 5bdbac0d..1d73f9a8 100644
--- a/src/api/client.ts
+++ b/src/api/client.ts
@@ -1,138 +1,161 @@
-import axios, { AxiosInstance, AxiosError } from 'axios'
-import type { Model, ModelsResponse } from '@/types/model'
-import type { PredictionResult, PredictionResponse, HistoryResponse, UploadResponse } from '@/types/prediction'
-import packageJson from '../../package.json'
-
-const BASE_URL = 'https://api.wavespeed.ai'
+import axios, { AxiosInstance, AxiosError } from "axios";
+import type { Model, ModelsResponse } from "@/types/model";
+import type {
+  PredictionResult,
+  PredictionResponse,
+  HistoryResponse,
+  UploadResponse,
+} from "@/types/prediction";
+import packageJson from "../../package.json";
+
+const BASE_URL = "https://api.wavespeed.ai";
 
 // Get app version from package.json
-const version = packageJson.version
+const version = packageJson.version;
 
 // Detect operating system - works in Electron, browser, and Node.js
 function getOperatingSystem(): string {
   // Try Node.js/Electron process.platform first (most reliable)
-  if (typeof process !== 'undefined' && process.platform) {
-    return process.platform // 'darwin', 'win32', 'linux', etc.
+  if (typeof process !== "undefined" && process.platform) {
+    return process.platform; // 'darwin', 'win32', 'linux', etc.
   }
 
   // Fall back to user agent parsing (browser environment)
-  if (typeof navigator !== 'undefined' && navigator.userAgent) {
-    const userAgent = navigator.userAgent.toLowerCase()
-
-    if (userAgent.includes('mac os x') || userAgent.includes('macintosh')) {
-      return 'darwin'
-    } else if (userAgent.includes('windows') || userAgent.includes('win64') || userAgent.includes('win32')) {
-      return 'win32'
-    } else if (userAgent.includes('android')) {
-      return 'android'
-    } else if (userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod')) {
-      return 'ios'
-    } else if (userAgent.includes('cros')) {
-      return 'chromeos'
-    } else if (userAgent.includes('linux')) {
-      return 'linux'
-    } else if (userAgent.includes('freebsd')) {
-      return 'freebsd'
+  if (typeof navigator !== "undefined" && navigator.userAgent) {
+    const userAgent = navigator.userAgent.toLowerCase();
+
+    if (userAgent.includes("mac os x") || userAgent.includes("macintosh")) {
+      return "darwin";
+    } else if (
+      userAgent.includes("windows") ||
+      userAgent.includes("win64") ||
+      userAgent.includes("win32")
+    ) {
+      return "win32";
+    } else if (userAgent.includes("android")) {
+      return "android";
+    } else if (
+      userAgent.includes("iphone") ||
+      userAgent.includes("ipad") ||
+      userAgent.includes("ipod")
+    ) {
+      return "ios";
+    } else if (userAgent.includes("cros")) {
+      return "chromeos";
+    } else if (userAgent.includes("linux")) {
+      return "linux";
+    } else if (userAgent.includes("freebsd")) {
+      return "freebsd";
     }
   }
 
-  return 'unknown'
+  return "unknown";
 }
 
 // Custom error class with detailed information
 export class APIError extends Error {
-  code?: number
-  status?: number
-  details?: unknown
-
-  constructor(message: string, options?: { code?: number; status?: number; details?: unknown }) {
-    super(message)
-    this.name = 'APIError'
-    this.code = options?.code
-    this.status = options?.status
-    this.details = options?.details
+  code?: number;
+  status?: number;
+  details?: unknown;
+
+  constructor(
+    message: string,
+    options?: { code?: number; status?: number; details?: unknown },
+  ) {
+    super(message);
+    this.name = "APIError";
+    this.code = options?.code;
+    this.status = options?.status;
+    this.details = options?.details;
   }
 }
 
 // Extract detailed error message from various error formats
 function extractErrorMessage(error: unknown): string {
   if (error instanceof AxiosError) {
-    const response = error.response
-    const status = response?.status
-    const statusText = response?.statusText
+    const response = error.response;
+    const status = response?.status;
+    const statusText = response?.statusText;
 
     // Handle timeout errors
-    if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
-      return `Request timed out. The server may be experiencing high load.`
+    if (error.code === "ECONNABORTED" || error.message.includes("timeout")) {
+      return `Request timed out. The server may be experiencing high load.`;
     }
 
     // Handle network errors
-    if (error.code === 'ERR_NETWORK') {
-      return `Network error: Unable to connect to the server. Please check your internet connection.`
+    if (error.code === "ERR_NETWORK") {
+      return `Network error: Unable to connect to the server. Please check your internet connection.`;
     }
 
     if (response?.data) {
-      const data = response.data as Record<string, unknown>
+      const data = response.data as Record<string, unknown>;
       // Try various error message formats
-      if (typeof data.message === 'string') {
-        return `${status ? `[${status}] ` : ''}${data.message}`
+      if (typeof data.message === "string") {
+        return `${status ? `[${status}] ` : ""}${data.message}`;
       }
-      if (typeof data.error === 'string') {
-        return `${status ? `[${status}] ` : ''}${data.error}`
+      if (typeof data.error === "string") {
+        return `${status ? `[${status}] ` : ""}${data.error}`;
       }
-      if (typeof data.detail === 'string') {
-        return `${status ? `[${status}] ` : ''}${data.detail}`
+      if (typeof data.detail === "string") {
+        return `${status ? `[${status}] ` : ""}${data.detail}`;
       }
       if (Array.isArray(data.detail)) {
-        const details = data.detail.map((d: { msg?: string; message?: string }) => d.msg || d.message || JSON.stringify(d)).join('; ')
-        return `${status ? `[${status}] ` : ''}${details}`
+        const details = data.detail
+          .map(
+            (d: { msg?: string; message?: string }) =>
+              d.msg || d.message || JSON.stringify(d),
+          )
+          .join("; ");
+        return `${status ? `[${status}] ` : ""}${details}`;
       }
       if (data.errors && Array.isArray(data.errors)) {
-        const errors = data.errors.map((e: { message?: string }) => e.message || JSON.stringify(e)).join('; ')
-        return `${status ? `[${status}] ` : ''}${errors}`
+        const errors = data.errors
+          .map((e: { message?: string }) => e.message || JSON.stringify(e))
+          .join("; ");
+        return `${status ? `[${status}] ` : ""}${errors}`;
       }
       // Fallback to stringified response with status
-      return `${status ? `[${status}${statusText ? ' ' + statusText : ''}] ` : ''}${JSON.stringify(data)}`
+      return `${status ? `[${status}${statusText ? " " + statusText : ""}] ` : ""}${JSON.stringify(data)}`;
     }
 
     // HTTP status without response body
     if (status) {
-      return `HTTP ${status}${statusText ? ': ' + statusText : ''}`
+      return `HTTP ${status}${statusText ? ": " + statusText : ""}`;
     }
 
-    if (error.message) return error.message
+    if (error.message) return error.message;
   }
-  if (error instanceof Error) return error.message
-  return String(error)
+  if (error instanceof Error) return error.message;
+  return String(error);
 }
 
 function createAPIError(error: unknown, fallbackMessage: string): APIError {
-  const message = extractErrorMessage(error) || fallbackMessage
-  const axiosError = error instanceof AxiosError ? error : null
+  const message = extractErrorMessage(error) || fallbackMessage;
+  const axiosError = error instanceof AxiosError ? error : null;
   return new APIError(message, {
     code: axiosError?.response?.data?.code,
     status: axiosError?.response?.status,
-    details: axiosError?.response?.data
-  })
+    details: axiosError?.response?.data,
+  });
 }
 
 export interface RunOptions {
-  timeout?: number
-  pollInterval?: number
-  enableSyncMode?: boolean
-  signal?: AbortSignal
+  timeout?: number;
+  pollInterval?: number;
+  enableSyncMode?: boolean;
+  signal?: AbortSignal;
 }
 
 export interface HistoryFilters {
-  model?: string
-  status?: 'completed' | 'failed' | 'processing' | 'created'
-  created_after?: string
-  created_before?: string
+  model?: string;
+  status?: "completed" | "failed" | "processing" | "created";
+  created_after?: string;
+  created_before?: string;
 }
 
 class WaveSpeedClient {
-  private client: AxiosInstance
-  private apiKey: string = ''
+  private client: AxiosInstance;
+  private apiKey: string = "";
 
   constructor() {
     this.client = axios.create({
@@ -141,99 +164,127 @@ class WaveSpeedClient {
       maxBodyLength: Infinity, // Allow large file uploads
       maxContentLength: Infinity, // Allow large response content
       headers: {
-        'Content-Type': 'application/json',
-        'X-Client-Name': (() => {
-          const os = getOperatingSystem()
-          return os === 'android' || os === 'ios' ? 'wavespeed-mobile' : 'wavespeed-desktop'
+        "Content-Type": "application/json",
+        "X-Client-Name": (() => {
+          const os = getOperatingSystem();
+          return os === "android" || os === "ios"
+            ? "wavespeed-mobile"
+            : "wavespeed-desktop";
         })(),
-        'X-Client-Version': version,
-        'X-Client-OS': getOperatingSystem()
-      }
-    })
+        "X-Client-Version": version,
+        "X-Client-OS": getOperatingSystem(),
+      },
+    });
 
     this.client.interceptors.request.use((config) => {
       if (this.apiKey) {
-        config.headers.Authorization = `Bearer ${this.apiKey}`
+        config.headers.Authorization = `Bearer ${this.apiKey}`;
       }
-      return config
-    })
+      return config;
+    });
   }
 
   setApiKey(apiKey: string) {
-    this.apiKey = apiKey
+    this.apiKey = apiKey;
   }
 
   getApiKey(): string {
-    return this.apiKey
+    return this.apiKey;
   }
 
   async listModels(): Promise<Model[]> {
     try {
-      const response = await this.client.get<ModelsResponse>('/api/v3/models')
+      const response = await this.client.get<ModelsResponse>("/api/v3/models");
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to fetch models', {
+        throw new APIError(response.data.message || "Failed to fetch models", {
           code: response.data.code,
-          details: response.data
-        })
+          details: response.data,
+        });
       }
-      return response.data.data
+      return response.data.data;
     } catch (error) {
-      throw createAPIError(error, 'Failed to fetch models')
+      throw createAPIError(error, "Failed to fetch models");
     }
   }
 
-  async runPrediction(model: string, input: Record<string, unknown>, options?: { timeout?: number; signal?: AbortSignal }): Promise<PredictionResult> {
+  async runPrediction(
+    model: string,
+    input: Record<string, unknown>,
+    options?: { timeout?: number; signal?: AbortSignal },
+  ): Promise<PredictionResult> {
     try {
-      const response = await this.client.post<PredictionResponse>(`/api/v3/${model}`, input, {
-        timeout: options?.timeout,
-        ...(options?.signal && { signal: options.signal })
-      })
+      const response = await this.client.post<PredictionResponse>(
+        `/api/v3/${model}`,
+        input,
+        {
+          timeout: options?.timeout,
+          ...(options?.signal && { signal: options.signal }),
+        },
+      );
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to run prediction', {
-          code: response.data.code,
-          details: response.data
-        })
+        throw new APIError(
+          response.data.message || "Failed to run prediction",
+          {
+            code: response.data.code,
+            details: response.data,
+          },
+        );
       }
-      return response.data.data
+      return response.data.data;
     } catch (error) {
-      throw createAPIError(error, 'Failed to run prediction')
+      throw createAPIError(error, "Failed to run prediction");
     }
   }
 
-  async getResult(requestId: string, options?: { signal?: AbortSignal }): Promise<PredictionResult> {
+  async getResult(
+    requestId: string,
+    options?: { signal?: AbortSignal },
+  ): Promise<PredictionResult> {
     try {
-      const response = await this.client.get<PredictionResponse>(`/api/v3/predictions/${requestId}/result`, {
-        ...(options?.signal && { signal: options.signal })
-      })
+      const response = await this.client.get<PredictionResponse>(
+        `/api/v3/predictions/${requestId}/result`,
+        {
+          ...(options?.signal && { signal: options.signal }),
+        },
+      );
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to get result', {
+        throw new APIError(response.data.message || "Failed to get result", {
           code: response.data.code,
-          details: response.data
-        })
+          details: response.data,
+        });
       }
-      return response.data.data
+      return response.data.data;
     } catch (error) {
       // Re-throw AxiosError directly so the polling loop in run() can detect
       // connection errors and retry instead of aborting the entire prediction.
-      if (error instanceof AxiosError) throw error
-      throw createAPIError(error, 'Failed to get result')
+      if (error instanceof AxiosError) throw error;
+      throw createAPIError(error, "Failed to get result");
     }
   }
 
   // Get prediction details including inputs (if available from API)
-  async getPredictionDetails(predictionId: string): Promise<PredictionResult & { input?: Record<string, unknown> }> {
+  async getPredictionDetails(
+    predictionId: string,
+  ): Promise<PredictionResult & { input?: Record<string, unknown> }> {
     try {
-      const response = await this.client.get<PredictionResponse>(`/api/v3/predictions/${predictionId}/result`)
+      const response = await this.client.get<PredictionResponse>(
+        `/api/v3/predictions/${predictionId}/result`,
+      );
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to get prediction details', {
-          code: response.data.code,
-          details: response.data
-        })
+        throw new APIError(
+          response.data.message || "Failed to get prediction details",
+          {
+            code: response.data.code,
+            details: response.data,
+          },
+        );
       }
       // The API might return 'input' field with the original inputs
-      return response.data.data as PredictionResult & { input?: Record<string, unknown> }
+      return response.data.data as PredictionResult & {
+        input?: Record<string, unknown>;
+      };
     } catch (error) {
-      throw createAPIError(error, 'Failed to get prediction details')
+      throw createAPIError(error, "Failed to get prediction details");
     }
   }
 
@@ -241,95 +292,120 @@ class WaveSpeedClient {
   private isConnectionError(error: unknown): boolean {
     if (error instanceof AxiosError) {
       // Timeout errors
-      if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
-        return true
+      if (error.code === "ECONNABORTED" || error.message.includes("timeout")) {
+        return true;
       }
       // Network errors
-      if (error.code === 'ERR_NETWORK' || error.code === 'ECONNREFUSED' || error.code === 'ENOTFOUND') {
-        return true
+      if (
+        error.code === "ERR_NETWORK" ||
+        error.code === "ECONNREFUSED" ||
+        error.code === "ENOTFOUND"
+      ) {
+        return true;
       }
     }
-    return false
+    return false;
   }
 
   async run(
     model: string,
     input: Record<string, unknown>,
-    options: RunOptions = {}
+    options: RunOptions = {},
   ): Promise<PredictionResult> {
-    const { timeout = 36000000, pollInterval = 1000, enableSyncMode = false, signal } = options
+    const {
+      timeout = 36000000,
+      pollInterval = 1000,
+      enableSyncMode = false,
+      signal,
+    } = options;
 
     const throwIfAborted = (): void => {
-      if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError')
-    }
+      if (signal?.aborted) throw new DOMException("Cancelled", "AbortError");
+    };
 
     // If sync mode is enabled, add it to input and wait for response (use longer timeout)
     if (enableSyncMode) {
-      const result = await this.runPrediction(model, { ...input, enable_sync_mode: true }, { timeout: 120000, signal })
-      return result
+      const result = await this.runPrediction(
+        model,
+        { ...input, enable_sync_mode: true },
+        { timeout: 120000, signal },
+      );
+      return result;
     }
 
-    throwIfAborted()
+    throwIfAborted();
     // Submit prediction
-    const prediction = await this.runPrediction(model, input, { signal })
-    const requestId = prediction.id
+    const prediction = await this.runPrediction(model, input, { signal });
+    const requestId = prediction.id;
 
     if (!requestId) {
-      throw new Error('No request ID in response')
+      throw new Error("No request ID in response");
     }
 
     // Poll for result with retry on connection errors
-    const startTime = Date.now()
-    let consecutiveErrors = 0
-    const MAX_CONSECUTIVE_ERRORS = 10
+    const startTime = Date.now();
+    let consecutiveErrors = 0;
+    const MAX_CONSECUTIVE_ERRORS = 10;
     while (true) {
-      throwIfAborted()
+      throwIfAborted();
       if (Date.now() - startTime > timeout) {
-        throw new Error('Prediction timed out')
+        throw new Error("Prediction timed out");
       }
 
       try {
-        const result = await this.getResult(requestId, { signal })
-        consecutiveErrors = 0 // reset on success
+        const result = await this.getResult(requestId, { signal });
+        consecutiveErrors = 0; // reset on success
 
-        if (result.status === 'completed') {
-          return result
+        if (result.status === "completed") {
+          return result;
         }
 
-        if (result.status === 'failed') {
-          throw new APIError(result.error || 'Prediction failed', {
-            details: result
-          })
+        if (result.status === "failed") {
+          throw new APIError(result.error || "Prediction failed", {
+            details: result,
+          });
         }
       } catch (error) {
-        if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError')
+        if (signal?.aborted) throw new DOMException("Cancelled", "AbortError");
         // Retry with exponential backoff on connection errors
         if (this.isConnectionError(error)) {
-          consecutiveErrors++
+          consecutiveErrors++;
           if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
-            throw new Error(`Polling failed after ${MAX_CONSECUTIVE_ERRORS} consecutive connection errors`)
+            throw new Error(
+              `Polling failed after ${MAX_CONSECUTIVE_ERRORS} consecutive connection errors`,
+            );
           }
-          const backoff = Math.min(1000 * Math.pow(2, consecutiveErrors - 1), 10000)
-          console.warn(`Connection error during polling (${consecutiveErrors}/${MAX_CONSECUTIVE_ERRORS}), retrying in ${backoff}ms...`, error)
-          await new Promise(resolve => setTimeout(resolve, backoff))
-          continue
+          const backoff = Math.min(
+            1000 * Math.pow(2, consecutiveErrors - 1),
+            10000,
+          );
+          console.warn(
+            `Connection error during polling (${consecutiveErrors}/${MAX_CONSECUTIVE_ERRORS}), retrying in ${backoff}ms...`,
+            error,
+          );
+          await new Promise((resolve) => setTimeout(resolve, backoff));
+          continue;
         }
         // Re-throw non-connection errors
-        throw error
+        throw error;
       }
 
       // Wait before next poll (abort-aware when signal provided)
-      throwIfAborted()
+      throwIfAborted();
       if (signal) {
         await new Promise<void>((resolve, reject) => {
-          const t = setTimeout(resolve, pollInterval)
-          signal.addEventListener('abort', () => {
-            clearTimeout(t)
-            reject(new DOMException('Cancelled', 'AbortError'))
-          }, { once: true })
-        })
+          const t = setTimeout(resolve, pollInterval);
+          signal.addEventListener(
+            "abort",
+            () => {
+              clearTimeout(t);
+              reject(new DOMException("Cancelled", "AbortError"));
+            },
+            { once: true },
+          );
+        });
       } else {
-        await new Promise(resolve => setTimeout(resolve, pollInterval))
+        await new Promise((resolve) => setTimeout(resolve, pollInterval));
       }
     }
   }
@@ -337,163 +413,196 @@ class WaveSpeedClient {
   async getHistory(
     page: number = 1,
     pageSize: number = 20,
-    filters?: HistoryFilters
-  ): Promise<HistoryResponse['data']> {
+    filters?: HistoryFilters,
+  ): Promise<HistoryResponse["data"]> {
     try {
       // Default to last 24 hours if no date filters provided
-      const now = new Date()
-      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+      const now = new Date();
+      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
 
       const body: Record<string, unknown> = {
         page,
         page_size: pageSize,
         created_after: filters?.created_after || oneDayAgo.toISOString(),
-        created_before: filters?.created_before || now.toISOString()
-      }
+        created_before: filters?.created_before || now.toISOString(),
+      };
 
-      if (filters?.model) body.model = filters.model
-      if (filters?.status) body.status = filters.status
+      if (filters?.model) body.model = filters.model;
+      if (filters?.status) body.status = filters.status;
 
-      const response = await this.client.post<HistoryResponse>('/api/v3/predictions', body)
+      const response = await this.client.post<HistoryResponse>(
+        "/api/v3/predictions",
+        body,
+      );
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to fetch history', {
+        throw new APIError(response.data.message || "Failed to fetch history", {
           code: response.data.code,
-          details: response.data
-        })
+          details: response.data,
+        });
       }
-      return response.data.data
+      return response.data.data;
     } catch (error) {
-      throw createAPIError(error, 'Failed to fetch history')
+      throw createAPIError(error, "Failed to fetch history");
     }
   }
 
   async deletePrediction(predictionId: string): Promise<void> {
-    await this.deletePredictions([predictionId])
+    await this.deletePredictions([predictionId]);
   }
 
   async deletePredictions(predictionIds: string[]): Promise<void> {
     try {
       const response = await this.client.post<{
-        code: number
-        message: string
-        data?: unknown
-      }>('/api/v3/predictions/delete', {
-        ids: predictionIds
-      })
+        code: number;
+        message: string;
+        data?: unknown;
+      }>("/api/v3/predictions/delete", {
+        ids: predictionIds,
+      });
 
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to delete prediction', {
-          code: response.data.code,
-          details: response.data
-        })
+        throw new APIError(
+          response.data.message || "Failed to delete prediction",
+          {
+            code: response.data.code,
+            details: response.data,
+          },
+        );
       }
     } catch (error) {
-      throw createAPIError(error, 'Failed to delete prediction')
+      throw createAPIError(error, "Failed to delete prediction");
     }
   }
 
-  async uploadFile(file: File, signal?: AbortSignal): Promise<string> {
+  async uploadFile(
+    file: File,
+    signal?: AbortSignal,
+    onUploadProgress?: (progress: number) => void,
+  ): Promise<string> {
     try {
-      const formData = new FormData()
-      formData.append('file', file)
+      const formData = new FormData();
+      formData.append("file", file);
 
       // Dynamic timeout based on file size
       // Minimum 120 seconds, add 1 second per MB, maximum 10 minutes
-      const minTimeout = 120000
-      const maxTimeout = 600000
-      const fileSizeMb = file.size / (1024 * 1024)
-      const timeout = Math.min(maxTimeout, Math.max(minTimeout, Math.ceil(fileSizeMb) * 1000 + minTimeout))
-
-      const response = await this.client.post<UploadResponse>('/api/v3/media/upload/binary', formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data'
+      const minTimeout = 120000;
+      const maxTimeout = 600000;
+      const fileSizeMb = file.size / (1024 * 1024);
+      const timeout = Math.min(
+        maxTimeout,
+        Math.max(minTimeout, Math.ceil(fileSizeMb) * 1000 + minTimeout),
+      );
+
+      const response = await this.client.post<UploadResponse>(
+        "/api/v3/media/upload/binary",
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+          timeout,
+          signal,
+          onUploadProgress: onUploadProgress
+            ? (e) => {
+                if (e.total) {
+                  onUploadProgress(Math.round((e.loaded / e.total) * 100));
+                }
+              }
+            : undefined,
         },
-        timeout,
-        signal
-      })
+      );
 
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to upload file', {
+        throw new APIError(response.data.message || "Failed to upload file", {
           code: response.data.code,
-          details: response.data
-        })
+          details: response.data,
+        });
       }
 
-      return response.data.data.download_url
+      return response.data.data.download_url;
     } catch (error) {
       // Check if this is a cancellation error
-      if (axios.isCancel(error) || (error instanceof Error && error.name === 'CanceledError')) {
-        throw new APIError('Upload cancelled', { code: 0 })
+      if (
+        axios.isCancel(error) ||
+        (error instanceof Error && error.name === "CanceledError")
+      ) {
+        throw new APIError("Upload cancelled", { code: 0 });
       }
-      throw createAPIError(error, 'Failed to upload file')
+      throw createAPIError(error, "Failed to upload file");
     }
   }
 
   async optimizePrompt(input: Record<string, unknown>): Promise<string> {
     try {
       const result = await this.run(
-        'wavespeed-ai/prompt-optimizer',
+        "wavespeed-ai/prompt-optimizer",
         { ...input, enable_sync_mode: true },
-        { enableSyncMode: true }
-      )
+        { enableSyncMode: true },
+      );
 
       if (result.outputs && result.outputs.length > 0) {
-        const output = result.outputs[0]
+        const output = result.outputs[0];
         // Prompt optimizer always returns a string
-        return typeof output === 'string' ? output : JSON.stringify(output)
+        return typeof output === "string" ? output : JSON.stringify(output);
       }
 
-      throw new APIError('No optimized prompt returned')
+      throw new APIError("No optimized prompt returned");
     } catch (error) {
-      throw createAPIError(error, 'Failed to optimize prompt')
+      throw createAPIError(error, "Failed to optimize prompt");
     }
   }
 
-  async calculatePricing(modelId: string, inputs: Record<string, unknown>): Promise<number> {
+  async calculatePricing(
+    modelId: string,
+    inputs: Record<string, unknown>,
+  ): Promise<number> {
     try {
       const response = await this.client.post<{
-        code: number
-        message: string
-        data: { unit_price: number }
-      }>('/api/v3/model/pricing', {
+        code: number;
+        message: string;
+        data: { unit_price: number };
+      }>("/api/v3/model/pricing", {
         model_id: modelId,
-        inputs
-      })
+        inputs,
+      });
 
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to calculate pricing', {
-          code: response.data.code,
-          details: response.data
-        })
+        throw new APIError(
+          response.data.message || "Failed to calculate pricing",
+          {
+            code: response.data.code,
+            details: response.data,
+          },
+        );
       }
 
-      return response.data.data.unit_price
+      return response.data.data.unit_price;
     } catch (error) {
-      throw createAPIError(error, 'Failed to calculate pricing')
+      throw createAPIError(error, "Failed to calculate pricing");
     }
   }
 
   async getBalance(): Promise<number> {
     try {
       const response = await this.client.get<{
-        code: number
-        message: string
-        data: { balance: number }
-      }>('/api/v3/balance')
+        code: number;
+        message: string;
+        data: { balance: number };
+      }>("/api/v3/balance");
 
       if (response.data.code !== 200) {
-        throw new APIError(response.data.message || 'Failed to fetch balance', {
+        throw new APIError(response.data.message || "Failed to fetch balance", {
           code: response.data.code,
-          details: response.data
-        })
+          details: response.data,
+        });
       }
 
-      return response.data.data.balance
+      return response.data.data.balance;
     } catch (error) {
-      throw createAPIError(error, 'Failed to fetch balance')
+      throw createAPIError(error, "Failed to fetch balance");
     }
   }
 }
 
-export const apiClient = new WaveSpeedClient()
-export default apiClient
+export const apiClient = new WaveSpeedClient();
+export default apiClient;
diff --git a/src/components/ffmpeg/TimeRangeSlider.tsx b/src/components/ffmpeg/TimeRangeSlider.tsx
index 182780a0..e3d82587 100644
--- a/src/components/ffmpeg/TimeRangeSlider.tsx
+++ b/src/components/ffmpeg/TimeRangeSlider.tsx
@@ -1,14 +1,14 @@
-import { useRef, useCallback, useEffect, useState } from 'react'
-import { formatDuration } from '@/lib/ffmpegFormats'
-import { cn } from '@/lib/utils'
+import { useRef, useCallback, useEffect, useState } from "react";
+import { formatDuration } from "@/lib/ffmpegFormats";
+import { cn } from "@/lib/utils";
 
 interface TimeRangeSliderProps {
-  duration: number
-  startTime: number
-  endTime: number
-  onStartChange: (time: number) => void
-  onEndChange: (time: number) => void
-  className?: string
+  duration: number;
+  startTime: number;
+  endTime: number;
+  onStartChange: (time: number) => void;
+  onEndChange: (time: number) => void;
+  className?: string;
 }
 
 export function TimeRangeSlider({
@@ -17,94 +17,106 @@ export function TimeRangeSlider({
   endTime,
   onStartChange,
   onEndChange,
-  className
+  className,
 }: TimeRangeSliderProps) {
-  const trackRef = useRef<HTMLDivElement>(null)
-  const [dragging, setDragging] = useState<'start' | 'end' | 'range' | null>(null)
-  const dragStartRef = useRef({ x: 0, startTime: 0, endTime: 0 })
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState<"start" | "end" | "range" | null>(
+    null,
+  );
+  const dragStartRef = useRef({ x: 0, startTime: 0, endTime: 0 });
 
   const getTimeFromPosition = useCallback(
     (clientX: number): number => {
-      if (!trackRef.current) return 0
-      const rect = trackRef.current.getBoundingClientRect()
-      const x = clientX - rect.left
-      const percentage = Math.max(0, Math.min(1, x / rect.width))
-      return percentage * duration
+      if (!trackRef.current) return 0;
+      const rect = trackRef.current.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, x / rect.width));
+      return percentage * duration;
     },
-    [duration]
-  )
+    [duration],
+  );
 
   const handleMouseDown = useCallback(
-    (e: React.MouseEvent, type: 'start' | 'end' | 'range') => {
-      e.preventDefault()
-      setDragging(type)
+    (e: React.MouseEvent, type: "start" | "end" | "range") => {
+      e.preventDefault();
+      setDragging(type);
       dragStartRef.current = {
         x: e.clientX,
         startTime,
-        endTime
-      }
+        endTime,
+      };
     },
-    [startTime, endTime]
-  )
+    [startTime, endTime],
+  );
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      if (!dragging) return
-
-      const time = getTimeFromPosition(e.clientX)
-
-      if (dragging === 'start') {
-        const newStart = Math.min(time, endTime - 0.1)
-        onStartChange(Math.max(0, newStart))
-      } else if (dragging === 'end') {
-        const newEnd = Math.max(time, startTime + 0.1)
-        onEndChange(Math.min(duration, newEnd))
-      } else if (dragging === 'range') {
-        const delta = e.clientX - dragStartRef.current.x
-        const timeDelta = (delta / (trackRef.current?.offsetWidth || 1)) * duration
-        const rangeDuration = dragStartRef.current.endTime - dragStartRef.current.startTime
-
-        let newStart = dragStartRef.current.startTime + timeDelta
-        let newEnd = dragStartRef.current.endTime + timeDelta
+      if (!dragging) return;
+
+      const time = getTimeFromPosition(e.clientX);
+
+      if (dragging === "start") {
+        const newStart = Math.min(time, endTime - 0.1);
+        onStartChange(Math.max(0, newStart));
+      } else if (dragging === "end") {
+        const newEnd = Math.max(time, startTime + 0.1);
+        onEndChange(Math.min(duration, newEnd));
+      } else if (dragging === "range") {
+        const delta = e.clientX - dragStartRef.current.x;
+        const timeDelta =
+          (delta / (trackRef.current?.offsetWidth || 1)) * duration;
+        const rangeDuration =
+          dragStartRef.current.endTime - dragStartRef.current.startTime;
+
+        let newStart = dragStartRef.current.startTime + timeDelta;
+        let newEnd = dragStartRef.current.endTime + timeDelta;
 
         // Clamp to bounds
         if (newStart < 0) {
-          newStart = 0
-          newEnd = rangeDuration
+          newStart = 0;
+          newEnd = rangeDuration;
         }
         if (newEnd > duration) {
-          newEnd = duration
-          newStart = duration - rangeDuration
+          newEnd = duration;
+          newStart = duration - rangeDuration;
         }
 
-        onStartChange(newStart)
-        onEndChange(newEnd)
+        onStartChange(newStart);
+        onEndChange(newEnd);
       }
     },
-    [dragging, getTimeFromPosition, startTime, endTime, duration, onStartChange, onEndChange]
-  )
+    [
+      dragging,
+      getTimeFromPosition,
+      startTime,
+      endTime,
+      duration,
+      onStartChange,
+      onEndChange,
+    ],
+  );
 
   const handleMouseUp = useCallback(() => {
-    setDragging(null)
-  }, [])
+    setDragging(null);
+  }, []);
 
   useEffect(() => {
     if (dragging) {
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
       return () => {
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-      }
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
     }
-  }, [dragging, handleMouseMove, handleMouseUp])
+  }, [dragging, handleMouseMove, handleMouseUp]);
 
-  const startPercent = (startTime / duration) * 100
-  const endPercent = (endTime / duration) * 100
-  const selectedDuration = endTime - startTime
+  const startPercent = (startTime / duration) * 100;
+  const endPercent = (endTime / duration) * 100;
+  const selectedDuration = endTime - startTime;
 
   return (
-    <div className={cn('space-y-2', className)}>
+    <div className={cn("space-y-2", className)}>
       {/* Time labels */}
       <div className="flex justify-between text-xs text-muted-foreground">
         <span>0:00</span>
@@ -128,14 +140,14 @@ export function TimeRangeSlider({
         {/* Selected region */}
         <div
           className={cn(
-            'absolute inset-y-0 bg-primary/30 cursor-grab',
-            dragging === 'range' && 'cursor-grabbing'
+            "absolute inset-y-0 bg-primary/30 cursor-grab",
+            dragging === "range" && "cursor-grabbing",
           )}
           style={{
             left: `${startPercent}%`,
-            width: `${endPercent - startPercent}%`
+            width: `${endPercent - startPercent}%`,
           }}
-          onMouseDown={(e) => handleMouseDown(e, 'range')}
+          onMouseDown={(e) => handleMouseDown(e, "range")}
         />
 
         {/* Unselected region (after) */}
@@ -147,11 +159,11 @@ export function TimeRangeSlider({
         {/* Start handle */}
         <div
           className={cn(
-            'absolute top-0 bottom-0 w-1 bg-primary cursor-ew-resize hover:w-1.5 transition-all',
-            dragging === 'start' && 'w-1.5'
+            "absolute top-0 bottom-0 w-1 bg-primary cursor-ew-resize hover:w-1.5 transition-all",
+            dragging === "start" && "w-1.5",
           )}
-          style={{ left: `${startPercent}%`, transform: 'translateX(-50%)' }}
-          onMouseDown={(e) => handleMouseDown(e, 'start')}
+          style={{ left: `${startPercent}%`, transform: "translateX(-50%)" }}
+          onMouseDown={(e) => handleMouseDown(e, "start")}
         >
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-6 rounded bg-primary flex items-center justify-center shadow-md">
             <div className="w-0.5 h-3 bg-primary-foreground/50 rounded-full" />
@@ -161,11 +173,11 @@ export function TimeRangeSlider({
         {/* End handle */}
         <div
           className={cn(
-            'absolute top-0 bottom-0 w-1 bg-primary cursor-ew-resize hover:w-1.5 transition-all',
-            dragging === 'end' && 'w-1.5'
+            "absolute top-0 bottom-0 w-1 bg-primary cursor-ew-resize hover:w-1.5 transition-all",
+            dragging === "end" && "w-1.5",
           )}
-          style={{ left: `${endPercent}%`, transform: 'translateX(-50%)' }}
-          onMouseDown={(e) => handleMouseDown(e, 'end')}
+          style={{ left: `${endPercent}%`, transform: "translateX(-50%)" }}
+          onMouseDown={(e) => handleMouseDown(e, "end")}
         >
           <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-6 rounded bg-primary flex items-center justify-center shadow-md">
             <div className="w-0.5 h-3 bg-primary-foreground/50 rounded-full" />
@@ -185,5 +197,5 @@ export function TimeRangeSlider({
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/layout/AppLogo.tsx b/src/components/layout/AppLogo.tsx
index 696267cc..211cb218 100644
--- a/src/components/layout/AppLogo.tsx
+++ b/src/components/layout/AppLogo.tsx
@@ -1,11 +1,11 @@
-import logoLight from '@/assets/logo-light.png'
-import logoDark from '@/assets/logo-dark.png'
+import logoLight from "@/assets/logo-light.png";
+import logoDark from "@/assets/logo-dark.png";
 
 interface AppLogoProps {
-  className?: string
+  className?: string;
 }
 
-export function AppLogo({ className = 'h-10 w-10' }: AppLogoProps) {
+export function AppLogo({ className = "h-10 w-10" }: AppLogoProps) {
   return (
     <>
       <img
@@ -19,5 +19,5 @@ export function AppLogo({ className = 'h-10 w-10' }: AppLogoProps) {
         className={`${className} hidden dark:block object-contain`}
       />
     </>
-  )
+  );
 }
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 4618dd65..1d7b3340 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,174 +1,231 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { Outlet, useNavigate, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Sidebar } from './Sidebar'
-import { AppLogo } from './AppLogo'
-import { PageResetContext } from './PageResetContext'
-import { Toaster } from '@/components/ui/toaster'
-import { UpdateBanner } from './UpdateBanner'
-import { TooltipProvider } from '@/components/ui/tooltip'
-import { ToastAction } from '@/components/ui/toast'
-import { toast } from '@/hooks/useToast'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { apiClient } from '@/api/client'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { KeyRound, Eye, EyeOff, Loader2, Zap, ExternalLink } from 'lucide-react'
-import { VideoEnhancerPage } from '@/pages/VideoEnhancerPage'
-import { ImageEnhancerPage } from '@/pages/ImageEnhancerPage'
-import { BackgroundRemoverPage } from '@/pages/BackgroundRemoverPage'
-import { ImageEraserPage } from '@/pages/ImageEraserPage'
-import { SegmentAnythingPage } from '@/pages/SegmentAnythingPage'
-import { ZImagePage } from '@/pages/ZImagePage'
-import { VideoConverterPage } from '@/pages/VideoConverterPage'
-import { AudioConverterPage } from '@/pages/AudioConverterPage'
-import { ImageConverterPage } from '@/pages/ImageConverterPage'
-import { MediaTrimmerPage } from '@/pages/MediaTrimmerPage'
-import { MediaMergerPage } from '@/pages/MediaMergerPage'
-import { FaceEnhancerPage } from '@/pages/FaceEnhancerPage'
-import { FaceSwapperPage } from '@/pages/FaceSwapperPage'
-import { WorkflowPage } from '@/workflow/WorkflowPage'
-import { useFreeToolListener } from '@/workflow/hooks/useFreeToolListener'
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Outlet, useNavigate, useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Sidebar } from "./Sidebar";
+import { AppLogo } from "./AppLogo";
+import { PageResetContext } from "./PageResetContext";
+import { Toaster } from "@/components/ui/toaster";
+import { UpdateBanner } from "./UpdateBanner";
+import {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import { ToastAction } from "@/components/ui/toast";
+import { toast } from "@/hooks/useToast";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { apiClient } from "@/api/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  KeyRound,
+  Eye,
+  EyeOff,
+  Loader2,
+  Zap,
+  ExternalLink,
+  Globe,
+  FileText,
+} from "lucide-react";
+import { VideoEnhancerPage } from "@/pages/VideoEnhancerPage";
+import { ImageEnhancerPage } from "@/pages/ImageEnhancerPage";
+import { BackgroundRemoverPage } from "@/pages/BackgroundRemoverPage";
+import { ImageEraserPage } from "@/pages/ImageEraserPage";
+import { SegmentAnythingPage } from "@/pages/SegmentAnythingPage";
+import { ZImagePage } from "@/pages/ZImagePage";
+import { VideoConverterPage } from "@/pages/VideoConverterPage";
+import { AudioConverterPage } from "@/pages/AudioConverterPage";
+import { ImageConverterPage } from "@/pages/ImageConverterPage";
+import { MediaTrimmerPage } from "@/pages/MediaTrimmerPage";
+import { MediaMergerPage } from "@/pages/MediaMergerPage";
+import { FaceEnhancerPage } from "@/pages/FaceEnhancerPage";
+import { FaceSwapperPage } from "@/pages/FaceSwapperPage";
+import { HistoryPage } from "@/pages/HistoryPage";
+import { AssetsPage } from "@/pages/AssetsPage";
+import { WorkflowPage } from "@/workflow/WorkflowPage";
+import { useFreeToolListener } from "@/workflow/hooks/useFreeToolListener";
 
-const isElectron = navigator.userAgent.toLowerCase().includes('electron')
+const isElectron = navigator.userAgent.toLowerCase().includes("electron");
 
 // Helper to generate next key
-let keyCounter = 0
-const nextKey = () => ++keyCounter
-
+let keyCounter = 0;
+const nextKey = () => ++keyCounter;
 
 export function Layout() {
-  const { t } = useTranslation()
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
-  const navigate = useNavigate()
-  const location = useLocation()
-  const hasShownUpdateToast = useRef(false)
+  const { t } = useTranslation();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const hasShownUpdateToast = useRef(false);
 
   // Register free-tool IPC listener globally (must be always mounted for workflow execution)
-  useFreeToolListener()
+  useFreeToolListener();
 
   // Track which persistent pages have been visited (to delay initial mount)
-  const [visitedPages, setVisitedPages] = useState<Set<string>>(new Set())
+  const [visitedPages, setVisitedPages] = useState<Set<string>>(new Set());
   // Track the last visited free-tools sub-page for navigation
-  const [lastFreeToolsPage, setLastFreeToolsPage] = useState<string | null>(null)
+  const [lastFreeToolsPage, setLastFreeToolsPage] = useState<string | null>(
+    null,
+  );
   // Track keys for each page to force remount when reset
-  const [pageKeys, setPageKeys] = useState<Record<string, number>>({})
+  const [pageKeys, setPageKeys] = useState<Record<string, number>>({});
 
   // Reset a persistent page by changing its key (forces remount)
   const resetPage = useCallback((path: string) => {
-    setPageKeys(prev => ({
+    setPageKeys((prev) => ({
       ...prev,
-      [path]: nextKey()
-    }))
-  }, [])
+      [path]: nextKey(),
+    }));
+  }, []);
 
-  const { isValidated, isValidating, loadApiKey, hasAttemptedLoad, isLoading: isLoadingApiKey } = useApiKeyStore()
-  const [inputKey, setInputKey] = useState('')
-  const [showKey, setShowKey] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
-  const [error, setError] = useState('')
+  const {
+    isValidated,
+    isValidating,
+    loadApiKey,
+    hasAttemptedLoad,
+    isLoading: isLoadingApiKey,
+  } = useApiKeyStore();
+  const [inputKey, setInputKey] = useState("");
+  const [showKey, setShowKey] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState("");
 
   // Load API key on app startup
   useEffect(() => {
-    loadApiKey()
-  }, [loadApiKey])
+    loadApiKey();
+  }, [loadApiKey]);
 
   // Reset login form when API key is cleared
   useEffect(() => {
     if (!isValidated) {
-      setInputKey('')
-      setError('')
+      setInputKey("");
+      setError("");
     }
-  }, [isValidated])
+  }, [isValidated]);
 
   // Track visits to persistent pages and last visited free-tools page
   useEffect(() => {
-    const persistentPaths = ['/free-tools/video-enhancer', '/free-tools/image-enhancer', '/free-tools/face-enhancer', '/free-tools/face-swapper', '/free-tools/background-remover', '/free-tools/image-eraser', '/free-tools/segment-anything', '/free-tools/video-converter', '/free-tools/audio-converter', '/free-tools/image-converter', '/free-tools/media-trimmer', '/free-tools/media-merger', '/z-image', '/workflow']
+    const persistentPaths = [
+      "/history",
+      "/assets",
+      "/free-tools/video-enhancer",
+      "/free-tools/image-enhancer",
+      "/free-tools/face-enhancer",
+      "/free-tools/face-swapper",
+      "/free-tools/background-remover",
+      "/free-tools/image-eraser",
+      "/free-tools/segment-anything",
+      "/free-tools/video-converter",
+      "/free-tools/audio-converter",
+      "/free-tools/image-converter",
+      "/free-tools/media-trimmer",
+      "/free-tools/media-merger",
+      "/z-image",
+      "/workflow",
+    ];
     if (persistentPaths.includes(location.pathname)) {
       // Track for lazy mounting
       if (!visitedPages.has(location.pathname)) {
-        setVisitedPages(prev => new Set(prev).add(location.pathname))
+        setVisitedPages((prev) => new Set(prev).add(location.pathname));
       }
       // Track last visited for sidebar navigation (only for free-tools sub-pages)
-      if (location.pathname.startsWith('/free-tools/')) {
-        setLastFreeToolsPage(location.pathname)
+      if (location.pathname.startsWith("/free-tools/")) {
+        setLastFreeToolsPage(location.pathname);
       }
-    } else if (location.pathname === '/free-tools') {
+    } else if (location.pathname === "/free-tools") {
       // Clear last visited page when on main Free Tools page
       // So clicking sidebar will return to main page, not sub-page
-      setLastFreeToolsPage(null)
+      setLastFreeToolsPage(null);
     }
-  }, [location.pathname, visitedPages])
+  }, [location.pathname, visitedPages]);
+
+  // mainRef kept for potential future use
+  const mainRef = useRef<HTMLElement>(null);
 
   // Pages that don't require API key
-  const publicPaths = ['/', '/featured-models', '/settings', '/templates', '/assets', '/free-tools', '/z-image']
-  const isPublicPage = publicPaths.some(path =>
-    path === '/'
-      ? location.pathname === '/'
-      : location.pathname === path || location.pathname.startsWith(path + '/')
-  )
+  const publicPaths = [
+    "/",
+    "/settings",
+    "/templates",
+    "/assets",
+    "/free-tools",
+    "/z-image",
+  ];
+  const isPublicPage = publicPaths.some((path) =>
+    path === "/"
+      ? location.pathname === "/"
+      : location.pathname === path || location.pathname.startsWith(path + "/"),
+  );
 
   // Listen for update availability on startup
   useEffect(() => {
-    if (!window.electronAPI?.onUpdateStatus) return
+    if (!window.electronAPI?.onUpdateStatus) return;
 
     const unsubscribe = window.electronAPI.onUpdateStatus((status) => {
-      if (status.status === 'available' && !hasShownUpdateToast.current) {
-        hasShownUpdateToast.current = true
-        const version = (status as { version?: string }).version
+      if (status.status === "available" && !hasShownUpdateToast.current) {
+        hasShownUpdateToast.current = true;
+        const version = (status as { version?: string }).version;
         toast({
-          title: 'Update Available',
-          description: version ? `Version ${version} is ready to download` : 'A new version is available',
+          title: "Update Available",
+          description: version
+            ? `Version ${version} is ready to download`
+            : "A new version is available",
           action: (
-            <ToastAction altText="View" onClick={() => navigate('/settings')}>
+            <ToastAction altText="View" onClick={() => navigate("/settings")}>
               View
             </ToastAction>
           ),
-        })
+        });
       }
-    })
+    });
 
-    return unsubscribe
-  }, [navigate])
+    return unsubscribe;
+  }, [navigate]);
 
   const handleSaveApiKey = async () => {
-    if (!inputKey.trim()) return
+    if (!inputKey.trim()) return;
 
-    setIsSaving(true)
-    setError('')
+    setIsSaving(true);
+    setError("");
     try {
       // Validate the key first by trying to fetch models
-      apiClient.setApiKey(inputKey.trim())
-      await apiClient.listModels()
+      apiClient.setApiKey(inputKey.trim());
+      await apiClient.listModels();
 
       // If we get here, the key is valid - save it directly
       if (window.electronAPI) {
-        await window.electronAPI.setApiKey(inputKey.trim())
+        await window.electronAPI.setApiKey(inputKey.trim());
       } else {
-        localStorage.setItem('wavespeed_api_key', inputKey.trim())
+        localStorage.setItem("wavespeed_api_key", inputKey.trim());
       }
 
       // Reload the API key state (force to bypass hasAttemptedLoad check)
-      await loadApiKey(true)
+      await loadApiKey(true);
 
       toast({
-        title: t('settings.apiKey.saved'),
-        description: t('settings.apiKey.savedDesc'),
-      })
+        title: t("settings.apiKey.saved"),
+        description: t("settings.apiKey.savedDesc"),
+      });
     } catch {
       // Validation failed - clear the temporary key from client
-      apiClient.setApiKey('')
-      setError(t('settings.apiKey.invalidDesc'))
+      apiClient.setApiKey("");
+      setError(t("settings.apiKey.invalidDesc"));
     } finally {
-      setIsSaving(false)
+      setIsSaving(false);
     }
-  }
+  };
 
   // Check if current page requires login (must have a validated API key)
   // Only show login form after we've attempted to load the API key and finished loading/validating
-  const requiresLogin = !isValidated && !isPublicPage && hasAttemptedLoad && !isLoadingApiKey && !isValidating
+  const requiresLogin =
+    !isValidated &&
+    !isPublicPage &&
+    hasAttemptedLoad &&
+    !isLoadingApiKey &&
+    !isValidating;
 
   // Login form content for protected pages
   const loginContent = (
@@ -183,7 +240,7 @@ export function Layout() {
           </div>
           <h1 className="text-3xl font-bold gradient-text mb-2">WaveSpeed</h1>
           <p className="text-muted-foreground">
-            {t('apiKeyRequired.defaultDesc')}
+            {t("apiKeyRequired.defaultDesc")}
           </p>
         </div>
 
@@ -191,22 +248,22 @@ export function Layout() {
         <div className="bg-card border rounded-lg p-6 shadow-lg space-y-4">
           <div className="flex items-center gap-2 mb-4">
             <KeyRound className="h-5 w-5 text-muted-foreground" />
-            <h2 className="font-semibold">{t('settings.apiKey.title')}</h2>
+            <h2 className="font-semibold">{t("settings.apiKey.title")}</h2>
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="apiKey">{t('settings.apiKey.label')}</Label>
+            <Label htmlFor="apiKey">{t("settings.apiKey.label")}</Label>
             <div className="relative">
               <Input
                 id="apiKey"
-                type={showKey ? 'text' : 'password'}
+                type={showKey ? "text" : "password"}
                 value={inputKey}
                 onChange={(e) => {
-                  setInputKey(e.target.value)
-                  setError('')
+                  setInputKey(e.target.value);
+                  setError("");
                 }}
-                onKeyDown={(e) => e.key === 'Enter' && handleSaveApiKey()}
-                placeholder={t('settings.apiKey.placeholder')}
+                onKeyDown={(e) => e.key === "Enter" && handleSaveApiKey()}
+                placeholder={t("settings.apiKey.placeholder")}
                 className="pr-10"
               />
               <Button
@@ -216,12 +273,14 @@ export function Layout() {
                 className="absolute right-0 top-0 h-full px-3"
                 onClick={() => setShowKey(!showKey)}
               >
-                {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                {showKey ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
               </Button>
             </div>
-            {error && (
-              <p className="text-sm text-destructive">{error}</p>
-            )}
+            {error && <p className="text-sm text-destructive">{error}</p>}
           </div>
 
           <Button
@@ -232,15 +291,15 @@ export function Layout() {
             {isSaving ? (
               <>
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                {t('settings.apiKey.validating')}
+                {t("settings.apiKey.validating")}
               </>
             ) : (
-              t('settings.apiKey.save')
+              t("settings.apiKey.save")
             )}
           </Button>
 
           <p className="text-xs text-muted-foreground text-center">
-            {t('settings.apiKey.getKey')}{' '}
+            {t("settings.apiKey.getKey")}{" "}
             <a
               href="https://wavespeed.ai/accesskey"
               target="_blank"
@@ -255,129 +314,337 @@ export function Layout() {
 
         {/* Settings link */}
         <p className="text-center mt-4 text-sm text-muted-foreground">
-          {t('apiKeyRequired.orGoTo')}{' '}
+          {t("apiKeyRequired.orGoTo")}{" "}
           <Button
             variant="link"
             className="p-0 h-auto"
-            onClick={() => navigate('/settings')}
+            onClick={() => navigate("/settings")}
           >
-            {t('nav.settings')}
+            {t("nav.settings")}
           </Button>
         </p>
       </div>
     </div>
-  )
+  );
 
   return (
     <PageResetContext.Provider value={{ resetPage }}>
-    <TooltipProvider>
-      <div className="flex flex-col h-screen overflow-hidden relative">
-        {/* Fixed titlebar — draggable region for macOS & Windows (Electron only) */}
-        {isElectron && (
-        <div className="h-8 min-h-[32px] flex items-center justify-center bg-background electron-drag select-none shrink-0 relative z-50 electron-safe-right">
-          {!/mac/i.test(navigator.platform) && (
-            <div className="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center electron-no-drag">
-              <AppLogo className="h-5 w-5 shrink-0" />
-            </div>
-          )}
-        </div>
-        )}
-        <div className="flex flex-1 overflow-hidden">
-        <Sidebar
-          collapsed={sidebarCollapsed}
-          onToggle={() => setSidebarCollapsed(prev => !prev)}
-          lastFreeToolsPage={lastFreeToolsPage}
-          isMobileOpen={false}
-          onMobileClose={() => {}}
-        />
-        <main className="relative flex-1 overflow-hidden md:pl-0" style={{ background: 'hsl(var(--content-area))' }}>
-          {requiresLogin ? loginContent : (
-            <>
-              {/* Regular routes via Outlet */}
-              <div className={['/free-tools/video-enhancer', '/free-tools/image-enhancer', '/free-tools/face-enhancer', '/free-tools/face-swapper', '/free-tools/background-remover', '/free-tools/image-eraser', '/free-tools/segment-anything', '/free-tools/video-converter', '/free-tools/audio-converter', '/free-tools/image-converter', '/free-tools/media-trimmer', '/free-tools/media-merger', '/z-image', '/workflow'].includes(location.pathname) ? 'hidden' : 'h-full overflow-auto'}>
-                <Outlet />
-              </div>
-              {/* Persistent Free Tools pages - mounted once visited, removed from visitedPages forces unmount */}
-              {visitedPages.has('/free-tools/video-enhancer') && (
-                <div className={location.pathname === '/free-tools/video-enhancer' ? 'h-full overflow-auto' : 'hidden'}>
-                  <VideoEnhancerPage key={pageKeys['/free-tools/video-enhancer'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/image-enhancer') && (
-                <div className={location.pathname === '/free-tools/image-enhancer' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ImageEnhancerPage key={pageKeys['/free-tools/image-enhancer'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/face-enhancer') && (
-                <div className={location.pathname === '/free-tools/face-enhancer' ? 'h-full overflow-auto' : 'hidden'}>
-                  <FaceEnhancerPage key={pageKeys['/free-tools/face-enhancer'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/face-swapper') && (
-                <div className={location.pathname === '/free-tools/face-swapper' ? 'h-full overflow-auto' : 'hidden'}>
-                  <FaceSwapperPage key={pageKeys['/free-tools/face-swapper'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/background-remover') && (
-                <div className={location.pathname === '/free-tools/background-remover' ? 'h-full overflow-auto' : 'hidden'}>
-                  <BackgroundRemoverPage key={pageKeys['/free-tools/background-remover'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/image-eraser') && (
-                <div className={location.pathname === '/free-tools/image-eraser' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ImageEraserPage key={pageKeys['/free-tools/image-eraser'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/segment-anything') && (
-                <div className={location.pathname === '/free-tools/segment-anything' ? 'h-full overflow-auto' : 'hidden'}>
-                  <SegmentAnythingPage key={pageKeys['/free-tools/segment-anything'] || 0} />
-                </div>
-              )}
-              {/* Persistent Z-Image page - mounted once visited, then persist via CSS show/hide */}
-              {visitedPages.has('/z-image') && (
-                <div className={location.pathname === '/z-image' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ZImagePage key={pageKeys['/z-image'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/video-converter') && (
-                <div className={location.pathname === '/free-tools/video-converter' ? 'h-full overflow-auto' : 'hidden'}>
-                  <VideoConverterPage key={pageKeys['/free-tools/video-converter'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/audio-converter') && (
-                <div className={location.pathname === '/free-tools/audio-converter' ? 'h-full overflow-auto' : 'hidden'}>
-                  <AudioConverterPage key={pageKeys['/free-tools/audio-converter'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/image-converter') && (
-                <div className={location.pathname === '/free-tools/image-converter' ? 'h-full overflow-auto' : 'hidden'}>
-                  <ImageConverterPage key={pageKeys['/free-tools/image-converter'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/media-trimmer') && (
-                <div className={location.pathname === '/free-tools/media-trimmer' ? 'h-full overflow-auto' : 'hidden'}>
-                  <MediaTrimmerPage key={pageKeys['/free-tools/media-trimmer'] || 0} />
-                </div>
-              )}
-              {visitedPages.has('/free-tools/media-merger') && (
-                <div className={location.pathname === '/free-tools/media-merger' ? 'h-full overflow-auto' : 'hidden'}>
-                  <MediaMergerPage key={pageKeys['/free-tools/media-merger'] || 0} />
-                </div>
-              )}
-              {/* Persistent Workflow page */}
-              {visitedPages.has('/workflow') && (
-                <div className={location.pathname === '/workflow' ? 'h-full overflow-hidden' : 'hidden'}>
-                  <WorkflowPage key={pageKeys['/workflow'] || 0} />
+      <TooltipProvider>
+        <div className="flex flex-col h-screen overflow-hidden relative">
+          {/* Fixed titlebar — draggable region for macOS & Windows (Electron only) */}
+          {isElectron && (
+            <div className="h-8 min-h-[32px] flex items-center justify-center bg-background electron-drag select-none shrink-0 relative z-50 electron-safe-right">
+              {!/mac/i.test(navigator.platform) && (
+                <div className="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center electron-no-drag">
+                  <AppLogo className="h-5 w-5 shrink-0" />
                 </div>
               )}
-            </>
+              {/* Global WebPage & Docs buttons */}
+              <div
+                className={
+                  /mac/i.test(navigator.platform)
+                    ? "absolute right-3 top-0 bottom-0 flex items-center gap-1 electron-no-drag"
+                    : "absolute right-[140px] top-0 bottom-0 flex items-center electron-no-drag"
+                }
+              >
+                <Tooltip delayDuration={0}>
+                  <TooltipTrigger asChild>
+                    <a
+                      href="https://wavespeed.ai/dashboard"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={
+                        /mac/i.test(navigator.platform)
+                          ? "flex items-center justify-center h-8 w-8 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                          : "flex items-center justify-center h-8 w-[46px] text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.1)] transition-colors"
+                      }
+                    >
+                      <Globe className="h-4 w-4" />
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    {t("playground.webPage", "WebPage")}
+                  </TooltipContent>
+                </Tooltip>
+                <Tooltip delayDuration={0}>
+                  <TooltipTrigger asChild>
+                    <a
+                      href="https://wavespeed.ai/docs"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className={
+                        /mac/i.test(navigator.platform)
+                          ? "flex items-center justify-center h-8 w-8 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                          : "flex items-center justify-center h-8 w-[46px] text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.1)] transition-colors"
+                      }
+                    >
+                      <FileText className="h-4 w-4" />
+                    </a>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    {t("playground.docs", "Docs")}
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            </div>
           )}
-        </main>
-        <Toaster />
-        <UpdateBanner />
+          <div className="flex flex-1 overflow-hidden">
+            <Sidebar
+              collapsed={sidebarCollapsed}
+              onToggle={() => setSidebarCollapsed((prev) => !prev)}
+              lastFreeToolsPage={lastFreeToolsPage}
+              isMobileOpen={false}
+              onMobileClose={() => {}}
+            />
+            <main
+              ref={mainRef}
+              className="relative flex-1 overflow-hidden md:pl-0"
+              style={{ background: "hsl(var(--content-area))" }}
+            >
+              {requiresLogin ? (
+                loginContent
+              ) : (
+                <>
+                  {/* Regular routes via Outlet */}
+                  <div
+                    className={
+                      [
+                        "/history",
+                        "/assets",
+                        "/free-tools/video-enhancer",
+                        "/free-tools/image-enhancer",
+                        "/free-tools/face-enhancer",
+                        "/free-tools/face-swapper",
+                        "/free-tools/background-remover",
+                        "/free-tools/image-eraser",
+                        "/free-tools/segment-anything",
+                        "/free-tools/video-converter",
+                        "/free-tools/audio-converter",
+                        "/free-tools/image-converter",
+                        "/free-tools/media-trimmer",
+                        "/free-tools/media-merger",
+                        "/z-image",
+                        "/workflow",
+                      ].includes(location.pathname)
+                        ? "hidden"
+                        : "h-full overflow-auto"
+                    }
+                  >
+                    <Outlet />
+                  </div>
+                  {/* Persistent History page */}
+                  {visitedPages.has("/history") && (
+                    <div
+                      className={
+                        location.pathname === "/history"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <HistoryPage key={pageKeys["/history"] || 0} />
+                    </div>
+                  )}
+                  {/* Persistent Assets page */}
+                  {visitedPages.has("/assets") && (
+                    <div
+                      className={
+                        location.pathname === "/assets"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <AssetsPage key={pageKeys["/assets"] || 0} />
+                    </div>
+                  )}
+                  {/* Persistent Free Tools pages - mounted once visited, removed from visitedPages forces unmount */}
+                  {visitedPages.has("/free-tools/video-enhancer") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/video-enhancer"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <VideoEnhancerPage
+                        key={pageKeys["/free-tools/video-enhancer"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/image-enhancer") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/image-enhancer"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <ImageEnhancerPage
+                        key={pageKeys["/free-tools/image-enhancer"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/face-enhancer") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/face-enhancer"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <FaceEnhancerPage
+                        key={pageKeys["/free-tools/face-enhancer"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/face-swapper") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/face-swapper"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <FaceSwapperPage
+                        key={pageKeys["/free-tools/face-swapper"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/background-remover") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/background-remover"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <BackgroundRemoverPage
+                        key={pageKeys["/free-tools/background-remover"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/image-eraser") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/image-eraser"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <ImageEraserPage
+                        key={pageKeys["/free-tools/image-eraser"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/segment-anything") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/segment-anything"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <SegmentAnythingPage
+                        key={pageKeys["/free-tools/segment-anything"] || 0}
+                      />
+                    </div>
+                  )}
+                  {/* Persistent Z-Image page - mounted once visited, then persist via CSS show/hide */}
+                  {visitedPages.has("/z-image") && (
+                    <div
+                      className={
+                        location.pathname === "/z-image"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <ZImagePage key={pageKeys["/z-image"] || 0} />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/video-converter") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/video-converter"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <VideoConverterPage
+                        key={pageKeys["/free-tools/video-converter"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/audio-converter") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/audio-converter"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <AudioConverterPage
+                        key={pageKeys["/free-tools/audio-converter"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/image-converter") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/image-converter"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <ImageConverterPage
+                        key={pageKeys["/free-tools/image-converter"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/media-trimmer") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/media-trimmer"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <MediaTrimmerPage
+                        key={pageKeys["/free-tools/media-trimmer"] || 0}
+                      />
+                    </div>
+                  )}
+                  {visitedPages.has("/free-tools/media-merger") && (
+                    <div
+                      className={
+                        location.pathname === "/free-tools/media-merger"
+                          ? "h-full overflow-auto"
+                          : "hidden"
+                      }
+                    >
+                      <MediaMergerPage
+                        key={pageKeys["/free-tools/media-merger"] || 0}
+                      />
+                    </div>
+                  )}
+                  {/* Persistent Workflow page */}
+                  {visitedPages.has("/workflow") && (
+                    <div
+                      className={
+                        location.pathname === "/workflow"
+                          ? "h-full overflow-hidden"
+                          : "hidden"
+                      }
+                    >
+                      <WorkflowPage key={pageKeys["/workflow"] || 0} />
+                    </div>
+                  )}
+                </>
+              )}
+            </main>
+            <Toaster />
+            <UpdateBanner />
+          </div>
         </div>
-      </div>
-    </TooltipProvider>
+      </TooltipProvider>
     </PageResetContext.Provider>
-  )
+  );
 }
diff --git a/src/components/layout/PageResetContext.ts b/src/components/layout/PageResetContext.ts
index 46fc4792..f218ab55 100644
--- a/src/components/layout/PageResetContext.ts
+++ b/src/components/layout/PageResetContext.ts
@@ -1,8 +1,10 @@
-import { createContext } from 'react'
+import { createContext } from "react";
 
 // Context for resetting persistent pages (forces remount by changing key)
 // Extracted to its own file to avoid pulling in Layout's heavy imports (WorkflowPage, etc.)
 // when only the context is needed.
-export const PageResetContext = createContext<{ resetPage: (path: string) => void }>({
-  resetPage: () => {}
-})
+export const PageResetContext = createContext<{
+  resetPage: (path: string) => void;
+}>({
+  resetPage: () => {},
+});
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 37d0eaf1..cc9b09e9 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,17 +1,16 @@
-import { useState, useEffect, useRef } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { cn } from '@/lib/utils'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { useState, useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
+} from "@/components/ui/tooltip";
 import {
   Home,
-  LayoutGrid,
   PlayCircle,
   FolderOpen,
   History,
@@ -22,125 +21,194 @@ import {
   FolderHeart,
   Sparkles,
   GitBranch,
-  Star,
-  X
-} from 'lucide-react'
+  Layers,
+  X,
+} from "lucide-react";
 
 interface NavItem {
-  titleKey: string
-  href: string
-  icon: React.ComponentType<{ className?: string }>
-  matchPrefix?: boolean
+  titleKey: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+  matchPrefix?: boolean;
 }
 
 interface SidebarProps {
-  collapsed: boolean
-  onToggle: () => void
-  lastFreeToolsPage: string | null
-  isMobileOpen?: boolean
-  onMobileClose?: () => void
+  collapsed: boolean;
+  onToggle: () => void;
+  lastFreeToolsPage: string | null;
+  isMobileOpen?: boolean;
+  onMobileClose?: () => void;
 }
 
-export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen, onMobileClose }: SidebarProps) {
-  const { t } = useTranslation()
-  const location = useLocation()
-  const navigate = useNavigate()
+export function Sidebar({
+  collapsed,
+  onToggle,
+  lastFreeToolsPage,
+  isMobileOpen,
+  onMobileClose,
+}: SidebarProps) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigate = useNavigate();
 
   // Suppress tooltips during collapse/expand animation to prevent stale popups
-  const [tooltipReady, setTooltipReady] = useState(true)
-  const prevCollapsed = useRef(collapsed)
+  const [tooltipReady, setTooltipReady] = useState(true);
+  const prevCollapsed = useRef(collapsed);
   useEffect(() => {
     if (prevCollapsed.current !== collapsed) {
-      setTooltipReady(false)
-      const timer = setTimeout(() => setTooltipReady(true), 350)
-      prevCollapsed.current = collapsed
-      return () => clearTimeout(timer)
+      setTooltipReady(false);
+      const timer = setTimeout(() => setTooltipReady(true), 350);
+      prevCollapsed.current = collapsed;
+      return () => clearTimeout(timer);
     }
-  }, [collapsed])
+  }, [collapsed]);
+
+  // Dismiss stale tooltips after Alt+Tab: suppress on blur, re-enable on next mouse move
+  const blurredRef = useRef(false);
+  useEffect(() => {
+    const handleBlur = () => {
+      blurredRef.current = true;
+      setTooltipReady(false);
+    };
+    const handleFocus = () => {
+      if (!blurredRef.current) return;
+      // Keep suppressed — will be re-enabled by mousemove
+      const onMove = () => {
+        blurredRef.current = false;
+        setTooltipReady(true);
+        window.removeEventListener("mousemove", onMove);
+      };
+      window.addEventListener("mousemove", onMove, { once: true });
+    };
+    window.addEventListener("blur", handleBlur);
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, []);
 
   const createItems: NavItem[] = [
     {
-      titleKey: 'nav.home',
-      href: '/',
-      icon: Home
-    },
-    {
-      titleKey: 'nav.featuredModels',
-      href: '/featured-models',
-      icon: Star
+      titleKey: "nav.home",
+      href: "/",
+      icon: Home,
     },
     {
-      titleKey: 'nav.models',
-      href: '/models',
-      icon: LayoutGrid
+      titleKey: "nav.models",
+      href: "/models",
+      icon: Layers,
     },
     {
-      titleKey: 'nav.playground',
-      href: '/playground',
+      titleKey: "nav.playground",
+      href: "/playground",
       icon: PlayCircle,
-      matchPrefix: true
+      matchPrefix: true,
     },
-  ]
+  ];
 
   const manageItems: NavItem[] = [
     {
-      titleKey: 'nav.templates',
-      href: '/templates',
-      icon: FolderOpen
+      titleKey: "nav.templates",
+      href: "/templates",
+      icon: FolderOpen,
     },
     {
-      titleKey: 'nav.history',
-      href: '/history',
-      icon: History
+      titleKey: "nav.history",
+      href: "/history",
+      icon: History,
     },
     {
-      titleKey: 'nav.assets',
-      href: '/assets',
-      icon: FolderHeart
-    }
-  ]
+      titleKey: "nav.assets",
+      href: "/assets",
+      icon: FolderHeart,
+    },
+  ];
 
   const toolsItems: NavItem[] = [
     {
-      titleKey: 'nav.workflow',
-      href: '/workflow',
+      titleKey: "nav.workflow",
+      href: "/workflow",
       icon: GitBranch,
-      matchPrefix: true
+      matchPrefix: true,
     },
     {
-      titleKey: 'nav.freeTools',
-      href: '/free-tools',
+      titleKey: "nav.freeTools",
+      href: "/free-tools",
       icon: Sparkles,
-      matchPrefix: true
+      matchPrefix: true,
     },
     {
-      titleKey: 'nav.zImage',
-      href: '/z-image',
-      icon: Zap
-    }
-  ]
+      titleKey: "nav.zImage",
+      href: "/z-image",
+      icon: Zap,
+    },
+  ];
 
   // Check if a nav item is active
   const isActive = (item: NavItem) => {
     if (item.matchPrefix) {
-      return location.pathname === item.href || location.pathname.startsWith(item.href + '/')
+      return (
+        location.pathname === item.href ||
+        location.pathname.startsWith(item.href + "/")
+      );
     }
-    return location.pathname === item.href
-  }
+    return location.pathname === item.href;
+  };
 
   const navGroups = [
-    { key: 'create', label: 'Create', items: createItems },
-    { key: 'manage', label: 'Manage', items: manageItems },
-    { key: 'tools', label: 'Tools', items: toolsItems },
-  ]
+    { key: "create", label: "Create", items: createItems },
+    { key: "manage", label: "Manage", items: manageItems },
+    { key: "tools", label: "Tools", items: toolsItems },
+  ];
 
   const bottomNavItems = [
     {
-      titleKey: 'nav.settings',
-      href: '/settings',
-      icon: Settings
-    }
-  ]
+      titleKey: "nav.settings",
+      href: "/settings",
+      icon: Settings,
+    },
+  ];
+
+  // Sliding active-indicator for main nav
+  const navRef = useRef<HTMLElement>(null);
+  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
+    opacity: 0,
+  });
+  const hasPositioned = useRef(false);
+
+  useEffect(() => {
+    const measure = () => {
+      const nav = navRef.current;
+      if (!nav) return;
+      const activeBtn = nav.querySelector(
+        "[data-nav-active]",
+      ) as HTMLElement | null;
+      if (!activeBtn) {
+        setIndicatorStyle((s) => ({ ...s, opacity: 0 }));
+        return;
+      }
+      const nr = nav.getBoundingClientRect();
+      const br = activeBtn.getBoundingClientRect();
+      setIndicatorStyle({
+        top: br.top - nr.top,
+        left: br.left - nr.left,
+        width: br.width,
+        height: br.height,
+        opacity: 1,
+      });
+      hasPositioned.current = true;
+    };
+
+    requestAnimationFrame(measure);
+    // Re-measure after sidebar collapse/expand transition completes
+    const timer = setTimeout(measure, 350);
+    window.addEventListener("resize", measure);
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("resize", measure);
+    };
+  }, [location.pathname, collapsed, isMobileOpen]);
 
   return (
     <div
@@ -148,7 +216,7 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
         "flex h-full flex-col bg-background/95 backdrop-blur transition-all duration-300 shrink-0 electron-drag",
         collapsed ? "w-12" : "w-48",
         // Mobile overlay when hamburger opens
-        isMobileOpen && "!fixed inset-y-0 left-0 z-50 w-72 shadow-2xl"
+        isMobileOpen && "!fixed inset-y-0 left-0 z-50 w-72 shadow-2xl",
       )}
     >
       {/* Mobile close button */}
@@ -164,9 +232,24 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
 
       {/* Navigation */}
       <ScrollArea className="flex-1 px-1.5 py-2">
-        <nav className="flex flex-col gap-5 px-0.5 electron-no-drag">
+        <nav
+          ref={navRef}
+          className="relative flex flex-col gap-5 px-0.5 electron-no-drag"
+        >
+          {/* Sliding active indicator */}
+          <div
+            className={cn(
+              "absolute rounded-lg bg-primary shadow-sm pointer-events-none",
+              hasPositioned.current &&
+                "transition-[top,left,width,height,opacity] duration-300 ease-out",
+            )}
+            style={indicatorStyle}
+          />
           {navGroups.map((group) => (
-            <div key={group.key} className={collapsed && !isMobileOpen ? 'contents' : 'space-y-5'}>
+            <div
+              key={group.key}
+              className={collapsed && !isMobileOpen ? "contents" : "space-y-5"}
+            >
               {(!collapsed || isMobileOpen) && (
                 <div className="px-2 pb-0.5 pt-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/80">
                   {group.label}
@@ -174,38 +257,53 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
               )}
 
               {group.items.map((item) => {
-                const active = isActive(item)
-                const showTooltip = collapsed && !isMobileOpen && tooltipReady
-                const isNewFeature = item.href === '/workflow'
+                const active = isActive(item);
+                const showTooltip = collapsed && !isMobileOpen && tooltipReady;
+                const isNewFeature = item.href === "/workflow";
                 return (
-                  <Tooltip key={item.href} delayDuration={0} open={showTooltip ? undefined : false}>
+                  <Tooltip
+                    key={item.href}
+                    delayDuration={0}
+                    open={showTooltip ? undefined : false}
+                  >
                     <TooltipTrigger asChild>
                       <button
+                        data-nav-active={active || undefined}
                         onClick={() => {
-                          if (item.matchPrefix && location.pathname.startsWith(item.href + '/')) {
-                            return
+                          if (
+                            item.matchPrefix &&
+                            location.pathname.startsWith(item.href + "/")
+                          ) {
+                            return;
                           }
-                          if (item.href === '/free-tools' && lastFreeToolsPage) {
-                            navigate(lastFreeToolsPage)
-                            return
+                          if (
+                            item.href === "/free-tools" &&
+                            lastFreeToolsPage
+                          ) {
+                            navigate(lastFreeToolsPage);
+                            return;
                           }
-                          navigate(item.href)
+                          navigate(item.href);
                         }}
                         className={cn(
-                          buttonVariants({ variant: 'ghost', size: 'sm' }),
-                          'h-8 w-full rounded-lg text-xs transition-all relative overflow-visible',
-                          collapsed && !isMobileOpen ? 'justify-center px-0' : 'justify-start gap-2.5 px-2.5',
+                          buttonVariants({ variant: "ghost", size: "sm" }),
+                          "h-8 w-full rounded-lg text-xs transition-colors duration-200 relative overflow-visible",
+                          collapsed && !isMobileOpen
+                            ? "justify-center px-0"
+                            : "justify-start gap-2.5 px-2.5",
                           active
-                            ? 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/95 hover:text-primary-foreground'
-                            : 'text-muted-foreground hover:bg-muted hover:text-foreground',
-                          isNewFeature && !active && 'ring-2 ring-blue-500/20 hover:ring-blue-500/30'
+                            ? "!bg-transparent text-primary-foreground hover:!bg-transparent hover:text-primary-foreground"
+                            : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                          isNewFeature &&
+                            !active &&
+                            "ring-2 ring-blue-500/20 hover:ring-blue-500/30",
                         )}
                       >
                         {/* Glow effect for new feature */}
                         {isNewFeature && !active && (
                           <span className="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-pink-500/10 animate-pulse" />
                         )}
-                        
+
                         <item.icon className="h-5 w-5 shrink-0 relative z-10" />
                         {(!collapsed || isMobileOpen) && (
                           <>
@@ -213,23 +311,29 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
                               {t(item.titleKey)}
                             </span>
                             {isNewFeature && (
-                              <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-sm ml-auto relative z-10">
+                              <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-sm ml-auto relative z-10 animate-in fade-in zoom-in-75 duration-500">
                                 NEW
                               </span>
                             )}
                           </>
                         )}
                         {/* Blue dot for collapsed state — only when not active */}
-                        {isNewFeature && !active && (collapsed && !isMobileOpen) && (
-                          <span className="absolute top-1 right-1 flex h-2 w-2 z-10">
-                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
-                            <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
-                          </span>
-                        )}
+                        {isNewFeature &&
+                          !active &&
+                          collapsed &&
+                          !isMobileOpen && (
+                            <span className="absolute top-1 right-1 flex h-2 w-2 z-10 animate-in fade-in zoom-in-50 duration-500">
+                              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
+                              <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
+                            </span>
+                          )}
                       </button>
                     </TooltipTrigger>
                     {showTooltip && (
-                      <TooltipContent side="right" className="flex items-center gap-2">
+                      <TooltipContent
+                        side="right"
+                        className="flex items-center gap-2"
+                      >
                         <span>{t(item.titleKey)}</span>
                         {isNewFeature && (
                           <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-gradient-to-r from-blue-500 to-purple-500 text-white">
@@ -239,7 +343,7 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
                       </TooltipContent>
                     )}
                   </Tooltip>
-                )
+                );
               })}
             </div>
           ))}
@@ -250,24 +354,32 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
       <div className="mt-auto p-1.5 electron-no-drag">
         <nav className="flex flex-col gap-1">
           {bottomNavItems.map((item) => {
-            const active = location.pathname === item.href
-            const showTooltip = collapsed && !isMobileOpen && tooltipReady
+            const active = location.pathname === item.href;
+            const showTooltip = collapsed && !isMobileOpen && tooltipReady;
             return (
-              <Tooltip key={item.href} delayDuration={0} open={showTooltip ? undefined : false}>
+              <Tooltip
+                key={item.href}
+                delayDuration={0}
+                open={showTooltip ? undefined : false}
+              >
                 <TooltipTrigger asChild>
                   <button
                     onClick={() => navigate(item.href)}
                     className={cn(
-                      buttonVariants({ variant: 'ghost', size: 'sm' }),
-                      'h-8 w-full rounded-lg transition-all',
-                      collapsed && !isMobileOpen ? 'justify-center px-0' : 'justify-start gap-2.5 px-2.5',
+                      buttonVariants({ variant: "ghost", size: "sm" }),
+                      "h-8 w-full rounded-lg transition-all",
+                      collapsed && !isMobileOpen
+                        ? "justify-center px-0"
+                        : "justify-start gap-2.5 px-2.5",
                       active
-                        ? 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/95 hover:text-primary-foreground'
-                        : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                        ? "bg-primary text-primary-foreground shadow-sm hover:bg-primary/95 hover:text-primary-foreground"
+                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                     )}
                   >
                     <item.icon className="h-5 w-5 shrink-0" />
-                    {(!collapsed || isMobileOpen) && <span>{t(item.titleKey)}</span>}
+                    {(!collapsed || isMobileOpen) && (
+                      <span>{t(item.titleKey)}</span>
+                    )}
                   </button>
                 </TooltipTrigger>
                 {showTooltip && (
@@ -276,13 +388,16 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
                   </TooltipContent>
                 )}
               </Tooltip>
-            )
+            );
           })}
         </nav>
 
         {/* Collapse/expand: bottom button toggles; state also syncs to window width on resize */}
         {!isMobileOpen && (
-          <Tooltip delayDuration={0} open={collapsed && tooltipReady ? undefined : false}>
+          <Tooltip
+            delayDuration={0}
+            open={collapsed && tooltipReady ? undefined : false}
+          >
             <TooltipTrigger asChild>
               <Button
                 variant="ghost"
@@ -290,23 +405,30 @@ export function Sidebar({ collapsed, onToggle, lastFreeToolsPage, isMobileOpen,
                 onClick={onToggle}
                 className={cn(
                   "mt-3 h-8 w-full rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground",
-                  collapsed ? "justify-center px-0" : "justify-start gap-2.5 px-2.5"
+                  collapsed
+                    ? "justify-center px-0"
+                    : "justify-start gap-2.5 px-2.5",
                 )}
               >
                 {collapsed ? (
                   <PanelLeft className="h-5 w-5" />
                 ) : (
                   <>
-                    <PanelLeftClose className="h-5 w-5" style={{ flexShrink: 0 }} />
-                    <span>{t('nav.collapse')}</span>
+                    <PanelLeftClose
+                      className="h-5 w-5"
+                      style={{ flexShrink: 0 }}
+                    />
+                    <span>{t("nav.collapse")}</span>
                   </>
                 )}
               </Button>
             </TooltipTrigger>
-            <TooltipContent side="right">{t('nav.expand', 'Expand')}</TooltipContent>
+            <TooltipContent side="right">
+              {t("nav.expand", "Expand")}
+            </TooltipContent>
           </Tooltip>
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/layout/UpdateBanner.tsx b/src/components/layout/UpdateBanner.tsx
index 16be1b8b..93b619e5 100644
--- a/src/components/layout/UpdateBanner.tsx
+++ b/src/components/layout/UpdateBanner.tsx
@@ -1,75 +1,77 @@
-import { useState, useEffect, useCallback, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { X, RotateCcw } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { X, RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
-const AUTO_DISMISS_MS = 30_000
+const AUTO_DISMISS_MS = 30_000;
 
 export function UpdateBanner() {
-  const { t } = useTranslation()
-  const [downloadedVersion, setDownloadedVersion] = useState<string | null>(null)
-  const [dismissed, setDismissed] = useState(false)
-  const dismissedVersionRef = useRef<string | null>(null)
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const { t } = useTranslation();
+  const [downloadedVersion, setDownloadedVersion] = useState<string | null>(
+    null,
+  );
+  const [dismissed, setDismissed] = useState(false);
+  const dismissedVersionRef = useRef<string | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (!window.electronAPI?.onUpdateStatus) return
+    if (!window.electronAPI?.onUpdateStatus) return;
 
     const unsubscribe = window.electronAPI.onUpdateStatus((status) => {
-      if (status.status === 'downloaded' && status.version) {
+      if (status.status === "downloaded" && status.version) {
         // Don't re-show if user already dismissed this version
-        if (dismissedVersionRef.current === status.version) return
-        setDownloadedVersion(status.version)
-        setDismissed(false)
+        if (dismissedVersionRef.current === status.version) return;
+        setDownloadedVersion(status.version);
+        setDismissed(false);
       }
-    })
+    });
 
-    return unsubscribe
-  }, [])
+    return unsubscribe;
+  }, []);
 
   // Auto-dismiss timer
   useEffect(() => {
-    if (!downloadedVersion || dismissed) return
+    if (!downloadedVersion || dismissed) return;
 
     timerRef.current = setTimeout(() => {
-      setDismissed(true)
-    }, AUTO_DISMISS_MS)
+      setDismissed(true);
+    }, AUTO_DISMISS_MS);
 
     return () => {
-      if (timerRef.current) clearTimeout(timerRef.current)
-    }
-  }, [downloadedVersion, dismissed])
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [downloadedVersion, dismissed]);
 
   const handleDismiss = useCallback(() => {
     if (downloadedVersion) {
-      dismissedVersionRef.current = downloadedVersion
+      dismissedVersionRef.current = downloadedVersion;
     }
-    setDismissed(true)
-  }, [downloadedVersion])
+    setDismissed(true);
+  }, [downloadedVersion]);
 
   const handleInstall = useCallback(() => {
     if (window.electronAPI?.installUpdate) {
-      window.electronAPI.installUpdate()
+      window.electronAPI.installUpdate();
     }
-  }, [])
+  }, []);
 
-  const visible = !!downloadedVersion && !dismissed
+  const visible = !!downloadedVersion && !dismissed;
 
   return (
     <div
       className={cn(
-        'fixed top-0 left-0 right-0 z-[100]',
-        'flex items-center justify-center gap-3 px-4 py-2',
-        'bg-primary text-primary-foreground text-sm',
-        'transition-all duration-500 ease-in-out',
+        "fixed top-0 left-0 right-0 z-[100]",
+        "flex items-center justify-center gap-3 px-4 py-2",
+        "bg-primary text-primary-foreground text-sm",
+        "transition-all duration-500 ease-in-out",
         visible
-          ? 'translate-y-0 opacity-100'
-          : '-translate-y-full opacity-0 pointer-events-none'
+          ? "translate-y-0 opacity-100"
+          : "-translate-y-full opacity-0 pointer-events-none",
       )}
     >
       <span>
-        {t('settings.updates.downloaded', { version: downloadedVersion })}
+        {t("settings.updates.downloaded", { version: downloadedVersion })}
       </span>
       <Button
         size="sm"
@@ -78,7 +80,7 @@ export function UpdateBanner() {
         onClick={handleInstall}
       >
         <RotateCcw className="h-3.5 w-3.5" />
-        {t('settings.updates.restartInstall')}
+        {t("settings.updates.restartInstall")}
       </Button>
       <button
         onClick={handleDismiss}
@@ -87,5 +89,5 @@ export function UpdateBanner() {
         <X className="h-4 w-4" />
       </button>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/AssetsPanel.tsx b/src/components/playground/AssetsPanel.tsx
new file mode 100644
index 00000000..b4fcc6c8
--- /dev/null
+++ b/src/components/playground/AssetsPanel.tsx
@@ -0,0 +1,133 @@
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useAssetsStore } from "@/stores/assetsStore";
+import type { AssetMetadata, AssetType, AssetsFilter } from "@/types/asset";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Search, Image, Video, Music, File, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const TYPE_FILTERS = ["all", "image", "video", "audio"] as const;
+
+export function AssetsPanel() {
+  const { t } = useTranslation();
+  const { assets, isLoaded, loadAssets, getFilteredAssets } = useAssetsStore();
+  const [search, setSearch] = useState("");
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+
+  useEffect(() => {
+    if (!isLoaded) loadAssets();
+  }, [isLoaded, loadAssets]);
+
+  const filteredAssets = useMemo(() => {
+    const filter: AssetsFilter = {};
+    if (search) filter.search = search;
+    if (typeFilter !== "all") filter.types = [typeFilter as AssetType];
+    return getFilteredAssets(filter);
+  }, [getFilteredAssets, search, typeFilter, assets]);
+
+  const getAssetUrl = useCallback((asset: AssetMetadata) => {
+    if (asset.filePath) return `local-file://${asset.filePath}`;
+    return asset.originalUrl || "";
+  }, []);
+
+  const getTypeIcon = (type: AssetType) => {
+    switch (type) {
+      case "image":
+        return <Image className="h-4 w-4" />;
+      case "video":
+        return <Video className="h-4 w-4" />;
+      case "audio":
+        return <Music className="h-4 w-4" />;
+      default:
+        return <File className="h-4 w-4" />;
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Search */}
+      <div className="px-4 pt-4 pb-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t("assets.searchPlaceholder", "Search assets...")}
+            className="w-full h-10 pl-9 pr-8 rounded-lg border border-input bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50"
+          />
+          {search && (
+            <button
+              onClick={() => setSearch("")}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Type filter */}
+      <div className="px-4 pb-3 flex gap-2">
+        {TYPE_FILTERS.map((f) => (
+          <button
+            key={f}
+            onClick={() => setTypeFilter(f)}
+            className={cn(
+              "px-3 py-1 rounded-full text-xs font-medium transition-colors capitalize",
+              typeFilter === f
+                ? "bg-primary text-primary-foreground"
+                : "bg-muted text-muted-foreground hover:text-foreground",
+            )}
+          >
+            {f === "all" ? t("playground.explore.all", "All") : f}
+          </button>
+        ))}
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="px-4 pb-4">
+          {filteredAssets.length === 0 ? (
+            <div className="py-12 text-center text-sm text-muted-foreground">
+              {t("assets.noAssets", "No assets yet")}
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-2">
+              {filteredAssets.slice(0, 50).map((asset) => {
+                const url = getAssetUrl(asset);
+                return (
+                  <div
+                    key={asset.id}
+                    className="group relative aspect-square rounded-lg overflow-hidden bg-muted border border-border/50 hover:border-primary/30 transition-all cursor-pointer"
+                  >
+                    {asset.type === "image" ? (
+                      <img
+                        src={url}
+                        alt={asset.fileName}
+                        className="w-full h-full object-cover"
+                        loading="lazy"
+                      />
+                    ) : asset.type === "video" ? (
+                      <div className="w-full h-full flex items-center justify-center bg-muted">
+                        <Video className="h-8 w-8 text-muted-foreground" />
+                      </div>
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center bg-muted">
+                        {getTypeIcon(asset.type)}
+                      </div>
+                    )}
+                    <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <p className="text-[10px] text-white truncate">
+                        {asset.fileName}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
diff --git a/src/components/playground/AudioRecorder.tsx b/src/components/playground/AudioRecorder.tsx
index 403d7d3b..6f498ee6 100644
--- a/src/components/playground/AudioRecorder.tsx
+++ b/src/components/playground/AudioRecorder.tsx
@@ -1,415 +1,442 @@
-import { useState, useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { Mic, Square, X, RotateCcw, Check, Loader2, Play, Pause } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  Mic,
+  Square,
+  X,
+  RotateCcw,
+  Check,
+  Loader2,
+  Play,
+  Pause,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface AudioRecorderProps {
-  onRecord: (blob: Blob) => void
-  onClose: () => void
-  disabled?: boolean
+  onRecord: (blob: Blob) => void;
+  onClose: () => void;
+  disabled?: boolean;
 }
 
-export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProps) {
-  const { t } = useTranslation()
-  const streamRef = useRef<MediaStream | null>(null)
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
-  const chunksRef = useRef<Blob[]>([])
-  const timerRef = useRef<NodeJS.Timeout | null>(null)
-  const audioRef = useRef<HTMLAudioElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const analyserRef = useRef<AnalyserNode | null>(null)
-  const audioContextRef = useRef<AudioContext | null>(null)
-  const animationRef = useRef<number | null>(null)
-
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [isRecording, setIsRecording] = useState(false)
-  const [isMicReady, setIsMicReady] = useState(false)
-  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null)
-  const [recordedUrl, setRecordedUrl] = useState<string | null>(null)
-  const [duration, setDuration] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [audioDuration, setAudioDuration] = useState(0)
+export function AudioRecorder({
+  onRecord,
+  onClose,
+  disabled,
+}: AudioRecorderProps) {
+  const { t } = useTranslation();
+  const streamRef = useRef<MediaStream | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const animationRef = useRef<number | null>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isMicReady, setIsMicReady] = useState(false);
+  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
+  const [recordedUrl, setRecordedUrl] = useState<string | null>(null);
+  const [duration, setDuration] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [audioDuration, setAudioDuration] = useState(0);
 
   // Refs for cleanup
-  const mountedRef = useRef(true)
+  const mountedRef = useRef(true);
 
   // Draw waveform visualization
   const drawWaveform = (analyser: AnalyserNode) => {
-    if (!canvasRef.current || !mountedRef.current) return
+    if (!canvasRef.current || !mountedRef.current) return;
 
-    const canvas = canvasRef.current
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
     // Get computed colors from CSS variables
-    const computedStyle = getComputedStyle(document.documentElement)
-    const mutedColor = computedStyle.getPropertyValue('--muted').trim()
-    const primaryColor = computedStyle.getPropertyValue('--primary').trim()
+    const computedStyle = getComputedStyle(document.documentElement);
+    const mutedColor = computedStyle.getPropertyValue("--muted").trim();
+    const primaryColor = computedStyle.getPropertyValue("--primary").trim();
 
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Uint8Array(bufferLength)
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
 
     const draw = () => {
-      if (!mountedRef.current) return
-      const animId = requestAnimationFrame(draw)
-      animationRef.current = animId
+      if (!mountedRef.current) return;
+      const animId = requestAnimationFrame(draw);
+      animationRef.current = animId;
 
-      analyser.getByteTimeDomainData(dataArray)
+      analyser.getByteTimeDomainData(dataArray);
 
       // Use computed colors or fallback
-      ctx.fillStyle = mutedColor ? `hsl(${mutedColor})` : '#1f1f23'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.fillStyle = mutedColor ? `hsl(${mutedColor})` : "#1f1f23";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-      ctx.lineWidth = 2
-      ctx.strokeStyle = primaryColor ? `hsl(${primaryColor})` : '#3b82f6'
-      ctx.beginPath()
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = primaryColor ? `hsl(${primaryColor})` : "#3b82f6";
+      ctx.beginPath();
 
-      const sliceWidth = canvas.width / bufferLength
-      let x = 0
+      const sliceWidth = canvas.width / bufferLength;
+      let x = 0;
 
       for (let i = 0; i < bufferLength; i++) {
-        const v = dataArray[i] / 128.0
-        const y = (v * canvas.height) / 2
+        const v = dataArray[i] / 128.0;
+        const y = (v * canvas.height) / 2;
 
         if (i === 0) {
-          ctx.moveTo(x, y)
+          ctx.moveTo(x, y);
         } else {
-          ctx.lineTo(x, y)
+          ctx.lineTo(x, y);
         }
 
-        x += sliceWidth
+        x += sliceWidth;
       }
 
-      ctx.lineTo(canvas.width, canvas.height / 2)
-      ctx.stroke()
-    }
+      ctx.lineTo(canvas.width, canvas.height / 2);
+      ctx.stroke();
+    };
 
-    draw()
-  }
+    draw();
+  };
 
   // Request microphone access (called when user clicks record)
   const requestMicrophoneAccess = async () => {
-    if (isMicReady || isLoading) return true // Already ready or loading
+    if (isMicReady || isLoading) return true; // Already ready or loading
 
-    setIsLoading(true)
-    setError(null)
+    setIsLoading(true);
+    setError(null);
 
     try {
       // Check if mediaDevices API is available
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        setError(t('playground.capture.micError'))
-        setIsLoading(false)
-        return false
+        setError(t("playground.capture.micError"));
+        setIsLoading(false);
+        return false;
       }
 
       const stream = await navigator.mediaDevices.getUserMedia({
         audio: true,
-        video: false
-      })
+        video: false,
+      });
 
       if (!mountedRef.current) {
-        stream.getTracks().forEach(track => track.stop())
-        return false
+        stream.getTracks().forEach((track) => track.stop());
+        return false;
       }
 
-      streamRef.current = stream
+      streamRef.current = stream;
 
       // Set up audio analyzer for waveform
-      const audioContext = new AudioContext()
-      audioContextRef.current = audioContext
+      const audioContext = new AudioContext();
+      audioContextRef.current = audioContext;
 
-      if (audioContext.state === 'suspended') {
-        await audioContext.resume()
+      if (audioContext.state === "suspended") {
+        await audioContext.resume();
       }
 
-      const source = audioContext.createMediaStreamSource(stream)
-      const analyser = audioContext.createAnalyser()
-      analyser.fftSize = 2048
-      source.connect(analyser)
-      analyserRef.current = analyser
+      const source = audioContext.createMediaStreamSource(stream);
+      const analyser = audioContext.createAnalyser();
+      analyser.fftSize = 2048;
+      source.connect(analyser);
+      analyserRef.current = analyser;
 
-      setIsLoading(false)
-      setIsMicReady(true)
+      setIsLoading(false);
+      setIsMicReady(true);
 
       // Start waveform after a short delay to ensure canvas is rendered
       setTimeout(() => {
         if (mountedRef.current && analyserRef.current) {
-          drawWaveform(analyserRef.current)
+          drawWaveform(analyserRef.current);
         }
-      }, 100)
+      }, 100);
 
-      return true
+      return true;
     } catch (err) {
-      if (!mountedRef.current) return false
+      if (!mountedRef.current) return false;
 
-      console.error('Microphone error:', err)
+      console.error("Microphone error:", err);
 
       if (err instanceof Error) {
-        if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
-          setError(t('playground.capture.micPermissionDenied'))
-        } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
-          setError(t('playground.capture.noMicFound'))
-        } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
-          setError(t('playground.capture.micInUse'))
-        } else if (err.name === 'OverconstrainedError') {
-          setError(t('playground.capture.noMicFound'))
-        } else if (err.name === 'SecurityError') {
-          setError(t('playground.capture.micPermissionDenied'))
+        if (
+          err.name === "NotAllowedError" ||
+          err.name === "PermissionDeniedError"
+        ) {
+          setError(t("playground.capture.micPermissionDenied"));
+        } else if (
+          err.name === "NotFoundError" ||
+          err.name === "DevicesNotFoundError"
+        ) {
+          setError(t("playground.capture.noMicFound"));
+        } else if (
+          err.name === "NotReadableError" ||
+          err.name === "TrackStartError"
+        ) {
+          setError(t("playground.capture.micInUse"));
+        } else if (err.name === "OverconstrainedError") {
+          setError(t("playground.capture.noMicFound"));
+        } else if (err.name === "SecurityError") {
+          setError(t("playground.capture.micPermissionDenied"));
         } else {
-          setError(t('playground.capture.micError'))
+          setError(t("playground.capture.micError"));
         }
       } else {
-        setError(t('playground.capture.micError'))
+        setError(t("playground.capture.micError"));
       }
-      setIsLoading(false)
-      return false
+      setIsLoading(false);
+      return false;
     }
-  }
+  };
 
   // Cleanup on unmount
   useEffect(() => {
-    mountedRef.current = true
+    mountedRef.current = true;
 
     return () => {
-      mountedRef.current = false
+      mountedRef.current = false;
       if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop())
+        streamRef.current.getTracks().forEach((track) => track.stop());
       }
       if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
+        cancelAnimationFrame(animationRef.current);
       }
       if (audioContextRef.current) {
-        audioContextRef.current.close()
+        audioContextRef.current.close();
       }
-    }
-  }, [])
+    };
+  }, []);
 
   // Cleanup recorded URL on unmount
   useEffect(() => {
     return () => {
       if (recordedUrl) {
-        URL.revokeObjectURL(recordedUrl)
+        URL.revokeObjectURL(recordedUrl);
       }
-    }
-  }, [recordedUrl])
+    };
+  }, [recordedUrl]);
 
   const startRecording = async () => {
     // Request microphone access if not ready
     if (!isMicReady) {
-      const success = await requestMicrophoneAccess()
-      if (!success) return
+      const success = await requestMicrophoneAccess();
+      if (!success) return;
     }
 
-    if (!streamRef.current) return
+    if (!streamRef.current) return;
 
-    chunksRef.current = []
-    setDuration(0)
+    chunksRef.current = [];
+    setDuration(0);
 
     // Determine supported MIME type
     const mimeTypes = [
-      'audio/webm;codecs=opus',
-      'audio/webm',
-      'audio/ogg;codecs=opus',
-      'audio/mp4'
-    ]
+      "audio/webm;codecs=opus",
+      "audio/webm",
+      "audio/ogg;codecs=opus",
+      "audio/mp4",
+    ];
 
-    let mimeType = ''
+    let mimeType = "";
     for (const type of mimeTypes) {
       if (MediaRecorder.isTypeSupported(type)) {
-        mimeType = type
-        break
+        mimeType = type;
+        break;
       }
     }
 
     const mediaRecorder = new MediaRecorder(streamRef.current, {
-      mimeType: mimeType || undefined
-    })
+      mimeType: mimeType || undefined,
+    });
 
     mediaRecorder.ondataavailable = (event) => {
       if (event.data.size > 0) {
-        chunksRef.current.push(event.data)
+        chunksRef.current.push(event.data);
       }
-    }
+    };
 
     mediaRecorder.onstop = () => {
-      const blob = new Blob(chunksRef.current, { type: mimeType || 'audio/webm' })
-      const url = URL.createObjectURL(blob)
-      setRecordedBlob(blob)
-      setRecordedUrl(url)
+      const blob = new Blob(chunksRef.current, {
+        type: mimeType || "audio/webm",
+      });
+      const url = URL.createObjectURL(blob);
+      setRecordedBlob(blob);
+      setRecordedUrl(url);
 
       if (timerRef.current) {
-        clearInterval(timerRef.current)
+        clearInterval(timerRef.current);
       }
       if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
+        cancelAnimationFrame(animationRef.current);
       }
-    }
+    };
 
-    mediaRecorderRef.current = mediaRecorder
-    mediaRecorder.start(100) // Collect data every 100ms for better granularity
-    setIsRecording(true)
+    mediaRecorderRef.current = mediaRecorder;
+    mediaRecorder.start(100); // Collect data every 100ms for better granularity
+    setIsRecording(true);
 
     timerRef.current = setInterval(() => {
-      setDuration(prev => prev + 1)
-    }, 1000)
-  }
+      setDuration((prev) => prev + 1);
+    }, 1000);
+  };
 
   const stopRecording = () => {
-    if (mediaRecorderRef.current && mediaRecorderRef.current.state === 'recording') {
-      mediaRecorderRef.current.stop()
-      setIsRecording(false)
+    if (
+      mediaRecorderRef.current &&
+      mediaRecorderRef.current.state === "recording"
+    ) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
     }
-  }
+  };
 
   const restartWaveform = () => {
-    if (!analyserRef.current || !canvasRef.current) return
+    if (!analyserRef.current || !canvasRef.current) return;
 
-    const analyser = analyserRef.current
-    const canvas = canvasRef.current
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const analyser = analyserRef.current;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
     // Get computed colors from CSS variables
-    const computedStyle = getComputedStyle(document.documentElement)
-    const mutedColor = computedStyle.getPropertyValue('--muted').trim()
-    const primaryColor = computedStyle.getPropertyValue('--primary').trim()
+    const computedStyle = getComputedStyle(document.documentElement);
+    const mutedColor = computedStyle.getPropertyValue("--muted").trim();
+    const primaryColor = computedStyle.getPropertyValue("--primary").trim();
 
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Uint8Array(bufferLength)
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
 
     const draw = () => {
-      animationRef.current = requestAnimationFrame(draw)
-      analyser.getByteTimeDomainData(dataArray)
+      animationRef.current = requestAnimationFrame(draw);
+      analyser.getByteTimeDomainData(dataArray);
 
-      ctx.fillStyle = mutedColor ? `hsl(${mutedColor})` : '#1f1f23'
-      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.fillStyle = mutedColor ? `hsl(${mutedColor})` : "#1f1f23";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-      ctx.lineWidth = 2
-      ctx.strokeStyle = primaryColor ? `hsl(${primaryColor})` : '#3b82f6'
-      ctx.beginPath()
+      ctx.lineWidth = 2;
+      ctx.strokeStyle = primaryColor ? `hsl(${primaryColor})` : "#3b82f6";
+      ctx.beginPath();
 
-      const sliceWidth = canvas.width / bufferLength
-      let x = 0
+      const sliceWidth = canvas.width / bufferLength;
+      let x = 0;
 
       for (let i = 0; i < bufferLength; i++) {
-        const v = dataArray[i] / 128.0
-        const y = (v * canvas.height) / 2
+        const v = dataArray[i] / 128.0;
+        const y = (v * canvas.height) / 2;
 
         if (i === 0) {
-          ctx.moveTo(x, y)
+          ctx.moveTo(x, y);
         } else {
-          ctx.lineTo(x, y)
+          ctx.lineTo(x, y);
         }
 
-        x += sliceWidth
+        x += sliceWidth;
       }
 
-      ctx.lineTo(canvas.width, canvas.height / 2)
-      ctx.stroke()
-    }
+      ctx.lineTo(canvas.width, canvas.height / 2);
+      ctx.stroke();
+    };
 
-    draw()
-  }
+    draw();
+  };
 
   const retake = () => {
     if (recordedUrl) {
-      URL.revokeObjectURL(recordedUrl)
+      URL.revokeObjectURL(recordedUrl);
     }
-    setRecordedBlob(null)
-    setRecordedUrl(null)
-    setDuration(0)
-    setIsPlaying(false)
-    setCurrentTime(0)
-    setAudioDuration(0)
+    setRecordedBlob(null);
+    setRecordedUrl(null);
+    setDuration(0);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setAudioDuration(0);
     // Restart waveform after state update
     setTimeout(() => {
-      restartWaveform()
-    }, 50)
-  }
+      restartWaveform();
+    }, 50);
+  };
 
   const togglePlayback = () => {
-    if (!audioRef.current) return
+    if (!audioRef.current) return;
 
     if (isPlaying) {
-      audioRef.current.pause()
+      audioRef.current.pause();
     } else {
-      audioRef.current.play()
+      audioRef.current.play();
     }
-    setIsPlaying(!isPlaying)
-  }
+    setIsPlaying(!isPlaying);
+  };
 
   const handleTimeUpdate = () => {
     if (audioRef.current) {
-      setCurrentTime(audioRef.current.currentTime)
+      setCurrentTime(audioRef.current.currentTime);
     }
-  }
+  };
 
   const handleLoadedMetadata = () => {
     if (audioRef.current) {
-      const dur = audioRef.current.duration
+      const dur = audioRef.current.duration;
       // WebM files often have Infinity duration, use recorded duration as fallback
       if (isFinite(dur) && dur > 0) {
-        setAudioDuration(dur)
+        setAudioDuration(dur);
       } else {
-        setAudioDuration(duration)
+        setAudioDuration(duration);
       }
     }
-  }
+  };
 
   const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!audioRef.current || !audioDuration) return
+    if (!audioRef.current || !audioDuration) return;
 
-    const rect = e.currentTarget.getBoundingClientRect()
-    const clickX = e.clientX - rect.left
-    const percentage = clickX / rect.width
-    const newTime = percentage * audioDuration
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = clickX / rect.width;
+    const newTime = percentage * audioDuration;
 
-    audioRef.current.currentTime = newTime
-    setCurrentTime(newTime)
-  }
+    audioRef.current.currentTime = newTime;
+    setCurrentTime(newTime);
+  };
 
   const formatTime = (seconds: number) => {
     if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) {
-      return '0:00'
+      return "0:00";
     }
-    const mins = Math.floor(seconds / 60)
-    const secs = Math.floor(seconds % 60)
-    return `${mins}:${secs.toString().padStart(2, '0')}`
-  }
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
 
   const confirmRecording = () => {
     if (recordedBlob) {
-      onRecord(recordedBlob)
+      onRecord(recordedBlob);
     }
-  }
+  };
 
   const handleClose = () => {
     if (streamRef.current) {
-      streamRef.current.getTracks().forEach(track => track.stop())
+      streamRef.current.getTracks().forEach((track) => track.stop());
     }
     if (timerRef.current) {
-      clearInterval(timerRef.current)
+      clearInterval(timerRef.current);
     }
     if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current)
+      cancelAnimationFrame(animationRef.current);
     }
     if (audioContextRef.current) {
-      audioContextRef.current.close()
+      audioContextRef.current.close();
     }
     if (recordedUrl) {
-      URL.revokeObjectURL(recordedUrl)
+      URL.revokeObjectURL(recordedUrl);
     }
-    onClose()
-  }
+    onClose();
+  };
 
   const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    return `${mins}:${secs.toString().padStart(2, '0')}`
-  }
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
 
   return (
     <div className="space-y-3">
@@ -441,7 +468,9 @@ export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProp
                 <div className="flex items-center justify-center h-20 rounded bg-muted">
                   <div className="flex items-center gap-2 text-muted-foreground">
                     <Mic className="h-5 w-5" />
-                    <span className="text-sm">{t('playground.capture.tapToRecord')}</span>
+                    <span className="text-sm">
+                      {t("playground.capture.tapToRecord")}
+                    </span>
                   </div>
                 </div>
               )
@@ -465,32 +494,48 @@ export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProp
                   <div className="absolute inset-0 flex items-center gap-[2px] px-2">
                     {Array.from({ length: 50 }).map((_, i) => {
                       // Deterministic "random" heights based on index
-                      const h = 25 + Math.sin(i * 0.8) * 20 + Math.cos(i * 1.3) * 15 + (i % 3) * 10
+                      const h =
+                        25 +
+                        Math.sin(i * 0.8) * 20 +
+                        Math.cos(i * 1.3) * 15 +
+                        (i % 3) * 10;
                       return (
                         <div
                           key={i}
                           className="flex-1 bg-muted-foreground/20 rounded-sm"
-                          style={{ height: `${Math.min(90, Math.max(15, h))}%` }}
+                          style={{
+                            height: `${Math.min(90, Math.max(15, h))}%`,
+                          }}
                         />
-                      )
+                      );
                     })}
                   </div>
 
                   {/* Progress overlay */}
                   <div
                     className="absolute inset-y-0 left-0 overflow-hidden"
-                    style={{ width: audioDuration ? `${(currentTime / audioDuration) * 100}%` : '0%' }}
+                    style={{
+                      width: audioDuration
+                        ? `${(currentTime / audioDuration) * 100}%`
+                        : "0%",
+                    }}
                   >
                     <div className="absolute inset-0 flex items-center gap-[2px] px-2">
                       {Array.from({ length: 50 }).map((_, i) => {
-                        const h = 25 + Math.sin(i * 0.8) * 20 + Math.cos(i * 1.3) * 15 + (i % 3) * 10
+                        const h =
+                          25 +
+                          Math.sin(i * 0.8) * 20 +
+                          Math.cos(i * 1.3) * 15 +
+                          (i % 3) * 10;
                         return (
                           <div
                             key={i}
                             className="flex-1 bg-primary rounded-sm"
-                            style={{ height: `${Math.min(90, Math.max(15, h))}%` }}
+                            style={{
+                              height: `${Math.min(90, Math.max(15, h))}%`,
+                            }}
                           />
-                        )
+                        );
                       })}
                     </div>
                   </div>
@@ -498,7 +543,9 @@ export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProp
                   {/* Playhead */}
                   <div
                     className="absolute top-1 bottom-1 w-1 bg-primary rounded-full shadow-lg"
-                    style={{ left: `calc(${audioDuration ? (currentTime / audioDuration) * 100 : 0}% - 2px)` }}
+                    style={{
+                      left: `calc(${audioDuration ? (currentTime / audioDuration) * 100 : 0}% - 2px)`,
+                    }}
                   />
                 </div>
 
@@ -533,7 +580,9 @@ export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProp
             {isRecording && (
               <div className="flex items-center justify-center gap-2">
                 <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
-                <span className="text-sm font-mono">{formatDuration(duration)}</span>
+                <span className="text-sm font-mono">
+                  {formatDuration(duration)}
+                </span>
               </div>
             )}
           </div>
@@ -561,9 +610,13 @@ export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProp
               "h-12 w-12 rounded-full transition-colors text-white",
               isRecording
                 ? "bg-red-500 hover:bg-red-600"
-                : "bg-primary hover:bg-primary/90"
+                : "bg-primary hover:bg-primary/90",
             )}
-            title={isRecording ? t('playground.capture.stopRecording') : t('playground.capture.startRecording')}
+            title={
+              isRecording
+                ? t("playground.capture.stopRecording")
+                : t("playground.capture.startRecording")
+            }
           >
             {isRecording ? (
               <Square className="h-5 w-5" />
@@ -573,24 +626,17 @@ export function AudioRecorder({ onRecord, onClose, disabled }: AudioRecorderProp
           </Button>
         ) : (
           <>
-            <Button
-              variant="outline"
-              onClick={retake}
-              disabled={disabled}
-            >
+            <Button variant="outline" onClick={retake} disabled={disabled}>
               <RotateCcw className="h-4 w-4 mr-2" />
-              {t('playground.capture.retake')}
+              {t("playground.capture.retake")}
             </Button>
-            <Button
-              onClick={confirmRecording}
-              disabled={disabled}
-            >
+            <Button onClick={confirmRecording} disabled={disabled}>
               <Check className="h-4 w-4 mr-2" />
-              {t('playground.capture.useAudio')}
+              {t("playground.capture.useAudio")}
             </Button>
           </>
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/BatchControls.tsx b/src/components/playground/BatchControls.tsx
index be40c02c..8ad2003f 100644
--- a/src/components/playground/BatchControls.tsx
+++ b/src/components/playground/BatchControls.tsx
@@ -1,25 +1,24 @@
-import { useTranslation } from 'react-i18next'
-import { usePlaygroundStore } from '@/stores/playgroundStore'
-import { Switch } from '@/components/ui/switch'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Slider } from '@/components/ui/slider'
+import { useTranslation } from "react-i18next";
+import { usePlaygroundStore } from "@/stores/playgroundStore";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Play, Loader2, ChevronDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/dropdown-menu";
+import { Play, Loader2, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface BatchControlsProps {
-  disabled?: boolean
-  isRunning?: boolean
-  isUploading?: boolean
-  onRun: () => void
-  runLabel: string
-  runningLabel: string
-  price?: string
+  disabled?: boolean;
+  isRunning?: boolean;
+  isUploading?: boolean;
+  onRun: () => void;
+  runLabel: string;
+  runningLabel: string;
 }
 
 export function BatchControls({
@@ -29,56 +28,42 @@ export function BatchControls({
   onRun,
   runLabel,
   runningLabel,
-  price
 }: BatchControlsProps) {
-  const { t } = useTranslation()
-  const { getActiveTab, setBatchConfig } = usePlaygroundStore()
-  const activeTab = getActiveTab()
+  const { t } = useTranslation();
+  const { getActiveTab, setBatchConfig } = usePlaygroundStore();
+  const activeTab = getActiveTab();
 
-  if (!activeTab) return null
+  if (!activeTab) return null;
 
-  const { batchConfig } = activeTab
-  const { enabled, repeatCount, randomizeSeed } = batchConfig
+  const { batchConfig } = activeTab;
+  const { enabled, repeatCount, randomizeSeed } = batchConfig;
 
   const handleEnabledChange = (checked: boolean) => {
-    setBatchConfig({ enabled: checked })
-  }
+    setBatchConfig({ enabled: checked });
+  };
 
   const handleCountChange = (value: number[]) => {
-    setBatchConfig({ repeatCount: value[0] })
-  }
+    setBatchConfig({ repeatCount: value[0] });
+  };
 
   const handleRandomizeSeedChange = (checked: boolean) => {
-    setBatchConfig({ randomizeSeed: checked })
-  }
+    setBatchConfig({ randomizeSeed: checked });
+  };
 
-  const displayLabel = enabled && repeatCount > 1
-    ? `${runLabel} (${repeatCount})`
-    : runLabel
-
-  // Calculate display price (multiply by repeatCount if batch enabled)
-  const displayPrice = (() => {
-    if (!price) return null
-    if (!enabled) return price
-    // Parse price string (e.g., "$0.01" -> 0.01)
-    const numericPrice = parseFloat(price.replace(/[^0-9.]/g, ''))
-    if (isNaN(numericPrice)) return price
-    const totalPrice = numericPrice * repeatCount
-    // Format back with same currency symbol
-    const currencySymbol = price.match(/^[^0-9]*/)?.[0] || '$'
-    return `${currencySymbol}${totalPrice.toFixed(2)}`
-  })()
+  const displayLabel =
+    enabled && repeatCount > 1 ? `${runLabel} (${repeatCount})` : runLabel;
 
   return (
-    <div className="flex rounded-xl border border-transparent shadow-sm">
+    <div className="flex rounded-lg border border-transparent shadow-sm">
       {/* Main Run Button */}
       <Button
         className={cn(
-          'flex-1 gradient-bg hover:opacity-90 transition-opacity',
-          'rounded-r-none border-r border-r-white/20 shadow-none'
+          "flex-1 h-9 text-sm bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+          "rounded-r-none border-r border-r-white/20 shadow-none",
         )}
         onClick={onRun}
         disabled={disabled || isRunning || isUploading}
+        title={isUploading ? t("playground.capture.uploading") : undefined}
       >
         {isRunning ? (
           <>
@@ -89,9 +74,9 @@ export function BatchControls({
           <>
             <Play className="mr-2 h-4 w-4" />
             {displayLabel}
-            {displayPrice && (
-              <span className="ml-2 rounded-full bg-white/20 px-2 py-0.5 text-[11px] font-medium">{displayPrice}</span>
-            )}
+            <kbd className="ml-auto text-[10px] font-normal opacity-60 tracking-wide">
+              {navigator.platform?.includes("Mac") ? "⌘" : "Ctrl"}↵
+            </kbd>
           </>
         )}
       </Button>
@@ -101,55 +86,73 @@ export function BatchControls({
         <DropdownMenuTrigger asChild>
           <Button
             className={cn(
-              'gradient-bg hover:opacity-90 transition-opacity',
-              'rounded-l-none px-2 shadow-none'
+              "bg-blue-600 hover:bg-blue-700 text-white transition-colors",
+              "rounded-l-none px-1.5 h-9 shadow-none",
             )}
             disabled={disabled || isRunning || isUploading}
           >
             <ChevronDown className="h-4 w-4" />
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-64 rounded-xl border border-border/80 p-4 shadow-xl">
+        <DropdownMenuContent
+          align="end"
+          className="w-64 rounded-xl border border-border/80 p-4 shadow-xl"
+        >
           <div className="space-y-4">
             {/* Header */}
-            <div className="font-medium text-sm">{t('playground.batch.settings')}</div>
+            <div className="font-medium text-sm">
+              {t("playground.batch.settings")}
+            </div>
 
-            {enabled && (
-              <>
-                {/* Repeat Count */}
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between">
-                    <Label className="text-sm">{t('playground.batch.repeatCount')}</Label>
-                    <span className="text-sm font-medium">{repeatCount}</span>
+            {/* Animated batch settings */}
+            <div
+              className={cn(
+                "grid transition-[grid-template-rows] duration-200 ease-out",
+                enabled ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+              )}
+            >
+              <div className="overflow-hidden">
+                <div className="space-y-4 pt-1">
+                  {/* Repeat Count */}
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label className="text-sm">
+                        {t("playground.batch.repeatCount")}
+                      </Label>
+                      <span className="text-sm font-medium">{repeatCount}</span>
+                    </div>
+                    <Slider
+                      value={[repeatCount]}
+                      onValueChange={handleCountChange}
+                      min={2}
+                      max={16}
+                      step={1}
+                      className="w-full"
+                    />
                   </div>
-                  <Slider
-                    value={[repeatCount]}
-                    onValueChange={handleCountChange}
-                    min={2}
-                    max={16}
-                    step={1}
-                    className="w-full"
-                  />
-                </div>
 
-                {/* Randomize Seed */}
-                <div className="flex items-center justify-between">
-                  <Label htmlFor="randomize-seed" className="text-sm cursor-pointer">
-                    {t('playground.batch.randomizeSeed')}
-                  </Label>
-                  <Switch
-                    id="randomize-seed"
-                    checked={randomizeSeed}
-                    onCheckedChange={handleRandomizeSeedChange}
-                  />
+                  {/* Randomize Seed */}
+                  <div className="flex items-center justify-between">
+                    <Label
+                      htmlFor="randomize-seed"
+                      className="text-sm cursor-pointer"
+                    >
+                      {t("playground.batch.randomizeSeed")}
+                    </Label>
+                    <Switch
+                      id="randomize-seed"
+                      checked={randomizeSeed}
+                      onCheckedChange={handleRandomizeSeedChange}
+                    />
+                  </div>
                 </div>
-              </>
-            )}
+              </div>
+            </div>
 
             {/* Enable Batch - at bottom so position stays fixed */}
             <div className="flex items-center justify-between pt-2 border-t">
               <Label htmlFor="batch-enabled" className="text-sm cursor-pointer">
-                {t('playground.batch.enable')}
+                {t("playground.batch.enable")}
               </Label>
               <Switch
                 id="batch-enabled"
@@ -161,5 +164,5 @@ export function BatchControls({
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/BatchOutputGrid.tsx b/src/components/playground/BatchOutputGrid.tsx
index 40e38453..ed9acc07 100644
--- a/src/components/playground/BatchOutputGrid.tsx
+++ b/src/components/playground/BatchOutputGrid.tsx
@@ -1,86 +1,103 @@
-import { useState, useCallback, useEffect, useRef, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Progress } from '@/components/ui/progress'
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Progress } from "@/components/ui/progress";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from '@/components/ui/dialog'
-import { Download, CheckCircle2, XCircle, ExternalLink, Copy, Check, Loader2, ChevronLeft, ChevronRight } from 'lucide-react'
-import { AudioPlayer } from '@/components/shared/AudioPlayer'
-import { useAssetsStore, detectAssetType, generateDownloadFilename } from '@/stores/assetsStore'
-import { toast } from '@/hooks/useToast'
-import { cn } from '@/lib/utils'
-import type { BatchResult, BatchQueueItem } from '@/types/batch'
+  Download,
+  CheckCircle2,
+  XCircle,
+  ExternalLink,
+  Copy,
+  Check,
+  Loader2,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { AudioPlayer } from "@/components/shared/AudioPlayer";
+import {
+  useAssetsStore,
+  detectAssetType,
+  generateDownloadFilename,
+} from "@/stores/assetsStore";
+import { toast } from "@/hooks/useToast";
+import { cn } from "@/lib/utils";
+import type { BatchResult, BatchQueueItem } from "@/types/batch";
 
 // Check if running in Capacitor native environment
 const isCapacitorNative = () => {
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return !!(window as any).Capacitor?.isNativePlatform?.()
+    return !!(window as any).Capacitor?.isNativePlatform?.();
   } catch {
-    return false
+    return false;
   }
-}
+};
 
 // Mobile download helper using Capacitor
-const mobileDownload = async (url: string, filename: string): Promise<{ success: boolean; error?: string }> => {
+const mobileDownload = async (
+  url: string,
+  filename: string,
+): Promise<{ success: boolean; error?: string }> => {
   try {
     // Dynamic imports for Capacitor modules (vite-ignore to prevent desktop build errors)
-    const { CapacitorHttp } = await import(/* @vite-ignore */ '@capacitor/core')
-    const { Filesystem, Directory } = await import(/* @vite-ignore */ '@capacitor/filesystem')
+    const { CapacitorHttp } = await import(
+      /* @vite-ignore */ "@capacitor/core"
+    );
+    const { Filesystem, Directory } = await import(
+      /* @vite-ignore */ "@capacitor/filesystem"
+    );
 
     // Fetch file using CapacitorHttp (bypasses CORS)
     const response = await CapacitorHttp.get({
       url,
-      responseType: 'blob'
-    })
+      responseType: "blob",
+    });
 
     if (response.status !== 200) {
-      return { success: false, error: `HTTP ${response.status}` }
+      return { success: false, error: `HTTP ${response.status}` };
     }
 
     // Create Downloads directory
-    const directory = 'Downloads'
+    const directory = "Downloads";
     try {
       await Filesystem.mkdir({
         path: directory,
         directory: Directory.Documents,
-        recursive: true
-      })
+        recursive: true,
+      });
     } catch {
       // Directory might already exist
     }
 
     // Save file
-    const filePath = `${directory}/${filename}`
+    const filePath = `${directory}/${filename}`;
     await Filesystem.writeFile({
       path: filePath,
       data: response.data as string,
-      directory: Directory.Documents
-    })
+      directory: Directory.Documents,
+    });
 
-    return { success: true }
+    return { success: true };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-}
+};
 
 interface BatchOutputGridProps {
-  results: BatchResult[]
-  modelId?: string
-  onClear: () => void
-  className?: string
-  isRunning?: boolean
-  totalCount?: number
-  queue?: BatchQueueItem[]
+  results: BatchResult[];
+  modelId?: string;
+  onClear: () => void;
+  className?: string;
+  isRunning?: boolean;
+  totalCount?: number;
+  queue?: BatchQueueItem[];
 }
 
 function isUrl(str: string): boolean {
-  return str.startsWith('http://') || str.startsWith('https://')
+  return str.startsWith("http://") || str.startsWith("https://");
 }
 
 function getUrlExtension(url: string): string | null {
@@ -88,40 +105,49 @@ function getUrlExtension(url: string): string | null {
     // For custom protocols like local-asset://, new URL() misparses the path as hostname.
     // Decode and use regex fallback for these.
     if (/^local-asset:\/\//i.test(url)) {
-      const decoded = decodeURIComponent(url)
-      const match = decoded.match(/\.([a-z0-9]+)(?:\?.*)?$/i)
-      return match ? match[1].toLowerCase() : null
+      const decoded = decodeURIComponent(url);
+      const match = decoded.match(/\.([a-z0-9]+)(?:\?.*)?$/i);
+      return match ? match[1].toLowerCase() : null;
     }
     // Parse URL and get pathname (ignoring query params)
-    const urlObj = new URL(url)
-    const pathname = urlObj.pathname.toLowerCase()
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname.toLowerCase();
     // Get the last segment and extract extension
-    const lastSegment = pathname.split('/').pop() || ''
-    const match = lastSegment.match(/\.([a-z0-9]+)$/)
-    return match ? match[1] : null
+    const lastSegment = pathname.split("/").pop() || "";
+    const match = lastSegment.match(/\.([a-z0-9]+)$/);
+    return match ? match[1] : null;
   } catch {
     // Fallback for invalid URLs
-    const match = url.match(/\.([a-z0-9]+)(?:\?.*)?$/i)
-    return match ? match[1].toLowerCase() : null
+    const match = url.match(/\.([a-z0-9]+)(?:\?.*)?$/i);
+    return match ? match[1].toLowerCase() : null;
   }
 }
 
 function isImageUrl(url: string): boolean {
-  if (!isUrl(url)) return false
-  const ext = getUrlExtension(url)
-  return ext !== null && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'avif'].includes(ext)
+  if (!isUrl(url)) return false;
+  const ext = getUrlExtension(url);
+  return (
+    ext !== null &&
+    ["jpg", "jpeg", "png", "gif", "webp", "bmp", "avif"].includes(ext)
+  );
 }
 
 function isVideoUrl(url: string): boolean {
-  if (!isUrl(url)) return false
-  const ext = getUrlExtension(url)
-  return ext !== null && ['mp4', 'webm', 'mov', 'avi', 'mkv', 'ogv', 'm4v'].includes(ext)
+  if (!isUrl(url)) return false;
+  const ext = getUrlExtension(url);
+  return (
+    ext !== null &&
+    ["mp4", "webm", "mov", "avi", "mkv", "ogv", "m4v"].includes(ext)
+  );
 }
 
 function isAudioUrl(url: string): boolean {
-  if (!isUrl(url)) return false
-  const ext = getUrlExtension(url)
-  return ext !== null && ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma', 'opus'].includes(ext)
+  if (!isUrl(url)) return false;
+  const ext = getUrlExtension(url);
+  return (
+    ext !== null &&
+    ["mp3", "wav", "ogg", "flac", "aac", "m4a", "wma", "opus"].includes(ext)
+  );
 }
 
 export function BatchOutputGrid({
@@ -131,277 +157,364 @@ export function BatchOutputGrid({
   className,
   isRunning,
   totalCount,
-  queue
+  queue,
 }: BatchOutputGridProps) {
-  const { t } = useTranslation()
-  const [selectedResult, setSelectedResult] = useState<BatchResult | null>(null)
-  const [savedIndexes, setSavedIndexes] = useState<Set<number>>(new Set())
-  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
-  const autoSavedIndexesRef = useRef<Set<number>>(new Set())
-  const prevRunningRef = useRef(false)
-
-  const { saveAsset, settings, hasAssetForPrediction } = useAssetsStore()
-
-  const completedResults = results.filter(r => !r.error)
-  const completedCount = completedResults.length
-  const failedCount = results.filter(r => r.error).length
-  const total = totalCount || results.length
-  const progress = total > 0 ? ((completedCount + failedCount) / total) * 100 : 0
+  const { t } = useTranslation();
+  const [selectedResult, setSelectedResult] = useState<BatchResult | null>(
+    null,
+  );
+  const [savedIndexes, setSavedIndexes] = useState<Set<number>>(new Set());
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const autoSavedIndexesRef = useRef<Set<number>>(new Set());
+  const prevRunningRef = useRef(false);
+
+  const { saveAsset, settings, hasAssetForPrediction } = useAssetsStore();
+
+  const completedResults = results.filter((r) => !r.error);
+  const completedCount = completedResults.length;
+  const failedCount = results.filter((r) => r.error).length;
+  const total = totalCount || results.length;
+  const progress =
+    total > 0 ? ((completedCount + failedCount) / total) * 100 : 0;
 
   // Auto-save results silently as they complete (no toast during batch)
   useEffect(() => {
-    if (!settings.autoSaveAssets || !modelId) return
+    if (!settings.autoSaveAssets || !modelId) return;
 
     const saveNewResults = async () => {
       for (const result of results) {
-        if (autoSavedIndexesRef.current.has(result.index)) continue
-        if (result.error || result.outputs.length === 0) continue
-
-        if (result.prediction?.id && hasAssetForPrediction(result.prediction.id)) {
-          autoSavedIndexesRef.current.add(result.index)
-          setSavedIndexes(prev => new Set(prev).add(result.index))
-          continue
+        if (autoSavedIndexesRef.current.has(result.index)) continue;
+        if (result.error || result.outputs.length === 0) continue;
+
+        if (
+          result.prediction?.id &&
+          hasAssetForPrediction(result.prediction.id)
+        ) {
+          autoSavedIndexesRef.current.add(result.index);
+          setSavedIndexes((prev) => new Set(prev).add(result.index));
+          continue;
         }
 
-        autoSavedIndexesRef.current.add(result.index)
+        autoSavedIndexesRef.current.add(result.index);
 
-        for (let outputIndex = 0; outputIndex < result.outputs.length; outputIndex++) {
-          const output = result.outputs[outputIndex]
-          if (typeof output !== 'string') continue
+        for (
+          let outputIndex = 0;
+          outputIndex < result.outputs.length;
+          outputIndex++
+        ) {
+          const output = result.outputs[outputIndex];
+          if (typeof output !== "string") continue;
 
-          const assetType = detectAssetType(output)
-          if (!assetType) continue
+          const assetType = detectAssetType(output);
+          if (!assetType) continue;
 
           try {
             const saveResult = await saveAsset(output, assetType, {
               modelId,
               predictionId: result.prediction?.id,
               originalUrl: output,
-              resultIndex: outputIndex
-            })
+              resultIndex: outputIndex,
+            });
             if (saveResult) {
-              setSavedIndexes(prev => new Set(prev).add(result.index))
+              setSavedIndexes((prev) => new Set(prev).add(result.index));
             }
           } catch (err) {
-            console.error('Failed to auto-save batch asset:', err)
+            console.error("Failed to auto-save batch asset:", err);
           }
         }
       }
-    }
+    };
 
-    saveNewResults()
-  }, [results, modelId, settings.autoSaveAssets, saveAsset, hasAssetForPrediction])
+    saveNewResults();
+  }, [
+    results,
+    modelId,
+    settings.autoSaveAssets,
+    saveAsset,
+    hasAssetForPrediction,
+  ]);
 
   // Show toast only when batch completes (isRunning: true → false)
   useEffect(() => {
-    const wasRunning = prevRunningRef.current
-    prevRunningRef.current = !!isRunning
+    const wasRunning = prevRunningRef.current;
+    prevRunningRef.current = !!isRunning;
 
-    if (!wasRunning || isRunning) return
-    if (!settings.autoSaveAssets) return
-    if (savedIndexes.size === 0) return
+    if (!wasRunning || isRunning) return;
+    if (!settings.autoSaveAssets) return;
+    if (savedIndexes.size === 0) return;
 
     toast({
-      description: t('playground.autoSaved'),
+      title: t("playground.generationComplete", "Generation complete"),
+      description: t("playground.autoSaved"),
       duration: 2000,
-    })
-  }, [isRunning, settings.autoSaveAssets, savedIndexes.size, t])
+    });
+  }, [isRunning, settings.autoSaveAssets, savedIndexes.size, t]);
 
   // Reset auto-saved tracking when results are cleared
   useEffect(() => {
     if (results.length === 0) {
-      autoSavedIndexesRef.current = new Set()
-      setSavedIndexes(new Set())
+      autoSavedIndexesRef.current = new Set();
+      setSavedIndexes(new Set());
     }
-  }, [results.length])
+  }, [results.length]);
 
   // Check if truly running in Electron (not web polyfill)
-  const isElectron = navigator.userAgent.toLowerCase().includes('electron')
+  const isElectron = navigator.userAgent.toLowerCase().includes("electron");
 
-  const handleDownload = async (url: string, predictionId?: string, resultIndex: number = 0) => {
+  const handleDownload = async (
+    url: string,
+    predictionId?: string,
+    resultIndex: number = 0,
+  ) => {
     const filename = generateDownloadFilename({
       modelId,
       url,
       predictionId,
-      resultIndex
-    })
+      resultIndex,
+    });
 
     // Use Electron API if available (desktop)
     if (isElectron && window.electronAPI?.downloadFile) {
-      const result = await window.electronAPI.downloadFile(url, filename)
+      const result = await window.electronAPI.downloadFile(url, filename);
       if (!result.success && !result.canceled) {
-        console.error('Download failed:', result.error)
+        console.error("Download failed:", result.error);
       }
-      return
+      return;
     }
 
     // Use Capacitor if available (mobile native)
     if (isCapacitorNative()) {
-      const result = await mobileDownload(url, filename)
+      const result = await mobileDownload(url, filename);
       if (result.success) {
         toast({
-          title: t('common.success'),
-          description: t('freeTools.downloadSuccess')
-        })
+          title: t("common.success"),
+          description: t("freeTools.downloadSuccess"),
+        });
       } else {
-        console.error('Mobile download failed:', result.error)
+        console.error("Mobile download failed:", result.error);
         toast({
-          title: t('common.error'),
-          description: result.error || 'Download failed',
-          variant: 'destructive'
-        })
+          title: t("common.error"),
+          description: result.error || "Download failed",
+          variant: "destructive",
+        });
       }
-      return
+      return;
     }
 
     // Web mode: fetch as blob and trigger download
     try {
-      const response = await fetch(url)
-      const blob = await response.blob()
-      const blobUrl = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = blobUrl
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      URL.revokeObjectURL(blobUrl)
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = blobUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(blobUrl);
     } catch (err) {
-      console.error('Download failed:', err)
-      window.open(url, '_blank')
+      console.error("Download failed:", err);
+      window.open(url, "_blank");
     }
-  }
+  };
 
   const handleDownloadAll = async () => {
     // Collect all URLs with their metadata
-    const downloads: { url: string; predictionId?: string; index: number }[] = []
+    const downloads: { url: string; predictionId?: string; index: number }[] =
+      [];
     for (const result of results) {
-      if (result.error) continue
+      if (result.error) continue;
       for (let i = 0; i < result.outputs.length; i++) {
-        const output = result.outputs[i]
-        if (typeof output === 'string' && isUrl(output)) {
-          downloads.push({ url: output, predictionId: result.prediction?.id, index: downloads.length })
+        const output = result.outputs[i];
+        if (typeof output === "string" && isUrl(output)) {
+          downloads.push({
+            url: output,
+            predictionId: result.prediction?.id,
+            index: downloads.length,
+          });
         }
       }
     }
 
-    if (downloads.length === 0) return
+    if (downloads.length === 0) return;
 
     toast({
       description: `Downloading ${downloads.length} files...`,
       duration: 2000,
-    })
+    });
 
     // Download all with small delay between each
     for (const { url, predictionId, index } of downloads) {
-      await handleDownload(url, predictionId, index)
+      await handleDownload(url, predictionId, index);
       // Small delay to prevent overwhelming the browser
-      await new Promise(resolve => setTimeout(resolve, 300))
+      await new Promise((resolve) => setTimeout(resolve, 300));
     }
 
     toast({
       description: `Downloaded ${downloads.length} files`,
       duration: 2000,
-    })
-  }
-
+    });
+  };
 
   const handleCopy = async (url: string, index: number) => {
     try {
-      await navigator.clipboard.writeText(url)
-      setCopiedIndex(index)
-      setTimeout(() => setCopiedIndex(null), 2000)
+      await navigator.clipboard.writeText(url);
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 2000);
     } catch (err) {
-      console.error('Copy failed:', err)
+      console.error("Copy failed:", err);
     }
-  }
+  };
 
   // Get successful results for navigation
-  const successfulResults = results.filter(r => !r.error).sort((a, b) => a.index - b.index)
+  const successfulResults = results
+    .filter((r) => !r.error)
+    .sort((a, b) => a.index - b.index);
 
   // Navigate to previous/next result (with loop support)
-  const navigateResult = useCallback((direction: 'prev' | 'next') => {
-    if (!selectedResult || successfulResults.length <= 1) return
-
-    const currentIdx = successfulResults.findIndex(r => r.index === selectedResult.index)
-    if (currentIdx === -1) return
-
-    let newIdx: number
-    if (direction === 'prev') {
-      newIdx = currentIdx === 0 ? successfulResults.length - 1 : currentIdx - 1
-    } else {
-      newIdx = currentIdx === successfulResults.length - 1 ? 0 : currentIdx + 1
-    }
+  const navigateResult = useCallback(
+    (direction: "prev" | "next") => {
+      if (!selectedResult || successfulResults.length <= 1) return;
+
+      const currentIdx = successfulResults.findIndex(
+        (r) => r.index === selectedResult.index,
+      );
+      if (currentIdx === -1) return;
+
+      let newIdx: number;
+      if (direction === "prev") {
+        newIdx =
+          currentIdx === 0 ? successfulResults.length - 1 : currentIdx - 1;
+      } else {
+        newIdx =
+          currentIdx === successfulResults.length - 1 ? 0 : currentIdx + 1;
+      }
 
-    setSelectedResult(successfulResults[newIdx])
-  }, [selectedResult, successfulResults])
+      setSelectedResult(successfulResults[newIdx]);
+    },
+    [selectedResult, successfulResults],
+  );
 
   // Keyboard navigation for detail dialog
   useEffect(() => {
-    if (!selectedResult) return
+    if (!selectedResult) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        navigateResult('prev')
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        navigateResult('next')
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        navigateResult("prev");
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        navigateResult("next");
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [selectedResult, navigateResult])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [selectedResult, navigateResult]);
 
   // Flatten results: each media output gets its own grid card
   const gridItems = useMemo(() => {
     const items: Array<{
-      key: string; batchIndex: number; outputIndex: number; result: BatchResult | null
-      mediaUrl: string | null; mediaType: 'image' | 'video' | 'audio' | null
-      isPending: boolean; hasError: boolean; seed?: unknown; timing?: number
-    }> = []
+      key: string;
+      batchIndex: number;
+      outputIndex: number;
+      result: BatchResult | null;
+      mediaUrl: string | null;
+      mediaType: "image" | "video" | "audio" | null;
+      isPending: boolean;
+      hasError: boolean;
+      seed?: unknown;
+      timing?: number;
+    }> = [];
 
     for (let index = 0; index < total; index++) {
-      const result = results.find(r => r.index === index)
-      const queueItem = queue?.find(q => q.index === index)
-      const seed = result?.input?.seed ?? queueItem?.input?.seed
+      const result = results.find((r) => r.index === index);
+      const queueItem = queue?.find((q) => q.index === index);
+      const seed = result?.input?.seed ?? queueItem?.input?.seed;
 
       if (!result) {
-        items.push({ key: `p-${index}`, batchIndex: index, outputIndex: 0, result: null, mediaUrl: null, mediaType: null, isPending: true, hasError: false, seed })
+        items.push({
+          key: `p-${index}`,
+          batchIndex: index,
+          outputIndex: 0,
+          result: null,
+          mediaUrl: null,
+          mediaType: null,
+          isPending: true,
+          hasError: false,
+          seed,
+        });
       } else if (result.error) {
-        items.push({ key: `e-${index}`, batchIndex: index, outputIndex: 0, result, mediaUrl: null, mediaType: null, isPending: false, hasError: true, seed, timing: result.timing })
+        items.push({
+          key: `e-${index}`,
+          batchIndex: index,
+          outputIndex: 0,
+          result,
+          mediaUrl: null,
+          mediaType: null,
+          isPending: false,
+          hasError: true,
+          seed,
+          timing: result.timing,
+        });
       } else {
-        let mediaCount = 0
+        let mediaCount = 0;
         for (let oi = 0; oi < result.outputs.length; oi++) {
-          const output = result.outputs[oi]
-          if (typeof output === 'string') {
-            let mt: 'image' | 'video' | 'audio' | null = null
-            if (isImageUrl(output)) mt = 'image'
-            else if (isVideoUrl(output)) mt = 'video'
-            else if (isAudioUrl(output)) mt = 'audio'
+          const output = result.outputs[oi];
+          if (typeof output === "string") {
+            let mt: "image" | "video" | "audio" | null = null;
+            if (isImageUrl(output)) mt = "image";
+            else if (isVideoUrl(output)) mt = "video";
+            else if (isAudioUrl(output)) mt = "audio";
             if (mt) {
-              items.push({ key: `r-${index}-${oi}`, batchIndex: index, outputIndex: oi, result, mediaUrl: output, mediaType: mt, isPending: false, hasError: false, seed, timing: result.timing })
-              mediaCount++
+              items.push({
+                key: `r-${index}-${oi}`,
+                batchIndex: index,
+                outputIndex: oi,
+                result,
+                mediaUrl: output,
+                mediaType: mt,
+                isPending: false,
+                hasError: false,
+                seed,
+                timing: result.timing,
+              });
+              mediaCount++;
             }
           }
         }
         if (mediaCount === 0) {
-          items.push({ key: `r-${index}-0`, batchIndex: index, outputIndex: 0, result, mediaUrl: null, mediaType: null, isPending: false, hasError: false, seed, timing: result.timing })
+          items.push({
+            key: `r-${index}-0`,
+            batchIndex: index,
+            outputIndex: 0,
+            result,
+            mediaUrl: null,
+            mediaType: null,
+            isPending: false,
+            hasError: false,
+            seed,
+            timing: result.timing,
+          });
         }
       }
     }
-    return items
-  }, [results, queue, total])
+    return items;
+  }, [results, queue, total]);
 
-  const gridCount = gridItems.length || total
+  const gridCount = gridItems.length || total;
 
   return (
-    <div className={cn('flex flex-col h-full', className)}>
+    <div className={cn("flex flex-col h-full", className)}>
       {/* Header */}
       <div className="mb-3 flex items-center justify-between rounded-xl border border-border/70 bg-background/70 px-3 py-2 backdrop-blur">
         <div className="flex items-center gap-3">
           <h3 className="text-sm font-medium flex items-center gap-2">
             {isRunning && <Loader2 className="h-4 w-4 animate-spin" />}
-            <span className="hidden md:inline">{t('playground.batch.results')}</span> ({completedCount + failedCount}/{total})
+            <span className="hidden md:inline">
+              {t("playground.batch.results")}
+            </span>{" "}
+            ({completedCount + failedCount}/{total})
           </h3>
           <div className="hidden md:flex items-center gap-2 text-xs">
             {completedCount > 0 && (
@@ -430,7 +543,9 @@ export function BatchOutputGrid({
             className="text-xs md:text-sm"
           >
             <Download className="h-3 w-3 md:mr-1" />
-            <span className="hidden md:inline">{t('playground.batch.downloadAll')}</span>
+            <span className="hidden md:inline">
+              {t("playground.batch.downloadAll")}
+            </span>
           </Button>
           <Button
             variant="ghost"
@@ -439,50 +554,76 @@ export function BatchOutputGrid({
             disabled={isRunning}
             className="text-xs md:text-sm"
           >
-            <span className="hidden md:inline">{t('playground.batch.clearResults')}</span>
+            <span className="hidden md:inline">
+              {t("playground.batch.clearResults")}
+            </span>
             <span className="md:hidden">Clear</span>
           </Button>
         </div>
       </div>
       {/* Results Grid - flattened: each media output gets its own card */}
       <ScrollArea className="flex-1">
-        <div className={cn(
-          'grid gap-4 p-1',
-          gridCount <= 2 && 'grid-cols-1 sm:grid-cols-2',
-          gridCount === 3 && 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-          gridCount === 4 && 'grid-cols-2 lg:grid-cols-4',
-          gridCount > 4 && 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
-        )}>
+        <div
+          className={cn(
+            "grid gap-4 p-1",
+            gridCount <= 2 && "grid-cols-1 sm:grid-cols-2",
+            gridCount === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+            gridCount === 4 && "grid-cols-2 lg:grid-cols-4",
+            gridCount > 4 && "grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+          )}
+        >
           {gridItems.map((item, gridIndex) => (
             <div
               key={item.key}
-              onClick={() => item.result && !item.hasError && setSelectedResult(item.result)}
+              onClick={() =>
+                item.result && !item.hasError && setSelectedResult(item.result)
+              }
               className={cn(
-                'relative overflow-hidden rounded-xl border border-border/70 bg-card/80 transition-all',
+                "relative overflow-hidden rounded-xl border border-border/70 bg-card/80 transition-all",
                 item.isPending
-                  ? 'cursor-default'
+                  ? "cursor-default"
                   : item.hasError
-                    ? 'border-destructive/50 opacity-75 cursor-default'
-                    : 'cursor-pointer hover:border-primary/40 hover:shadow-md',
-                item.result && savedIndexes.has(item.result.index) && 'ring-1 ring-green-500/50 shadow-sm'
+                    ? "border-destructive/50 opacity-75 cursor-default"
+                    : "cursor-pointer hover:border-primary/40 hover:shadow-md",
+                item.result &&
+                  savedIndexes.has(item.result.index) &&
+                  "ring-1 ring-green-500/50 shadow-sm",
               )}
             >
               {/* Thumbnail */}
               <div className="aspect-square bg-muted/70 flex items-center justify-center">
                 {item.isPending && isRunning ? (
-                  <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  <div className="w-full h-full animate-pulse bg-gradient-to-r from-muted/50 via-muted to-muted/50 bg-[length:200%_100%] flex items-center justify-center">
+                    <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+                  </div>
                 ) : item.isPending ? (
                   <div className="w-full h-full bg-muted/50" />
                 ) : item.hasError ? (
                   <div className="flex flex-col items-center gap-1 text-destructive p-2">
                     <XCircle className="h-6 w-6" />
-                    <span className="text-xs text-center line-clamp-2">{item.result?.error}</span>
+                    <span className="text-xs text-center line-clamp-2">
+                      {item.result?.error}
+                    </span>
                   </div>
-                ) : item.mediaType === 'image' && item.mediaUrl ? (
-                  <img src={item.mediaUrl} alt={`Result ${gridIndex + 1}`} className="w-full h-full object-cover" loading="lazy" />
-                ) : item.mediaType === 'video' && item.mediaUrl ? (
-                  <video src={item.mediaUrl} className="w-full h-full object-cover" muted playsInline preload="auto" onLoadedData={(e) => { e.currentTarget.currentTime = 0.1 }} />
-                ) : item.mediaType === 'audio' ? (
+                ) : item.mediaType === "image" && item.mediaUrl ? (
+                  <img
+                    src={item.mediaUrl}
+                    alt={`Result ${gridIndex + 1}`}
+                    className="w-full h-full object-cover"
+                    loading="lazy"
+                  />
+                ) : item.mediaType === "video" && item.mediaUrl ? (
+                  <video
+                    src={item.mediaUrl}
+                    className="w-full h-full object-cover"
+                    muted
+                    playsInline
+                    preload="auto"
+                    onLoadedData={(e) => {
+                      e.currentTarget.currentTime = 0.1;
+                    }}
+                  />
+                ) : item.mediaType === "audio" ? (
                   <div className="text-muted-foreground text-xs">Audio</div>
                 ) : (
                   <div className="text-muted-foreground text-xs">Output</div>
@@ -494,12 +635,19 @@ export function BatchOutputGrid({
                 <div className="flex items-center gap-1.5">
                   <span className="text-xs font-medium">#{gridIndex + 1}</span>
                   {item.seed !== undefined && (
-                    <span className="text-[10px] text-muted-foreground font-mono">{String(item.seed)}</span>
+                    <span className="text-[10px] text-muted-foreground font-mono">
+                      {String(item.seed)}
+                    </span>
                   )}
                 </div>
                 <div className="flex items-center gap-1">
                   {item.result && !item.hasError && item.timing && (
-                    <Badge variant="secondary" className="text-[10px] px-1 py-0">{(item.timing / 1000).toFixed(1)}s</Badge>
+                    <Badge
+                      variant="secondary"
+                      className="text-[10px] px-1 py-0"
+                    >
+                      {(item.timing / 1000).toFixed(1)}s
+                    </Badge>
                   )}
                   {item.result && !item.hasError && (
                     <CheckCircle2 className="h-3 w-3 text-green-500" />
@@ -510,7 +658,12 @@ export function BatchOutputGrid({
               {/* Saved indicator */}
               {item.result && savedIndexes.has(item.result.index) && (
                 <div className="absolute top-1 right-1">
-                  <Badge variant="secondary" className="text-[10px] px-1 py-0 bg-green-500/80 text-white">{t('playground.batch.saved')}</Badge>
+                  <Badge
+                    variant="secondary"
+                    className="text-[10px] px-1 py-0 bg-green-500/80 text-white"
+                  >
+                    {t("playground.batch.saved")}
+                  </Badge>
                 </div>
               )}
             </div>
@@ -519,15 +672,25 @@ export function BatchOutputGrid({
       </ScrollArea>
 
       {/* Detail Dialog */}
-      <Dialog open={!!selectedResult} onOpenChange={() => setSelectedResult(null)}>
+      <Dialog
+        open={!!selectedResult}
+        onOpenChange={() => setSelectedResult(null)}
+      >
         <DialogContent className="flex max-h-[90vh] max-w-4xl flex-col overflow-hidden border-border/70 p-0">
           {/* Header */}
           <div className="flex items-center justify-between px-6 py-4 border-b">
             <DialogTitle className="flex items-center gap-2">
-              {t('playground.batch.result')} #{selectedResult?.index !== undefined ? selectedResult.index + 1 : ''}
+              {t("playground.batch.result")} #
+              {selectedResult?.index !== undefined
+                ? selectedResult.index + 1
+                : ""}
               {successfulResults.length > 1 && (
                 <span className="text-sm font-normal text-muted-foreground">
-                  ({successfulResults.findIndex(r => r.index === selectedResult?.index) + 1}/{successfulResults.length})
+                  (
+                  {successfulResults.findIndex(
+                    (r) => r.index === selectedResult?.index,
+                  ) + 1}
+                  /{successfulResults.length})
                 </span>
               )}
             </DialogTitle>
@@ -540,7 +703,7 @@ export function BatchOutputGrid({
                   <Button
                     size="icon"
                     variant="secondary"
-                    onClick={() => navigateResult('prev')}
+                    onClick={() => navigateResult("prev")}
                     className="absolute left-2 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full opacity-80 hover:opacity-100 active:bg-black/60"
                   >
                     <ChevronLeft className="h-5 w-5" />
@@ -548,7 +711,7 @@ export function BatchOutputGrid({
                   <Button
                     size="icon"
                     variant="secondary"
-                    onClick={() => navigateResult('next')}
+                    onClick={() => navigateResult("next")}
                     className="absolute right-2 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full opacity-80 hover:opacity-100 active:bg-black/60"
                   >
                     <ChevronRight className="h-5 w-5" />
@@ -557,11 +720,14 @@ export function BatchOutputGrid({
               )}
               <div className="space-y-4 p-6">
                 {selectedResult.outputs.map((output, outputIndex) => {
-                  const isObject = typeof output === 'object' && output !== null
-                  const outputStr = isObject ? JSON.stringify(output, null, 2) : String(output)
-                  const isImage = !isObject && isImageUrl(outputStr)
-                  const isVideo = !isObject && isVideoUrl(outputStr)
-                  const isAudio = !isObject && isAudioUrl(outputStr)
+                  const isObject =
+                    typeof output === "object" && output !== null;
+                  const outputStr = isObject
+                    ? JSON.stringify(output, null, 2)
+                    : String(output);
+                  const isImage = !isObject && isImageUrl(outputStr);
+                  const isVideo = !isObject && isVideoUrl(outputStr);
+                  const isAudio = !isObject && isAudioUrl(outputStr);
 
                   return (
                     <div key={outputIndex} className="space-y-2">
@@ -583,9 +749,7 @@ export function BatchOutputGrid({
                             className="max-w-full rounded-lg"
                           />
                         )}
-                        {isAudio && (
-                          <AudioPlayer src={outputStr} />
-                        )}
+                        {isAudio && <AudioPlayer src={outputStr} />}
                         {isObject && (
                           <pre className="p-4 bg-muted rounded-lg text-sm overflow-auto max-h-96">
                             {outputStr}
@@ -602,41 +766,56 @@ export function BatchOutputGrid({
                           <Button
                             size="sm"
                             variant="outline"
-                            onClick={() => handleDownload(outputStr, selectedResult.prediction?.id, outputIndex)}
+                            onClick={() =>
+                              handleDownload(
+                                outputStr,
+                                selectedResult.prediction?.id,
+                                outputIndex,
+                              )
+                            }
                           >
                             <Download className="h-4 w-4 mr-2" />
-                            {t('common.download')}
+                            {t("common.download")}
                           </Button>
                           <Button
                             size="sm"
                             variant="outline"
-                            onClick={() => handleCopy(outputStr, selectedResult.index * 100 + outputIndex)}
+                            onClick={() =>
+                              handleCopy(
+                                outputStr,
+                                selectedResult.index * 100 + outputIndex,
+                              )
+                            }
                           >
-                            {copiedIndex === selectedResult.index * 100 + outputIndex ? (
+                            {copiedIndex ===
+                            selectedResult.index * 100 + outputIndex ? (
                               <Check className="h-4 w-4 mr-2" />
                             ) : (
                               <Copy className="h-4 w-4 mr-2" />
                             )}
-                            {copiedIndex === selectedResult.index * 100 + outputIndex ? 'Copied!' : t('common.copy')}
+                            {copiedIndex ===
+                            selectedResult.index * 100 + outputIndex
+                              ? "Copied!"
+                              : t("common.copy")}
                           </Button>
                           <Button
                             size="sm"
                             variant="ghost"
-                            onClick={() => window.open(outputStr, '_blank')}
+                            onClick={() => window.open(outputStr, "_blank")}
                           >
                             <ExternalLink className="h-4 w-4 mr-2" />
-                            {t('common.openInBrowser')}
+                            {t("common.openInBrowser")}
                           </Button>
                         </div>
                       )}
                     </div>
-                  )
+                  );
                 })}
 
                 {/* Input details */}
                 <details className="text-sm">
                   <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
-                    {t('playground.batch.inputDetails')}
+                    {t("playground.batch.inputDetails")}
                   </summary>
                   <pre className="mt-2 p-3 bg-muted rounded-lg text-xs overflow-auto max-h-48">
                     {JSON.stringify(selectedResult.input, null, 2)}
@@ -648,5 +827,5 @@ export function BatchOutputGrid({
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/CameraCapture.tsx b/src/components/playground/CameraCapture.tsx
index 0a9dc260..f7c15255 100644
--- a/src/components/playground/CameraCapture.tsx
+++ b/src/components/playground/CameraCapture.tsx
@@ -1,174 +1,192 @@
-import { useState, useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
+import { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import { X, RotateCcw, Check, Loader2, Camera } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-type AspectRatio = '16:9' | '4:3' | '1:1' | '9:16'
-
-const ASPECT_RATIO_CONFIG: Record<AspectRatio, { width: number; height: number; class: string }> = {
-  '16:9': { width: 1920, height: 1080, class: 'aspect-[16/9]' },
-  '4:3': { width: 1440, height: 1080, class: 'aspect-[4/3]' },
-  '1:1': { width: 1080, height: 1080, class: 'aspect-[1/1]' },
-  '9:16': { width: 1080, height: 1920, class: 'aspect-[9/16]' },
-}
+} from "@/components/ui/select";
+import { X, RotateCcw, Check, Loader2, Camera } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type AspectRatio = "16:9" | "4:3" | "1:1" | "9:16";
+
+const ASPECT_RATIO_CONFIG: Record<
+  AspectRatio,
+  { width: number; height: number; class: string }
+> = {
+  "16:9": { width: 1920, height: 1080, class: "aspect-[16/9]" },
+  "4:3": { width: 1440, height: 1080, class: "aspect-[4/3]" },
+  "1:1": { width: 1080, height: 1080, class: "aspect-[1/1]" },
+  "9:16": { width: 1080, height: 1920, class: "aspect-[9/16]" },
+};
 
 interface CameraCaptureProps {
-  onCapture: (blob: Blob) => void
-  onClose: () => void
-  disabled?: boolean
+  onCapture: (blob: Blob) => void;
+  onClose: () => void;
+  disabled?: boolean;
 }
 
-export function CameraCapture({ onCapture, onClose, disabled }: CameraCaptureProps) {
-  const { t } = useTranslation()
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const streamRef = useRef<MediaStream | null>(null)
-
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [capturedImage, setCapturedImage] = useState<string | null>(null)
-  const [facingMode, setFacingMode] = useState<'user' | 'environment'>('environment')
-  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('16:9')
+export function CameraCapture({
+  onCapture,
+  onClose,
+  disabled,
+}: CameraCaptureProps) {
+  const { t } = useTranslation();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+  const [facingMode, setFacingMode] = useState<"user" | "environment">(
+    "environment",
+  );
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>("16:9");
 
   useEffect(() => {
-    let mounted = true
+    let mounted = true;
 
     const startCamera = async () => {
-      setIsLoading(true)
-      setError(null)
+      setIsLoading(true);
+      setError(null);
 
       // Stop any existing stream
       if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop())
-        streamRef.current = null
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
       }
 
       try {
-        const config = ASPECT_RATIO_CONFIG[aspectRatio]
+        const config = ASPECT_RATIO_CONFIG[aspectRatio];
         const stream = await navigator.mediaDevices.getUserMedia({
           video: {
             facingMode,
             width: { ideal: config.width },
-            height: { ideal: config.height }
+            height: { ideal: config.height },
           },
-          audio: false
-        })
+          audio: false,
+        });
 
         if (!mounted) {
           // Component unmounted while waiting for permission
-          stream.getTracks().forEach(track => track.stop())
-          return
+          stream.getTracks().forEach((track) => track.stop());
+          return;
         }
 
-        streamRef.current = stream
+        streamRef.current = stream;
 
         if (videoRef.current) {
-          videoRef.current.srcObject = stream
+          videoRef.current.srcObject = stream;
           try {
-            await videoRef.current.play()
+            await videoRef.current.play();
           } catch (playErr) {
             // AbortError is expected when component re-renders during play
-            if (playErr instanceof Error && playErr.name === 'AbortError') {
-              return
+            if (playErr instanceof Error && playErr.name === "AbortError") {
+              return;
             }
-            throw playErr
+            throw playErr;
           }
         }
       } catch (err) {
-        if (!mounted) return
+        if (!mounted) return;
 
-        console.error('Camera error:', err)
+        console.error("Camera error:", err);
         if (err instanceof Error) {
-          if (err.name === 'NotAllowedError') {
-            setError(t('playground.capture.cameraPermissionDenied'))
-          } else if (err.name === 'NotFoundError') {
-            setError(t('playground.capture.noCameraFound'))
+          if (err.name === "NotAllowedError") {
+            setError(t("playground.capture.cameraPermissionDenied"));
+          } else if (err.name === "NotFoundError") {
+            setError(t("playground.capture.noCameraFound"));
           } else {
-            setError(t('playground.capture.cameraError'))
+            setError(t("playground.capture.cameraError"));
           }
         } else {
-          setError(t('playground.capture.cameraError'))
+          setError(t("playground.capture.cameraError"));
         }
       } finally {
         if (mounted) {
-          setIsLoading(false)
+          setIsLoading(false);
         }
       }
-    }
+    };
 
-    startCamera()
+    startCamera();
 
     return () => {
-      mounted = false
+      mounted = false;
       if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop())
-        streamRef.current = null
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
       }
-    }
-  }, [facingMode, aspectRatio, t])
+    };
+  }, [facingMode, aspectRatio, t]);
 
   const switchCamera = () => {
-    setFacingMode(prev => prev === 'user' ? 'environment' : 'user')
-  }
+    setFacingMode((prev) => (prev === "user" ? "environment" : "user"));
+  };
 
   const takePhoto = () => {
-    if (!videoRef.current || !canvasRef.current) return
+    if (!videoRef.current || !canvasRef.current) return;
 
-    const video = videoRef.current
-    const canvas = canvasRef.current
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
 
-    canvas.width = video.videoWidth
-    canvas.height = video.videoHeight
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
 
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
     // Flip horizontally if using front camera
-    if (facingMode === 'user') {
-      ctx.translate(canvas.width, 0)
-      ctx.scale(-1, 1)
+    if (facingMode === "user") {
+      ctx.translate(canvas.width, 0);
+      ctx.scale(-1, 1);
     }
 
-    ctx.drawImage(video, 0, 0)
+    ctx.drawImage(video, 0, 0);
 
-    const dataUrl = canvas.toDataURL('image/jpeg', 0.9)
-    setCapturedImage(dataUrl)
-  }
+    const dataUrl = canvas.toDataURL("image/jpeg", 0.9);
+    setCapturedImage(dataUrl);
+  };
 
   const retake = () => {
-    setCapturedImage(null)
-  }
+    setCapturedImage(null);
+  };
 
   const confirmCapture = () => {
-    if (!canvasRef.current) return
+    if (!canvasRef.current) return;
 
-    canvasRef.current.toBlob((blob) => {
-      if (blob) {
-        onCapture(blob)
-      }
-    }, 'image/jpeg', 0.9)
-  }
+    canvasRef.current.toBlob(
+      (blob) => {
+        if (blob) {
+          onCapture(blob);
+        }
+      },
+      "image/jpeg",
+      0.9,
+    );
+  };
 
   const handleClose = () => {
     if (streamRef.current) {
-      streamRef.current.getTracks().forEach(track => track.stop())
+      streamRef.current.getTracks().forEach((track) => track.stop());
     }
-    onClose()
-  }
+    onClose();
+  };
 
-  const aspectConfig = ASPECT_RATIO_CONFIG[aspectRatio]
+  const aspectConfig = ASPECT_RATIO_CONFIG[aspectRatio];
 
   return (
     <div className="space-y-3">
-      <div className={cn("relative rounded-lg overflow-hidden bg-black max-h-80 mx-auto", aspectConfig.class)}>
+      <div
+        className={cn(
+          "relative rounded-lg overflow-hidden bg-black max-h-80 mx-auto",
+          aspectConfig.class,
+        )}
+      >
         {isLoading && (
           <div className="absolute inset-0 flex items-center justify-center bg-muted">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -189,8 +207,8 @@ export function CameraCapture({ onCapture, onClose, disabled }: CameraCapturePro
           muted
           className={cn(
             "w-full h-full object-cover",
-            facingMode === 'user' && "scale-x-[-1]",
-            capturedImage && "hidden"
+            facingMode === "user" && "scale-x-[-1]",
+            capturedImage && "hidden",
           )}
         />
 
@@ -226,7 +244,7 @@ export function CameraCapture({ onCapture, onClose, disabled }: CameraCapturePro
               size="icon"
               onClick={switchCamera}
               disabled={isLoading || !!error || disabled}
-              title={t('playground.capture.switchCamera')}
+              title={t("playground.capture.switchCamera")}
             >
               <RotateCcw className="h-4 w-4" />
             </Button>
@@ -235,7 +253,7 @@ export function CameraCapture({ onCapture, onClose, disabled }: CameraCapturePro
               onClick={takePhoto}
               disabled={isLoading || !!error || disabled}
               className="h-12 w-12 rounded-full bg-primary hover:bg-primary/90 text-white"
-              title={t('playground.capture.takePhoto')}
+              title={t("playground.capture.takePhoto")}
             >
               <Camera className="h-5 w-5" />
             </Button>
@@ -257,24 +275,17 @@ export function CameraCapture({ onCapture, onClose, disabled }: CameraCapturePro
           </>
         ) : (
           <>
-            <Button
-              variant="outline"
-              onClick={retake}
-              disabled={disabled}
-            >
+            <Button variant="outline" onClick={retake} disabled={disabled}>
               <RotateCcw className="h-4 w-4 mr-2" />
-              {t('playground.capture.retake')}
+              {t("playground.capture.retake")}
             </Button>
-            <Button
-              onClick={confirmCapture}
-              disabled={disabled}
-            >
+            <Button onClick={confirmCapture} disabled={disabled}>
               <Check className="h-4 w-4 mr-2" />
-              {t('playground.capture.usePhoto')}
+              {t("playground.capture.usePhoto")}
             </Button>
           </>
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/DynamicForm.tsx b/src/components/playground/DynamicForm.tsx
index 24058872..8e869b27 100644
--- a/src/components/playground/DynamicForm.tsx
+++ b/src/components/playground/DynamicForm.tsx
@@ -1,24 +1,28 @@
-import { useMemo, useEffect, useState, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { Model } from '@/types/model'
-import { schemaToFormFields, getDefaultValues, getSingleImageFromValues, type FormFieldConfig } from '@/lib/schemaToForm'
-import { FormField } from './FormField'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { cn } from '@/lib/utils'
-import { ChevronDown, SlidersHorizontal } from 'lucide-react'
+import { useMemo, useEffect, useState, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import type { Model } from "@/types/model";
+import {
+  schemaToFormFields,
+  getDefaultValues,
+  getSingleImageFromValues,
+  type FormFieldConfig,
+} from "@/lib/schemaToForm";
+import { FormField } from "./FormField";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
 
 interface DynamicFormProps {
-  model: Model
-  values: Record<string, unknown>
-  validationErrors?: Record<string, string>
-  onChange: (key: string, value: unknown) => void
-  onSetDefaults: (defaults: Record<string, unknown>) => void
-  onFieldsChange?: (fields: FormFieldConfig[]) => void
-  disabled?: boolean
-  onUploadingChange?: (isUploading: boolean) => void
-  collapsible?: boolean
+  model: Model;
+  values: Record<string, unknown>;
+  validationErrors?: Record<string, string>;
+  onChange: (key: string, value: unknown) => void;
+  onSetDefaults: (defaults: Record<string, unknown>) => void;
+  onFieldsChange?: (fields: FormFieldConfig[]) => void;
+  disabled?: boolean;
+  onUploadingChange?: (isUploading: boolean) => void;
+  collapsible?: boolean;
   /** When false, render form content only (no ScrollArea); parent is the scroll container. Used in Playground for mobile. */
-  scrollable?: boolean
+  scrollable?: boolean;
 }
 
 export function DynamicForm({
@@ -31,109 +35,103 @@ export function DynamicForm({
   disabled = false,
   onUploadingChange,
   collapsible = false,
-  scrollable = true
+  scrollable = true,
 }: DynamicFormProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   // Track which hidden fields are enabled
-  const [enabledHiddenFields, setEnabledHiddenFields] = useState<Set<string>>(new Set())
-
-  // Track if advanced settings section is expanded
-  const [showAdvanced, setShowAdvanced] = useState(false)
+  const [enabledHiddenFields, setEnabledHiddenFields] = useState<Set<string>>(
+    new Set(),
+  );
 
   // Track if we've initialized defaults for this model instance
-  const initializedRef = useRef<string | null>(null)
+  const initializedRef = useRef<string | null>(null);
 
   // Extract schema from model
   const fields = useMemo<FormFieldConfig[]>(() => {
     // The API returns schema in api_schema.api_schemas[0].request_schema
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const apiSchemas = (model.api_schema as any)?.api_schemas as Array<{
-      type: string
-      request_schema?: {
-        properties?: Record<string, unknown>
-        required?: string[]
-        'x-order-properties'?: string[]
-      }
-    }> | undefined
+    const apiSchemas = (model.api_schema as any)?.api_schemas as
+      | Array<{
+          type: string;
+          request_schema?: {
+            properties?: Record<string, unknown>;
+            required?: string[];
+            "x-order-properties"?: string[];
+          };
+        }>
+      | undefined;
 
-    const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
+    const requestSchema = apiSchemas?.find(
+      (s) => s.type === "model_run",
+    )?.request_schema;
     if (!requestSchema?.properties) {
-      return []
+      return [];
     }
     return schemaToFormFields(
-      requestSchema.properties as Record<string, import('@/types/model').SchemaProperty>,
+      requestSchema.properties as Record<
+        string,
+        import("@/types/model").SchemaProperty
+      >,
       requestSchema.required || [],
-      requestSchema['x-order-properties']
-    )
-  }, [model])
+      requestSchema["x-order-properties"],
+    );
+  }, [model]);
 
-  // Split fields into primary (always visible) and advanced (collapsible)
-  // Primary: required fields
-  // Advanced: hidden fields + optional fields
-  const { primaryFields, advancedFields } = useMemo(() => {
-    const primary: FormFieldConfig[] = []
-    const advanced: FormFieldConfig[] = []
-    for (const field of fields) {
-      if (field.hidden) {
-        advanced.push(field)
-      } else if (field.required) {
-        primary.push(field)
-      } else {
-        advanced.push(field)
-      }
-    }
-    return { primaryFields: primary, advancedFields: advanced }
-  }, [fields])
-
-  // Reset enabled hidden fields and collapse advanced when model changes
+  // Reset enabled hidden fields when model changes
   useEffect(() => {
-    setEnabledHiddenFields(new Set())
-    setShowAdvanced(false)
-  }, [model.model_id])
+    setEnabledHiddenFields(new Set());
+  }, [model.model_id]);
 
   // Register fields and set defaults when model changes
   useEffect(() => {
-    onFieldsChange?.(fields)
+    onFieldsChange?.(fields);
 
     // Only set defaults if this is a new model (not just remount)
     // Check if we already have values for this model
-    const hasExistingValues = Object.keys(values).some(key =>
-      values[key] !== undefined && values[key] !== '' &&
-      !(Array.isArray(values[key]) && values[key].length === 0)
-    )
+    const hasExistingValues = Object.keys(values).some(
+      (key) =>
+        values[key] !== undefined &&
+        values[key] !== "" &&
+        !(Array.isArray(values[key]) && values[key].length === 0),
+    );
 
     // Set defaults only if model changed AND no existing values
     if (initializedRef.current !== model.model_id && !hasExistingValues) {
-      const defaults = getDefaultValues(fields)
-      onSetDefaults(defaults)
+      const defaults = getDefaultValues(fields);
+      onSetDefaults(defaults);
     }
-    initializedRef.current = model.model_id
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fields, model.model_id, onFieldsChange, onSetDefaults])
+    initializedRef.current = model.model_id;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fields, model.model_id, onFieldsChange, onSetDefaults]);
 
   // Toggle a hidden field
   const toggleHiddenField = (fieldName: string) => {
-    setEnabledHiddenFields(prev => {
-      const next = new Set(prev)
+    setEnabledHiddenFields((prev) => {
+      const next = new Set(prev);
       if (next.has(fieldName)) {
-        next.delete(fieldName)
+        next.delete(fieldName);
         // Clear the value when disabling
-        onChange(fieldName, undefined)
+        onChange(fieldName, undefined);
       } else {
-        next.add(fieldName)
+        next.add(fieldName);
       }
-      return next
-    })
-  }
+      return next;
+    });
+  };
 
   const renderField = (field: FormFieldConfig, index?: number) => {
-    const animStyle = index !== undefined ? { animationDelay: `${index * 50}ms` } : undefined
+    const animStyle =
+      index !== undefined ? { animationDelay: `${index * 50}ms` } : undefined;
 
     // Hidden fields render with a toggle
     if (field.hidden) {
-      const isEnabled = enabledHiddenFields.has(field.name)
+      const isEnabled = enabledHiddenFields.has(field.name);
       return (
-        <div key={field.name} className={cn("space-y-2", collapsible && "field-animate")} style={animStyle}>
+        <div
+          key={field.name}
+          className={cn("space-y-2", collapsible && "field-animate")}
+          style={animStyle}
+        >
           <div className="space-y-1">
             <button
               type="button"
@@ -144,17 +142,23 @@ export function DynamicForm({
                 "border shadow-sm",
                 isEnabled
                   ? "bg-primary text-primary-foreground border-primary shadow-primary/20 shadow-md"
-                  : "bg-background hover:bg-muted border-input hover:shadow-md"
+                  : "bg-background hover:bg-muted border-input hover:shadow-md",
               )}
             >
-              <div className={cn(
-                "w-3 h-3 rounded-full border-2 transition-all duration-200",
-                isEnabled ? "bg-primary-foreground border-primary-foreground scale-110" : "border-muted-foreground"
-              )} />
+              <div
+                className={cn(
+                  "w-3 h-3 rounded-full border-2 transition-all duration-200",
+                  isEnabled
+                    ? "bg-primary-foreground border-primary-foreground scale-110"
+                    : "border-muted-foreground",
+                )}
+              />
               {field.label}
             </button>
             {field.description && !isEnabled && (
-              <p className="text-xs text-muted-foreground">{field.description}</p>
+              <p className="text-xs text-muted-foreground">
+                {field.description}
+              </p>
             )}
           </div>
           {isEnabled && (
@@ -166,7 +170,11 @@ export function DynamicForm({
                 disabled={disabled}
                 error={validationErrors[field.name]}
                 modelType={model.type}
-                imageValue={field.name === 'prompt' ? getSingleImageFromValues(values) : undefined}
+                imageValue={
+                  field.name === "prompt"
+                    ? getSingleImageFromValues(values)
+                    : undefined
+                }
                 hideLabel
                 formValues={values}
                 onUploadingChange={onUploadingChange}
@@ -175,13 +183,17 @@ export function DynamicForm({
             </div>
           )}
         </div>
-      )
+      );
     }
 
     // Regular visible fields - wrap in hover card when collapsible
     if (collapsible) {
       return (
-        <div key={field.name} className={cn("field-hover", animStyle && "field-animate")} style={animStyle}>
+        <div
+          key={field.name}
+          className={cn("field-hover", animStyle && "field-animate")}
+          style={animStyle}
+        >
           <FormField
             field={field}
             value={values[field.name]}
@@ -189,13 +201,17 @@ export function DynamicForm({
             disabled={disabled}
             error={validationErrors[field.name]}
             modelType={model.type}
-            imageValue={field.name === 'prompt' ? getSingleImageFromValues(values) : undefined}
+            imageValue={
+              field.name === "prompt"
+                ? getSingleImageFromValues(values)
+                : undefined
+            }
             formValues={values}
             onUploadingChange={onUploadingChange}
             tooltipDescription
           />
         </div>
-      )
+      );
     }
 
     return (
@@ -207,12 +223,14 @@ export function DynamicForm({
         disabled={disabled}
         error={validationErrors[field.name]}
         modelType={model.type}
-        imageValue={field.name === 'prompt' ? getSingleImageFromValues(values) : undefined}
+        imageValue={
+          field.name === "prompt" ? getSingleImageFromValues(values) : undefined
+        }
         formValues={values}
         onUploadingChange={onUploadingChange}
       />
-    )
-  }
+    );
+  };
 
   if (fields.length === 0) {
     return (
@@ -220,72 +238,23 @@ export function DynamicForm({
         <p>No configurable parameters for this model.</p>
         <p className="text-sm mt-2">You can run this model directly.</p>
       </div>
-    )
+    );
   }
 
   // When not collapsible, render all fields flat (original behavior)
   if (!collapsible) {
     const formContent = (
-      <div className="space-y-4 pr-4 py-2">
-        {fields.map(renderField)}
-      </div>
-    )
-    if (!scrollable) return formContent
-    return <ScrollArea className="h-full">{formContent}</ScrollArea>
+      <div className="space-y-4 py-2">{fields.map(renderField)}</div>
+    );
+    if (!scrollable) return formContent;
+    return <ScrollArea className="h-full">{formContent}</ScrollArea>;
   }
 
-  // Collapsible: primary fields always visible, advanced fields in collapsible section
+  // Collapsible: render all fields flat (primary + advanced together)
   const formContent = (
-    <div className="space-y-4 pr-4 py-2">
-      {/* Primary fields - always visible */}
-      {primaryFields.map(renderField)}
-
-      {/* Advanced fields - collapsible with smooth animation */}
-      {advancedFields.length > 0 && (
-        <>
-          <button
-            type="button"
-            onClick={() => setShowAdvanced(!showAdvanced)}
-            className={cn(
-              "btn-shimmer flex items-center gap-2 w-full px-3 py-2 rounded-lg text-xs font-medium transition-all duration-200",
-              showAdvanced
-                ? "bg-primary/10 text-primary hover:bg-primary/15 shadow-sm shadow-primary/10"
-                : "bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground hover:shadow-sm"
-            )}
-          >
-            <SlidersHorizontal className={cn(
-              "h-3.5 w-3.5 shrink-0 transition-transform duration-300",
-              showAdvanced && "rotate-90"
-            )} />
-            <span>
-              {showAdvanced
-                ? t('playground.advancedSettings.less', 'Less')
-                : t('playground.advancedSettings.more', 'More')
-              }
-            </span>
-            <span className={cn(
-              "ml-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-semibold transition-colors duration-200",
-              showAdvanced ? "bg-primary/20 text-primary" : "bg-background"
-            )}>
-              {advancedFields.length}
-            </span>
-            <ChevronDown className={cn(
-              "h-3.5 w-3.5 shrink-0 ml-auto transition-transform duration-300",
-              showAdvanced && "rotate-180"
-            )} />
-          </button>
-          <div className={cn("grid-collapse", showAdvanced && "open")}>
-            <div>
-              <div className="space-y-4 rounded-lg bg-muted/30 p-3 -mx-1 border border-border/40">
-                {showAdvanced && advancedFields.map((field, i) => renderField(field, i))}
-              </div>
-            </div>
-          </div>
-        </>
-      )}
-    </div>
-  )
+    <div className="space-y-4 py-2">{fields.map(renderField)}</div>
+  );
 
-  if (!scrollable) return formContent
-  return <ScrollArea className="h-full">{formContent}</ScrollArea>
+  if (!scrollable) return formContent;
+  return <ScrollArea className="h-full">{formContent}</ScrollArea>;
 }
diff --git a/src/components/playground/ExplorePanel.tsx b/src/components/playground/ExplorePanel.tsx
new file mode 100644
index 00000000..08d2285b
--- /dev/null
+++ b/src/components/playground/ExplorePanel.tsx
@@ -0,0 +1,552 @@
+import { useState, useMemo, useCallback, useRef, memo, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useModelsStore } from "@/stores/modelsStore";
+import { usePlaygroundStore } from "@/stores/playgroundStore";
+import { fuzzySearch } from "@/lib/fuzzySearch";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  PlayCircle,
+  ExternalLink,
+  Star,
+  Info,
+  Search,
+  X,
+  ArrowDownNarrowWide,
+  ArrowUpNarrowWide,
+  ChevronDown,
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useVirtualizer } from "@tanstack/react-virtual";
+
+type SortKey = "popularity" | "name" | "price";
+
+function getModelShortName(modelId: string): string {
+  const parts = modelId.split("/");
+  return parts[1] || parts[0];
+}
+
+/** Color mapping for model type tags (badge background) */
+function getTypeColor(type: string): string {
+  const t = type.toLowerCase();
+  if (t.includes("video"))
+    return "bg-purple-100 text-purple-700 dark:bg-purple-500/15 dark:text-purple-400";
+  if (t.includes("image"))
+    return "bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400";
+  if (t.includes("audio"))
+    return "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400";
+  if (t.includes("portrait"))
+    return "bg-pink-100 text-pink-700 dark:bg-pink-500/15 dark:text-pink-400";
+  if (t.includes("text"))
+    return "bg-cyan-100 text-cyan-700 dark:bg-cyan-500/15 dark:text-cyan-400";
+  return "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400";
+}
+
+/** Solid color for the top accent bar on each card */
+function getBarColor(type: string): string {
+  const t = type.toLowerCase();
+  if (t.includes("video")) return "bg-purple-500";
+  if (t.includes("image")) return "bg-blue-500";
+  if (t.includes("audio")) return "bg-amber-500";
+  if (t.includes("portrait")) return "bg-pink-500";
+  if (t.includes("text")) return "bg-cyan-500";
+  return "bg-emerald-500";
+}
+
+interface ExplorePanelProps {
+  onSelectModel: (modelId: string) => void;
+  externalSearch?: string;
+}
+
+/** Memoized model card */
+const ModelCard = memo(function ModelCard({
+  model,
+  isFav,
+  onSelect,
+  onToggleFav,
+  onNewTab,
+}: {
+  model: {
+    model_id: string;
+    name: string;
+    type?: string;
+    base_price?: number;
+    description?: string;
+  };
+  isFav: boolean;
+  onSelect: (id: string) => void;
+  onToggleFav: (e: React.MouseEvent, id: string) => void;
+  onNewTab: (e: React.MouseEvent, id: string) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div
+      onClick={() => onSelect(model.model_id)}
+      className="cursor-pointer rounded-lg border border-border bg-card shadow-sm hover:bg-accent/50 hover:border-primary/30 hover:shadow-md transition-all group overflow-hidden dark:bg-white/[0.06] dark:border-white/[0.08] dark:hover:bg-white/[0.10]"
+    >
+      <div className={cn("h-[2px]", getBarColor(model.type || ""))} />
+      <div className="p-2.5 flex flex-col h-[calc(100%-2px)]">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-sm font-semibold group-hover:text-primary transition-colors flex-1 min-w-0 truncate">
+            {model.name}
+          </p>
+          {model.type && (
+            <span
+              className={cn(
+                "text-[10px] px-1.5 py-0.5 rounded-full font-medium shrink-0 whitespace-nowrap",
+                getTypeColor(model.type),
+              )}
+            >
+              {model.type}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center justify-between mt-auto">
+          {model.base_price !== undefined && (
+            <span className="text-xs font-semibold text-primary">
+              ${model.base_price.toFixed(4)}
+            </span>
+          )}
+          <div className="flex gap-0.5 ml-auto">
+            <HoverCard openDelay={200} closeDelay={100}>
+              <HoverCardTrigger asChild>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 w-6 p-0"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <Info className="h-3 w-3" />
+                </Button>
+              </HoverCardTrigger>
+              <HoverCardContent className="w-64" side="top" align="end">
+                <div className="space-y-1.5">
+                  <h4 className="font-semibold text-sm">{model.name}</h4>
+                  <p className="text-xs text-muted-foreground font-mono break-all">
+                    {model.model_id}
+                  </p>
+                  {model.description && (
+                    <p className="text-xs text-muted-foreground">
+                      {model.description}
+                    </p>
+                  )}
+                  {model.type && (
+                    <div className="flex items-center gap-2 text-xs">
+                      <span className="text-muted-foreground">
+                        {t("models.type")}:
+                      </span>
+                      <Badge variant="secondary" className="text-xs">
+                        {model.type}
+                      </Badge>
+                    </div>
+                  )}
+                  {model.base_price !== undefined && (
+                    <div className="flex items-center gap-2 text-xs">
+                      <span className="text-muted-foreground">
+                        {t("models.basePrice")}:
+                      </span>
+                      <span className="font-medium text-primary">
+                        ${model.base_price.toFixed(4)}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </HoverCardContent>
+            </HoverCard>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 w-6 p-0"
+              onClick={(e) => onToggleFav(e, model.model_id)}
+            >
+              <Star
+                className={cn(
+                  "h-3 w-3",
+                  isFav && "fill-yellow-400 text-yellow-400",
+                )}
+              />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 w-6 p-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelect(model.model_id);
+              }}
+            >
+              <PlayCircle className="h-3 w-3" />
+            </Button>
+            <Button
+              size="sm"
+              variant="ghost"
+              className="h-6 w-6 p-0"
+              onClick={(e) => onNewTab(e, model.model_id)}
+            >
+              <ExternalLink className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export function ExplorePanel({
+  onSelectModel,
+  externalSearch,
+}: ExplorePanelProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { models, toggleFavorite, isFavorite, fetchModels } = useModelsStore();
+  const { createTab } = usePlaygroundStore();
+  const [typeFilter, setTypeFilter] = useState<string | null>(null);
+  const [showFavoritesOnly, setShowFavoritesOnly] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [sortKey, setSortKey] = useState<SortKey>("popularity");
+  const [sortAsc, setSortAsc] = useState(false);
+
+  // Local search state with debounce
+  const [searchInput, setSearchInput] = useState("");
+  const [searchDebounced, setSearchDebounced] = useState("");
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchInput(value);
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => setSearchDebounced(value), 250);
+  }, []);
+  const handleSearchClear = useCallback(() => {
+    setSearchInput("");
+    setSearchDebounced("");
+    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+  }, []);
+
+  const search = externalSearch ?? searchDebounced;
+
+  const allTypes = useMemo(() => {
+    const typeSet = new Set<string>();
+    models.forEach((m) => {
+      if (m.type) typeSet.add(m.type);
+    });
+    return Array.from(typeSet).sort();
+  }, [models]);
+
+  // Filtered + sorted list (synchronous — model list is small enough)
+  const filteredModels = useMemo(() => {
+    let result = models;
+    if (showFavoritesOnly)
+      result = result.filter((m) => isFavorite(m.model_id));
+    if (typeFilter) result = result.filter((m) => m.type === typeFilter);
+    if (search.trim()) {
+      return fuzzySearch(result, search, (m) => [
+        getModelShortName(m.model_id),
+        m.model_id,
+      ]).map((r) => r.item);
+    }
+    const sorted = [...result].sort((a, b) => {
+      if (sortKey === "name")
+        return getModelShortName(a.model_id).localeCompare(
+          getModelShortName(b.model_id),
+        );
+      if (sortKey === "price") return (a.base_price ?? 0) - (b.base_price ?? 0);
+      return (a.sort_order ?? 9999) - (b.sort_order ?? 9999);
+    });
+    return sortAsc ? sorted : sorted.reverse();
+  }, [
+    models,
+    search,
+    typeFilter,
+    showFavoritesOnly,
+    isFavorite,
+    sortKey,
+    sortAsc,
+  ]);
+
+  // Responsive grid columns — use window resize to measure scroll container width
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const CARD_HEIGHT = 82;
+  const MIN_CARD_WIDTH = 265;
+  const MAX_COLS = 5;
+  const GRID_PADDING = 32;
+  const GAP = 8;
+
+  const calcCols = useCallback((containerW: number) => {
+    const available = containerW - GRID_PADDING;
+    const n = Math.floor((available + GAP) / (MIN_CARD_WIDTH + GAP));
+    return Math.min(MAX_COLS, Math.max(1, n));
+  }, []);
+
+  const [cols, setCols] = useState(4);
+
+  // Measure on window resize — this is the reliable path since ResizeObserver
+  // on the scroll container doesn't fire when the window shrinks (the container
+  // is inside an overflow-auto wrapper that doesn't constrain its children).
+  useEffect(() => {
+    const measure = () => {
+      const el = scrollContainerRef.current;
+      if (el) setCols(calcCols(el.getBoundingClientRect().width));
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [calcCols]);
+
+  // Callback ref to assign scrollContainerRef and do initial measurement
+  const scrollRefCallback = useCallback(
+    (el: HTMLDivElement | null) => {
+      (
+        scrollContainerRef as React.MutableRefObject<HTMLDivElement | null>
+      ).current = el;
+      if (el) setCols(calcCols(el.getBoundingClientRect().width));
+    },
+    [calcCols],
+  );
+
+  const rowCount = Math.ceil(filteredModels.length / cols);
+  const rowVirtualizer = useVirtualizer({
+    count: rowCount,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => CARD_HEIGHT + GAP,
+    overscan: 5,
+  });
+
+  const handleToggleFavorite = useCallback(
+    (e: React.MouseEvent, modelId: string) => {
+      e.stopPropagation();
+      toggleFavorite(modelId);
+    },
+    [toggleFavorite],
+  );
+
+  const handleOpenInNewTab = useCallback(
+    (e: React.MouseEvent, modelId: string) => {
+      e.stopPropagation();
+      const model = models.find((m) => m.model_id === modelId);
+      createTab(model);
+      navigate(`/playground/${encodeURIComponent(modelId)}`);
+    },
+    [models, createTab, navigate],
+  );
+
+  const sortLabels: Record<SortKey, string> = {
+    popularity: t("models.popularity", "Popularity"),
+    name: t("models.name", "Name"),
+    price: t("models.price", "Price"),
+  };
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Search bar with controls */}
+      {externalSearch == null && (
+        <div className="px-4 pt-3 pb-2 shrink-0">
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none" />
+              <input
+                type="text"
+                value={searchInput}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                placeholder={t(
+                  "playground.explore.searchPlaceholder",
+                  "Search models...",
+                )}
+                className="w-full h-[34px] pl-9 pr-8 rounded-lg border border-border bg-muted/40 text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
+              />
+              {searchInput && (
+                <button
+                  onClick={handleSearchClear}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+            <Button
+              variant="ghost"
+              size="sm"
+              className={cn(
+                "h-[34px] w-[34px] p-0 shrink-0 border border-border",
+                showFavoritesOnly &&
+                  "bg-yellow-500/10 border-yellow-500/30 text-yellow-500",
+              )}
+              onClick={() => setShowFavoritesOnly(!showFavoritesOnly)}
+            >
+              <Star
+                className={cn(
+                  "h-4 w-4",
+                  showFavoritesOnly && "fill-yellow-400 text-yellow-400",
+                )}
+              />
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-[34px] px-2.5 shrink-0 border border-border text-xs font-medium gap-1"
+                >
+                  {sortLabels[sortKey]}
+                  <ChevronDown className="h-3 w-3" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="min-w-[120px]">
+                {(Object.keys(sortLabels) as SortKey[]).map((key) => (
+                  <DropdownMenuItem
+                    key={key}
+                    onClick={() => setSortKey(key)}
+                    className={cn(
+                      "text-xs",
+                      sortKey === key && "font-semibold text-primary",
+                    )}
+                  >
+                    {sortLabels[key]}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-[34px] w-[34px] p-0 shrink-0 border border-border"
+              onClick={() => setSortAsc(!sortAsc)}
+            >
+              {sortAsc ? (
+                <ArrowDownNarrowWide className="h-4 w-4" />
+              ) : (
+                <ArrowUpNarrowWide className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-[34px] px-2.5 shrink-0 border border-border text-xs font-medium gap-1.5"
+              disabled={isRefreshing}
+              onClick={async () => {
+                setIsRefreshing(true);
+                try {
+                  await fetchModels(true);
+                } finally {
+                  setIsRefreshing(false);
+                }
+              }}
+            >
+              <RefreshCw
+                className={cn("h-3.5 w-3.5", isRefreshing && "animate-spin")}
+              />
+              {t("common.refresh", "Refresh")}
+            </Button>
+          </div>
+        </div>
+      )}
+      <div
+        ref={scrollRefCallback}
+        className="flex-1 overflow-y-auto overflow-x-hidden"
+      >
+        <div className="px-4 pb-6 pt-3">
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+            {showFavoritesOnly
+              ? t("playground.explore.favorites", "Favorites")
+              : search
+                ? t("playground.explore.searchResults", "{{count}} results", {
+                    count: filteredModels.length,
+                  })
+                : t("playground.explore.allModels", "All Models")}
+          </h3>
+          <div className="flex gap-1.5 flex-wrap mb-3">
+            <button
+              onClick={() => setTypeFilter(null)}
+              className={cn(
+                "text-xs px-2.5 py-1 rounded-full font-medium transition-colors whitespace-nowrap",
+                !typeFilter
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground hover:text-foreground",
+              )}
+            >
+              {t("playground.explore.all", "All")}
+            </button>
+            {allTypes.map((type) => (
+              <button
+                key={type}
+                onClick={() => setTypeFilter(typeFilter === type ? null : type)}
+                className={cn(
+                  "text-xs px-2.5 py-1 rounded-full font-medium transition-colors whitespace-nowrap",
+                  typeFilter === type
+                    ? "ring-1 ring-current " + getTypeColor(type)
+                    : getTypeColor(type) + " hover:opacity-80",
+                )}
+              >
+                {type}
+              </button>
+            ))}
+          </div>
+
+          {filteredModels.length === 0 ? (
+            <div className="py-12 text-center text-sm text-muted-foreground">
+              {showFavoritesOnly
+                ? t(
+                    "playground.explore.noFavorites",
+                    "No favorites yet — star a model to save it here",
+                  )
+                : t("models.noResults", "No models found")}
+            </div>
+          ) : (
+            <div
+              key={cols}
+              style={{
+                height: `${rowVirtualizer.getTotalSize()}px`,
+                position: "relative",
+              }}
+            >
+              {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                const rowModels = filteredModels.slice(
+                  virtualRow.index * cols,
+                  virtualRow.index * cols + cols,
+                );
+                return (
+                  <div
+                    key={virtualRow.key}
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: `${virtualRow.size - GAP}px`,
+                      transform: `translateY(${virtualRow.start}px)`,
+                      display: "grid",
+                      gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                      gap: `${GAP}px`,
+                    }}
+                  >
+                    {rowModels.map((model) => (
+                      <ModelCard
+                        key={model.model_id}
+                        model={model}
+                        isFav={isFavorite(model.model_id)}
+                        onSelect={onSelectModel}
+                        onToggleFav={handleToggleFavorite}
+                        onNewTab={handleOpenInNewTab}
+                      />
+                    ))}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/playground/FeaturedModelsPanel.tsx b/src/components/playground/FeaturedModelsPanel.tsx
new file mode 100644
index 00000000..5c3a467a
--- /dev/null
+++ b/src/components/playground/FeaturedModelsPanel.tsx
@@ -0,0 +1,209 @@
+import { useState } from "react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import type { Model } from "@/types/model";
+
+const FEATURED_MODEL_FAMILIES = [
+  {
+    name: "Nano Banana Pro",
+    provider: "google",
+    description: "Fast, high-quality text-to-image by Google",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1763649945119973876_WvMIEAxu.jpg",
+    primaryVariant: "google/nano-banana-pro/text-to-image",
+    tags: ["Text-to-Image"],
+    ratio: "poster" as const,
+  },
+  {
+    name: "InfiniteTalk",
+    provider: "wavespeed-ai",
+    description: "Natural talking-head video from a single portrait photo",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766575571686877852_Sckigeck.png",
+    primaryVariant: "wavespeed-ai/infinitetalk",
+    tags: ["Talking Head"],
+    ratio: "poster" as const,
+  },
+  {
+    name: "Wan Spicy",
+    provider: "wavespeed-ai",
+    description: "Artistic video generation with painterly, soft-toned visuals",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766298334453523753_f975da96.png",
+    primaryVariant: "wavespeed-ai/wan-2.2-spicy/image-to-video",
+    tags: ["Artistic", "Soft", "Paint"],
+    ratio: "poster" as const,
+  },
+  {
+    name: "Seedream 4.5",
+    provider: "bytedance",
+    description:
+      "Ultra-realistic image generation with stunning detail and accuracy",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1764761216479761378_Yy864da9.png",
+    primaryVariant: "bytedance/seedream-v4.5",
+    tags: ["Photorealistic", "High Detail"],
+    isNew: true,
+    ratio: "square" as const,
+  },
+  {
+    name: "Seedance 1.5 Pro",
+    provider: "bytedance",
+    description: "Cinematic video creation with breathtaking sci-fi aesthetics",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766494048998434655_qEMLsAI0.png",
+    primaryVariant: "bytedance/seedance-v1.5-pro/image-to-video",
+    tags: ["Sci-Fi", "Neon", "Future"],
+    ratio: "square" as const,
+  },
+  {
+    name: "Kling 2.6 Motion Control",
+    provider: "kwaivgi",
+    description: "Precise camera & motion-guided video generation",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766519115490596160_Smusqomu.png",
+    primaryVariant: "kwaivgi/kling-v2.6-pro/motion-control",
+    tags: ["Motion", "Control"],
+    ratio: "square" as const,
+  },
+  {
+    name: "Wan Animate",
+    provider: "wavespeed-ai",
+    description: "Bring characters to life with smooth animation",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1758433474532574441_SkTQLIEA.jpeg",
+    primaryVariant: "wavespeed-ai/wan-2.2/animate",
+    tags: ["Animation"],
+    ratio: "square" as const,
+  },
+];
+
+const TAG_COLORS = [
+  "text-sky-200/90 bg-sky-400/15",
+  "text-violet-200/90 bg-violet-400/15",
+  "text-emerald-200/90 bg-emerald-400/15",
+  "text-rose-200/90 bg-rose-400/15",
+  "text-amber-200/90 bg-amber-400/15",
+];
+
+interface FeaturedModelsPanelProps {
+  onSelectFeatured: (primaryVariant: string) => void;
+  models: Model[];
+}
+
+function PosterCard({
+  family,
+  price,
+  onClick,
+  className,
+}: {
+  family: (typeof FEATURED_MODEL_FAMILIES)[number];
+  price: number | undefined;
+  onClick: () => void;
+  className?: string;
+}) {
+  const [loaded, setLoaded] = useState(false);
+  return (
+    <div
+      className={`relative rounded-xl overflow-hidden bg-muted cursor-pointer group ${className ?? ""}`}
+      onClick={onClick}
+    >
+      {!loaded && <div className="absolute inset-0 animate-pulse bg-muted" />}
+      <img
+        src={family.poster}
+        alt={family.name}
+        className={`w-full h-full object-cover group-hover:scale-105 transition-all duration-500 ${loaded ? "opacity-100" : "opacity-0"}`}
+        loading="lazy"
+        onLoad={() => setLoaded(true)}
+      />
+      <div className="absolute inset-x-0 bottom-0 h-[60%] bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
+      {family.isNew && (
+        <Badge className="absolute top-2 left-2 bg-primary text-primary-foreground text-[9px] px-1.5 py-0 font-bold leading-4">
+          NEW
+        </Badge>
+      )}
+      <div className="absolute bottom-2 left-2.5 right-2.5">
+        <p className="text-[9px] text-white/60 uppercase tracking-wider leading-none">
+          {family.provider}
+        </p>
+        <h4 className="text-[13px] font-bold text-white leading-tight line-clamp-1 mt-1 drop-shadow-sm">
+          {family.name}
+        </h4>
+        {family.description && (
+          <p className="text-[10px] text-white/70 leading-snug line-clamp-1 mt-0.5">
+            {family.description}
+          </p>
+        )}
+        <div className="flex items-center flex-wrap gap-1 mt-1.5">
+          {family.tags.map((tag, i) => (
+            <span
+              key={tag}
+              className={`text-[8px] rounded-full px-1.5 py-[2px] leading-none ${TAG_COLORS[i % TAG_COLORS.length]}`}
+            >
+              {tag}
+            </span>
+          ))}
+          {price !== undefined && (
+            <span className="text-[8px] rounded-full px-1.5 py-[2px] leading-none text-white/90 bg-white/20 ml-auto">
+              ${price.toFixed(3)}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function FeaturedModelsPanel({
+  onSelectFeatured,
+  models,
+}: FeaturedModelsPanelProps) {
+  const getPrice = (modelId: string) => {
+    const model = models.find((m) => m.model_id === modelId);
+    return model?.base_price;
+  };
+
+  const posters = FEATURED_MODEL_FAMILIES.filter((f) => f.ratio === "poster");
+  const squares = FEATURED_MODEL_FAMILIES.filter((f) => f.ratio === "square");
+
+  const card = (
+    family: (typeof FEATURED_MODEL_FAMILIES)[number],
+    cls?: string,
+  ) => (
+    <PosterCard
+      key={family.primaryVariant}
+      family={family}
+      price={getPrice(family.primaryVariant)}
+      onClick={() => onSelectFeatured(family.primaryVariant)}
+      className={cls}
+    />
+  );
+
+  return (
+    <ScrollArea className="flex-1">
+      <div className="p-3 space-y-3">
+        {/* Header */}
+        <div className="pb-1">
+          <h3 className="text-2xl font-bold tracking-tight text-foreground">
+            Featured Models
+          </h3>
+          <p className="text-xs text-muted-foreground mt-1 leading-relaxed">
+            Hand-picked models for image generation, video creation, and
+            animation. From photorealistic portraits to cinematic motion —
+            explore what's trending and start creating in seconds.
+          </p>
+        </div>
+
+        {/* Top row: 3 poster cards (3:4) */}
+        <div className="grid grid-cols-3 gap-2">
+          {posters.map((f) => card(f, "aspect-[3/4]"))}
+        </div>
+
+        {/* Bottom row: 4 square cards (1:1) */}
+        <div className="grid grid-cols-4 gap-2">
+          {squares.map((f) => card(f, "aspect-square"))}
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/src/components/playground/FileUpload.tsx b/src/components/playground/FileUpload.tsx
index 47601f3b..86d16f10 100644
--- a/src/components/playground/FileUpload.tsx
+++ b/src/components/playground/FileUpload.tsx
@@ -1,33 +1,49 @@
-import { useState, useCallback, useMemo, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useDropzone } from 'react-dropzone'
-import { apiClient } from '@/api/client'
-import { cn } from '@/lib/utils'
-import { getSingleImageFromValues, getSingleVideoFromValues } from '@/lib/schemaToForm'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Dialog, DialogContent } from '@/components/ui/dialog'
-import { Upload, X, Loader2, FileVideo, FileAudio, Image, FileArchive, File as FileIcon, Camera, Video, Mic, Brush } from 'lucide-react'
-import { CameraCapture } from './CameraCapture'
-import { VideoRecorder } from './VideoRecorder'
-import { AudioRecorder } from './AudioRecorder'
-import { MaskEditor } from './MaskEditor'
-
-type CaptureMode = 'upload' | 'camera' | 'video' | 'audio' | 'mask'
+import { useState, useCallback, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useDropzone } from "react-dropzone";
+import { apiClient } from "@/api/client";
+import { cn } from "@/lib/utils";
+import {
+  getSingleImageFromValues,
+  getSingleVideoFromValues,
+} from "@/lib/schemaToForm";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+  Upload,
+  X,
+  Loader2,
+  FileVideo,
+  FileAudio,
+  Image,
+  FileArchive,
+  File as FileIcon,
+  Camera,
+  Video,
+  Mic,
+  Brush,
+} from "lucide-react";
+import { CameraCapture } from "./CameraCapture";
+import { VideoRecorder } from "./VideoRecorder";
+import { AudioRecorder } from "./AudioRecorder";
+import { MaskEditor } from "./MaskEditor";
+
+type CaptureMode = "upload" | "camera" | "video" | "audio" | "mask";
 
 interface FileUploadProps {
-  accept: string
-  multiple?: boolean
-  maxFiles?: number
-  value: string | string[]
-  onChange: (urls: string | string[]) => void
-  disabled?: boolean
-  placeholder?: string
-  isMaskField?: boolean
-  formValues?: Record<string, unknown>
-  onUploadingChange?: (isUploading: boolean) => void
+  accept: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  value: string | string[];
+  onChange: (urls: string | string[]) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  isMaskField?: boolean;
+  formValues?: Record<string, unknown>;
+  onUploadingChange?: (isUploading: boolean) => void;
   /** When provided (e.g. workflow), use this instead of API upload. Returned URL is stored as value. */
-  onUploadFile?: (file: File) => Promise<string>
+  onUploadFile?: (file: File) => Promise<string>;
 }
 
 export function FileUpload({
@@ -40,168 +56,202 @@ export function FileUpload({
   isMaskField = false,
   formValues,
   onUploadingChange,
-  onUploadFile
+  onUploadFile,
 }: FileUploadProps) {
-  const { t } = useTranslation()
-  const [isUploading, setIsUploading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [urlInput, setUrlInput] = useState('')
-  const [captureMode, setCaptureMode] = useState<CaptureMode>('upload')
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
-  const [previewType, setPreviewType] = useState<'image' | 'video' | 'audio' | null>(null)
-  const [draggingIndex, setDraggingIndex] = useState<number | null>(null)
-
-  const abortControllerRef = useRef<AbortController | null>(null)
+  const { t } = useTranslation();
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [urlInput, setUrlInput] = useState("");
+  const [captureMode, setCaptureMode] = useState<CaptureMode>("upload");
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewType, setPreviewType] = useState<
+    "image" | "video" | "audio" | null
+  >(null);
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   // Convert value to array for consistent handling
-  const urls = Array.isArray(value) ? value : value ? [value] : []
+  const urls = Array.isArray(value) ? value : value ? [value] : [];
 
   // Determine what capture options are available based on accept type
-  const supportsCamera = accept.includes('image') && !isMaskField
-  const supportsVideo = accept.includes('video')
-  const supportsAudio = accept.includes('audio')
-  const supportsMask = isMaskField && accept.includes('image')
-  const hasCaptureOptions = supportsCamera || supportsVideo || supportsAudio || supportsMask
+  const supportsCamera = accept.includes("image") && !isMaskField;
+  const supportsVideo = accept.includes("video");
+  const supportsAudio = accept.includes("audio");
+  const supportsMask = isMaskField && accept.includes("image");
+  const hasCaptureOptions =
+    supportsCamera || supportsVideo || supportsAudio || supportsMask;
 
   // Get reference image/video URL from formValues for mask editor (images → image)
   const referenceImageUrl = useMemo(() => {
-    if (!formValues || !supportsMask) return undefined
-    return getSingleImageFromValues(formValues)
-  }, [formValues, supportsMask])
+    if (!formValues || !supportsMask) return undefined;
+    return getSingleImageFromValues(formValues);
+  }, [formValues, supportsMask]);
 
   const referenceVideoUrl = useMemo(() => {
-    if (!formValues || !supportsMask) return undefined
-    return getSingleVideoFromValues(formValues)
-  }, [formValues, supportsMask])
+    if (!formValues || !supportsMask) return undefined;
+    return getSingleVideoFromValues(formValues);
+  }, [formValues, supportsMask]);
 
   const handleAddUrl = () => {
-    if (!urlInput.trim()) return
+    if (!urlInput.trim()) return;
 
-    const newUrl = urlInput.trim()
+    const newUrl = urlInput.trim();
     if (multiple) {
-      onChange([...urls, newUrl])
+      onChange([...urls, newUrl]);
     } else {
-      onChange(newUrl)
-    }
-    setUrlInput('')
-  }
-
-  const handleCapture = useCallback(async (blob: Blob) => {
-    setError(null)
-    setIsUploading(true)
-    onUploadingChange?.(true)
-    setCaptureMode('upload')
-
-    // Create abort controller for this upload
-    abortControllerRef.current = new AbortController()
-
-    try {
-      // Create a file from the blob with appropriate extension
-      const extension = blob.type.includes('video') ? 'webm' :
-                       blob.type.includes('audio') ? 'webm' :
-                       blob.type.includes('png') ? 'png' : 'jpg'
-      const filename = `capture_${Date.now()}.${extension}`
-      const file = new File([blob], filename, { type: blob.type })
-
-      const url = onUploadFile
-        ? await onUploadFile(file)
-        : await apiClient.uploadFile(file, abortControllerRef.current.signal)
-
-      if (multiple) {
-        onChange([...urls, url])
-      } else {
-        onChange(url)
-      }
-    } catch (err) {
-      // Don't show error for cancelled uploads
-      if (err instanceof Error && err.message === 'Upload cancelled') {
-        // Silently ignore
-      } else {
-        setError(err instanceof Error ? err.message : 'Upload failed')
-      }
-    } finally {
-      abortControllerRef.current = null
-      setIsUploading(false)
-      onUploadingChange?.(false)
+      onChange(newUrl);
     }
-  }, [multiple, urls, onChange, onUploadingChange, onUploadFile])
-
-  const onDrop = useCallback(async (acceptedFiles: File[]) => {
-    if (disabled) return
-
-    setError(null)
-    setIsUploading(true)
-    onUploadingChange?.(true)
-
-    // Create abort controller for this upload batch
-    abortControllerRef.current = new AbortController()
-
-    try {
-      const uploadPromises = acceptedFiles.slice(0, maxFiles - urls.length).map(async (file) => {
-        try {
-          const url = onUploadFile
-            ? await onUploadFile(file)
-            : await apiClient.uploadFile(file, abortControllerRef.current?.signal)
-          return { url, name: file.name, type: file.type }
-        } catch (err) {
-          // Re-throw cancellation errors to stop all uploads
-          if (err instanceof Error && err.message === 'Upload cancelled') {
-            throw err
-          }
-          throw new Error(`Failed to upload ${file.name}`)
+    setUrlInput("");
+  };
+
+  const handleCapture = useCallback(
+    async (blob: Blob) => {
+      setError(null);
+      setIsUploading(true);
+      setUploadProgress(0);
+      onUploadingChange?.(true);
+      setCaptureMode("upload");
+
+      // Create abort controller for this upload
+      abortControllerRef.current = new AbortController();
+
+      try {
+        // Create a file from the blob with appropriate extension
+        const extension = blob.type.includes("video")
+          ? "webm"
+          : blob.type.includes("audio")
+            ? "webm"
+            : blob.type.includes("png")
+              ? "png"
+              : "jpg";
+        const filename = `capture_${Date.now()}.${extension}`;
+        const file = new File([blob], filename, { type: blob.type });
+
+        const url = onUploadFile
+          ? await onUploadFile(file)
+          : await apiClient.uploadFile(
+              file,
+              abortControllerRef.current.signal,
+              (p) => setUploadProgress(p),
+            );
+
+        if (multiple) {
+          onChange([...urls, url]);
+        } else {
+          onChange(url);
         }
-      })
+      } catch (err) {
+        // Don't show error for cancelled uploads
+        if (err instanceof Error && err.message === "Upload cancelled") {
+          // Silently ignore
+        } else {
+          setError(err instanceof Error ? err.message : "Upload failed");
+        }
+      } finally {
+        abortControllerRef.current = null;
+        setIsUploading(false);
+        onUploadingChange?.(false);
+      }
+    },
+    [multiple, urls, onChange, onUploadingChange, onUploadFile],
+  );
+
+  const onDrop = useCallback(
+    async (acceptedFiles: File[]) => {
+      if (disabled) return;
+
+      setError(null);
+      setIsUploading(true);
+      setUploadProgress(0);
+      onUploadingChange?.(true);
+
+      // Create abort controller for this upload batch
+      abortControllerRef.current = new AbortController();
+
+      try {
+        const uploadPromises = acceptedFiles
+          .slice(0, maxFiles - urls.length)
+          .map(async (file) => {
+            try {
+              const url = onUploadFile
+                ? await onUploadFile(file)
+                : await apiClient.uploadFile(
+                    file,
+                    abortControllerRef.current?.signal,
+                    (p) => setUploadProgress(p),
+                  );
+              return { url, name: file.name, type: file.type };
+            } catch (err) {
+              // Re-throw cancellation errors to stop all uploads
+              if (err instanceof Error && err.message === "Upload cancelled") {
+                throw err;
+              }
+              throw new Error(`Failed to upload ${file.name}`);
+            }
+          });
 
-      const results = await Promise.all(uploadPromises)
-      const newUrls = results.map(r => r.url)
+        const results = await Promise.all(uploadPromises);
+        const newUrls = results.map((r) => r.url);
 
-      if (multiple) {
-        onChange([...urls, ...newUrls])
-      } else {
-        onChange(newUrls[0] || '')
-      }
-    } catch (err) {
-      // Don't show error for cancelled uploads
-      if (err instanceof Error && err.message === 'Upload cancelled') {
-        // Silently ignore
-      } else {
-        setError(err instanceof Error ? err.message : 'Upload failed')
+        if (multiple) {
+          onChange([...urls, ...newUrls]);
+        } else {
+          onChange(newUrls[0] || "");
+        }
+      } catch (err) {
+        // Don't show error for cancelled uploads
+        if (err instanceof Error && err.message === "Upload cancelled") {
+          // Silently ignore
+        } else {
+          setError(err instanceof Error ? err.message : "Upload failed");
+        }
+      } finally {
+        abortControllerRef.current = null;
+        setIsUploading(false);
+        onUploadingChange?.(false);
       }
-    } finally {
-      abortControllerRef.current = null
-      setIsUploading(false)
-      onUploadingChange?.(false)
-    }
-  }, [disabled, maxFiles, urls, multiple, onChange, onUploadingChange, onUploadFile])
+    },
+    [
+      disabled,
+      maxFiles,
+      urls,
+      multiple,
+      onChange,
+      onUploadingChange,
+      onUploadFile,
+    ],
+  );
 
   // Parse accept string into react-dropzone format
   // Maps MIME types to extensions for better browser compatibility
   const dropzoneAccept = useMemo(() => {
-    const result: Record<string, string[]> = {}
-    const extensions: string[] = []
+    const result: Record<string, string[]> = {};
+    const extensions: string[] = [];
 
     // MIME type to extension mappings for common types
     const mimeToExt: Record<string, string[]> = {
-      'application/zip': ['.zip'],
-      'application/x-zip-compressed': ['.zip'],
-      'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg'],
-      'video/*': ['.mp4', '.webm', '.mov', '.avi', '.mkv'],
-      'audio/*': ['.mp3', '.wav', '.ogg', '.m4a', '.webm', '.flac'],
-    }
-
-    for (const type of accept.split(',')) {
-      const trimmed = type.trim()
-      if (trimmed.startsWith('.')) {
+      "application/zip": [".zip"],
+      "application/x-zip-compressed": [".zip"],
+      "image/*": [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp", ".svg"],
+      "video/*": [".mp4", ".webm", ".mov", ".avi", ".mkv"],
+      "audio/*": [".mp3", ".wav", ".ogg", ".m4a", ".webm", ".flac"],
+    };
+
+    for (const type of accept.split(",")) {
+      const trimmed = type.trim();
+      if (trimmed.startsWith(".")) {
         // Collect file extensions
-        extensions.push(trimmed)
+        extensions.push(trimmed);
       } else {
         // MIME type - add with known extensions or empty array
-        result[trimmed] = mimeToExt[trimmed] || []
+        result[trimmed] = mimeToExt[trimmed] || [];
         // For zip MIME types, also add the alternative MIME type for Windows compatibility
-        if (trimmed === 'application/zip') {
-          result['application/x-zip-compressed'] = ['.zip']
-        } else if (trimmed === 'application/x-zip-compressed') {
-          result['application/zip'] = ['.zip']
+        if (trimmed === "application/zip") {
+          result["application/x-zip-compressed"] = [".zip"];
+        } else if (trimmed === "application/x-zip-compressed") {
+          result["application/zip"] = [".zip"];
         }
       }
     }
@@ -209,63 +259,65 @@ export function FileUpload({
     // If we have standalone extensions, add them under a wildcard or specific MIME
     if (extensions.length > 0) {
       // Add extensions to existing MIME types or create a catch-all
-      const hasZip = extensions.includes('.zip')
+      const hasZip = extensions.includes(".zip");
       if (hasZip) {
-        result['application/zip'] = ['.zip']
-        result['application/x-zip-compressed'] = ['.zip']
+        result["application/zip"] = [".zip"];
+        result["application/x-zip-compressed"] = [".zip"];
       }
       // For other extensions, add to application/octet-stream as fallback
-      const otherExts = extensions.filter(e => e !== '.zip')
+      const otherExts = extensions.filter((e) => e !== ".zip");
       if (otherExts.length > 0) {
-        result['application/octet-stream'] = otherExts
+        result["application/octet-stream"] = otherExts;
       }
     }
 
-    return result
-  }, [accept])
+    return result;
+  }, [accept]);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     accept: dropzoneAccept,
     multiple: multiple && urls.length < maxFiles,
     disabled: disabled || isUploading || (!multiple && urls.length >= 1),
-    maxFiles: maxFiles - urls.length
-  })
+    maxFiles: maxFiles - urls.length,
+  });
 
   const removeFile = (index: number) => {
-    const newUrls = urls.filter((_, i) => i !== index)
+    const newUrls = urls.filter((_, i) => i !== index);
     if (multiple) {
-      onChange(newUrls)
+      onChange(newUrls);
     } else {
-      onChange('')
+      onChange("");
     }
-  }
-
-
+  };
 
   const getFileIcon = () => {
-    if (accept.includes('video')) return FileVideo
-    if (accept.includes('audio')) return FileAudio
-    if (accept.includes('zip') || accept.includes('application')) return FileArchive
-    if (accept.includes('image')) return Image
-    return FileIcon
-  }
+    if (accept.includes("video")) return FileVideo;
+    if (accept.includes("audio")) return FileAudio;
+    if (accept.includes("zip") || accept.includes("application"))
+      return FileArchive;
+    if (accept.includes("image")) return Image;
+    return FileIcon;
+  };
 
-  const canAddMore = multiple ? urls.length < maxFiles : urls.length === 0
+  const canAddMore = multiple ? urls.length < maxFiles : urls.length === 0;
 
   const handleCancelUpload = useCallback(() => {
     if (abortControllerRef.current) {
-      abortControllerRef.current.abort()
+      abortControllerRef.current.abort();
     }
-  }, [])
-
-  const moveUrl = useCallback((fromIndex: number, toIndex: number) => {
-    if (fromIndex === toIndex) return
-    const nextUrls = [...urls]
-    const [moved] = nextUrls.splice(fromIndex, 1)
-    nextUrls.splice(toIndex, 0, moved)
-    onChange(multiple ? nextUrls : nextUrls[0] || '')
-  }, [urls, onChange, multiple])
+  }, []);
+
+  const moveUrl = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (fromIndex === toIndex) return;
+      const nextUrls = [...urls];
+      const [moved] = nextUrls.splice(fromIndex, 1);
+      nextUrls.splice(toIndex, 0, moved);
+      onChange(multiple ? nextUrls : nextUrls[0] || "");
+    },
+    [urls, onChange, multiple],
+  );
 
   return (
     <div className="space-y-2">
@@ -273,48 +325,54 @@ export function FileUpload({
       {urls.length > 0 && (
         <div className="flex gap-2 flex-wrap">
           {urls.map((url, index) => {
-            const FileIconComponent = getFileIcon()
-            const hasImageExt = url.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i)
-            const hasVideoExt = url.match(/\.(mp4|webm|mov|avi|mkv)(\?.*)?$/i)
-            const hasAudioExt = url.match(/\.(mp3|wav|ogg|webm|m4a)(\?.*)?$/i)
+            const FileIconComponent = getFileIcon();
+            const hasImageExt = url.match(/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i);
+            const hasVideoExt = url.match(/\.(mp4|webm|mov|avi|mkv)(\?.*)?$/i);
+            const hasAudioExt = url.match(/\.(mp3|wav|ogg|webm|m4a)(\?.*)?$/i);
             // Fallback: if accept type matches but URL has no recognized extension, trust accept
-            const isImage = accept.includes('image') && (hasImageExt || (!hasVideoExt && !hasAudioExt))
-            const isVideo = accept.includes('video') && (hasVideoExt || (!hasImageExt && !hasAudioExt))
-            const isAudio = accept.includes('audio') && (hasAudioExt || (!hasImageExt && !hasVideoExt))
+            const isImage =
+              accept.includes("image") &&
+              (hasImageExt || (!hasVideoExt && !hasAudioExt));
+            const isVideo =
+              accept.includes("video") &&
+              (hasVideoExt || (!hasImageExt && !hasAudioExt));
+            const isAudio =
+              accept.includes("audio") &&
+              (hasAudioExt || (!hasImageExt && !hasVideoExt));
 
             const handlePreview = () => {
-              setPreviewUrl(url)
-              if (isImage) setPreviewType('image')
-              else if (isVideo) setPreviewType('video')
-              else if (isAudio) setPreviewType('audio')
-            }
+              setPreviewUrl(url);
+              if (isImage) setPreviewType("image");
+              else if (isVideo) setPreviewType("video");
+              else if (isAudio) setPreviewType("audio");
+            };
 
             return (
               <div
                 key={index}
                 className={cn(
-                  'relative group rounded-lg border bg-muted/50 overflow-hidden h-28 w-28 flex-shrink-0 cursor-pointer transition-all duration-200 hover:shadow-lg hover:shadow-primary/10 hover:border-primary/30 hover:scale-[1.03]',
-                  draggingIndex === index && 'opacity-60 scale-95'
+                  "relative group rounded-lg border bg-muted/50 overflow-hidden h-28 w-28 flex-shrink-0 cursor-pointer transition-all duration-200 hover:shadow-lg hover:shadow-primary/10 hover:border-primary/30 hover:scale-[1.03]",
+                  draggingIndex === index && "opacity-60 scale-95",
                 )}
                 draggable={multiple && !disabled}
                 onDragStart={(e) => {
-                  if (!multiple || disabled) return
-                  e.dataTransfer.effectAllowed = 'move'
-                  e.dataTransfer.setData('text/plain', String(index))
-                  setDraggingIndex(index)
+                  if (!multiple || disabled) return;
+                  e.dataTransfer.effectAllowed = "move";
+                  e.dataTransfer.setData("text/plain", String(index));
+                  setDraggingIndex(index);
                 }}
                 onDragOver={(e) => {
-                  if (!multiple || disabled) return
-                  e.preventDefault()
-                  e.dataTransfer.dropEffect = 'move'
-                  if (draggingIndex === null || draggingIndex === index) return
-                  moveUrl(draggingIndex, index)
-                  setDraggingIndex(index)
+                  if (!multiple || disabled) return;
+                  e.preventDefault();
+                  e.dataTransfer.dropEffect = "move";
+                  if (draggingIndex === null || draggingIndex === index) return;
+                  moveUrl(draggingIndex, index);
+                  setDraggingIndex(index);
                 }}
                 onDrop={(e) => {
-                  if (!multiple || disabled) return
-                  e.preventDefault()
-                  setDraggingIndex(null)
+                  if (!multiple || disabled) return;
+                  e.preventDefault();
+                  setDraggingIndex(null);
                 }}
                 onDragEnd={() => setDraggingIndex(null)}
                 onClick={handlePreview}
@@ -333,8 +391,8 @@ export function FileUpload({
                     playsInline
                     onMouseEnter={(e) => e.currentTarget.play()}
                     onMouseLeave={(e) => {
-                      e.currentTarget.pause()
-                      e.currentTarget.currentTime = 0
+                      e.currentTarget.pause();
+                      e.currentTarget.currentTime = 0;
                     }}
                   />
                 ) : isAudio ? (
@@ -351,15 +409,15 @@ export function FileUpload({
                   size="icon"
                   className="absolute top-0.5 right-0.5 h-5 w-5 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity"
                   onClick={(e) => {
-                    e.stopPropagation()
-                    removeFile(index)
+                    e.stopPropagation();
+                    removeFile(index);
                   }}
                   disabled={disabled}
                 >
                   <X className="h-3 w-3" />
                 </Button>
               </div>
-            )
+            );
           })}
         </div>
       )}
@@ -368,79 +426,99 @@ export function FileUpload({
       {canAddMore && (
         <div className="space-y-1.5">
           {/* Camera capture */}
-          {captureMode === 'camera' && (
+          {captureMode === "camera" && (
             <CameraCapture
               onCapture={handleCapture}
-              onClose={() => setCaptureMode('upload')}
+              onClose={() => setCaptureMode("upload")}
               disabled={disabled || isUploading}
             />
           )}
 
           {/* Video recorder */}
-          {captureMode === 'video' && (
+          {captureMode === "video" && (
             <VideoRecorder
               onRecord={handleCapture}
-              onClose={() => setCaptureMode('upload')}
+              onClose={() => setCaptureMode("upload")}
               disabled={disabled || isUploading}
             />
           )}
 
           {/* Audio recorder */}
-          {captureMode === 'audio' && (
+          {captureMode === "audio" && (
             <AudioRecorder
               onRecord={handleCapture}
-              onClose={() => setCaptureMode('upload')}
+              onClose={() => setCaptureMode("upload")}
               disabled={disabled || isUploading}
             />
           )}
 
           {/* Mask editor */}
-          {captureMode === 'mask' && (
+          {captureMode === "mask" && (
             <MaskEditor
               referenceImageUrl={referenceImageUrl}
               referenceVideoUrl={referenceVideoUrl}
               onComplete={handleCapture}
-              onClose={() => setCaptureMode('upload')}
+              onClose={() => setCaptureMode("upload")}
               disabled={disabled || isUploading}
             />
           )}
 
           {/* File upload dropzone with integrated controls */}
-          {captureMode === 'upload' && (
+          {captureMode === "upload" && (
             <div className="flex gap-1.5 items-stretch">
               {/* Dropzone */}
               <div
                 {...getRootProps()}
                 className={cn(
-                  'flex-1 border-2 border-dashed rounded-lg px-3 py-2 cursor-pointer transition-all duration-200 min-h-[38px] flex items-center',
-                  isDragActive && 'border-primary bg-primary/5 shadow-inner shadow-primary/10 scale-[1.01]',
-                  disabled && 'opacity-50 cursor-not-allowed',
-                  !disabled && !isDragActive && 'hover:border-primary/50 hover:bg-muted/30 hover:shadow-sm'
+                  "flex-1 border-2 border-dashed rounded-lg px-3 py-2 cursor-pointer transition-all duration-200 min-h-[38px] flex items-center",
+                  isDragActive &&
+                    "border-primary bg-primary/5 shadow-inner shadow-primary/10 scale-[1.01]",
+                  disabled && "opacity-50 cursor-not-allowed",
+                  !disabled &&
+                    !isDragActive &&
+                    "hover:border-primary/50 hover:bg-muted/30 hover:shadow-sm",
                 )}
               >
                 <input {...getInputProps()} />
                 {isUploading ? (
-                  <div className="flex items-center gap-2 w-full justify-center">
-                    <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
-                    <span className="text-xs text-muted-foreground">{t('playground.capture.uploading')}</span>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleCancelUpload()
-                      }}
-                      className="h-5 px-1.5 text-xs text-muted-foreground hover:text-destructive"
-                    >
-                      <X className="h-3 w-3 mr-0.5" />
-                      {t('common.cancel')}
-                    </Button>
+                  <div className="flex flex-col gap-1.5 w-full px-1">
+                    <div className="flex items-center gap-2 justify-center">
+                      <Loader2 className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
+                      <span className="text-xs text-muted-foreground">
+                        {t("playground.capture.uploading")}
+                        {uploadProgress > 0 && uploadProgress < 100
+                          ? ` ${uploadProgress}%`
+                          : ""}
+                      </span>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleCancelUpload();
+                        }}
+                        className="h-5 px-1.5 text-xs text-muted-foreground hover:text-destructive"
+                      >
+                        <X className="h-3 w-3 mr-0.5" />
+                        {t("common.cancel")}
+                      </Button>
+                    </div>
+                    {uploadProgress > 0 && (
+                      <div className="w-full h-1 rounded-full bg-muted overflow-hidden">
+                        <div
+                          className="h-full rounded-full bg-primary transition-all duration-200"
+                          style={{ width: `${uploadProgress}%` }}
+                        />
+                      </div>
+                    )}
                   </div>
                 ) : (
                   <div className="flex items-center gap-1.5 w-full justify-center">
                     <Upload className="h-3.5 w-3.5 text-muted-foreground" />
-                    <span className="text-xs text-muted-foreground">{t('playground.capture.clickToUpload')}</span>
+                    <span className="text-xs text-muted-foreground">
+                      {t("playground.capture.clickToUpload")}
+                    </span>
                   </div>
                 )}
               </div>
@@ -453,10 +531,10 @@ export function FileUpload({
                       type="button"
                       variant="outline"
                       size="icon"
-                      onClick={() => setCaptureMode('camera')}
+                      onClick={() => setCaptureMode("camera")}
                       disabled={disabled || isUploading}
                       className="h-[38px] w-[38px]"
-                      title={t('playground.capture.camera')}
+                      title={t("playground.capture.camera")}
                     >
                       <Camera className="h-4 w-4" />
                     </Button>
@@ -466,10 +544,10 @@ export function FileUpload({
                       type="button"
                       variant="outline"
                       size="icon"
-                      onClick={() => setCaptureMode('video')}
+                      onClick={() => setCaptureMode("video")}
                       disabled={disabled || isUploading}
                       className="h-[38px] w-[38px]"
-                      title={t('playground.capture.record')}
+                      title={t("playground.capture.record")}
                     >
                       <Video className="h-4 w-4" />
                     </Button>
@@ -479,10 +557,10 @@ export function FileUpload({
                       type="button"
                       variant="outline"
                       size="icon"
-                      onClick={() => setCaptureMode('audio')}
+                      onClick={() => setCaptureMode("audio")}
                       disabled={disabled || isUploading}
                       className="h-[38px] w-[38px]"
-                      title={t('playground.capture.audio')}
+                      title={t("playground.capture.audio")}
                     >
                       <Mic className="h-4 w-4" />
                     </Button>
@@ -492,10 +570,10 @@ export function FileUpload({
                       type="button"
                       variant="outline"
                       size="icon"
-                      onClick={() => setCaptureMode('mask')}
+                      onClick={() => setCaptureMode("mask")}
                       disabled={disabled || isUploading}
                       className="h-[38px] w-[38px]"
-                      title={t('playground.capture.drawMask')}
+                      title={t("playground.capture.drawMask")}
                     >
                       <Brush className="h-4 w-4" />
                     </Button>
@@ -506,14 +584,14 @@ export function FileUpload({
           )}
 
           {/* URL input - only show in upload mode */}
-          {captureMode === 'upload' && (
+          {captureMode === "upload" && (
             <div className="flex gap-1.5">
               <Input
                 type="url"
-                placeholder={t('playground.capture.enterUrl')}
+                placeholder={t("playground.capture.enterUrl")}
                 value={urlInput}
                 onChange={(e) => setUrlInput(e.target.value)}
-                onKeyDown={(e) => e.key === 'Enter' && handleAddUrl()}
+                onKeyDown={(e) => e.key === "Enter" && handleAddUrl()}
                 disabled={disabled}
                 className="flex-1 h-8 text-xs"
               />
@@ -525,7 +603,7 @@ export function FileUpload({
                   disabled={disabled}
                   className="h-8 px-3"
                 >
-                  {t('playground.capture.add')}
+                  {t("playground.capture.add")}
                 </Button>
               )}
             </div>
@@ -534,21 +612,22 @@ export function FileUpload({
       )}
 
       {/* Error */}
-      {error && (
-        <p className="text-xs text-destructive">{error}</p>
-      )}
+      {error && <p className="text-xs text-destructive">{error}</p>}
 
       {/* Preview Dialog */}
-      <Dialog open={!!previewUrl} onOpenChange={(open) => !open && setPreviewUrl(null)}>
+      <Dialog
+        open={!!previewUrl}
+        onOpenChange={(open) => !open && setPreviewUrl(null)}
+      >
         <DialogContent className="max-w-4xl p-0 overflow-hidden">
-          {previewType === 'image' && previewUrl && (
+          {previewType === "image" && previewUrl && (
             <img
               src={previewUrl}
               alt="Preview"
               className="w-full h-auto max-h-[80vh] object-contain"
             />
           )}
-          {previewType === 'video' && previewUrl && (
+          {previewType === "video" && previewUrl && (
             <video
               src={previewUrl}
               controls
@@ -556,20 +635,13 @@ export function FileUpload({
               className="w-full h-auto max-h-[80vh]"
             />
           )}
-          {previewType === 'audio' && previewUrl && (
+          {previewType === "audio" && previewUrl && (
             <div className="p-8">
-              <audio
-                src={previewUrl}
-                controls
-                autoPlay
-                className="w-full"
-              />
+              <audio src={previewUrl} controls autoPlay className="w-full" />
             </div>
           )}
         </DialogContent>
       </Dialog>
-
-
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/FlappyBird.tsx b/src/components/playground/FlappyBird.tsx
index e05e2d45..203bc645 100644
--- a/src/components/playground/FlappyBird.tsx
+++ b/src/components/playground/FlappyBird.tsx
@@ -1,58 +1,58 @@
-import { useEffect, useRef, useState, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Image as ImageIcon, Video, Music } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
+import { useEffect, useRef, useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Image as ImageIcon, Video, Music } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 
 interface FlappyBirdProps {
-  onGameStart?: () => void
-  onGameEnd?: (score: number) => void
-  onGameQuit?: () => void
-  isTaskRunning?: boolean
-  taskStatus?: string
+  onGameStart?: () => void;
+  onGameEnd?: (score: number) => void;
+  onGameQuit?: () => void;
+  isTaskRunning?: boolean;
+  taskStatus?: string;
   idleMessage?: {
-    title: string
-    subtitle: string
-  }
-  hasResults?: boolean
-  onViewResults?: () => void
-  modelId?: string
+    title: string;
+    subtitle: string;
+  };
+  hasResults?: boolean;
+  onViewResults?: () => void;
+  modelId?: string;
 }
 
-function inferOutputType(modelId?: string): 'image' | 'video' | 'audio' {
-  if (!modelId) return 'image'
-  const id = modelId.toLowerCase()
-  if (/video|animate|motion/.test(id)) return 'video'
-  if (/audio|music|speech|tts/.test(id)) return 'audio'
-  return 'image'
+function inferOutputType(modelId?: string): "image" | "video" | "audio" {
+  if (!modelId) return "image";
+  const id = modelId.toLowerCase();
+  if (/video|animate|motion/.test(id)) return "video";
+  if (/audio|music|speech|tts/.test(id)) return "audio";
+  return "image";
 }
 
 interface Bird {
-  x: number
-  y: number
-  velocity: number
-  width: number
-  height: number
+  x: number;
+  y: number;
+  velocity: number;
+  width: number;
+  height: number;
 }
 
 interface Pipe {
-  x: number
-  topHeight: number
-  passed: boolean
+  x: number;
+  topHeight: number;
+  passed: boolean;
 }
 
-type GameState = 'idle' | 'playing' | 'gameover'
+type GameState = "idle" | "playing" | "gameover";
 
 // Physics values in pixels per second (FPS-independent)
-const TARGET_FPS = 60
-const GRAVITY = 0.4 * TARGET_FPS * TARGET_FPS  // pixels/sec²
-const JUMP_STRENGTH = -7 * TARGET_FPS           // pixels/sec
-const PIPE_SPEED = 3 * TARGET_FPS               // pixels/sec
-const PIPE_GAP = 140
-const PIPE_WIDTH = 52
-const PIPE_SPACING = 200
-const BIRD_SIZE = 36
-const PIXEL_SIZE = 3
+const TARGET_FPS = 60;
+const GRAVITY = 0.4 * TARGET_FPS * TARGET_FPS; // pixels/sec²
+const JUMP_STRENGTH = -7 * TARGET_FPS; // pixels/sec
+const PIPE_SPEED = 3 * TARGET_FPS; // pixels/sec
+const PIPE_GAP = 140;
+const PIPE_WIDTH = 52;
+const PIPE_SPACING = 200;
+const BIRD_SIZE = 36;
+const PIXEL_SIZE = 3;
 
 // Pixel art bird body (13x11 grid) - classic Flappy Bird style
 // Colors: 0=transparent, 1=body, 3=eye white, 4=eye pupil, 5=beak top, 6=beak bottom, 7=body shadow, 8=outline
@@ -68,7 +68,7 @@ const BIRD_BODY = [
   [0, 8, 7, 7, 1, 1, 1, 1, 1, 8, 8, 0, 0],
   [0, 0, 8, 7, 7, 1, 1, 1, 1, 8, 0, 0, 0],
   [0, 0, 0, 8, 8, 8, 8, 8, 8, 0, 0, 0, 0],
-]
+];
 
 // Wing animation frames (4x3 each) - positioned on left side of body
 const WING_FRAMES = [
@@ -90,98 +90,342 @@ const WING_FRAMES = [
     [0, 8, 2, 8],
     [8, 2, 2, 8],
   ],
-]
+];
 
 // Pixel art letters and numbers (5x5 each)
 const PIXEL_LETTERS: Record<string, number[][]> = {
-  A: [[0,1,1,1,0],[1,0,0,0,1],[1,1,1,1,1],[1,0,0,0,1],[1,0,0,0,1]],
-  B: [[1,1,1,1,0],[1,0,0,0,1],[1,1,1,1,0],[1,0,0,0,1],[1,1,1,1,0]],
-  C: [[0,1,1,1,1],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[0,1,1,1,1]],
-  D: [[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0]],
-  E: [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,1,1,1,1]],
-  F: [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0]],
-  G: [[1,1,1,1,1],[1,0,0,0,0],[1,0,1,1,1],[1,0,0,0,1],[1,1,1,1,1]],
-  H: [[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,1],[1,0,0,0,1],[1,0,0,0,1]],
-  I: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[1,1,1,1,1]],
-  J: [[0,0,0,0,1],[0,0,0,0,1],[0,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],
-  K: [[1,0,0,0,1],[1,0,0,1,0],[1,1,1,0,0],[1,0,0,1,0],[1,0,0,0,1]],
-  L: [[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,1]],
-  M: [[1,0,0,0,1],[1,1,0,1,1],[1,0,1,0,1],[1,0,0,0,1],[1,0,0,0,1]],
-  N: [[1,0,0,0,1],[1,1,0,0,1],[1,0,1,0,1],[1,0,0,1,1],[1,0,0,0,1]],
-  O: [[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],
-  P: [[1,1,1,1,0],[1,0,0,0,1],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0]],
-  Q: [[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,1,0],[0,1,1,0,1]],
-  R: [[1,1,1,1,0],[1,0,0,0,1],[1,1,1,1,0],[1,0,0,1,0],[1,0,0,0,1]],
-  S: [[0,1,1,1,1],[1,0,0,0,0],[0,1,1,1,0],[0,0,0,0,1],[1,1,1,1,0]],
-  T: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0]],
-  U: [[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],
-  V: [[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0]],
-  W: [[1,0,0,0,1],[1,0,0,0,1],[1,0,1,0,1],[1,1,0,1,1],[1,0,0,0,1]],
-  X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],
-  Y: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0]],
-  Z: [[1,1,1,1,1],[0,0,0,1,0],[0,0,1,0,0],[0,1,0,0,0],[1,1,1,1,1]],
-  '0': [[0,1,1,1,0],[1,0,0,1,1],[1,0,1,0,1],[1,1,0,0,1],[0,1,1,1,0]],
-  '1': [[0,0,1,0,0],[0,1,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,1,1,1,0]],
-  '2': [[0,1,1,1,0],[1,0,0,0,1],[0,0,1,1,0],[0,1,0,0,0],[1,1,1,1,1]],
-  '3': [[1,1,1,1,0],[0,0,0,0,1],[0,1,1,1,0],[0,0,0,0,1],[1,1,1,1,0]],
-  '4': [[1,0,0,1,0],[1,0,0,1,0],[1,1,1,1,1],[0,0,0,1,0],[0,0,0,1,0]],
-  '5': [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[0,0,0,0,1],[1,1,1,1,0]],
-  '6': [[0,1,1,1,0],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,1],[0,1,1,1,0]],
-  '7': [[1,1,1,1,1],[0,0,0,0,1],[0,0,0,1,0],[0,0,1,0,0],[0,0,1,0,0]],
-  '8': [[0,1,1,1,0],[1,0,0,0,1],[0,1,1,1,0],[1,0,0,0,1],[0,1,1,1,0]],
-  '9': [[0,1,1,1,0],[1,0,0,0,1],[0,1,1,1,1],[0,0,0,0,1],[0,1,1,1,0]],
-  ':': [[0,0,0,0,0],[0,0,1,0,0],[0,0,0,0,0],[0,0,1,0,0],[0,0,0,0,0]],
-  '!': [[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,0,0,0],[0,0,1,0,0]],
-  '*': [[0,0,0,0,0],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[0,0,0,0,0]],
-}
-
-export function FlappyBird({ onGameStart, onGameEnd, onGameQuit, isTaskRunning, taskStatus, idleMessage, hasResults, onViewResults, modelId }: FlappyBirdProps) {
-  const { t } = useTranslation()
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const gameLoopRef = useRef<number | null>(null)
-  const [gameState, setGameState] = useState<GameState>('idle')
-  const gameStateRef = useRef<GameState>('idle')
-  const [_score, setScore] = useState(0)
+  A: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+  ],
+  B: [
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  C: [
+    [0, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+    [0, 1, 1, 1, 1],
+  ],
+  D: [
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  E: [
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 1],
+  ],
+  F: [
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+  ],
+  G: [
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [1, 0, 1, 1, 1],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 1],
+  ],
+  H: [
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+  ],
+  I: [
+    [1, 1, 1, 1, 1],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [1, 1, 1, 1, 1],
+  ],
+  J: [
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  K: [
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 1, 0],
+    [1, 1, 1, 0, 0],
+    [1, 0, 0, 1, 0],
+    [1, 0, 0, 0, 1],
+  ],
+  L: [
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 1],
+  ],
+  M: [
+    [1, 0, 0, 0, 1],
+    [1, 1, 0, 1, 1],
+    [1, 0, 1, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+  ],
+  N: [
+    [1, 0, 0, 0, 1],
+    [1, 1, 0, 0, 1],
+    [1, 0, 1, 0, 1],
+    [1, 0, 0, 1, 1],
+    [1, 0, 0, 0, 1],
+  ],
+  O: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  P: [
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+  ],
+  Q: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 1, 0],
+    [0, 1, 1, 0, 1],
+  ],
+  R: [
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 1, 0],
+    [1, 0, 0, 0, 1],
+  ],
+  S: [
+    [0, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [0, 1, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  T: [
+    [1, 1, 1, 1, 1],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+  ],
+  U: [
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  V: [
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+  ],
+  W: [
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 1, 0, 1],
+    [1, 1, 0, 1, 1],
+    [1, 0, 0, 0, 1],
+  ],
+  X: [
+    [1, 0, 0, 0, 1],
+    [0, 1, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 1, 0, 1, 0],
+    [1, 0, 0, 0, 1],
+  ],
+  Y: [
+    [1, 0, 0, 0, 1],
+    [0, 1, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+  ],
+  Z: [
+    [1, 1, 1, 1, 1],
+    [0, 0, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 1, 0, 0, 0],
+    [1, 1, 1, 1, 1],
+  ],
+  "0": [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 1, 1],
+    [1, 0, 1, 0, 1],
+    [1, 1, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  "1": [
+    [0, 0, 1, 0, 0],
+    [0, 1, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 1, 1, 1, 0],
+  ],
+  "2": [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 0, 1, 1, 0],
+    [0, 1, 0, 0, 0],
+    [1, 1, 1, 1, 1],
+  ],
+  "3": [
+    [1, 1, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  "4": [
+    [1, 0, 0, 1, 0],
+    [1, 0, 0, 1, 0],
+    [1, 1, 1, 1, 1],
+    [0, 0, 0, 1, 0],
+    [0, 0, 0, 1, 0],
+  ],
+  "5": [
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  "6": [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  "7": [
+    [1, 1, 1, 1, 1],
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+  ],
+  "8": [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  "9": [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 1],
+    [0, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  ":": [
+    [0, 0, 0, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 0, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 0, 0, 0],
+  ],
+  "!": [
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 0, 0, 0],
+    [0, 0, 1, 0, 0],
+  ],
+  "*": [
+    [0, 0, 0, 0, 0],
+    [0, 1, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 1, 0, 1, 0],
+    [0, 0, 0, 0, 0],
+  ],
+};
+
+export function FlappyBird({
+  onGameStart,
+  onGameEnd,
+  onGameQuit,
+  isTaskRunning,
+  taskStatus,
+  idleMessage,
+  hasResults,
+  onViewResults,
+  modelId,
+}: FlappyBirdProps) {
+  const { t } = useTranslation();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const gameLoopRef = useRef<number | null>(null);
+  const [gameState, setGameState] = useState<GameState>("idle");
+  const gameStateRef = useRef<GameState>("idle");
+  const [_score, setScore] = useState(0);
   const [highScore, setHighScore] = useState(() => {
-    const saved = localStorage.getItem('flappybird_highscore')
-    return saved ? parseInt(saved, 10) : 0
-  })
-  const highScoreRef = useRef(highScore)
-  const hasResultsRef = useRef(hasResults)
+    const saved = localStorage.getItem("flappybird_highscore");
+    return saved ? parseInt(saved, 10) : 0;
+  });
+  const highScoreRef = useRef(highScore);
+  const hasResultsRef = useRef(hasResults);
 
   // Keep refs in sync with state
   useEffect(() => {
-    gameStateRef.current = gameState
-  }, [gameState])
+    gameStateRef.current = gameState;
+  }, [gameState]);
 
   useEffect(() => {
-    highScoreRef.current = highScore
-  }, [highScore])
+    highScoreRef.current = highScore;
+  }, [highScore]);
 
   useEffect(() => {
-    hasResultsRef.current = hasResults
-  }, [hasResults])
+    hasResultsRef.current = hasResults;
+  }, [hasResults]);
 
   // Get theme colors
   const getThemeColors = useCallback(() => {
-    const root = document.documentElement
-    const isDark = root.classList.contains('dark')
-    return { isDark }
-  }, [])
+    const root = document.documentElement;
+    const isDark = root.classList.contains("dark");
+    return { isDark };
+  }, []);
 
   const birdRef = useRef<Bird>({
     x: 80,
     y: 200,
     velocity: 0,
     width: BIRD_SIZE,
-    height: BIRD_SIZE
-  })
-  const pipesRef = useRef<Pipe[]>([])
-  const scoreRef = useRef(0)
-  const flapTimeRef = useRef(0) // Track when last flap happened
-  const scrollOffsetRef = useRef(0) // Track background scroll
-  const lastFrameTimeRef = useRef(0) // Track last frame time for delta time
+    height: BIRD_SIZE,
+  });
+  const pipesRef = useRef<Pipe[]>([]);
+  const scoreRef = useRef(0);
+  const flapTimeRef = useRef(0); // Track when last flap happened
+  const scrollOffsetRef = useRef(0); // Track background scroll
+  const lastFrameTimeRef = useRef(0); // Track last frame time for delta time
 
   const resetGame = useCallback(() => {
     birdRef.current = {
@@ -189,221 +433,257 @@ export function FlappyBird({ onGameStart, onGameEnd, onGameQuit, isTaskRunning,
       y: 200,
       velocity: 0,
       width: BIRD_SIZE,
-      height: BIRD_SIZE
-    }
-    pipesRef.current = []
-    scoreRef.current = 0
-    setScore(0)
-  }, [])
+      height: BIRD_SIZE,
+    };
+    pipesRef.current = [];
+    scoreRef.current = 0;
+    setScore(0);
+  }, []);
 
   const jump = useCallback(() => {
-    if (gameStateRef.current === 'idle') {
-      gameStateRef.current = 'playing'
-      setGameState('playing')
-      onGameStart?.()
-      resetGame()
+    if (gameStateRef.current === "idle") {
+      gameStateRef.current = "playing";
+      setGameState("playing");
+      onGameStart?.();
+      resetGame();
     }
-    if (gameStateRef.current === 'playing') {
-      birdRef.current.velocity = JUMP_STRENGTH
-      flapTimeRef.current = Date.now() // Trigger flap animation
+    if (gameStateRef.current === "playing") {
+      birdRef.current.velocity = JUMP_STRENGTH;
+      flapTimeRef.current = Date.now(); // Trigger flap animation
     }
-  }, [onGameStart, resetGame])
+  }, [onGameStart, resetGame]);
 
   const restart = useCallback(() => {
-    resetGame()
-    gameStateRef.current = 'playing'
-    setGameState('playing')
-    onGameStart?.()
-  }, [resetGame, onGameStart])
+    resetGame();
+    gameStateRef.current = "playing";
+    setGameState("playing");
+    onGameStart?.();
+  }, [resetGame, onGameStart]);
 
   const endGame = useCallback(() => {
-    gameStateRef.current = 'gameover'
-    setGameState('gameover')
-    const finalScore = scoreRef.current
+    gameStateRef.current = "gameover";
+    setGameState("gameover");
+    const finalScore = scoreRef.current;
     if (finalScore > highScoreRef.current) {
-      highScoreRef.current = finalScore
-      setHighScore(finalScore)
-      localStorage.setItem('flappybird_highscore', String(finalScore))
+      highScoreRef.current = finalScore;
+      setHighScore(finalScore);
+      localStorage.setItem("flappybird_highscore", String(finalScore));
     }
-    onGameEnd?.(finalScore)
-  }, [onGameEnd])
+    onGameEnd?.(finalScore);
+  }, [onGameEnd]);
 
   const quitGame = useCallback(() => {
-    resetGame()
-    gameStateRef.current = 'idle'
-    setGameState('idle')
-    onGameQuit?.()
-  }, [resetGame, onGameQuit])
+    resetGame();
+    gameStateRef.current = "idle";
+    setGameState("idle");
+    onGameQuit?.();
+  }, [resetGame, onGameQuit]);
 
   // Handle keyboard input
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Don't capture keys when user is typing in form elements
-      const target = e.target as HTMLElement
-      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-        return
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
       }
 
-      if (e.code === 'Space' || e.code === 'ArrowUp') {
-        e.preventDefault()
-        if (gameStateRef.current === 'gameover') {
-          restart()
+      if (e.code === "Space" || e.code === "ArrowUp") {
+        e.preventDefault();
+        if (gameStateRef.current === "gameover") {
+          restart();
         } else {
-          jump()
+          jump();
         }
       }
-    }
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [jump, restart])
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [jump, restart]);
 
   // Draw pixel art text
-  const drawPixelText = useCallback((ctx: CanvasRenderingContext2D, text: string, x: number, y: number, pixelSize: number, color: string) => {
-    ctx.fillStyle = color
-    const letters = text.split('')
-    let offsetX = 0
-
-    letters.forEach((letter) => {
-      const sprite = PIXEL_LETTERS[letter]
-      if (sprite) {
-        sprite.forEach((row, rowIndex) => {
-          row.forEach((pixel, colIndex) => {
-            if (pixel) {
-              ctx.fillRect(
-                x + offsetX + colIndex * pixelSize,
-                y + rowIndex * pixelSize,
-                pixelSize,
-                pixelSize
-              )
-            }
-          })
-        })
-        offsetX += 6 * pixelSize // 5 pixels + 1 spacing
-      } else if (letter === ' ') {
-        offsetX += 4 * pixelSize
-      }
-    })
-  }, [])
+  const drawPixelText = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      text: string,
+      x: number,
+      y: number,
+      pixelSize: number,
+      color: string,
+    ) => {
+      ctx.fillStyle = color;
+      const letters = text.split("");
+      let offsetX = 0;
+
+      letters.forEach((letter) => {
+        const sprite = PIXEL_LETTERS[letter];
+        if (sprite) {
+          sprite.forEach((row, rowIndex) => {
+            row.forEach((pixel, colIndex) => {
+              if (pixel) {
+                ctx.fillRect(
+                  x + offsetX + colIndex * pixelSize,
+                  y + rowIndex * pixelSize,
+                  pixelSize,
+                  pixelSize,
+                );
+              }
+            });
+          });
+          offsetX += 6 * pixelSize; // 5 pixels + 1 spacing
+        } else if (letter === " ") {
+          offsetX += 4 * pixelSize;
+        }
+      });
+    },
+    [],
+  );
 
   // Draw pixel bird with animated wing (colorful like original Flappy Bird)
-  const drawPixelBird = useCallback((ctx: CanvasRenderingContext2D, x: number, y: number, _isDark: boolean) => {
-    // 0=transparent, 1=body yellow, 2=wing orange, 3=eye white, 4=eye pupil, 5=beak orange, 6=beak red, 7=body dark yellow, 8=outline
-    const colors = [
-      'transparent',  // 0
-      '#F8E858',      // 1 - body yellow
-      '#F8A830',      // 2 - wing orange
-      '#FFFFFF',      // 3 - eye white
-      '#000000',      // 4 - eye pupil
-      '#FA8132',      // 5 - beak orange
-      '#DC4D32',      // 6 - beak red
-      '#D8B828',      // 7 - body darker yellow
-      '#543818',      // 8 - outline brown
-    ]
-
-    const pixelSize = PIXEL_SIZE
-    const startX = x - (BIRD_BODY[0].length * pixelSize) / 2
-    const startY = y - (BIRD_BODY.length * pixelSize) / 2
-
-    // Draw body
-    BIRD_BODY.forEach((row, rowIndex) => {
-      row.forEach((pixel, colIndex) => {
-        if (pixel > 0) {
-          ctx.fillStyle = colors[pixel]
-          ctx.fillRect(
-            startX + colIndex * pixelSize,
-            startY + rowIndex * pixelSize,
-            pixelSize,
-            pixelSize
-          )
-        }
-      })
-    })
+  const drawPixelBird = useCallback(
+    (ctx: CanvasRenderingContext2D, x: number, y: number, _isDark: boolean) => {
+      // 0=transparent, 1=body yellow, 2=wing orange, 3=eye white, 4=eye pupil, 5=beak orange, 6=beak red, 7=body dark yellow, 8=outline
+      const colors = [
+        "transparent", // 0
+        "#F8E858", // 1 - body yellow
+        "#F8A830", // 2 - wing orange
+        "#FFFFFF", // 3 - eye white
+        "#000000", // 4 - eye pupil
+        "#FA8132", // 5 - beak orange
+        "#DC4D32", // 6 - beak red
+        "#D8B828", // 7 - body darker yellow
+        "#543818", // 8 - outline brown
+      ];
+
+      const pixelSize = PIXEL_SIZE;
+      const startX = x - (BIRD_BODY[0].length * pixelSize) / 2;
+      const startY = y - (BIRD_BODY.length * pixelSize) / 2;
+
+      // Draw body
+      BIRD_BODY.forEach((row, rowIndex) => {
+        row.forEach((pixel, colIndex) => {
+          if (pixel > 0) {
+            ctx.fillStyle = colors[pixel];
+            ctx.fillRect(
+              startX + colIndex * pixelSize,
+              startY + rowIndex * pixelSize,
+              pixelSize,
+              pixelSize,
+            );
+          }
+        });
+      });
 
-    // Draw animated wing based on flap timing
-    const timeSinceFlap = Date.now() - flapTimeRef.current
-    let wingFrame: number
+      // Draw animated wing based on flap timing
+      const timeSinceFlap = Date.now() - flapTimeRef.current;
+      let wingFrame: number;
 
-    if (timeSinceFlap < 100) {
-      wingFrame = 0 // Wing up (just clicked)
-    } else if (timeSinceFlap < 200) {
-      wingFrame = 1 // Wing middle (returning)
-    } else {
-      wingFrame = 2 // Wing down (resting/gliding)
-    }
+      if (timeSinceFlap < 100) {
+        wingFrame = 0; // Wing up (just clicked)
+      } else if (timeSinceFlap < 200) {
+        wingFrame = 1; // Wing middle (returning)
+      } else {
+        wingFrame = 2; // Wing down (resting/gliding)
+      }
 
-    const wing = WING_FRAMES[wingFrame]
-    const wingStartX = startX - 1 * pixelSize // Wing extends left of bird body
-    const wingStartY = startY + 4 * pixelSize // Wing at middle of body
-
-    wing.forEach((row, rowIndex) => {
-      row.forEach((pixel, colIndex) => {
-        if (pixel > 0) {
-          ctx.fillStyle = colors[pixel]
-          ctx.fillRect(
-            wingStartX + colIndex * pixelSize,
-            wingStartY + rowIndex * pixelSize,
-            pixelSize,
-            pixelSize
-          )
-        }
-      })
-    })
-  }, [])
+      const wing = WING_FRAMES[wingFrame];
+      const wingStartX = startX - 1 * pixelSize; // Wing extends left of bird body
+      const wingStartY = startY + 4 * pixelSize; // Wing at middle of body
+
+      wing.forEach((row, rowIndex) => {
+        row.forEach((pixel, colIndex) => {
+          if (pixel > 0) {
+            ctx.fillStyle = colors[pixel];
+            ctx.fillRect(
+              wingStartX + colIndex * pixelSize,
+              wingStartY + rowIndex * pixelSize,
+              pixelSize,
+              pixelSize,
+            );
+          }
+        });
+      });
+    },
+    [],
+  );
 
   // Draw pixel pipe (green like original Flappy Bird)
-  const drawPixelPipe = useCallback((ctx: CanvasRenderingContext2D, x: number, topHeight: number, canvasHeight: number, isDark: boolean) => {
-    const pipeBody = isDark ? '#4a7a4a' : '#73BF2E'
-    const pipeLight = isDark ? '#5a9a5a' : '#8ED43F'
-    const pipeDark = isDark ? '#3a5a3a' : '#5A9A1E'
-    const pipeRim = isDark ? '#2a4a2a' : '#4A8A1E'
-    const pixelSize = PIXEL_SIZE
-    const capHeight = pixelSize * 5
-    const capExtend = pixelSize * 3
-
-    // Helper to draw a pipe body (solid rectangles, no gaps)
-    const drawPipeBody = (startY: number, endY: number) => {
-      const height = endY - startY
-      // Left highlight
-      ctx.fillStyle = pipeLight
-      ctx.fillRect(x, startY, pixelSize * 2, height)
-      // Center
-      ctx.fillStyle = pipeBody
-      ctx.fillRect(x + pixelSize * 2, startY, PIPE_WIDTH - pixelSize * 4, height)
-      // Right shadow
-      ctx.fillStyle = pipeDark
-      ctx.fillRect(x + PIPE_WIDTH - pixelSize * 2, startY, pixelSize * 2, height)
-    }
-
-    // Helper to draw a pipe cap (solid rectangles with rim)
-    const drawPipeCap = (capY: number, rimAtTop: boolean) => {
-      const capX = x - capExtend
-      const capW = PIPE_WIDTH + capExtend * 2
-      const rimY = rimAtTop ? capY : capY + capHeight - pixelSize
-      const bodyY = rimAtTop ? capY + pixelSize : capY
-      const bodyH = capHeight - pixelSize
-
-      // Draw rim (single row)
-      ctx.fillStyle = pipeRim
-      ctx.fillRect(capX, rimY, capW, pixelSize)
-
-      // Draw cap body (solid)
-      ctx.fillStyle = pipeLight
-      ctx.fillRect(capX, bodyY, pixelSize * 2, bodyH)
-      ctx.fillStyle = pipeBody
-      ctx.fillRect(capX + pixelSize * 2, bodyY, capW - pixelSize * 4, bodyH)
-      ctx.fillStyle = pipeDark
-      ctx.fillRect(capX + capW - pixelSize * 2, bodyY, pixelSize * 2, bodyH)
-    }
-
-    // TOP PIPE
-    drawPipeBody(0, topHeight - capHeight)
-    drawPipeCap(topHeight - capHeight, false)
-
-    // BOTTOM PIPE
-    const bottomStart = topHeight + PIPE_GAP
-    drawPipeCap(bottomStart, true)
-    drawPipeBody(bottomStart + capHeight, canvasHeight + pixelSize)
-  }, [])
+  const drawPixelPipe = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      x: number,
+      topHeight: number,
+      canvasHeight: number,
+      isDark: boolean,
+    ) => {
+      const pipeBody = isDark ? "#4a7a4a" : "#73BF2E";
+      const pipeLight = isDark ? "#5a9a5a" : "#8ED43F";
+      const pipeDark = isDark ? "#3a5a3a" : "#5A9A1E";
+      const pipeRim = isDark ? "#2a4a2a" : "#4A8A1E";
+      const pixelSize = PIXEL_SIZE;
+      const capHeight = pixelSize * 5;
+      const capExtend = pixelSize * 3;
+
+      // Helper to draw a pipe body (solid rectangles, no gaps)
+      const drawPipeBody = (startY: number, endY: number) => {
+        const height = endY - startY;
+        // Left highlight
+        ctx.fillStyle = pipeLight;
+        ctx.fillRect(x, startY, pixelSize * 2, height);
+        // Center
+        ctx.fillStyle = pipeBody;
+        ctx.fillRect(
+          x + pixelSize * 2,
+          startY,
+          PIPE_WIDTH - pixelSize * 4,
+          height,
+        );
+        // Right shadow
+        ctx.fillStyle = pipeDark;
+        ctx.fillRect(
+          x + PIPE_WIDTH - pixelSize * 2,
+          startY,
+          pixelSize * 2,
+          height,
+        );
+      };
+
+      // Helper to draw a pipe cap (solid rectangles with rim)
+      const drawPipeCap = (capY: number, rimAtTop: boolean) => {
+        const capX = x - capExtend;
+        const capW = PIPE_WIDTH + capExtend * 2;
+        const rimY = rimAtTop ? capY : capY + capHeight - pixelSize;
+        const bodyY = rimAtTop ? capY + pixelSize : capY;
+        const bodyH = capHeight - pixelSize;
+
+        // Draw rim (single row)
+        ctx.fillStyle = pipeRim;
+        ctx.fillRect(capX, rimY, capW, pixelSize);
+
+        // Draw cap body (solid)
+        ctx.fillStyle = pipeLight;
+        ctx.fillRect(capX, bodyY, pixelSize * 2, bodyH);
+        ctx.fillStyle = pipeBody;
+        ctx.fillRect(capX + pixelSize * 2, bodyY, capW - pixelSize * 4, bodyH);
+        ctx.fillStyle = pipeDark;
+        ctx.fillRect(capX + capW - pixelSize * 2, bodyY, pixelSize * 2, bodyH);
+      };
+
+      // TOP PIPE
+      drawPipeBody(0, topHeight - capHeight);
+      drawPipeCap(topHeight - capHeight, false);
+
+      // BOTTOM PIPE
+      const bottomStart = topHeight + PIPE_GAP;
+      drawPipeCap(bottomStart, true);
+      drawPipeBody(bottomStart + capHeight, canvasHeight + pixelSize);
+    },
+    [],
+  );
 
   // Background elements ref
   const backgroundRef = useRef({
@@ -417,390 +697,568 @@ export function FlappyBird({ onGameStart, onGameEnd, onGameQuit, isTaskRunning,
       x: i * 6,
       h: 8 + Math.random() * 12,
     })),
-  })
+  });
 
   // Draw background
-  const drawBackground = useCallback((ctx: CanvasRenderingContext2D, canvasWidth: number, canvasHeight: number, isDark: boolean, scrollOffset: number) => {
-    const pixelSize = PIXEL_SIZE
-
-    // Sky gradient
-    const skyTop = isDark ? '#1a1a2e' : '#87CEEB'
-    const skyBottom = isDark ? '#2a2a3e' : '#E0F4FF'
-    const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight)
-    gradient.addColorStop(0, skyTop)
-    gradient.addColorStop(1, skyBottom)
-    ctx.fillStyle = gradient
-    ctx.fillRect(0, 0, canvasWidth, canvasHeight)
-
-    // Draw clouds
-    const cloudColor = isDark ? 'rgba(80, 80, 100, 0.3)' : 'rgba(255, 255, 255, 0.7)'
-    const cloudHighlight = isDark ? 'rgba(100, 100, 120, 0.3)' : 'rgba(255, 255, 255, 0.9)'
-    backgroundRef.current.clouds.forEach(cloud => {
-      const cx = ((cloud.x - scrollOffset * 0.15) % (canvasWidth + 100) + canvasWidth + 100) % (canvasWidth + 100) - 50
-      const cy = cloud.y
-      const s = cloud.size
-      // Pixel cloud shape
-      ctx.fillStyle = cloudHighlight
-      ctx.fillRect(cx + 10 * s, cy, 20 * s, pixelSize * 2)
-      ctx.fillStyle = cloudColor
-      ctx.fillRect(cx, cy + pixelSize * 2, 40 * s, pixelSize * 3)
-      ctx.fillRect(cx + 5 * s, cy + pixelSize * 5, 30 * s, pixelSize * 2)
-    })
-
-    // Draw rolling hills
-    const hillColorBack = isDark ? '#3a4a3a' : '#5A9A5A'
-    const hillColorFront = isDark ? '#4a5a4a' : '#7DBD7D'
-
-    // Back hills (slower parallax, darker)
-    ctx.fillStyle = hillColorBack
-    ctx.beginPath()
-    ctx.moveTo(0, canvasHeight)
-    for (let x = 0; x <= canvasWidth; x += 2) {
-      const hillY = canvasHeight - 60 + Math.sin((x + scrollOffset * 0.2) * 0.015) * 20 + Math.sin((x + scrollOffset * 0.2) * 0.03) * 10
-      ctx.lineTo(x, hillY)
-    }
-    ctx.lineTo(canvasWidth, canvasHeight)
-    ctx.closePath()
-    ctx.fill()
-
-    // Front hills (faster parallax, lighter)
-    ctx.fillStyle = hillColorFront
-    ctx.beginPath()
-    ctx.moveTo(0, canvasHeight)
-    for (let x = 0; x <= canvasWidth; x += 2) {
-      const hillY = canvasHeight - 40 + Math.sin((x + scrollOffset * 0.5) * 0.02) * 15 + Math.sin((x + scrollOffset * 0.5) * 0.008) * 25
-      ctx.lineTo(x, hillY)
-    }
-    ctx.lineTo(canvasWidth, canvasHeight)
-    ctx.closePath()
-    ctx.fill()
-  }, [])
+  const drawBackground = useCallback(
+    (
+      ctx: CanvasRenderingContext2D,
+      canvasWidth: number,
+      canvasHeight: number,
+      isDark: boolean,
+      scrollOffset: number,
+    ) => {
+      const pixelSize = PIXEL_SIZE;
+
+      // Sky gradient
+      const skyTop = isDark ? "#1a1a2e" : "#87CEEB";
+      const skyBottom = isDark ? "#2a2a3e" : "#E0F4FF";
+      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
+      gradient.addColorStop(0, skyTop);
+      gradient.addColorStop(1, skyBottom);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+      // Draw clouds
+      const cloudColor = isDark
+        ? "rgba(80, 80, 100, 0.3)"
+        : "rgba(255, 255, 255, 0.7)";
+      const cloudHighlight = isDark
+        ? "rgba(100, 100, 120, 0.3)"
+        : "rgba(255, 255, 255, 0.9)";
+      backgroundRef.current.clouds.forEach((cloud) => {
+        const cx =
+          ((((cloud.x - scrollOffset * 0.15) % (canvasWidth + 100)) +
+            canvasWidth +
+            100) %
+            (canvasWidth + 100)) -
+          50;
+        const cy = cloud.y;
+        const s = cloud.size;
+        // Pixel cloud shape
+        ctx.fillStyle = cloudHighlight;
+        ctx.fillRect(cx + 10 * s, cy, 20 * s, pixelSize * 2);
+        ctx.fillStyle = cloudColor;
+        ctx.fillRect(cx, cy + pixelSize * 2, 40 * s, pixelSize * 3);
+        ctx.fillRect(cx + 5 * s, cy + pixelSize * 5, 30 * s, pixelSize * 2);
+      });
+
+      // Draw rolling hills
+      const hillColorBack = isDark ? "#3a4a3a" : "#5A9A5A";
+      const hillColorFront = isDark ? "#4a5a4a" : "#7DBD7D";
+
+      // Back hills (slower parallax, darker)
+      ctx.fillStyle = hillColorBack;
+      ctx.beginPath();
+      ctx.moveTo(0, canvasHeight);
+      for (let x = 0; x <= canvasWidth; x += 2) {
+        const hillY =
+          canvasHeight -
+          60 +
+          Math.sin((x + scrollOffset * 0.2) * 0.015) * 20 +
+          Math.sin((x + scrollOffset * 0.2) * 0.03) * 10;
+        ctx.lineTo(x, hillY);
+      }
+      ctx.lineTo(canvasWidth, canvasHeight);
+      ctx.closePath();
+      ctx.fill();
+
+      // Front hills (faster parallax, lighter)
+      ctx.fillStyle = hillColorFront;
+      ctx.beginPath();
+      ctx.moveTo(0, canvasHeight);
+      for (let x = 0; x <= canvasWidth; x += 2) {
+        const hillY =
+          canvasHeight -
+          40 +
+          Math.sin((x + scrollOffset * 0.5) * 0.02) * 15 +
+          Math.sin((x + scrollOffset * 0.5) * 0.008) * 25;
+        ctx.lineTo(x, hillY);
+      }
+      ctx.lineTo(canvasWidth, canvasHeight);
+      ctx.closePath();
+      ctx.fill();
+    },
+    [],
+  );
 
   // Resize canvas pixel buffer to match its CSS layout size
   useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
+    const canvas = canvasRef.current;
+    if (!canvas) return;
 
     const resizeCanvas = () => {
-      const rect = canvas.getBoundingClientRect()
-      const w = Math.floor(rect.width)
-      const h = Math.floor(rect.height)
+      const rect = canvas.getBoundingClientRect();
+      const w = Math.floor(rect.width);
+      const h = Math.floor(rect.height);
       if (canvas.width !== w || canvas.height !== h) {
-        canvas.width = w
-        canvas.height = h
+        canvas.width = w;
+        canvas.height = h;
       }
-    }
-    resizeCanvas()
+    };
+    resizeCanvas();
 
-    const ro = new ResizeObserver(resizeCanvas)
-    ro.observe(canvas)
-    return () => ro.disconnect()
-  }, [])
+    const ro = new ResizeObserver(resizeCanvas);
+    ro.observe(canvas);
+    return () => ro.disconnect();
+  }, []);
 
   // Game loop
   useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
+    const canvas = canvasRef.current;
+    if (!canvas) return;
 
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
     // Disable image smoothing for crisp pixels
-    ctx.imageSmoothingEnabled = false
+    ctx.imageSmoothingEnabled = false;
 
     const gameLoop = (timestamp: number) => {
       // Initialize timestamp on first frame
       if (lastFrameTimeRef.current === 0) {
-        lastFrameTimeRef.current = timestamp
+        lastFrameTimeRef.current = timestamp;
       }
       // Calculate delta time (capped to prevent huge jumps)
-      const deltaTime = Math.min((timestamp - lastFrameTimeRef.current) / 1000, 0.1)
-      lastFrameTimeRef.current = timestamp
+      const deltaTime = Math.min(
+        (timestamp - lastFrameTimeRef.current) / 1000,
+        0.1,
+      );
+      lastFrameTimeRef.current = timestamp;
 
-      const bird = birdRef.current
-      const pipes = pipesRef.current
-      const currentGameState = gameStateRef.current
-      const { isDark } = getThemeColors()
+      const bird = birdRef.current;
+      const pipes = pipesRef.current;
+      const currentGameState = gameStateRef.current;
+      const { isDark } = getThemeColors();
 
       // Update scroll offset when playing or idle (slow drift)
-      if (currentGameState === 'playing') {
-        scrollOffsetRef.current += PIPE_SPEED * deltaTime
-      } else if (currentGameState === 'idle') {
-        scrollOffsetRef.current += PIPE_SPEED * 0.15 * deltaTime
+      if (currentGameState === "playing") {
+        scrollOffsetRef.current += PIPE_SPEED * deltaTime;
+      } else if (currentGameState === "idle") {
+        scrollOffsetRef.current += PIPE_SPEED * 0.15 * deltaTime;
       }
 
       // Draw background (with parallax scrolling)
-      drawBackground(ctx, canvas.width, canvas.height, isDark, scrollOffsetRef.current)
-
-      if (currentGameState === 'playing') {
+      drawBackground(
+        ctx,
+        canvas.width,
+        canvas.height,
+        isDark,
+        scrollOffsetRef.current,
+      );
+
+      if (currentGameState === "playing") {
         // Update bird with delta time (FPS-independent physics)
-        bird.velocity += GRAVITY * deltaTime
-        bird.y += bird.velocity * deltaTime
+        bird.velocity += GRAVITY * deltaTime;
+        bird.y += bird.velocity * deltaTime;
 
         // Generate pipes
-        if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - PIPE_SPACING) {
-          const minHeight = 60
-          const maxHeight = canvas.height - PIPE_GAP - 60
-          const topHeight = Math.random() * (maxHeight - minHeight) + minHeight
-          pipes.push({ x: canvas.width, topHeight, passed: false })
+        if (
+          pipes.length === 0 ||
+          pipes[pipes.length - 1].x < canvas.width - PIPE_SPACING
+        ) {
+          const minHeight = 60;
+          const maxHeight = canvas.height - PIPE_GAP - 60;
+          const topHeight = Math.random() * (maxHeight - minHeight) + minHeight;
+          pipes.push({ x: canvas.width, topHeight, passed: false });
         }
 
-        let gameEnded = false
+        let gameEnded = false;
 
         // Update pipes with delta time
         for (let i = pipes.length - 1; i >= 0; i--) {
-          pipes[i].x -= PIPE_SPEED * deltaTime
+          pipes[i].x -= PIPE_SPEED * deltaTime;
 
           if (pipes[i].x + PIPE_WIDTH < 0) {
-            pipes.splice(i, 1)
-            continue
+            pipes.splice(i, 1);
+            continue;
           }
 
-          const pipe = pipes[i]
-          const birdRight = bird.x + bird.width
-          const birdBottom = bird.y + bird.height
+          const pipe = pipes[i];
+          const birdRight = bird.x + bird.width;
+          const birdBottom = bird.y + bird.height;
 
-          if (!gameEnded && birdRight > pipe.x && bird.x < pipe.x + PIPE_WIDTH) {
+          if (
+            !gameEnded &&
+            birdRight > pipe.x &&
+            bird.x < pipe.x + PIPE_WIDTH
+          ) {
             if (bird.y < pipe.topHeight) {
-              endGame()
-              gameEnded = true
+              endGame();
+              gameEnded = true;
             } else if (birdBottom > pipe.topHeight + PIPE_GAP) {
-              endGame()
-              gameEnded = true
+              endGame();
+              gameEnded = true;
             }
           }
 
           if (!gameEnded && !pipe.passed && pipe.x + PIPE_WIDTH < bird.x) {
-            pipe.passed = true
-            scoreRef.current += 1
-            setScore(scoreRef.current)
+            pipe.passed = true;
+            scoreRef.current += 1;
+            setScore(scoreRef.current);
           }
         }
 
-        if (!gameEnded && (bird.y < 0 || bird.y + bird.height > canvas.height)) {
-          endGame()
+        if (
+          !gameEnded &&
+          (bird.y < 0 || bird.y + bird.height > canvas.height)
+        ) {
+          endGame();
         }
       }
 
       // Draw pipes (pixel art style)
-      pipes.forEach(pipe => {
-        drawPixelPipe(ctx, pipe.x, pipe.topHeight, canvas.height, isDark)
-      })
+      pipes.forEach((pipe) => {
+        drawPixelPipe(ctx, pipe.x, pipe.topHeight, canvas.height, isDark);
+      });
 
       // Draw bird (pixel art style)
-      if (currentGameState === 'idle') {
+      if (currentGameState === "idle") {
         // Bird floats gently above center during idle (above the overlay card)
-        const floatY = canvas.height * 0.28 + Math.sin(timestamp / 800) * 8
-        ctx.save()
-        ctx.translate(canvas.width * 0.35, floatY)
-        drawPixelBird(ctx, 0, 0, isDark)
-        ctx.restore()
+        const floatY = canvas.height * 0.28 + Math.sin(timestamp / 800) * 8;
+        ctx.save();
+        ctx.translate(canvas.width * 0.35, floatY);
+        drawPixelBird(ctx, 0, 0, isDark);
+        ctx.restore();
       } else {
-        ctx.save()
-        ctx.translate(bird.x + bird.width / 2, bird.y + bird.height / 2)
-        const rotation = Math.min(Math.max(bird.velocity / TARGET_FPS * 3, -25), 70) * Math.PI / 180
-        ctx.rotate(rotation)
-        drawPixelBird(ctx, 0, 0, isDark)
-        ctx.restore()
+        ctx.save();
+        ctx.translate(bird.x + bird.width / 2, bird.y + bird.height / 2);
+        const rotation =
+          (Math.min(Math.max((bird.velocity / TARGET_FPS) * 3, -25), 70) *
+            Math.PI) /
+          180;
+        ctx.rotate(rotation);
+        drawPixelBird(ctx, 0, 0, isDark);
+        ctx.restore();
       }
 
       // Draw score (pixel art)
-      if (currentGameState !== 'idle') {
-        const scoreStr = String(scoreRef.current)
-        const scorePixelSize = 3
-        const scoreWidth = scoreStr.length * 6 * scorePixelSize
+      if (currentGameState !== "idle") {
+        const scoreStr = String(scoreRef.current);
+        const scorePixelSize = 3;
+        const scoreWidth = scoreStr.length * 6 * scorePixelSize;
         // Shadow
-        drawPixelText(ctx, scoreStr, canvas.width / 2 - scoreWidth / 2 + 2, 20 + 2, scorePixelSize, 'rgba(0,0,0,0.5)')
+        drawPixelText(
+          ctx,
+          scoreStr,
+          canvas.width / 2 - scoreWidth / 2 + 2,
+          20 + 2,
+          scorePixelSize,
+          "rgba(0,0,0,0.5)",
+        );
         // Text
-        drawPixelText(ctx, scoreStr, canvas.width / 2 - scoreWidth / 2, 20, scorePixelSize, '#FFFFFF')
+        drawPixelText(
+          ctx,
+          scoreStr,
+          canvas.width / 2 - scoreWidth / 2,
+          20,
+          scorePixelSize,
+          "#FFFFFF",
+        );
       }
 
       // Draw "GAME OVER" pixel art with score (centered)
-      if (currentGameState === 'gameover') {
+      if (currentGameState === "gameover") {
         // Semi-transparent overlay
-        ctx.fillStyle = isDark ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.3)'
-        ctx.fillRect(0, 0, canvas.width, canvas.height)
+        ctx.fillStyle = isDark ? "rgba(0, 0, 0, 0.5)" : "rgba(0, 0, 0, 0.3)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-        const textColor = '#FFFFFF'
-        const shadowColor = '#000000'
-        const goldColor = '#FFD700'
+        const textColor = "#FFFFFF";
+        const shadowColor = "#000000";
+        const goldColor = "#FFD700";
 
         // GAME OVER text (large)
-        const bigPixel = 4
-        const gameTextWidth = 4 * 6 * bigPixel
-        const overTextWidth = 4 * 6 * bigPixel
-        drawPixelText(ctx, 'GAME', canvas.width / 2 - gameTextWidth / 2 + 2, canvas.height / 2 - 80 + 2, bigPixel, shadowColor)
-        drawPixelText(ctx, 'GAME', canvas.width / 2 - gameTextWidth / 2, canvas.height / 2 - 80, bigPixel, textColor)
-        drawPixelText(ctx, 'OVER', canvas.width / 2 - overTextWidth / 2 + 2, canvas.height / 2 - 45 + 2, bigPixel, shadowColor)
-        drawPixelText(ctx, 'OVER', canvas.width / 2 - overTextWidth / 2, canvas.height / 2 - 45, bigPixel, textColor)
+        const bigPixel = 4;
+        const gameTextWidth = 4 * 6 * bigPixel;
+        const overTextWidth = 4 * 6 * bigPixel;
+        drawPixelText(
+          ctx,
+          "GAME",
+          canvas.width / 2 - gameTextWidth / 2 + 2,
+          canvas.height / 2 - 80 + 2,
+          bigPixel,
+          shadowColor,
+        );
+        drawPixelText(
+          ctx,
+          "GAME",
+          canvas.width / 2 - gameTextWidth / 2,
+          canvas.height / 2 - 80,
+          bigPixel,
+          textColor,
+        );
+        drawPixelText(
+          ctx,
+          "OVER",
+          canvas.width / 2 - overTextWidth / 2 + 2,
+          canvas.height / 2 - 45 + 2,
+          bigPixel,
+          shadowColor,
+        );
+        drawPixelText(
+          ctx,
+          "OVER",
+          canvas.width / 2 - overTextWidth / 2,
+          canvas.height / 2 - 45,
+          bigPixel,
+          textColor,
+        );
 
         // Score display (medium)
-        const medPixel = 2
-        const scoreStr = String(scoreRef.current)
-        const scoreLabel = 'SCORE:' + scoreStr
-        const scoreLabelWidth = scoreLabel.length * 6 * medPixel
-        drawPixelText(ctx, scoreLabel, canvas.width / 2 - scoreLabelWidth / 2 + 1, canvas.height / 2 + 10 + 1, medPixel, shadowColor)
-        drawPixelText(ctx, scoreLabel, canvas.width / 2 - scoreLabelWidth / 2, canvas.height / 2 + 10, medPixel, textColor)
+        const medPixel = 2;
+        const scoreStr = String(scoreRef.current);
+        const scoreLabel = "SCORE:" + scoreStr;
+        const scoreLabelWidth = scoreLabel.length * 6 * medPixel;
+        drawPixelText(
+          ctx,
+          scoreLabel,
+          canvas.width / 2 - scoreLabelWidth / 2 + 1,
+          canvas.height / 2 + 10 + 1,
+          medPixel,
+          shadowColor,
+        );
+        drawPixelText(
+          ctx,
+          scoreLabel,
+          canvas.width / 2 - scoreLabelWidth / 2,
+          canvas.height / 2 + 10,
+          medPixel,
+          textColor,
+        );
 
         // Best score
-        const isNewBest = scoreRef.current >= highScoreRef.current && scoreRef.current > 0
-        const bestLabel = isNewBest ? '*NEW BEST*' : 'BEST:' + String(highScoreRef.current)
-        const bestLabelWidth = bestLabel.length * 6 * medPixel
-        const bestColor = isNewBest ? goldColor : '#FFFFFF'
-        drawPixelText(ctx, bestLabel, canvas.width / 2 - bestLabelWidth / 2 + 1, canvas.height / 2 + 35 + 1, medPixel, shadowColor)
-        drawPixelText(ctx, bestLabel, canvas.width / 2 - bestLabelWidth / 2, canvas.height / 2 + 35, medPixel, bestColor)
+        const isNewBest =
+          scoreRef.current >= highScoreRef.current && scoreRef.current > 0;
+        const bestLabel = isNewBest
+          ? "*NEW BEST*"
+          : "BEST:" + String(highScoreRef.current);
+        const bestLabelWidth = bestLabel.length * 6 * medPixel;
+        const bestColor = isNewBest ? goldColor : "#FFFFFF";
+        drawPixelText(
+          ctx,
+          bestLabel,
+          canvas.width / 2 - bestLabelWidth / 2 + 1,
+          canvas.height / 2 + 35 + 1,
+          medPixel,
+          shadowColor,
+        );
+        drawPixelText(
+          ctx,
+          bestLabel,
+          canvas.width / 2 - bestLabelWidth / 2,
+          canvas.height / 2 + 35,
+          medPixel,
+          bestColor,
+        );
 
         // Tap to restart hint
-        const smallPixel = 2
-        const tapLabel = 'TAP TO RESTART'
-        const tapLabelWidth = tapLabel.length * 6 * smallPixel
-        drawPixelText(ctx, tapLabel, canvas.width / 2 - tapLabelWidth / 2 + 1, canvas.height / 2 + 70 + 1, smallPixel, shadowColor)
-        drawPixelText(ctx, tapLabel, canvas.width / 2 - tapLabelWidth / 2, canvas.height / 2 + 70, smallPixel, 'rgba(255,255,255,0.6)')
+        const smallPixel = 2;
+        const tapLabel = "TAP TO RESTART";
+        const tapLabelWidth = tapLabel.length * 6 * smallPixel;
+        drawPixelText(
+          ctx,
+          tapLabel,
+          canvas.width / 2 - tapLabelWidth / 2 + 1,
+          canvas.height / 2 + 70 + 1,
+          smallPixel,
+          shadowColor,
+        );
+        drawPixelText(
+          ctx,
+          tapLabel,
+          canvas.width / 2 - tapLabelWidth / 2,
+          canvas.height / 2 + 70,
+          smallPixel,
+          "rgba(255,255,255,0.6)",
+        );
       }
 
-      gameLoopRef.current = requestAnimationFrame(gameLoop)
-    }
+      gameLoopRef.current = requestAnimationFrame(gameLoop);
+    };
 
-    gameLoopRef.current = requestAnimationFrame(gameLoop)
+    gameLoopRef.current = requestAnimationFrame(gameLoop);
 
     return () => {
       if (gameLoopRef.current) {
-        cancelAnimationFrame(gameLoopRef.current)
+        cancelAnimationFrame(gameLoopRef.current);
       }
-    }
-  }, [endGame, getThemeColors, drawPixelBird, drawPixelPipe, drawPixelText, drawBackground])
+    };
+  }, [
+    endGame,
+    getThemeColors,
+    drawPixelBird,
+    drawPixelPipe,
+    drawPixelText,
+    drawBackground,
+  ]);
 
   const handleCanvasClick = useCallback(() => {
-    if (gameStateRef.current === 'gameover') {
-      restart()
+    if (gameStateRef.current === "gameover") {
+      restart();
     } else {
-      jump()
+      jump();
     }
-  }, [restart, jump])
+  }, [restart, jump]);
 
   return (
-    <div ref={containerRef} className="relative flex flex-col items-center justify-center h-full w-full select-none cursor-pointer bg-gradient-to-b from-muted/30 via-background to-muted/20" onClick={handleCanvasClick}>
+    <div
+      ref={containerRef}
+      className="relative flex flex-col items-center justify-center h-full w-full select-none cursor-pointer bg-gradient-to-b from-muted/30 via-background to-muted/20"
+      onClick={handleCanvasClick}
+    >
       {/* Decorative dots pattern behind canvas */}
-      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: 'radial-gradient(circle, currentColor 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
+      <div
+        className="absolute inset-0 opacity-[0.03] pointer-events-none"
+        style={{
+          backgroundImage:
+            "radial-gradient(circle, currentColor 1px, transparent 1px)",
+          backgroundSize: "24px 24px",
+        }}
+      />
       <canvas
         ref={canvasRef}
         className={cn(
           "rounded-xl border border-border/30 shadow-sm transition-opacity duration-300 max-w-[480px] max-h-[600px] w-full h-full pointer-events-none",
-          gameState === 'idle' && "opacity-40"
+          gameState === "idle" && "opacity-40",
         )}
-        style={{ imageRendering: 'pixelated' }}
+        style={{ imageRendering: "pixelated" }}
       />
 
       {/* Idle state overlay - blends into background */}
-      {gameState === 'idle' && (
-        <div
-          className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none"
-        >
+      {gameState === "idle" && (
+        <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
           {isTaskRunning && (
             <div className="flex items-center justify-center gap-2 mb-4">
               <span className="relative flex h-3 w-3">
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
                 <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
               </span>
-              <p className="text-muted-foreground text-sm">{taskStatus || t('playground.generating')}</p>
+              <p className="text-muted-foreground text-sm">
+                {taskStatus || t("playground.generating")}
+              </p>
             </div>
           )}
-          {!isTaskRunning && (() => {
-            const outputType = inferOutputType(modelId)
-            const typeConfig = {
-              image: { icon: ImageIcon, color: 'text-sky-500', label: 'Image Generation' },
-              video: { icon: Video, color: 'text-purple-500', label: 'Video Generation' },
-              audio: { icon: Music, color: 'text-emerald-500', label: 'Audio Generation' },
-            }[outputType]
-            const TypeIcon = typeConfig.icon
-
-            if (hasResults) {
-              return (
-                <div className="bg-background/60 backdrop-blur-sm rounded-xl border border-primary/20 px-6 py-5 shadow-md text-center space-y-3 pointer-events-auto">
-                  <div className="flex justify-center">
-                    <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center">
-                      <TypeIcon className={cn("h-5 w-5", typeConfig.color)} />
+          {!isTaskRunning &&
+            (() => {
+              const outputType = inferOutputType(modelId);
+              const typeConfig = {
+                image: {
+                  icon: ImageIcon,
+                  color: "text-sky-500",
+                  label: "Image Generation",
+                },
+                video: {
+                  icon: Video,
+                  color: "text-purple-500",
+                  label: "Video Generation",
+                },
+                audio: {
+                  icon: Music,
+                  color: "text-emerald-500",
+                  label: "Audio Generation",
+                },
+              }[outputType];
+              const TypeIcon = typeConfig.icon;
+
+              if (hasResults) {
+                return (
+                  <div className="bg-background/60 backdrop-blur-sm rounded-xl border border-primary/20 px-6 py-5 shadow-md text-center space-y-3 pointer-events-auto animate-in fade-in slide-in-from-bottom-3 duration-300">
+                    <div className="flex justify-center">
+                      <div className="w-10 h-10 rounded-lg bg-primary/10 border border-primary/20 flex items-center justify-center">
+                        <TypeIcon className={cn("h-5 w-5", typeConfig.color)} />
+                      </div>
                     </div>
+                    <p className="text-sm font-medium text-foreground/80">
+                      {t("playground.flappyBird.resultsReady", "Results Ready")}
+                    </p>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onViewResults?.();
+                      }}
+                      className="text-xs px-4 py-1.5 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 transition-colors font-medium"
+                    >
+                      {t("playground.flappyBird.viewResults")} &rarr;
+                    </button>
                   </div>
-                  <p className="text-sm font-medium text-foreground/80">{t('playground.flappyBird.resultsReady', 'Results Ready')}</p>
-                  <button
-                    onClick={(e) => { e.stopPropagation(); onViewResults?.() }}
-                    className="text-xs px-4 py-1.5 rounded-full bg-primary text-primary-foreground hover:bg-primary/90 transition-colors font-medium"
-                  >
-                    {t('playground.flappyBird.viewResults')} &rarr;
-                  </button>
-                </div>
-              )
-            }
-
-            if (idleMessage) {
-              return (
-                <div className="bg-background/50 backdrop-blur-sm rounded-xl border border-border/40 px-6 py-5 shadow-sm text-center space-y-2.5">
-                  <div className="flex justify-center">
-                    <div className="w-10 h-10 rounded-lg bg-muted/50 border border-border/40 flex items-center justify-center">
-                      <TypeIcon className={cn("h-5 w-5", typeConfig.color)} />
+                );
+              }
+
+              if (idleMessage) {
+                return (
+                  <div className="bg-background/50 backdrop-blur-sm rounded-xl border border-border/40 px-6 py-5 shadow-sm text-center space-y-2.5">
+                    <div className="flex justify-center">
+                      <div className="w-10 h-10 rounded-lg bg-muted/50 border border-border/40 flex items-center justify-center">
+                        <TypeIcon className={cn("h-5 w-5", typeConfig.color)} />
+                      </div>
+                    </div>
+                    <p className="text-sm font-medium text-foreground/70">
+                      {idleMessage.title}
+                    </p>
+                    <div className="flex justify-center">
+                      <span className="text-[11px] px-2.5 py-0.5 rounded-full border border-border/40 bg-muted/30 text-muted-foreground/50">
+                        {typeConfig.label}
+                      </span>
                     </div>
                   </div>
-                  <p className="text-sm font-medium text-foreground/70">{idleMessage.title}</p>
-                  <div className="flex justify-center">
-                    <span className="text-[11px] px-2.5 py-0.5 rounded-full border border-border/40 bg-muted/30 text-muted-foreground/50">
-                      {typeConfig.label}
-                    </span>
-                  </div>
-                </div>
-              )
-            }
+                );
+              }
 
-            return null
-          })()}
+              return null;
+            })()}
           <p className="text-sm font-bold tracking-wide text-amber-500/70 mt-4 animate-pulse">
-            {t('playground.flappyBird.clickToStart')}
+            {t("playground.flappyBird.clickToStart")}
           </p>
         </div>
       )}
 
-
       {/* Task running indicator */}
       {isTaskRunning && (
-        <div className="absolute top-4 right-4">
-          <Badge variant="secondary" className="gap-2 px-3 py-1.5 bg-background/80 backdrop-blur-sm border border-border/50">
+        <div className="absolute top-4 right-4 animate-in fade-in slide-in-from-top-2 duration-300">
+          <Badge
+            variant="secondary"
+            className="gap-2 px-3 py-1.5 bg-background/80 backdrop-blur-sm border border-border/50"
+          >
             <span className="relative flex h-2 w-2">
               <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
               <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
             </span>
-            {taskStatus || t('playground.generating')}
+            {taskStatus || t("playground.generating")}
           </Badge>
         </div>
       )}
 
       {/* Results notification during playing/gameover */}
-      {hasResults && !isTaskRunning && gameState !== 'idle' && (
-        <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10">
+      {hasResults && !isTaskRunning && gameState !== "idle" && (
+        <div className="absolute top-4 left-1/2 -translate-x-1/2 z-10 animate-in fade-in slide-in-from-top-2 duration-300">
           <button
             className="flex items-center gap-2 px-4 py-2 rounded-full bg-primary text-primary-foreground text-sm font-medium shadow-lg hover:bg-primary/90 transition-colors"
-            onClick={(e) => { e.stopPropagation(); onViewResults?.() }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onViewResults?.();
+            }}
           >
-            {t('playground.flappyBird.viewResults')} &rarr;
+            {t("playground.flappyBird.viewResults")} &rarr;
           </button>
         </div>
       )}
 
       {/* Quit button - show during playing and gameover */}
-      {gameState !== 'idle' && (
+      {gameState !== "idle" && (
         <div className="absolute top-4 left-4">
           <Badge
             variant="secondary"
             className="px-3 py-1.5 cursor-pointer select-none hover:bg-destructive hover:text-destructive-foreground transition-colors bg-background/80 backdrop-blur-sm border border-border/50"
             onMouseDown={(e) => e.preventDefault()}
             onClick={(e) => {
-              e.stopPropagation()
-              quitGame()
+              e.stopPropagation();
+              quitGame();
             }}
           >
-            {t('playground.flappyBird.quit')}
+            {t("playground.flappyBird.quit")}
           </Badge>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/FormField.tsx b/src/components/playground/FormField.tsx
index af5934a5..99f50d3e 100644
--- a/src/components/playground/FormField.tsx
+++ b/src/components/playground/FormField.tsx
@@ -1,137 +1,166 @@
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { FormFieldConfig } from '@/lib/schemaToForm'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { Slider } from '@/components/ui/slider'
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { FormFieldConfig } from "@/lib/schemaToForm";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import { FileUpload } from './FileUpload'
-import { SizeSelector } from './SizeSelector'
-import { LoraSelector, type LoraItem } from './LoraSelector'
-import { PromptOptimizer } from './PromptOptimizer'
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { Dices, Info } from 'lucide-react'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/select";
+import { FileUpload } from "./FileUpload";
+import { SizeSelector } from "./SizeSelector";
+import { LoraSelector, type LoraItem } from "./LoraSelector";
+import { PromptOptimizer } from "./PromptOptimizer";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Dices, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface FormFieldProps {
-  field: FormFieldConfig
-  value: unknown
-  onChange: (value: unknown) => void
-  disabled?: boolean
-  error?: string
-  modelType?: string
-  imageValue?: string
-  hideLabel?: boolean
-  formValues?: Record<string, unknown>
-  onUploadingChange?: (isUploading: boolean) => void
-  tooltipDescription?: boolean
+  field: FormFieldConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled?: boolean;
+  error?: string;
+  modelType?: string;
+  imageValue?: string;
+  hideLabel?: boolean;
+  formValues?: Record<string, unknown>;
+  onUploadingChange?: (isUploading: boolean) => void;
+  tooltipDescription?: boolean;
   /** When provided (e.g. workflow), file uploads use this instead of API. */
-  onUploadFile?: (file: File) => Promise<string>
+  onUploadFile?: (file: File) => Promise<string>;
   /** Optional React node rendered inside the label row (e.g. a connection handle anchor). */
-  handleAnchor?: React.ReactNode
+  handleAnchor?: React.ReactNode;
 }
 
 // Generate a random seed (0 to 65535)
-const generateRandomSeed = () => Math.floor(Math.random() * 65536)
+const generateRandomSeed = () => Math.floor(Math.random() * 65536);
 
-export function FormField({ field, value, onChange, disabled = false, error, modelType, imageValue, hideLabel = false, formValues, onUploadingChange, tooltipDescription = false, onUploadFile, handleAnchor }: FormFieldProps) {
-  const { t } = useTranslation()
+export function FormField({
+  field,
+  value,
+  onChange,
+  disabled = false,
+  error,
+  modelType,
+  imageValue,
+  hideLabel = false,
+  formValues,
+  onUploadingChange,
+  tooltipDescription = false,
+  onUploadFile,
+  handleAnchor,
+}: FormFieldProps) {
+  const { t } = useTranslation();
   // Check if this is a seed field
-  const isSeedField = field.name.toLowerCase() === 'seed'
-  const isNumericField = field.type === 'number' || field.type === 'slider'
-  const isNumberField = field.type === 'number'
-  const allowEmptyNumber = isNumberField && !field.required && field.default === undefined
+  const isSeedField = field.name.toLowerCase() === "seed";
+  const isNumericField = field.type === "number" || field.type === "slider";
+  const isNumberField = field.type === "number";
+  const allowEmptyNumber =
+    isNumberField && !field.required && field.default === undefined;
   const numericFallback =
     value !== undefined && value !== null
       ? Number(value)
-      : (field.default as number | undefined) ?? field.min ?? 0
+      : ((field.default as number | undefined) ?? field.min ?? 0);
   const [numericInput, setNumericInput] = useState(() => {
-    if (!isNumericField) return ''
-    if (allowEmptyNumber && (value === undefined || value === null)) return ''
-    return String(numericFallback)
-  })
+    if (!isNumericField) return "";
+    if (allowEmptyNumber && (value === undefined || value === null)) return "";
+    return String(numericFallback);
+  });
 
   useEffect(() => {
-    if (!isNumericField) return
+    if (!isNumericField) return;
     if (allowEmptyNumber && (value === undefined || value === null)) {
-      setNumericInput('')
-      return
+      setNumericInput("");
+      return;
     }
     const next =
       value !== undefined && value !== null
         ? Number(value)
-        : (field.default as number | undefined) ?? field.min ?? 0
-    setNumericInput(String(next))
-  }, [isNumericField, value, field.default, field.min, allowEmptyNumber])
+        : ((field.default as number | undefined) ?? field.min ?? 0);
+    setNumericInput(String(next));
+  }, [isNumericField, value, field.default, field.min, allowEmptyNumber]);
 
-  const isIntegerField = field.schemaType === 'integer'
+  const isIntegerField = field.schemaType === "integer";
 
   const clampNumeric = (n: number) => {
-    let next = isIntegerField ? Math.round(n) : n
-    if (field.min !== undefined) next = Math.max(field.min, next)
-    if (field.max !== undefined) next = Math.min(field.max, next)
-    return next
-  }
+    let next = isIntegerField ? Math.round(n) : n;
+    if (field.min !== undefined) next = Math.max(field.min, next);
+    if (field.max !== undefined) next = Math.min(field.max, next);
+    return next;
+  };
 
   const commitNumeric = (raw: string) => {
-    if (raw.trim() === '' || Number.isNaN(Number(raw))) {
+    if (raw.trim() === "" || Number.isNaN(Number(raw))) {
       if (allowEmptyNumber) {
-        onChange(undefined)
-        setNumericInput('')
-        return
+        onChange(undefined);
+        setNumericInput("");
+        return;
       }
-      const fallback = (field.default as number | undefined) ?? field.min ?? 0
-      onChange(fallback)
-      setNumericInput(String(fallback))
-      return
+      const fallback = (field.default as number | undefined) ?? field.min ?? 0;
+      onChange(fallback);
+      setNumericInput(String(fallback));
+      return;
     }
 
-    const parsed = Number(raw)
-    const clamped = clampNumeric(parsed)
-    onChange(clamped)
-    setNumericInput(String(clamped))
-  }
+    const parsed = Number(raw);
+    const clamped = clampNumeric(parsed);
+    onChange(clamped);
+    setNumericInput(String(clamped));
+  };
 
   const renderInput = () => {
     switch (field.type) {
-      case 'text':
+      case "text":
         return (
           <Input
             id={field.name}
             type="text"
-            value={(value as string) || ''}
+            value={(value as string) || ""}
             onChange={(e) => onChange(e.target.value)}
-            placeholder={field.description || `Enter ${field.label.toLowerCase()}`}
+            placeholder={
+              field.description || `Enter ${field.label.toLowerCase()}`
+            }
             disabled={disabled}
           />
-        )
+        );
 
-      case 'textarea':
+      case "textarea":
         return (
           <Textarea
             id={field.name}
-            value={(value as string) || ''}
+            value={(value as string) || ""}
             onChange={(e) => onChange(e.target.value)}
-            placeholder={field.description || `Enter ${field.label.toLowerCase()}`}
+            placeholder={
+              field.description || `Enter ${field.label.toLowerCase()}`
+            }
             disabled={disabled}
             rows={4}
             className="nodrag nowheel"
           />
-        )
+        );
 
-      case 'number': {
+      case "number": {
         // Show slider + input when default, min, and max are all defined
-        const hasSliderRange = field.default !== undefined && field.min !== undefined && field.max !== undefined
-        const currentValue = value !== undefined && value !== null ? Number(value) : (field.default as number) ?? field.min ?? 0
+        const hasSliderRange =
+          field.default !== undefined &&
+          field.min !== undefined &&
+          field.max !== undefined;
+        const currentValue =
+          value !== undefined && value !== null
+            ? Number(value)
+            : ((field.default as number) ?? field.min ?? 0);
 
         if (hasSliderRange) {
           return (
@@ -139,9 +168,9 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
               <Slider
                 value={[currentValue]}
                 onValueChange={([v]) => {
-                  const coerced = isIntegerField ? Math.round(v) : v
-                  onChange(coerced)
-                  setNumericInput(String(coerced))
+                  const coerced = isIntegerField ? Math.round(v) : v;
+                  onChange(coerced);
+                  setNumericInput(String(coerced));
                 }}
                 min={field.min}
                 max={field.max}
@@ -154,14 +183,14 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
                 type="number"
                 value={numericInput}
                 onChange={(e) => {
-                  const val = e.target.value
-                  setNumericInput(val)
-                  if (val === '' || Number.isNaN(Number(val))) {
-                    if (allowEmptyNumber) onChange(undefined)
-                    return
+                  const val = e.target.value;
+                  setNumericInput(val);
+                  if (val === "" || Number.isNaN(Number(val))) {
+                    if (allowEmptyNumber) onChange(undefined);
+                    return;
                   }
-                  const n = Number(val)
-                  onChange(isIntegerField ? Math.round(n) : n)
+                  const n = Number(val);
+                  onChange(isIntegerField ? Math.round(n) : n);
                 }}
                 onBlur={() => commitNumeric(numericInput)}
                 min={field.min}
@@ -171,7 +200,7 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
                 className="w-24 h-8 text-sm"
               />
             </div>
-          )
+          );
         }
 
         return (
@@ -181,22 +210,26 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
               type="number"
               value={numericInput}
               onChange={(e) => {
-                const val = e.target.value
-                setNumericInput(val)
-                if (val === '' || Number.isNaN(Number(val))) {
-                  if (allowEmptyNumber) onChange(undefined)
-                  return
+                const val = e.target.value;
+                setNumericInput(val);
+                if (val === "" || Number.isNaN(Number(val))) {
+                  if (allowEmptyNumber) onChange(undefined);
+                  return;
                 }
-                const n = Number(val)
-                onChange(isIntegerField ? Math.round(n) : n)
+                const n = Number(val);
+                onChange(isIntegerField ? Math.round(n) : n);
               }}
               onBlur={() => commitNumeric(numericInput)}
               min={field.min}
               max={field.max}
               step={field.step}
-              placeholder={field.default !== undefined ? `Default: ${field.default}` : undefined}
+              placeholder={
+                field.default !== undefined
+                  ? `Default: ${field.default}`
+                  : undefined
+              }
               disabled={disabled}
-              className={isSeedField ? 'flex-1' : undefined}
+              className={isSeedField ? "flex-1" : undefined}
             />
             {isSeedField && (
               <Tooltip>
@@ -206,9 +239,9 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
                     variant="outline"
                     size="icon"
                     onClick={() => {
-                      const next = generateRandomSeed()
-                      onChange(next)
-                      setNumericInput(String(next))
+                      const next = generateRandomSeed();
+                      onChange(next);
+                      setNumericInput(String(next));
                     }}
                     disabled={disabled}
                   >
@@ -216,25 +249,28 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent side="top">
-                  <p>{t('playground.randomSeed')}</p>
+                  <p>{t("playground.randomSeed")}</p>
                 </TooltipContent>
               </Tooltip>
             )}
           </div>
-        )
+        );
       }
 
-      case 'slider': {
-        const currentValue = value !== undefined && value !== null ? Number(value) : (field.default as number) ?? field.min ?? 0
+      case "slider": {
+        const currentValue =
+          value !== undefined && value !== null
+            ? Number(value)
+            : ((field.default as number) ?? field.min ?? 0);
         return (
           <div className="space-y-2">
             <div className="flex items-center gap-3">
               <Slider
                 value={[currentValue]}
                 onValueChange={([v]) => {
-                  const coerced = isIntegerField ? Math.round(v) : v
-                  onChange(coerced)
-                  setNumericInput(String(coerced))
+                  const coerced = isIntegerField ? Math.round(v) : v;
+                  onChange(coerced);
+                  setNumericInput(String(coerced));
                 }}
                 min={field.min ?? 0}
                 max={field.max ?? 100}
@@ -246,11 +282,11 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
                 type="number"
                 value={numericInput}
                 onChange={(e) => {
-                  const val = e.target.value
-                  setNumericInput(val)
-                  if (val === '' || Number.isNaN(Number(val))) return
-                  const n = Number(val)
-                  onChange(isIntegerField ? Math.round(n) : n)
+                  const val = e.target.value;
+                  setNumericInput(val);
+                  if (val === "" || Number.isNaN(Number(val))) return;
+                  const n = Number(val);
+                  onChange(isIntegerField ? Math.round(n) : n);
                 }}
                 onBlur={() => commitNumeric(numericInput)}
                 min={field.min}
@@ -261,10 +297,10 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
               />
             </div>
           </div>
-        )
+        );
       }
 
-      case 'boolean':
+      case "boolean":
         return (
           <div className="flex items-center space-x-2">
             <Switch
@@ -273,32 +309,42 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
               onCheckedChange={onChange}
               disabled={disabled}
             />
-            <Label htmlFor={field.name} className="text-sm text-muted-foreground">
-              {value ? 'Enabled' : 'Disabled'}
+            <Label
+              htmlFor={field.name}
+              className="text-sm text-muted-foreground"
+            >
+              {value ? "Enabled" : "Disabled"}
             </Label>
           </div>
-        )
+        );
 
-      case 'select': {
-        const selectValue = value !== undefined && value !== null && value !== ''
-          ? String(value)
-          : (field.default !== undefined ? String(field.default) : '__empty__')
+      case "select": {
+        const selectValue =
+          value !== undefined && value !== null && value !== ""
+            ? String(value)
+            : field.default !== undefined
+              ? String(field.default)
+              : "__empty__";
         return (
           <Select
             value={selectValue}
             onValueChange={(v) => {
-              if (v === '__empty__') {
-                onChange(undefined)
-                return
+              if (v === "__empty__") {
+                onChange(undefined);
+                return;
               }
               // Try to preserve the original type (number if it was a number)
-              const originalOption = field.options?.find(opt => String(opt) === v)
-              onChange(originalOption !== undefined ? originalOption : v)
+              const originalOption = field.options?.find(
+                (opt) => String(opt) === v,
+              );
+              onChange(originalOption !== undefined ? originalOption : v);
             }}
             disabled={disabled}
           >
             <SelectTrigger id={field.name}>
-              <SelectValue placeholder={`Select ${field.label.toLowerCase()}`} />
+              <SelectValue
+                placeholder={`Select ${field.label.toLowerCase()}`}
+              />
             </SelectTrigger>
             <SelectContent>
               {field.options?.map((option) => (
@@ -308,39 +354,49 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
               ))}
             </SelectContent>
           </Select>
-        )
+        );
       }
 
-      case 'size':
+      case "size":
         return (
           <SizeSelector
-            value={(value as string) || field.default as string || '1024*1024'}
+            value={
+              (value as string) || (field.default as string) || "1024*1024"
+            }
             onChange={(v) => onChange(v)}
             disabled={disabled}
             min={field.min}
             max={field.max}
           />
-        )
+        );
 
-      case 'file':
-      case 'file-array':
+      case "file":
+      case "file-array":
         return (
           <FileUpload
-            accept={field.accept || '*/*'}
-            multiple={field.type === 'file-array'}
+            accept={field.accept || "*/*"}
+            multiple={field.type === "file-array"}
             maxFiles={field.maxFiles || 1}
-            value={(value as string | string[]) || (field.type === 'file-array' ? [] : '')}
+            value={
+              (value as string | string[]) ||
+              (field.type === "file-array" ? [] : "")
+            }
             onChange={onChange}
             disabled={disabled}
             placeholder={field.placeholder}
-            isMaskField={['mask_image', 'mask_image_url', 'mask_images', 'mask_image_urls'].includes(field.name)}
+            isMaskField={[
+              "mask_image",
+              "mask_image_url",
+              "mask_images",
+              "mask_image_urls",
+            ].includes(field.name)}
             formValues={formValues}
             onUploadingChange={onUploadingChange}
             onUploadFile={onUploadFile}
           />
-        )
+        );
 
-      case 'loras':
+      case "loras":
         return (
           <LoraSelector
             value={(value as LoraItem[]) || []}
@@ -348,23 +404,24 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
             maxItems={field.maxFiles || 3}
             disabled={disabled}
           />
-        )
+        );
 
       default:
         return (
           <Input
             id={field.name}
             type="text"
-            value={(value as string) || ''}
+            value={(value as string) || ""}
             onChange={(e) => onChange(e.target.value)}
             disabled={disabled}
           />
-        )
+        );
     }
-  }
+  };
 
   // Check if this is a prompt field that can be optimized (only main "prompt", not negative_prompt)
-  const isOptimizablePrompt = field.name === 'prompt' && field.type === 'textarea'
+  const isOptimizablePrompt =
+    field.name === "prompt" && field.type === "textarea";
 
   return (
     <div className="space-y-2">
@@ -375,48 +432,70 @@ export function FormField({ field, value, onChange, disabled = false, error, mod
             <Label
               htmlFor={field.name}
               className={cn(
-                field.required && "after:content-['*'] after:ml-0.5 after:text-destructive",
-                error && "text-destructive"
+                field.required &&
+                  "after:content-['*'] after:ml-0.5 after:text-destructive",
+                error && "text-destructive",
               )}
             >
               {field.label}
             </Label>
           </span>
-          {tooltipDescription && field.description && field.type !== 'text' && field.type !== 'textarea' && (
-            <Tooltip delayDuration={0}>
-              <TooltipTrigger asChild>
-                <Info className="h-3.5 w-3.5 text-muted-foreground shrink-0 translate-y-px" />
-              </TooltipTrigger>
-              <TooltipContent side="top" className="max-w-[280px]">
-                <p className="text-xs">{field.description}{field.min !== undefined && field.max !== undefined ? ` (${field.min} - ${field.max})` : ''}</p>
-              </TooltipContent>
-            </Tooltip>
-          )}
+          {tooltipDescription &&
+            field.description &&
+            field.type !== "text" &&
+            field.type !== "textarea" && (
+              <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <Info className="h-3.5 w-3.5 text-muted-foreground shrink-0 translate-y-px" />
+                </TooltipTrigger>
+                <TooltipContent side="top" className="max-w-[280px]">
+                  <p className="text-xs">
+                    {field.description}
+                    {field.min !== undefined && field.max !== undefined
+                      ? ` (${field.min} - ${field.max})`
+                      : ""}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            )}
           {isOptimizablePrompt && (
             <PromptOptimizer
-              currentPrompt={(value as string) || ''}
+              currentPrompt={(value as string) || ""}
               onOptimized={(optimized) => onChange(optimized)}
               disabled={disabled}
               modelType={modelType}
               imageValue={imageValue}
             />
           )}
-          {field.min !== undefined && field.max !== undefined && (tooltipDescription ? !field.description : true) && (
-            <span className="text-xs text-muted-foreground">
-              ({field.min} - {field.max})
-            </span>
-          )}
+          {field.min !== undefined &&
+            field.max !== undefined &&
+            (tooltipDescription ? !field.description : true) && (
+              <span className="text-xs text-muted-foreground">
+                ({field.min} - {field.max})
+              </span>
+            )}
         </div>
       )}
-      <div className={cn(field.type !== 'loras' && field.type !== 'file' && field.type !== 'file-array' && "overflow-hidden", error && "[&_input]:border-destructive [&_textarea]:border-destructive")}>
+      <div
+        className={cn(
+          field.type !== "loras" &&
+            field.type !== "file" &&
+            field.type !== "file-array" &&
+            "overflow-hidden",
+          error &&
+            "[&_input]:border-destructive [&_textarea]:border-destructive",
+        )}
+      >
         {renderInput()}
       </div>
-      {error && (
-        <p className="text-xs text-destructive">{error}</p>
-      )}
-      {!tooltipDescription && !error && field.description && field.type !== 'text' && field.type !== 'textarea' && (
-        <p className="text-xs text-muted-foreground">{field.description}</p>
-      )}
+      {error && <p className="text-xs text-destructive">{error}</p>}
+      {!tooltipDescription &&
+        !error &&
+        field.description &&
+        field.type !== "text" &&
+        field.type !== "textarea" && (
+          <p className="text-xs text-muted-foreground">{field.description}</p>
+        )}
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/HistoryDrawer.tsx b/src/components/playground/HistoryDrawer.tsx
new file mode 100644
index 00000000..55fb95bf
--- /dev/null
+++ b/src/components/playground/HistoryDrawer.tsx
@@ -0,0 +1,219 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import type { GenerationHistoryItem } from "@/types/prediction";
+import { cn } from "@/lib/utils";
+import {
+  ChevronUp,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+
+interface HistoryDrawerProps {
+  history: GenerationHistoryItem[];
+  selectedIndex: number | null;
+  onSelect: (index: number | null) => void;
+}
+
+function ThumbnailContent({ item }: { item: GenerationHistoryItem }) {
+  if (item.thumbnailUrl) {
+    if (item.thumbnailType === "video") {
+      return (
+        <video
+          src={item.thumbnailUrl}
+          className="w-full h-full object-cover"
+          muted
+          playsInline
+          preload="metadata"
+        />
+      );
+    }
+    return (
+      <img
+        src={item.thumbnailUrl}
+        alt=""
+        className="w-full h-full object-cover"
+        loading="lazy"
+      />
+    );
+  }
+  return (
+    <div className="w-full h-full flex items-center justify-center text-muted-foreground text-[10px]">
+      No preview
+    </div>
+  );
+}
+
+export function HistoryDrawer({
+  history,
+  selectedIndex,
+  onSelect,
+}: HistoryDrawerProps) {
+  const { t } = useTranslation();
+  const [isExpanded, setIsExpanded] = useState(true);
+  const userCollapsedRef = useRef(false);
+  const prevLenRef = useRef(history.length);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Auto-expand when new items arrive, unless user manually collapsed
+  useEffect(() => {
+    if (history.length > prevLenRef.current && !userCollapsedRef.current) {
+      setIsExpanded(true);
+    }
+    prevLenRef.current = history.length;
+  }, [history.length]);
+
+  const handleToggle = () => {
+    const next = !isExpanded;
+    setIsExpanded(next);
+    userCollapsedRef.current = !next;
+  };
+
+  // Navigate history: prev / next with wrap-around
+  const navigate = useCallback(
+    (direction: "prev" | "next") => {
+      if (history.length === 0) return;
+      if (selectedIndex === null) {
+        onSelect(0);
+        return;
+      }
+      if (direction === "prev") {
+        onSelect(selectedIndex === 0 ? history.length - 1 : selectedIndex - 1);
+      } else {
+        onSelect(selectedIndex === history.length - 1 ? 0 : selectedIndex + 1);
+      }
+    },
+    [history.length, selectedIndex, onSelect],
+  );
+
+  // Keyboard: Left/Right arrows to navigate, Esc to deselect
+  useEffect(() => {
+    if (history.length === 0) return;
+    const handler = (e: KeyboardEvent) => {
+      // Don't intercept if user is typing in an input/textarea
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return;
+      // Don't intercept if a dialog/modal is open (e.g. fullscreen preview, batch detail)
+      if (document.querySelector("[role='dialog']")) return;
+
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        navigate("prev");
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        navigate("next");
+      } else if (e.key === "Escape" && selectedIndex !== null) {
+        e.preventDefault();
+        onSelect(null);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [history.length, selectedIndex, navigate, onSelect]);
+
+  // Scroll selected thumbnail into view
+  useEffect(() => {
+    if (selectedIndex === null || !scrollRef.current) return;
+    const child = scrollRef.current.children[selectedIndex] as HTMLElement;
+    if (child) {
+      child.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }, [selectedIndex]);
+
+  // Hide entirely when no history
+  if (history.length === 0) return null;
+
+  return (
+    <div className="border-t bg-card/80 backdrop-blur shrink-0">
+      {/* Toggle handle — centered pill button */}
+      <div className="flex justify-center -mt-3 mb-0 relative z-10">
+        <button
+          onClick={handleToggle}
+          className="flex items-center justify-center w-10 h-5 rounded-t-lg bg-card border border-b-0 border-border hover:bg-accent/50 transition-colors"
+        >
+          {isExpanded ? (
+            <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+          ) : (
+            <ChevronUp className="h-3.5 w-3.5 text-muted-foreground" />
+          )}
+        </button>
+      </div>
+
+      {/* Header row with nav buttons */}
+      <div className="flex items-center justify-between px-4 pb-1.5">
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {t("playground.recentGenerations", "Recent Generations")}
+        </span>
+        <div className="flex items-center gap-1.5">
+          {history.length > 1 && (
+            <>
+              <kbd className="hidden md:inline text-[9px] text-muted-foreground/40 font-mono px-1 py-0.5 rounded border border-border/40">
+                ← →
+              </kbd>
+              <button
+                onClick={() => navigate("prev")}
+                className="flex items-center justify-center w-5 h-5 rounded bg-muted/60 hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ChevronLeft className="h-3.5 w-3.5" />
+              </button>
+              <span className="text-[10px] text-muted-foreground/70 tabular-nums min-w-[3ch] text-center">
+                {selectedIndex !== null ? selectedIndex + 1 : "-"}/
+                {history.length}
+              </span>
+              <button
+                onClick={() => navigate("next")}
+                className="flex items-center justify-center w-5 h-5 rounded bg-muted/60 hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ChevronRight className="h-3.5 w-3.5" />
+              </button>
+            </>
+          )}
+          {history.length <= 1 && (
+            <span className="text-[10px] text-muted-foreground/70">
+              {history.length} {history.length === 1 ? "item" : "items"}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Thumbnails strip — animated expand/collapse */}
+      <div
+        className={cn(
+          "grid transition-[grid-template-rows] duration-300 ease-in-out",
+          isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        )}
+      >
+        <div className="overflow-y-hidden">
+          <div
+            ref={scrollRef}
+            className="flex gap-2 px-4 pb-1 mb-2 overflow-x-auto"
+          >
+            {history.map((item, index) => (
+              <button
+                key={item.id}
+                onClick={() => onSelect(selectedIndex === index ? null : index)}
+                className={cn(
+                  "relative shrink-0 w-[72px] h-[72px] rounded-lg overflow-hidden bg-muted border-2 transition-all hover:scale-105",
+                  selectedIndex === index
+                    ? "border-primary shadow-md shadow-primary/20"
+                    : index === 0 && selectedIndex === null
+                      ? "border-primary/40"
+                      : "border-transparent hover:border-muted-foreground/30",
+                )}
+              >
+                <ThumbnailContent item={item} />
+                <span className="absolute bottom-0 right-0 bg-black/60 text-white text-[9px] px-1 rounded-tl font-medium">
+                  {index + 1}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/playground/HistoryPanel.tsx b/src/components/playground/HistoryPanel.tsx
index e907606e..08f78481 100644
--- a/src/components/playground/HistoryPanel.tsx
+++ b/src/components/playground/HistoryPanel.tsx
@@ -1,36 +1,36 @@
-import { useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { GenerationHistoryItem } from '@/types/prediction'
-import { cn } from '@/lib/utils'
+import { useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import type { GenerationHistoryItem } from "@/types/prediction";
+import { cn } from "@/lib/utils";
 
 interface HistoryPanelProps {
-  history: GenerationHistoryItem[]
-  selectedIndex: number | null
-  onSelect: (index: number | null) => void
-  direction?: 'vertical' | 'horizontal'
+  history: GenerationHistoryItem[];
+  selectedIndex: number | null;
+  onSelect: (index: number | null) => void;
+  direction?: "vertical" | "horizontal";
 }
 
 export function HistoryPanel({
   history,
   selectedIndex,
   onSelect,
-  direction = 'vertical'
+  direction = "vertical",
 }: HistoryPanelProps) {
-  const { t } = useTranslation()
-  const scrollRef = useRef<HTMLDivElement>(null)
+  const { t } = useTranslation();
+  const scrollRef = useRef<HTMLDivElement>(null);
 
   // Auto-scroll to show newest item when history grows
   useEffect(() => {
     if (scrollRef.current) {
-      if (direction === 'vertical') {
-        scrollRef.current.scrollTop = 0
+      if (direction === "vertical") {
+        scrollRef.current.scrollTop = 0;
       } else {
-        scrollRef.current.scrollLeft = 0
+        scrollRef.current.scrollLeft = 0;
       }
     }
-  }, [history.length, direction])
+  }, [history.length, direction]);
 
-  if (direction === 'horizontal') {
+  if (direction === "horizontal") {
     return (
       <div className="border-t bg-muted/30 shrink-0">
         <div
@@ -42,12 +42,12 @@ export function HistoryPanel({
               key={item.id}
               onClick={() => onSelect(selectedIndex === index ? null : index)}
               className={cn(
-                'relative shrink-0 w-16 h-16 rounded-md overflow-hidden bg-muted border-2 transition-all',
+                "relative shrink-0 w-16 h-16 rounded-md overflow-hidden bg-muted border-2 transition-all",
                 selectedIndex === index
-                  ? 'border-blue-500 shadow-md'
+                  ? "border-blue-500 shadow-md"
                   : index === 0 && selectedIndex === null
-                    ? 'border-blue-500/50'
-                    : 'border-transparent hover:border-muted-foreground/30'
+                    ? "border-blue-500/50"
+                    : "border-transparent hover:border-muted-foreground/30",
               )}
             >
               <ThumbnailContent item={item} />
@@ -58,14 +58,14 @@ export function HistoryPanel({
           ))}
         </div>
       </div>
-    )
+    );
   }
 
   // Vertical layout (desktop)
   return (
     <div className="w-[120px] h-full shrink-0 border-l bg-muted/30 flex flex-col">
       <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground border-b truncate">
-        {t('playground.history.title')}
+        {t("playground.history.title")}
       </div>
       <div
         ref={scrollRef}
@@ -76,12 +76,12 @@ export function HistoryPanel({
             key={item.id}
             onClick={() => onSelect(selectedIndex === index ? null : index)}
             className={cn(
-              'relative w-full aspect-square rounded-md overflow-hidden bg-muted border-2 transition-all',
+              "relative w-full aspect-square rounded-md overflow-hidden bg-muted border-2 transition-all",
               selectedIndex === index
-                ? 'border-blue-500 shadow-md'
+                ? "border-blue-500 shadow-md"
                 : index === 0 && selectedIndex === null
-                  ? 'border-blue-500/50'
-                  : 'border-transparent hover:border-muted-foreground/30'
+                  ? "border-blue-500/50"
+                  : "border-transparent hover:border-muted-foreground/30",
             )}
           >
             <ThumbnailContent item={item} />
@@ -92,11 +92,11 @@ export function HistoryPanel({
         ))}
       </div>
     </div>
-  )
+  );
 }
 
 function ThumbnailContent({ item }: { item: GenerationHistoryItem }) {
-  if (item.thumbnailUrl && item.thumbnailType === 'image') {
+  if (item.thumbnailUrl && item.thumbnailType === "image") {
     return (
       <img
         src={item.thumbnailUrl}
@@ -104,10 +104,10 @@ function ThumbnailContent({ item }: { item: GenerationHistoryItem }) {
         className="w-full h-full object-cover"
         loading="lazy"
       />
-    )
+    );
   }
 
-  if (item.thumbnailUrl && item.thumbnailType === 'video') {
+  if (item.thumbnailUrl && item.thumbnailType === "video") {
     return (
       <video
         src={item.thumbnailUrl}
@@ -115,7 +115,7 @@ function ThumbnailContent({ item }: { item: GenerationHistoryItem }) {
         muted
         preload="metadata"
       />
-    )
+    );
   }
 
   // Fallback: show a generic icon
@@ -136,5 +136,5 @@ function ThumbnailContent({ item }: { item: GenerationHistoryItem }) {
         <circle cx="12" cy="13" r="3" />
       </svg>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/LoraSelector.tsx b/src/components/playground/LoraSelector.tsx
index 338e7f4c..46f8e82e 100644
--- a/src/components/playground/LoraSelector.tsx
+++ b/src/components/playground/LoraSelector.tsx
@@ -1,65 +1,79 @@
-import { useState } from 'react'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Slider } from '@/components/ui/slider'
-import { X, Plus } from 'lucide-react'
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import { X, Plus } from "lucide-react";
+import { toast } from "@/hooks/useToast";
 
 export interface LoraItem {
-  path: string
-  scale: number
+  path: string;
+  scale: number;
 }
 
 interface LoraSelectorProps {
-  value: LoraItem[]
-  onChange: (value: LoraItem[]) => void
-  maxItems?: number
-  disabled?: boolean
+  value: LoraItem[];
+  onChange: (value: LoraItem[]) => void;
+  maxItems?: number;
+  disabled?: boolean;
 }
 
 export function LoraSelector({
   value = [],
   onChange,
   maxItems = 3,
-  disabled = false
+  disabled = false,
 }: LoraSelectorProps) {
-  const [customPath, setCustomPath] = useState('')
+  const [customPath, setCustomPath] = useState("");
 
   const addLora = (lora: LoraItem) => {
-    if (value.length >= maxItems) return
-    // Check if already added
-    if (value.some(v => v.path === lora.path)) return
-    onChange([...value, lora])
-  }
+    if (value.length >= maxItems) {
+      toast.info(`Maximum ${maxItems} LoRAs allowed`);
+      return;
+    }
+    if (value.some((v) => v.path === lora.path)) {
+      toast.info("LoRA already added");
+      return;
+    }
+    onChange([...value, lora]);
+  };
 
   const removeLora = (index: number) => {
-    const newValue = [...value]
-    newValue.splice(index, 1)
-    onChange(newValue)
-  }
+    const newValue = [...value];
+    newValue.splice(index, 1);
+    onChange(newValue);
+  };
 
   const updateScale = (index: number, scale: number) => {
-    const newValue = [...value]
-    newValue[index] = { ...newValue[index], scale }
-    onChange(newValue)
-  }
+    const newValue = [...value];
+    newValue[index] = { ...newValue[index], scale };
+    onChange(newValue);
+  };
 
   const handleAddCustom = () => {
-    if (!customPath.trim()) return
-    addLora({ path: customPath.trim(), scale: 1 })
-    setCustomPath('')
-  }
+    if (!customPath.trim()) return;
+    addLora({ path: customPath.trim(), scale: 1 });
+    setCustomPath("");
+  };
 
   return (
     <div className="space-y-4">
       {/* Selected LoRAs with scale sliders */}
       {value.length > 0 && (
         <div className="space-y-3">
-          <Label className="text-xs text-muted-foreground">Selected LoRAs ({value.length}/{maxItems})</Label>
+          <Label className="text-xs text-muted-foreground">
+            Selected LoRAs ({value.length}/{maxItems})
+          </Label>
           {value.map((lora, index) => (
-            <div key={lora.path} className="space-y-2 p-3 bg-muted/50 rounded-lg">
+            <div
+              key={lora.path}
+              className="space-y-2 p-3 bg-muted/50 rounded-lg"
+            >
               <div className="flex items-start justify-between gap-2">
-                <span className="text-sm font-medium break-all flex-1" title={lora.path}>
+                <span
+                  className="text-sm font-medium break-all flex-1"
+                  title={lora.path}
+                >
                   {lora.path}
                 </span>
                 <Button
@@ -84,7 +98,9 @@ export function LoraSelector({
                   disabled={disabled}
                   className="flex-1"
                 />
-                <span className="text-xs w-8 text-right">{lora.scale.toFixed(1)}</span>
+                <span className="text-xs w-8 text-right">
+                  {lora.scale.toFixed(1)}
+                </span>
               </div>
             </div>
           ))}
@@ -94,7 +110,9 @@ export function LoraSelector({
       {/* Custom LoRA input */}
       {value.length < maxItems && (
         <div className="space-y-2">
-          <Label className="text-xs text-muted-foreground">Add Custom LoRA</Label>
+          <Label className="text-xs text-muted-foreground">
+            Add Custom LoRA
+          </Label>
           <div className="flex gap-2">
             <Input
               type="text"
@@ -103,7 +121,9 @@ export function LoraSelector({
               onChange={(e) => setCustomPath(e.target.value)}
               disabled={disabled}
               className="flex-1"
-              onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddCustom())}
+              onKeyDown={(e) =>
+                e.key === "Enter" && (e.preventDefault(), handleAddCustom())
+              }
             />
             <Button
               type="button"
@@ -121,5 +141,5 @@ export function LoraSelector({
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/MaskEditor.tsx b/src/components/playground/MaskEditor.tsx
index a6ba9371..03ae1856 100644
--- a/src/components/playground/MaskEditor.tsx
+++ b/src/components/playground/MaskEditor.tsx
@@ -1,20 +1,45 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { Slider } from '@/components/ui/slider'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import { Paintbrush, Eraser, PaintBucket, RefreshCw, Trash2, Undo2, Redo2, Loader2 } from 'lucide-react'
-import { floodFill, invertMask, clearCanvas, canvasToBlob, extractVideoFrame } from '@/lib/maskUtils'
-
-type Tool = 'brush' | 'eraser' | 'fill'
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  Paintbrush,
+  Eraser,
+  PaintBucket,
+  RefreshCw,
+  Trash2,
+  Undo2,
+  Redo2,
+  Loader2,
+} from "lucide-react";
+import {
+  floodFill,
+  invertMask,
+  clearCanvas,
+  canvasToBlob,
+  extractVideoFrame,
+} from "@/lib/maskUtils";
+
+type Tool = "brush" | "eraser" | "fill";
 
 interface MaskEditorProps {
-  referenceImageUrl?: string
-  referenceVideoUrl?: string
-  onComplete: (blob: Blob) => void
-  onClose: () => void
-  disabled?: boolean
+  referenceImageUrl?: string;
+  referenceVideoUrl?: string;
+  onComplete: (blob: Blob) => void;
+  onClose: () => void;
+  disabled?: boolean;
 }
 
 export function MaskEditor({
@@ -22,365 +47,414 @@ export function MaskEditor({
   referenceVideoUrl,
   onComplete,
   onClose,
-  disabled = false
+  disabled = false,
 }: MaskEditorProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
   // Canvas refs
-  const containerRef = useRef<HTMLDivElement>(null)
-  const backgroundCanvasRef = useRef<HTMLCanvasElement>(null)
-  const maskCanvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
+  const backgroundCanvasRef = useRef<HTMLCanvasElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
 
   // State
-  const [tool, setTool] = useState<Tool>('brush')
-  const [brushSize, setBrushSize] = useState(30)
-  const [isDrawing, setIsDrawing] = useState(false)
-  const [history, setHistory] = useState<ImageData[]>([])
-  const [historyIndex, setHistoryIndex] = useState(-1)
-  const [isLoading, setIsLoading] = useState(true)
-  const [canvasSize, setCanvasSize] = useState({ width: 512, height: 512 })
-  const [referenceImage, setReferenceImage] = useState<HTMLImageElement | null>(null)
-  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
+  const [tool, setTool] = useState<Tool>("brush");
+  const [brushSize, setBrushSize] = useState(30);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [history, setHistory] = useState<ImageData[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const [isLoading, setIsLoading] = useState(true);
+  const [canvasSize, setCanvasSize] = useState({ width: 512, height: 512 });
+  const [referenceImage, setReferenceImage] = useState<HTMLImageElement | null>(
+    null,
+  );
+  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(
+    null,
+  );
 
   // Last position for smooth line drawing
-  const lastPosRef = useRef<{ x: number; y: number } | null>(null)
+  const lastPosRef = useRef<{ x: number; y: number } | null>(null);
 
   // Load reference image
   useEffect(() => {
     const loadImage = async () => {
-      setIsLoading(true)
+      setIsLoading(true);
 
-      let imageUrl = referenceImageUrl
+      let imageUrl = referenceImageUrl;
 
       // If we have a video, extract first frame
       if (!imageUrl && referenceVideoUrl) {
-        const frameUrl = await extractVideoFrame(referenceVideoUrl)
+        const frameUrl = await extractVideoFrame(referenceVideoUrl);
         if (frameUrl) {
-          imageUrl = frameUrl
+          imageUrl = frameUrl;
         }
       }
 
       if (imageUrl) {
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
+        const img = new Image();
+        img.crossOrigin = "anonymous";
         img.onload = () => {
-          setReferenceImage(img)
+          setReferenceImage(img);
           // Calculate canvas size to fit within max dimensions while maintaining aspect ratio
-          const maxWidth = 800
-          const maxHeight = 600
-          let width = img.width
-          let height = img.height
+          const maxWidth = 800;
+          const maxHeight = 600;
+          let width = img.width;
+          let height = img.height;
 
           if (width > maxWidth) {
-            height = (height * maxWidth) / width
-            width = maxWidth
+            height = (height * maxWidth) / width;
+            width = maxWidth;
           }
           if (height > maxHeight) {
-            width = (width * maxHeight) / height
-            height = maxHeight
+            width = (width * maxHeight) / height;
+            height = maxHeight;
           }
 
-          setCanvasSize({ width: Math.round(width), height: Math.round(height) })
-          setIsLoading(false)
-        }
+          setCanvasSize({
+            width: Math.round(width),
+            height: Math.round(height),
+          });
+          setIsLoading(false);
+        };
         img.onerror = () => {
           // Fallback to default size if image fails to load
-          setCanvasSize({ width: 512, height: 512 })
-          setIsLoading(false)
-        }
-        img.src = imageUrl
+          setCanvasSize({ width: 512, height: 512 });
+          setIsLoading(false);
+        };
+        img.src = imageUrl;
       } else {
         // No reference, use default size
-        setCanvasSize({ width: 512, height: 512 })
-        setIsLoading(false)
+        setCanvasSize({ width: 512, height: 512 });
+        setIsLoading(false);
       }
-    }
+    };
 
-    loadImage()
-  }, [referenceImageUrl, referenceVideoUrl])
+    loadImage();
+  }, [referenceImageUrl, referenceVideoUrl]);
 
   // Initialize canvas when size is set
   useEffect(() => {
-    if (isLoading) return
+    if (isLoading) return;
 
-    const bgCanvas = backgroundCanvasRef.current
-    const maskCanvas = maskCanvasRef.current
-    if (!bgCanvas || !maskCanvas) return
+    const bgCanvas = backgroundCanvasRef.current;
+    const maskCanvas = maskCanvasRef.current;
+    if (!bgCanvas || !maskCanvas) return;
 
-    const bgCtx = bgCanvas.getContext('2d')
-    const maskCtx = maskCanvas.getContext('2d')
-    if (!bgCtx || !maskCtx) return
+    const bgCtx = bgCanvas.getContext("2d");
+    const maskCtx = maskCanvas.getContext("2d");
+    if (!bgCtx || !maskCtx) return;
 
     // Draw reference image on background canvas
     if (referenceImage) {
-      bgCtx.drawImage(referenceImage, 0, 0, canvasSize.width, canvasSize.height)
+      bgCtx.drawImage(
+        referenceImage,
+        0,
+        0,
+        canvasSize.width,
+        canvasSize.height,
+      );
     } else {
       // Checkerboard pattern for transparency indication
-      bgCtx.fillStyle = '#333333'
-      bgCtx.fillRect(0, 0, canvasSize.width, canvasSize.height)
-      const gridSize = 20
-      bgCtx.fillStyle = '#444444'
+      bgCtx.fillStyle = "#333333";
+      bgCtx.fillRect(0, 0, canvasSize.width, canvasSize.height);
+      const gridSize = 20;
+      bgCtx.fillStyle = "#444444";
       for (let x = 0; x < canvasSize.width; x += gridSize * 2) {
         for (let y = 0; y < canvasSize.height; y += gridSize * 2) {
-          bgCtx.fillRect(x, y, gridSize, gridSize)
-          bgCtx.fillRect(x + gridSize, y + gridSize, gridSize, gridSize)
+          bgCtx.fillRect(x, y, gridSize, gridSize);
+          bgCtx.fillRect(x + gridSize, y + gridSize, gridSize, gridSize);
         }
       }
     }
 
     // Initialize mask canvas to black (all hidden)
-    clearCanvas(maskCtx)
+    clearCanvas(maskCtx);
 
     // Save initial state to history
-    const initialState = maskCtx.getImageData(0, 0, canvasSize.width, canvasSize.height)
-    setHistory([initialState])
-    setHistoryIndex(0)
-  }, [isLoading, canvasSize, referenceImage])
+    const initialState = maskCtx.getImageData(
+      0,
+      0,
+      canvasSize.width,
+      canvasSize.height,
+    );
+    setHistory([initialState]);
+    setHistoryIndex(0);
+  }, [isLoading, canvasSize, referenceImage]);
 
   // Save history snapshot
   const saveHistorySnapshot = useCallback(() => {
-    const maskCtx = maskCanvasRef.current?.getContext('2d')
-    if (!maskCtx) return
+    const maskCtx = maskCanvasRef.current?.getContext("2d");
+    if (!maskCtx) return;
 
-    const imageData = maskCtx.getImageData(0, 0, canvasSize.width, canvasSize.height)
+    const imageData = maskCtx.getImageData(
+      0,
+      0,
+      canvasSize.width,
+      canvasSize.height,
+    );
 
-    setHistory(prev => {
+    setHistory((prev) => {
       // Remove any future history if we're not at the end
-      const newHistory = prev.slice(0, historyIndex + 1)
-      newHistory.push(imageData)
+      const newHistory = prev.slice(0, historyIndex + 1);
+      newHistory.push(imageData);
 
       // Limit history size to prevent memory issues
       if (newHistory.length > 50) {
-        newHistory.shift()
-        return newHistory
+        newHistory.shift();
+        return newHistory;
       }
-      return newHistory
-    })
-    setHistoryIndex(prev => Math.min(prev + 1, 49))
-  }, [historyIndex, canvasSize])
+      return newHistory;
+    });
+    setHistoryIndex((prev) => Math.min(prev + 1, 49));
+  }, [historyIndex, canvasSize]);
 
   // Undo
   const undo = useCallback(() => {
-    if (historyIndex <= 0) return
+    if (historyIndex <= 0) return;
 
-    const newIndex = historyIndex - 1
-    const maskCtx = maskCanvasRef.current?.getContext('2d')
-    if (!maskCtx || !history[newIndex]) return
+    const newIndex = historyIndex - 1;
+    const maskCtx = maskCanvasRef.current?.getContext("2d");
+    if (!maskCtx || !history[newIndex]) return;
 
-    maskCtx.putImageData(history[newIndex], 0, 0)
-    setHistoryIndex(newIndex)
-  }, [historyIndex, history])
+    maskCtx.putImageData(history[newIndex], 0, 0);
+    setHistoryIndex(newIndex);
+  }, [historyIndex, history]);
 
   // Redo
   const redo = useCallback(() => {
-    if (historyIndex >= history.length - 1) return
+    if (historyIndex >= history.length - 1) return;
 
-    const newIndex = historyIndex + 1
-    const maskCtx = maskCanvasRef.current?.getContext('2d')
-    if (!maskCtx || !history[newIndex]) return
+    const newIndex = historyIndex + 1;
+    const maskCtx = maskCanvasRef.current?.getContext("2d");
+    if (!maskCtx || !history[newIndex]) return;
 
-    maskCtx.putImageData(history[newIndex], 0, 0)
-    setHistoryIndex(newIndex)
-  }, [historyIndex, history])
+    maskCtx.putImageData(history[newIndex], 0, 0);
+    setHistoryIndex(newIndex);
+  }, [historyIndex, history]);
 
   // Get coordinates relative to canvas (from clientX/clientY)
   const getCanvasCoords = useCallback((clientX: number, clientY: number) => {
-    const canvas = maskCanvasRef.current
-    if (!canvas) return null
+    const canvas = maskCanvasRef.current;
+    if (!canvas) return null;
 
-    const rect = canvas.getBoundingClientRect()
-    const scaleX = canvas.width / rect.width
-    const scaleY = canvas.height / rect.height
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
 
     return {
       x: (clientX - rect.left) * scaleX,
-      y: (clientY - rect.top) * scaleY
-    }
-  }, [])
+      y: (clientY - rect.top) * scaleY,
+    };
+  }, []);
 
   // Get display coordinates for cursor overlay (in CSS pixels)
   const getDisplayCoords = useCallback((clientX: number, clientY: number) => {
-    const canvas = maskCanvasRef.current
-    if (!canvas) return null
+    const canvas = maskCanvasRef.current;
+    if (!canvas) return null;
 
-    const rect = canvas.getBoundingClientRect()
+    const rect = canvas.getBoundingClientRect();
     return {
       x: clientX - rect.left,
-      y: clientY - rect.top
-    }
-  }, [])
+      y: clientY - rect.top,
+    };
+  }, []);
 
   // Draw at position
-  const drawAt = useCallback((x: number, y: number, lastX?: number, lastY?: number) => {
-    const maskCtx = maskCanvasRef.current?.getContext('2d')
-    if (!maskCtx) return
-
-    maskCtx.fillStyle = tool === 'eraser' ? '#000000' : '#FFFFFF'
-    maskCtx.strokeStyle = tool === 'eraser' ? '#000000' : '#FFFFFF'
-    maskCtx.lineWidth = brushSize
-    maskCtx.lineCap = 'round'
-    maskCtx.lineJoin = 'round'
-
-    if (lastX !== undefined && lastY !== undefined) {
-      // Draw line from last position to current
-      maskCtx.beginPath()
-      maskCtx.moveTo(lastX, lastY)
-      maskCtx.lineTo(x, y)
-      maskCtx.stroke()
-    } else {
-      // Draw circle at current position
-      maskCtx.beginPath()
-      maskCtx.arc(x, y, brushSize / 2, 0, Math.PI * 2)
-      maskCtx.fill()
-    }
-  }, [tool, brushSize])
+  const drawAt = useCallback(
+    (x: number, y: number, lastX?: number, lastY?: number) => {
+      const maskCtx = maskCanvasRef.current?.getContext("2d");
+      if (!maskCtx) return;
+
+      maskCtx.fillStyle = tool === "eraser" ? "#000000" : "#FFFFFF";
+      maskCtx.strokeStyle = tool === "eraser" ? "#000000" : "#FFFFFF";
+      maskCtx.lineWidth = brushSize;
+      maskCtx.lineCap = "round";
+      maskCtx.lineJoin = "round";
+
+      if (lastX !== undefined && lastY !== undefined) {
+        // Draw line from last position to current
+        maskCtx.beginPath();
+        maskCtx.moveTo(lastX, lastY);
+        maskCtx.lineTo(x, y);
+        maskCtx.stroke();
+      } else {
+        // Draw circle at current position
+        maskCtx.beginPath();
+        maskCtx.arc(x, y, brushSize / 2, 0, Math.PI * 2);
+        maskCtx.fill();
+      }
+    },
+    [tool, brushSize],
+  );
 
   // Shared pointer-down logic
-  const handlePointerDown = useCallback((clientX: number, clientY: number) => {
-    if (disabled) return
-
-    const coords = getCanvasCoords(clientX, clientY)
-    if (!coords) return
-
-    if (tool === 'fill') {
-      const maskCtx = maskCanvasRef.current?.getContext('2d')
-      if (!maskCtx) return
-
-      saveHistorySnapshot()
-      const fillColor: [number, number, number, number] = [255, 255, 255, 255]
-      floodFill(maskCtx, coords.x, coords.y, fillColor)
-      saveHistorySnapshot()
-      return
-    }
+  const handlePointerDown = useCallback(
+    (clientX: number, clientY: number) => {
+      if (disabled) return;
+
+      const coords = getCanvasCoords(clientX, clientY);
+      if (!coords) return;
+
+      if (tool === "fill") {
+        const maskCtx = maskCanvasRef.current?.getContext("2d");
+        if (!maskCtx) return;
+
+        saveHistorySnapshot();
+        const fillColor: [number, number, number, number] = [
+          255, 255, 255, 255,
+        ];
+        floodFill(maskCtx, coords.x, coords.y, fillColor);
+        saveHistorySnapshot();
+        return;
+      }
 
-    setIsDrawing(true)
-    lastPosRef.current = coords
-    drawAt(coords.x, coords.y)
-  }, [disabled, tool, getCanvasCoords, drawAt, saveHistorySnapshot])
+      setIsDrawing(true);
+      lastPosRef.current = coords;
+      drawAt(coords.x, coords.y);
+    },
+    [disabled, tool, getCanvasCoords, drawAt, saveHistorySnapshot],
+  );
 
   // Shared pointer-move logic
-  const handlePointerMove = useCallback((clientX: number, clientY: number) => {
-    const displayCoords = getDisplayCoords(clientX, clientY)
-    if (displayCoords) {
-      setCursorPos(displayCoords)
-    }
+  const handlePointerMove = useCallback(
+    (clientX: number, clientY: number) => {
+      const displayCoords = getDisplayCoords(clientX, clientY);
+      if (displayCoords) {
+        setCursorPos(displayCoords);
+      }
 
-    if (!isDrawing || tool === 'fill') return
+      if (!isDrawing || tool === "fill") return;
 
-    const coords = getCanvasCoords(clientX, clientY)
-    if (!coords) return
+      const coords = getCanvasCoords(clientX, clientY);
+      if (!coords) return;
 
-    const lastPos = lastPosRef.current
-    drawAt(coords.x, coords.y, lastPos?.x, lastPos?.y)
-    lastPosRef.current = coords
-  }, [isDrawing, tool, getCanvasCoords, getDisplayCoords, drawAt])
+      const lastPos = lastPosRef.current;
+      drawAt(coords.x, coords.y, lastPos?.x, lastPos?.y);
+      lastPosRef.current = coords;
+    },
+    [isDrawing, tool, getCanvasCoords, getDisplayCoords, drawAt],
+  );
 
   // Shared pointer-up logic
   const handlePointerUp = useCallback(() => {
     if (isDrawing) {
-      setIsDrawing(false)
-      lastPosRef.current = null
-      saveHistorySnapshot()
+      setIsDrawing(false);
+      lastPosRef.current = null;
+      saveHistorySnapshot();
     }
-  }, [isDrawing, saveHistorySnapshot])
+  }, [isDrawing, saveHistorySnapshot]);
 
   // Mouse event handlers
-  const handleMouseDown = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    handlePointerDown(e.clientX, e.clientY)
-  }, [handlePointerDown])
-
-  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    handlePointerMove(e.clientX, e.clientY)
-  }, [handlePointerMove])
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      handlePointerDown(e.clientX, e.clientY);
+    },
+    [handlePointerDown],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      handlePointerMove(e.clientX, e.clientY);
+    },
+    [handlePointerMove],
+  );
 
   const handleMouseUp = useCallback(() => {
-    handlePointerUp()
-  }, [handlePointerUp])
+    handlePointerUp();
+  }, [handlePointerUp]);
 
   const handleMouseLeave = useCallback(() => {
-    setCursorPos(null)
-    handlePointerUp()
-  }, [handlePointerUp])
+    setCursorPos(null);
+    handlePointerUp();
+  }, [handlePointerUp]);
 
   // Touch event handlers (mobile)
-  const handleTouchStart = useCallback((e: React.TouchEvent<HTMLCanvasElement>) => {
-    e.preventDefault()
-    if (e.touches.length !== 1) return
-    const touch = e.touches[0]
-    handlePointerDown(touch.clientX, touch.clientY)
-  }, [handlePointerDown])
-
-  const handleTouchMove = useCallback((e: React.TouchEvent<HTMLCanvasElement>) => {
-    e.preventDefault()
-    if (e.touches.length !== 1) return
-    const touch = e.touches[0]
-    handlePointerMove(touch.clientX, touch.clientY)
-  }, [handlePointerMove])
-
-  const handleTouchEnd = useCallback((e: React.TouchEvent<HTMLCanvasElement>) => {
-    e.preventDefault()
-    handlePointerUp()
-  }, [handlePointerUp])
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      e.preventDefault();
+      if (e.touches.length !== 1) return;
+      const touch = e.touches[0];
+      handlePointerDown(touch.clientX, touch.clientY);
+    },
+    [handlePointerDown],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      e.preventDefault();
+      if (e.touches.length !== 1) return;
+      const touch = e.touches[0];
+      handlePointerMove(touch.clientX, touch.clientY);
+    },
+    [handlePointerMove],
+  );
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent<HTMLCanvasElement>) => {
+      e.preventDefault();
+      handlePointerUp();
+    },
+    [handlePointerUp],
+  );
 
   // Clear all (reset to black)
   const handleClear = useCallback(() => {
-    const maskCtx = maskCanvasRef.current?.getContext('2d')
-    if (!maskCtx) return
+    const maskCtx = maskCanvasRef.current?.getContext("2d");
+    if (!maskCtx) return;
 
-    saveHistorySnapshot()
-    clearCanvas(maskCtx)
-    saveHistorySnapshot()
-  }, [saveHistorySnapshot])
+    saveHistorySnapshot();
+    clearCanvas(maskCtx);
+    saveHistorySnapshot();
+  }, [saveHistorySnapshot]);
 
   // Invert mask
   const handleInvert = useCallback(() => {
-    const maskCtx = maskCanvasRef.current?.getContext('2d')
-    if (!maskCtx) return
+    const maskCtx = maskCanvasRef.current?.getContext("2d");
+    if (!maskCtx) return;
 
-    saveHistorySnapshot()
-    invertMask(maskCtx)
-    saveHistorySnapshot()
-  }, [saveHistorySnapshot])
+    saveHistorySnapshot();
+    invertMask(maskCtx);
+    saveHistorySnapshot();
+  }, [saveHistorySnapshot]);
 
   // Complete and export
   const handleComplete = useCallback(async () => {
-    const maskCanvas = maskCanvasRef.current
-    if (!maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    if (!maskCanvas) return;
 
     try {
-      const blob = await canvasToBlob(maskCanvas)
-      onComplete(blob)
+      const blob = await canvasToBlob(maskCanvas);
+      onComplete(blob);
     } catch (error) {
-      console.error('Failed to export mask:', error)
+      console.error("Failed to export mask:", error);
     }
-  }, [onComplete])
+  }, [onComplete]);
 
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.ctrlKey || e.metaKey) {
-        if (e.key === 'z' && !e.shiftKey) {
-          e.preventDefault()
-          undo()
-        } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
-          e.preventDefault()
-          redo()
+        if (e.key === "z" && !e.shiftKey) {
+          e.preventDefault();
+          undo();
+        } else if ((e.key === "z" && e.shiftKey) || e.key === "y") {
+          e.preventDefault();
+          redo();
         }
       }
-    }
+    };
 
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [undo, redo])
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [undo, redo]);
 
-  const canUndo = historyIndex > 0
-  const canRedo = historyIndex < history.length - 1
+  const canUndo = historyIndex > 0;
+  const canRedo = historyIndex < history.length - 1;
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
       <DialogContent className="max-w-4xl p-0 gap-0 max-h-[100dvh] md:max-h-[90vh] flex flex-col overflow-hidden">
         <DialogHeader className="shrink-0 p-4 pb-2">
-          <DialogTitle>{t('playground.capture.maskEditor.title')}</DialogTitle>
+          <DialogTitle>{t("playground.capture.maskEditor.title")}</DialogTitle>
         </DialogHeader>
 
         <div className="flex-1 min-h-0 overflow-auto px-4 pb-2">
@@ -397,7 +471,7 @@ export function MaskEditor({
               className="relative mx-auto cursor-none"
               style={{
                 maxWidth: canvasSize.width,
-                width: '100%',
+                width: "100%",
                 aspectRatio: `${canvasSize.width} / ${canvasSize.height}`,
               }}
             >
@@ -407,7 +481,13 @@ export function MaskEditor({
                 width={canvasSize.width}
                 height={canvasSize.height}
                 className="absolute inset-0 w-full h-full rounded-lg"
-                style={referenceImage ? undefined : { filter: 'brightness(1.2) contrast(1.02) saturate(1.05)' }}
+                style={
+                  referenceImage
+                    ? undefined
+                    : {
+                        filter: "brightness(1.2) contrast(1.02) saturate(1.05)",
+                      }
+                }
               />
 
               {/* Mask canvas (drawing layer) */}
@@ -416,7 +496,7 @@ export function MaskEditor({
                 width={canvasSize.width}
                 height={canvasSize.height}
                 className="absolute inset-0 w-full h-full rounded-lg"
-                style={{ opacity: 0.4, touchAction: 'none' }}
+                style={{ opacity: 0.4, touchAction: "none" }}
                 onMouseDown={handleMouseDown}
                 onMouseMove={handleMouseMove}
                 onMouseUp={handleMouseUp}
@@ -427,7 +507,7 @@ export function MaskEditor({
               />
 
               {/* Brush cursor indicator */}
-              {cursorPos && tool !== 'fill' && (
+              {cursorPos && tool !== "fill" && (
                 <div
                   className="pointer-events-none absolute rounded-full border-2"
                   style={{
@@ -435,11 +515,15 @@ export function MaskEditor({
                     top: cursorPos.y,
                     width: brushSize,
                     height: brushSize,
-                    transform: 'translate(-50%, -50%)',
-                    borderColor: tool === 'eraser' ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)',
-                    boxShadow: tool === 'eraser'
-                      ? '0 0 0 1px rgba(255, 255, 255, 0.5)'
-                      : '0 0 0 1px rgba(0, 0, 0, 0.5)'
+                    transform: "translate(-50%, -50%)",
+                    borderColor:
+                      tool === "eraser"
+                        ? "rgba(0, 0, 0, 0.8)"
+                        : "rgba(255, 255, 255, 0.8)",
+                    boxShadow:
+                      tool === "eraser"
+                        ? "0 0 0 1px rgba(255, 255, 255, 0.5)"
+                        : "0 0 0 1px rgba(0, 0, 0, 0.5)",
                   }}
                 />
               )}
@@ -455,46 +539,52 @@ export function MaskEditor({
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant={tool === 'brush' ? 'default' : 'outline'}
+                    variant={tool === "brush" ? "default" : "outline"}
                     size="icon"
-                    onClick={() => setTool('brush')}
+                    onClick={() => setTool("brush")}
                     disabled={disabled || isLoading}
                     className="h-9 w-9"
                   >
                     <Paintbrush className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.brush')}</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.brush")}
+                </TooltipContent>
               </Tooltip>
 
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant={tool === 'eraser' ? 'default' : 'outline'}
+                    variant={tool === "eraser" ? "default" : "outline"}
                     size="icon"
-                    onClick={() => setTool('eraser')}
+                    onClick={() => setTool("eraser")}
                     disabled={disabled || isLoading}
                     className="h-9 w-9"
                   >
                     <Eraser className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.eraser')}</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.eraser")}
+                </TooltipContent>
               </Tooltip>
 
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant={tool === 'fill' ? 'default' : 'outline'}
+                    variant={tool === "fill" ? "default" : "outline"}
                     size="icon"
-                    onClick={() => setTool('fill')}
+                    onClick={() => setTool("fill")}
                     disabled={disabled || isLoading}
                     className="h-9 w-9"
                   >
                     <PaintBucket className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.fill')}</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.fill")}
+                </TooltipContent>
               </Tooltip>
             </div>
 
@@ -514,7 +604,9 @@ export function MaskEditor({
                     <RefreshCw className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.invert')}</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.invert")}
+                </TooltipContent>
               </Tooltip>
 
               <Tooltip>
@@ -529,7 +621,9 @@ export function MaskEditor({
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.clear')}</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.clear")}
+                </TooltipContent>
               </Tooltip>
             </div>
 
@@ -549,7 +643,9 @@ export function MaskEditor({
                     <Undo2 className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.undo')} (Ctrl+Z)</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.undo")} (Ctrl+Z)
+                </TooltipContent>
               </Tooltip>
 
               <Tooltip>
@@ -564,7 +660,9 @@ export function MaskEditor({
                     <Redo2 className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('playground.capture.maskEditor.redo')} (Ctrl+Shift+Z)</TooltipContent>
+                <TooltipContent>
+                  {t("playground.capture.maskEditor.redo")} (Ctrl+Shift+Z)
+                </TooltipContent>
               </Tooltip>
             </div>
 
@@ -573,7 +671,7 @@ export function MaskEditor({
             {/* Brush size */}
             <div className="flex items-center gap-3 flex-1 min-w-[150px] max-w-[250px]">
               <span className="text-xs text-muted-foreground whitespace-nowrap">
-                {t('playground.capture.maskEditor.brushSize')}
+                {t("playground.capture.maskEditor.brushSize")}
               </span>
               <Slider
                 value={[brushSize]}
@@ -581,28 +679,30 @@ export function MaskEditor({
                 min={1}
                 max={100}
                 step={1}
-                disabled={disabled || isLoading || tool === 'fill'}
+                disabled={disabled || isLoading || tool === "fill"}
                 className="flex-1"
               />
-              <span className="text-xs text-muted-foreground w-8 text-right">{brushSize}</span>
+              <span className="text-xs text-muted-foreground w-8 text-right">
+                {brushSize}
+              </span>
             </div>
           </div>
 
           {/* Hint */}
           <p className="text-xs text-muted-foreground mt-2">
-            {t('playground.capture.maskEditor.hint')}
+            {t("playground.capture.maskEditor.hint")}
           </p>
         </div>
 
         <DialogFooter className="shrink-0 p-4 pt-2 border-t">
           <Button variant="outline" onClick={onClose} disabled={disabled}>
-            {t('playground.capture.maskEditor.cancel')}
+            {t("playground.capture.maskEditor.cancel")}
           </Button>
           <Button onClick={handleComplete} disabled={disabled || isLoading}>
-            {t('playground.capture.maskEditor.done')}
+            {t("playground.capture.maskEditor.done")}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/src/components/playground/ModelSelector.tsx b/src/components/playground/ModelSelector.tsx
index 2d913ff1..caa78121 100644
--- a/src/components/playground/ModelSelector.tsx
+++ b/src/components/playground/ModelSelector.tsx
@@ -1,209 +1,466 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ChevronDown, Search, Check, X } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { fuzzySearch } from '@/lib/fuzzySearch'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import type { Model } from '@/types/model'
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Search, Check, X, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { fuzzySearch } from "@/lib/fuzzySearch";
+import { Label } from "@/components/ui/label";
+import type { Model } from "@/types/model";
 
 interface ModelSelectorProps {
-  models: Model[]
-  value: string | undefined
-  onChange: (modelId: string) => void
-  disabled?: boolean
+  models: Model[];
+  value: string | undefined;
+  onChange: (modelId: string) => void;
+  disabled?: boolean;
 }
 
-export function ModelSelector({ models, value, onChange, disabled }: ModelSelectorProps) {
-  const { t } = useTranslation()
-  const [isOpen, setIsOpen] = useState(false)
-  const [localSearch, setLocalSearch] = useState('')
-  const [debouncedSearch, setDebouncedSearch] = useState('')
-  const containerRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const listRef = useRef<HTMLDivElement>(null)
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+/** First two path segments = family. e.g. "bytedance/seedream-v5.0-lite/edit" → "bytedance/seedream-v5.0-lite" */
+function getModelFamily(modelId: string): string {
+  const parts = modelId.split("/");
+  if (parts.length <= 2) return modelId;
+  return parts.slice(0, 2).join("/");
+}
+
+/**
+ * Get the "base family" for grouping related models.
+ * Only strips clear speed-variant suffixes (-fast, -turbo) that indicate
+ * the same model at different speed tiers. Does NOT strip quality/size
+ * suffixes like -pro, -ultra, -lite which are distinct model variants.
+ */
+function getBaseFamily(modelId: string): string {
+  const family = getModelFamily(modelId);
+  const parts = family.split("/");
+  if (parts.length < 2) return family;
+  const baseName = parts[1].replace(/-(fast|turbo)$/i, "");
+  return `${parts[0]}/${baseName}`;
+}
+
+/** Provider = first segment. e.g. "bytedance/seedream-v5.0-lite" → "bytedance" */
+function getProvider(modelId: string): string {
+  return modelId.split("/")[0] || modelId;
+}
+
+/** Family short name = second segment. e.g. "bytedance/seedream-v5.0-lite" → "seedream-v5.0-lite" */
+function getFamilyName(modelId: string): string {
+  const parts = modelId.split("/");
+  return parts[1] || parts[0];
+}
+
+/** Format a slug to title case. e.g. "nano-banana-pro" → "Nano Banana Pro" */
+function formatSlug(s: string): string {
+  return s
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+/** Readable type label: "text-to-video" → "Text To Video" */
+function formatType(type: string): string {
+  return type
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+/**
+ * Get a short display label for a variant within its base family group.
+ * Shows the distinguishing parts: family suffix + path suffix.
+ * e.g. for base "wavespeed-ai/infinitetalk":
+ *   "wavespeed-ai/infinitetalk/video-to-video" → "video-to-video"
+ *   "wavespeed-ai/infinitetalk-fast/video-to-video" → "fast / video-to-video"
+ *   "wavespeed-ai/infinitetalk" → "infinitetalk"
+ */
+function getVariantLabel(modelId: string, baseFamily: string): string {
+  const family = getModelFamily(modelId);
+  const baseParts = baseFamily.split("/");
+  const familyParts = family.split("/");
+
+  // Difference in the second segment (e.g. "infinitetalk-fast" vs base "infinitetalk" → "fast")
+  const baseName = baseParts[1] || "";
+  const familyName = familyParts[1] || "";
+  let speedSuffix = "";
+  if (familyName !== baseName && familyName.startsWith(baseName)) {
+    speedSuffix = familyName.slice(baseName.length + 1); // strip the leading "-"
+  }
 
-  const selectedModel = models.find(m => m.model_id === value)
+  // Path suffix after the family (e.g. "/video-to-video")
+  const pathSuffix =
+    modelId.length > family.length ? modelId.slice(family.length + 1) : "";
 
-  // Debounce search updates for smooth typing
+  if (speedSuffix && pathSuffix) return `${speedSuffix} / ${pathSuffix}`;
+  if (speedSuffix) return speedSuffix;
+  if (pathSuffix) return pathSuffix;
+  return familyName;
+}
+
+export function ModelSelector({
+  models,
+  value,
+  onChange,
+  disabled,
+}: ModelSelectorProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [variantOpen, setVariantOpen] = useState(false);
+  const [localSearch, setLocalSearch] = useState("");
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const variantRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const selectedModel = models.find((m) => m.model_id === value);
+  const currentBaseFamily = value ? getBaseFamily(value) : "";
+
+  // Family variants: all models sharing the same base family (includes speed variants like -fast, -turbo)
+  const familyVariants = useMemo(() => {
+    if (!value) return [];
+    const base = getBaseFamily(value);
+    return models
+      .filter((m) => getBaseFamily(m.model_id) === base)
+      .sort((a, b) => a.model_id.localeCompare(b.model_id));
+  }, [models, value]);
+
+  // Group variants by model.type for the dropdown optgroups
+  const variantsByType = useMemo(() => {
+    const groups = new Map<string, Model[]>();
+    for (const v of familyVariants) {
+      const type = v.type || "other";
+      const arr = groups.get(type) ?? [];
+      arr.push(v);
+      groups.set(type, arr);
+    }
+    return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
+  }, [familyVariants]);
+
+  // Breadcrumb parts for the selected model
+  const breadcrumb = useMemo(() => {
+    if (!value) return null;
+    const provider = getProvider(value);
+    const familyName = getFamilyName(value);
+    return { provider, familyName };
+  }, [value]);
+
+  // Debounce search
   useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(() => {
-      setDebouncedSearch(localSearch)
-    }, 150) // Faster debounce for responsive feel
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(
+      () => setDebouncedSearch(localSearch),
+      150,
+    );
     return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-    }
-  }, [localSearch])
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [localSearch]);
+
+  // Unique families: one representative model per base family
+  const familyModels = useMemo(() => {
+    const seen = new Set<string>();
+    return models.filter((m) => {
+      const family = getBaseFamily(m.model_id);
+      if (seen.has(family)) return false;
+      seen.add(family);
+      return true;
+    });
+  }, [models]);
 
-  // Filter models using debounced search with fuzzy matching
-  // When no search: sort by selected model's provider prefix first, then alphabetically
   const filteredModels = useMemo(() => {
     if (!debouncedSearch.trim()) {
-      const selectedId = value || ''
-      const selectedPrefix = selectedId.split('/')[0]
-      // Family = first two path segments (e.g. "wavespeed-ai/wan-2.2-spicy")
-      const getFamily = (id: string) => id.split('/').slice(0, 2).join('/')
-      const selectedFamily = getFamily(selectedId)
-      const isSameFamily = (id: string) => getFamily(id) === selectedFamily
-      const isSameProvider = (id: string) => id.split('/')[0] === selectedPrefix
-
-      return [...models].sort((a, b) => {
-        const af = isSameFamily(a.model_id), bf = isSameFamily(b.model_id)
-        if (af && !bf) return -1
-        if (!af && bf) return 1
-        const ap = isSameProvider(a.model_id), bp = isSameProvider(b.model_id)
-        if (ap && !bp) return -1
-        if (!ap && bp) return 1
-        return a.name.localeCompare(b.name)
-      })
+      return [...familyModels].sort((a, b) =>
+        getModelFamily(a.model_id).localeCompare(getModelFamily(b.model_id)),
+      );
     }
-    const results = fuzzySearch(models, debouncedSearch, (model) => [
-      model.name,
-      model.model_id,
-      model.description || ''
-    ])
-    return results.map(r => r.item)
-  }, [models, debouncedSearch, value])
-
-  // Close dropdown when clicking outside
+    // Search against family name only (short, e.g. "google/nano-banana-pro")
+    return fuzzySearch(familyModels, debouncedSearch, (model) => [
+      getModelFamily(model.model_id),
+    ]).map((r) => r.item);
+  }, [familyModels, debouncedSearch]);
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
-        setIsOpen(false)
-        setLocalSearch('')
-        setDebouncedSearch('')
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setIsOpen(false);
+        setLocalSearch("");
+        setDebouncedSearch("");
       }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [])
+      if (
+        variantRef.current &&
+        !variantRef.current.contains(e.target as Node)
+      ) {
+        setVariantOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
 
-  // Focus input when opening
   useEffect(() => {
-    if (isOpen && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [isOpen])
-
-  // Handle keyboard navigation
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      setIsOpen(false)
-      setLocalSearch('')
-      setDebouncedSearch('')
-    } else if (e.key === 'Enter' && filteredModels.length > 0) {
-      onChange(filteredModels[0].model_id)
-      setIsOpen(false)
-      setLocalSearch('')
-      setDebouncedSearch('')
-    }
-  }, [filteredModels, onChange])
+    if (isOpen && inputRef.current) inputRef.current.focus();
+  }, [isOpen]);
 
-  const handleSelect = useCallback((modelId: string) => {
-    onChange(modelId)
-    setIsOpen(false)
-    setLocalSearch('')
-    setDebouncedSearch('')
-  }, [onChange])
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+        setLocalSearch("");
+        setDebouncedSearch("");
+      } else if (e.key === "Enter" && filteredModels.length > 0) {
+        onChange(filteredModels[0].model_id);
+        setIsOpen(false);
+        setLocalSearch("");
+        setDebouncedSearch("");
+      }
+    },
+    [filteredModels, onChange],
+  );
+
+  const handleSelect = useCallback(
+    (modelId: string) => {
+      onChange(modelId);
+      setIsOpen(false);
+      setLocalSearch("");
+      setDebouncedSearch("");
+    },
+    [onChange],
+  );
 
   const handleClear = useCallback(() => {
-    setLocalSearch('')
-    setDebouncedSearch('')
-    inputRef.current?.focus()
-  }, [])
+    setLocalSearch("");
+    setDebouncedSearch("");
+    inputRef.current?.focus();
+  }, []);
 
   return (
-    <div ref={containerRef} className="relative">
-      {/* Trigger button */}
-      <Tooltip delayDuration={300}>
-        <TooltipTrigger asChild>
+    <div ref={containerRef}>
+      {/* Title — integrated into the card */}
+      <div className="rounded-lg border border-border/60 bg-card/50 p-3 space-y-2 mt-2">
+        <div className="text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider mb-1">
+          {t("playground.modelSelector", "Model Selector")}
+        </div>
+        {/* Row 1: Breadcrumb / search trigger */}
+        <div className="relative">
           <button
             type="button"
-            onClick={() => !disabled && setIsOpen(!isOpen)}
+            onClick={() => {
+              if (!disabled) {
+                setIsOpen(!isOpen);
+                setVariantOpen(false);
+              }
+            }}
             disabled={disabled}
             className={cn(
-              "flex h-11 w-full items-center justify-between rounded-lg border border-input/80 bg-background px-3 py-2 text-sm transition-all",
-              "focus:outline-none focus:border-primary/50 focus:ring-2 focus:ring-primary/15",
+              "flex h-10 w-full items-center gap-1 rounded-lg border border-input/80 bg-muted/40 px-3 text-sm transition-all",
+              "hover:bg-muted/60",
               "disabled:cursor-not-allowed disabled:opacity-50",
-              isOpen && "border-primary/50 shadow-sm ring-2 ring-primary/10"
+              isOpen && "border-primary/50 ring-2 ring-primary/10",
             )}
           >
-            <span className={cn("truncate", !selectedModel && "text-muted-foreground")}>
-              {selectedModel?.name || t('playground.selectModel')}
-            </span>
-            <ChevronDown className={cn("h-4 w-4 opacity-50 transition-transform shrink-0", isOpen && "rotate-180")} />
-          </button>
-        </TooltipTrigger>
-        {selectedModel && (
-          <TooltipContent side="bottom" className="max-w-xs">
-            {selectedModel.name}
-          </TooltipContent>
-        )}
-      </Tooltip>
-
-      {/* Dropdown */}
-      {isOpen && (
-        <div className="absolute z-50 mt-1.5 w-full rounded-xl border border-border/80 bg-popover shadow-xl animate-in fade-in-0 zoom-in-95">
-          {/* Search input */}
-          <div className="flex items-center border-b px-3">
-            <Search className="h-4 w-4 shrink-0 opacity-50" />
-            <input
-              ref={inputRef}
-              type="text"
-              value={localSearch}
-              onChange={(e) => setLocalSearch(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder={t('playground.searchModels')}
-              className="flex h-10 w-full bg-transparent px-2 py-3 text-sm outline-none placeholder:text-muted-foreground"
-            />
-            {localSearch && (
-              <button
-                onClick={handleClear}
-                className="text-muted-foreground hover:text-foreground"
-                title="Clear search"
-              >
-                <X className="h-4 w-4" />
-              </button>
+            {breadcrumb ? (
+              <span className="flex items-center gap-1 min-w-0 flex-1 text-left">
+                <span className="font-semibold text-foreground shrink-0">
+                  {formatSlug(breadcrumb.provider)}
+                </span>
+                <span className="text-muted-foreground shrink-0">/</span>
+                <span className="font-medium text-foreground truncate">
+                  {formatSlug(breadcrumb.familyName)}
+                </span>
+              </span>
+            ) : (
+              <span className="text-muted-foreground flex-1 text-left">
+                {t("playground.selectModel")}
+              </span>
             )}
-          </div>
+            <Search className="h-3.5 w-3.5 text-muted-foreground shrink-0 ml-auto" />
+          </button>
 
-          {/* Model list */}
-          <div ref={listRef} className="max-h-72 overflow-auto p-1.5">
-            {filteredModels.length === 0 ? (
-              <div className="py-6 text-center text-sm text-muted-foreground">
-                {t('models.noResults')}
+          {/* Search dropdown */}
+          {isOpen && (
+            <div className="absolute z-50 mt-1.5 w-full rounded-xl border border-border/80 bg-popover shadow-xl animate-in fade-in-0 zoom-in-95">
+              <div className="flex items-center border-b px-3">
+                <Search className="h-4 w-4 shrink-0 opacity-50" />
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={localSearch}
+                  onChange={(e) => setLocalSearch(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder={t("playground.searchModels")}
+                  className="flex h-10 w-full bg-transparent px-2 py-3 text-sm outline-none placeholder:text-muted-foreground"
+                />
+                {localSearch && (
+                  <button
+                    onClick={handleClear}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                )}
               </div>
-            ) : (
-              filteredModels.map((model) => (
-                <button
-                  key={model.model_id}
-                  type="button"
-                  onClick={() => handleSelect(model.model_id)}
+              <div className="max-h-72 overflow-auto p-1.5">
+                {filteredModels.length === 0 ? (
+                  <div className="py-6 text-center text-sm text-muted-foreground">
+                    {t("models.noResults")}
+                  </div>
+                ) : (
+                  filteredModels.map((model) => {
+                    const family = getModelFamily(model.model_id);
+                    const isSelected =
+                      value &&
+                      getBaseFamily(value) === getBaseFamily(model.model_id);
+                    const parts = family.split("/");
+                    return (
+                      <button
+                        key={model.model_id}
+                        type="button"
+                        onClick={() => handleSelect(model.model_id)}
+                        className={cn(
+                          "relative flex w-full cursor-pointer select-none items-center rounded-lg px-2.5 py-2 text-sm outline-none",
+                          "hover:bg-accent hover:text-accent-foreground",
+                          isSelected && "bg-primary/10 text-foreground",
+                        )}
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4 shrink-0",
+                            isSelected ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                        <span className="truncate">
+                          <span className="text-muted-foreground">
+                            {formatSlug(parts[0])}
+                          </span>
+                          {parts[1] && (
+                            <>
+                              <span className="text-muted-foreground mx-1">
+                                /
+                              </span>
+                              <span className="font-medium">
+                                {formatSlug(parts[1])}
+                              </span>
+                            </>
+                          )}
+                        </span>
+                      </button>
+                    );
+                  })
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Row 2: Variant dropdown — custom popover */}
+        {selectedModel && familyVariants.length > 1 && (
+          <div className="flex items-center gap-2">
+            <label className="text-xs font-medium text-muted-foreground whitespace-nowrap shrink-0">
+              {t("playground.specificFunction", "Specific Model Function")}
+            </label>
+            <div ref={variantRef} className="relative flex-1 min-w-0">
+              <button
+                type="button"
+                onClick={() => {
+                  setVariantOpen(!variantOpen);
+                  setIsOpen(false);
+                }}
+                className={cn(
+                  "flex h-8 w-full items-center gap-1 rounded-lg border border-input/80 bg-muted/40 px-2.5 text-xs transition-all cursor-pointer",
+                  "hover:bg-muted/60",
+                  variantOpen && "border-primary/50 ring-2 ring-primary/10",
+                )}
+              >
+                <span className="flex-1 text-left truncate">
+                  {getVariantLabel(value!, currentBaseFamily)}
+                </span>
+                <ChevronDown
                   className={cn(
-                    "relative flex w-full cursor-pointer select-none items-center rounded-lg px-2.5 py-2 text-sm outline-none",
-                    "hover:bg-accent hover:text-accent-foreground",
-                    "focus:bg-accent focus:text-accent-foreground",
-                    model.model_id === value && "bg-primary/10 text-foreground"
+                    "h-3.5 w-3.5 text-muted-foreground shrink-0 transition-transform",
+                    variantOpen && "rotate-180",
                   )}
-                >
-                  <Check
-                    className={cn(
-                      "mr-2 h-4 w-4",
-                      model.model_id === value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  <span className="truncate">{model.name}</span>
-                </button>
-              ))
-            )}
+                />
+              </button>
+
+              {variantOpen && (
+                <div className="absolute z-50 mt-1 w-full rounded-xl border border-border/80 bg-popover shadow-xl animate-in fade-in-0 zoom-in-95">
+                  <div className="max-h-60 overflow-auto p-1">
+                    {variantsByType.length === 1
+                      ? familyVariants.map((variant) => (
+                          <button
+                            key={variant.model_id}
+                            type="button"
+                            onClick={() => {
+                              onChange(variant.model_id);
+                              setVariantOpen(false);
+                            }}
+                            className={cn(
+                              "relative flex w-full cursor-pointer select-none items-center rounded-lg px-2.5 py-1.5 text-xs outline-none",
+                              "hover:bg-accent hover:text-accent-foreground",
+                              variant.model_id === value &&
+                                "bg-primary/10 text-foreground font-medium",
+                            )}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-3.5 w-3.5 shrink-0",
+                                variant.model_id === value
+                                  ? "opacity-100"
+                                  : "opacity-0",
+                              )}
+                            />
+                            <span className="truncate">
+                              {getVariantLabel(
+                                variant.model_id,
+                                currentBaseFamily,
+                              )}
+                            </span>
+                          </button>
+                        ))
+                      : variantsByType.map(([type, variants]) => (
+                          <div key={type}>
+                            <div className="px-2.5 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+                              {formatType(type)}
+                            </div>
+                            {variants.map((variant) => (
+                              <button
+                                key={variant.model_id}
+                                type="button"
+                                onClick={() => {
+                                  onChange(variant.model_id);
+                                  setVariantOpen(false);
+                                }}
+                                className={cn(
+                                  "relative flex w-full cursor-pointer select-none items-center rounded-lg px-2.5 py-1.5 text-xs outline-none",
+                                  "hover:bg-accent hover:text-accent-foreground",
+                                  variant.model_id === value &&
+                                    "bg-primary/10 text-foreground font-medium",
+                                )}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-3.5 w-3.5 shrink-0",
+                                    variant.model_id === value
+                                      ? "opacity-100"
+                                      : "opacity-0",
+                                  )}
+                                />
+                                <span className="truncate">
+                                  {getVariantLabel(
+                                    variant.model_id,
+                                    currentBaseFamily,
+                                  )}
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        ))}
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/OutputDisplay.tsx b/src/components/playground/OutputDisplay.tsx
index 2d56e7d0..3127a37b 100644
--- a/src/components/playground/OutputDisplay.tsx
+++ b/src/components/playground/OutputDisplay.tsx
@@ -1,199 +1,265 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import type { PredictionResult } from '@/types/prediction'
-import { useAssetsStore, detectAssetType, generateDownloadFilename } from '@/stores/assetsStore'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import type { PredictionResult } from "@/types/prediction";
 import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-} from '@/components/ui/dialog'
+  useAssetsStore,
+  detectAssetType,
+  generateDownloadFilename,
+} from "@/stores/assetsStore";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { Download, ExternalLink, Copy, Check, CheckCircle2, AlertTriangle, X, Save, FolderHeart, Gamepad2, Sparkles } from 'lucide-react'
-import { isUrl, getUrlExtension, isImageUrl, isVideoUrl, isAudioUrl } from '@/lib/mediaUtils'
-import { AudioPlayer } from '@/components/shared/AudioPlayer'
-import { FlappyBird } from './FlappyBird'
-import { toast } from '@/hooks/useToast'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/tooltip";
+import {
+  Download,
+  ExternalLink,
+  Copy,
+  Check,
+  CheckCircle2,
+  AlertTriangle,
+  X,
+  Save,
+  FolderHeart,
+  Gamepad2,
+  Sparkles,
+} from "lucide-react";
+import {
+  isUrl,
+  getUrlExtension,
+  isImageUrl,
+  isVideoUrl,
+  isAudioUrl,
+} from "@/lib/mediaUtils";
+import { AudioPlayer } from "@/components/shared/AudioPlayer";
+import { FlappyBird } from "./FlappyBird";
+import { toast } from "@/hooks/useToast";
+import { cn } from "@/lib/utils";
 
 // Check if running in Capacitor native environment
 const isCapacitorNative = () => {
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return !!(window as any).Capacitor?.isNativePlatform?.()
+    return !!(window as any).Capacitor?.isNativePlatform?.();
   } catch {
-    return false
+    return false;
   }
-}
+};
 
 // Mobile download helper using Capacitor
-const mobileDownload = async (url: string, filename: string): Promise<{ success: boolean; error?: string }> => {
+const mobileDownload = async (
+  url: string,
+  filename: string,
+): Promise<{ success: boolean; error?: string }> => {
   try {
     // Dynamic imports for Capacitor modules (vite-ignore to prevent desktop build errors)
-    const { CapacitorHttp } = await import(/* @vite-ignore */ '@capacitor/core')
-    const { Filesystem, Directory } = await import(/* @vite-ignore */ '@capacitor/filesystem')
+    const { CapacitorHttp } = await import(
+      /* @vite-ignore */ "@capacitor/core"
+    );
+    const { Filesystem, Directory } = await import(
+      /* @vite-ignore */ "@capacitor/filesystem"
+    );
 
     // Fetch file using CapacitorHttp (bypasses CORS)
     const response = await CapacitorHttp.get({
       url,
-      responseType: 'blob'
-    })
+      responseType: "blob",
+    });
 
     if (response.status !== 200) {
-      return { success: false, error: `HTTP ${response.status}` }
+      return { success: false, error: `HTTP ${response.status}` };
     }
 
     // Create Downloads directory
-    const directory = 'Downloads'
+    const directory = "Downloads";
     try {
       await Filesystem.mkdir({
         path: directory,
         directory: Directory.Documents,
-        recursive: true
-      })
+        recursive: true,
+      });
     } catch {
       // Directory might already exist
     }
 
     // Save file
-    const filePath = `${directory}/${filename}`
+    const filePath = `${directory}/${filename}`;
     await Filesystem.writeFile({
       path: filePath,
       data: response.data as string,
-      directory: Directory.Documents
-    })
+      directory: Directory.Documents,
+    });
 
-    return { success: true }
+    return { success: true };
   } catch (error) {
-    return { success: false, error: (error as Error).message }
+    return { success: false, error: (error as Error).message };
   }
-}
+};
 
 interface OutputDisplayProps {
-  prediction: PredictionResult | null
-  outputs: (string | Record<string, unknown>)[]
-  error: string | null
-  isLoading: boolean
-  modelId?: string
-  hideGameButton?: boolean
-  gridLayout?: boolean
+  prediction: PredictionResult | null;
+  outputs: (string | Record<string, unknown>)[];
+  error: string | null;
+  isLoading: boolean;
+  modelId?: string;
+  hideGameButton?: boolean;
+  gridLayout?: boolean;
+  /** Total number of history items (for fullscreen prev/next across generations) */
+  historyLength?: number;
+  /** Navigate to prev/next history generation from fullscreen */
+  onNavigateHistory?: (direction: "prev" | "next") => void;
 }
 
-export function OutputDisplay({ prediction, outputs, error, isLoading, modelId, hideGameButton, gridLayout }: OutputDisplayProps) {
-  const { t } = useTranslation()
-  const [copiedIndex, setCopiedIndex] = useState<number | null>(null)
-  const [fullscreenIndex, setFullscreenIndex] = useState<number | null>(null)
-  const [savedIndexes, setSavedIndexes] = useState<Set<number>>(new Set())
-  const [savingIndex, setSavingIndex] = useState<number | null>(null)
-  const autoSavedUrlsRef = useRef<Set<string>>(new Set())
-  const prevLoadingRef = useRef(false)
+export function OutputDisplay({
+  prediction,
+  outputs,
+  error,
+  isLoading,
+  modelId,
+  hideGameButton,
+  gridLayout,
+  historyLength,
+  onNavigateHistory,
+}: OutputDisplayProps) {
+  const { t } = useTranslation();
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+  const [fullscreenIndex, setFullscreenIndex] = useState<number | null>(null);
+  const [savedIndexes, setSavedIndexes] = useState<Set<number>>(new Set());
+  const [savingIndex, setSavingIndex] = useState<number | null>(null);
+  const autoSavedUrlsRef = useRef<Set<string>>(new Set());
+  const prevLoadingRef = useRef(false);
 
   // Game state
-  const [isGameStarted, setIsGameStarted] = useState(false)
-  const [showGame, setShowGame] = useState(true)
-  const [gameEndedWithResults, setGameEndedWithResults] = useState(false)
-  const prevOutputsLengthRef = useRef(0)
+  const [isGameStarted, setIsGameStarted] = useState(false);
+  const [showGame, setShowGame] = useState(true);
+  const [gameEndedWithResults, setGameEndedWithResults] = useState(false);
+  const prevOutputsLengthRef = useRef(0);
 
-  const { settings, loadSettings, saveAsset, hasAssetForPrediction } = useAssetsStore()
+  const { settings, loadSettings, saveAsset, hasAssetForPrediction } =
+    useAssetsStore();
 
   // Build list of media outputs for fullscreen navigation
   const mediaOutputs = useMemo(() => {
     return outputs
       .map((output, index) => {
-        if (typeof output !== 'string') return null
-        const str = String(output)
-        if (isImageUrl(str)) return { index, url: str, type: 'image' as const }
-        if (isVideoUrl(str)) return { index, url: str, type: 'video' as const }
-        return null
+        if (typeof output !== "string") return null;
+        const str = String(output);
+        if (isImageUrl(str)) return { index, url: str, type: "image" as const };
+        if (isVideoUrl(str)) return { index, url: str, type: "video" as const };
+        return null;
       })
-      .filter((item): item is NonNullable<typeof item> => item !== null)
-  }, [outputs])
+      .filter((item): item is NonNullable<typeof item> => item !== null);
+  }, [outputs]);
+
+  const fullscreenMedia =
+    fullscreenIndex !== null
+      ? (mediaOutputs.find((m) => m.index === fullscreenIndex) ?? null)
+      : null;
 
-  const fullscreenMedia = fullscreenIndex !== null
-    ? mediaOutputs.find(m => m.index === fullscreenIndex) ?? null
-    : null
+  // Whether fullscreen should show history-level navigation (single output per generation)
+  const showHistoryNav =
+    mediaOutputs.length <= 1 && (historyLength ?? 0) > 1 && !!onNavigateHistory;
 
   // Keyboard navigation for fullscreen preview
   useEffect(() => {
-    if (fullscreenIndex === null) return
+    if (fullscreenIndex === null) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        const curPos = mediaOutputs.findIndex(m => m.index === fullscreenIndex)
-        if (curPos === -1 || mediaOutputs.length <= 1) return
-        const newPos = curPos === 0 ? mediaOutputs.length - 1 : curPos - 1
-        setFullscreenIndex(mediaOutputs[newPos].index)
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        const curPos = mediaOutputs.findIndex(m => m.index === fullscreenIndex)
-        if (curPos === -1 || mediaOutputs.length <= 1) return
-        const newPos = curPos === mediaOutputs.length - 1 ? 0 : curPos + 1
-        setFullscreenIndex(mediaOutputs[newPos].index)
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (mediaOutputs.length > 1) {
+          const curPos = mediaOutputs.findIndex(
+            (m) => m.index === fullscreenIndex,
+          );
+          if (curPos === -1) return;
+          const newPos = curPos === 0 ? mediaOutputs.length - 1 : curPos - 1;
+          setFullscreenIndex(mediaOutputs[newPos].index);
+        } else if (showHistoryNav) {
+          onNavigateHistory!("prev");
+        }
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (mediaOutputs.length > 1) {
+          const curPos = mediaOutputs.findIndex(
+            (m) => m.index === fullscreenIndex,
+          );
+          if (curPos === -1) return;
+          const newPos = curPos === mediaOutputs.length - 1 ? 0 : curPos + 1;
+          setFullscreenIndex(mediaOutputs[newPos].index);
+        } else if (showHistoryNav) {
+          onNavigateHistory!("next");
+        }
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [fullscreenIndex, mediaOutputs])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [fullscreenIndex, mediaOutputs]);
 
   // Load settings on mount
   useEffect(() => {
-    loadSettings()
-  }, [loadSettings])
+    loadSettings();
+  }, [loadSettings]);
 
   // Track outputs length for other logic
   useEffect(() => {
-    prevOutputsLengthRef.current = outputs.length
-  }, [outputs.length])
+    prevOutputsLengthRef.current = outputs.length;
+  }, [outputs.length]);
 
   // Reset game state when outputs are cleared (new run starting)
   useEffect(() => {
     if (outputs.length === 0 && !isLoading && !error) {
-      setShowGame(true)
-      setIsGameStarted(false)
-      setGameEndedWithResults(false)
+      setShowGame(true);
+      setIsGameStarted(false);
+      setGameEndedWithResults(false);
+    }
+  }, [outputs.length, isLoading, error]);
+
+  // Auto-switch from game to results when generation completes
+  useEffect(() => {
+    const wasLoading = prevLoadingRef.current;
+    // Don't update ref here — the auto-save effect below also reads it
+    if (wasLoading && !isLoading && outputs.length > 0 && !error) {
+      setShowGame(false);
     }
-  }, [outputs.length, isLoading, error])
+  }, [isLoading, outputs.length, error]);
 
   const handleGameStart = useCallback(() => {
-    setIsGameStarted(true)
-  }, [])
+    setIsGameStarted(true);
+  }, []);
 
   const handleGameEnd = useCallback(() => {
     // Game ended - don't auto-switch, let user view results via notification
-    setGameEndedWithResults(true)
-  }, [])
+    setGameEndedWithResults(true);
+  }, []);
 
   // Auto-save outputs only when generation completes (isLoading: true → false)
   useEffect(() => {
-    const wasLoading = prevLoadingRef.current
-    prevLoadingRef.current = isLoading
+    const wasLoading = prevLoadingRef.current;
+    prevLoadingRef.current = isLoading;
 
     // Only trigger auto-save when loading transitions from true to false
-    if (!wasLoading || isLoading) return
-    if (!settings.autoSaveAssets || !modelId || outputs.length === 0) return
-    if (!prediction?.id) return
+    if (!wasLoading || isLoading) return;
+    if (!settings.autoSaveAssets || !modelId || outputs.length === 0) return;
+    if (!prediction?.id) return;
 
     // Find outputs not yet auto-saved
-    const unsaved: { output: string; index: number }[] = []
+    const unsaved: { output: string; index: number }[] = [];
     for (let i = 0; i < outputs.length; i++) {
-      const output = outputs[i]
-      if (typeof output !== 'string') continue
-      if (output.startsWith('local-asset://')) continue
-      if (autoSavedUrlsRef.current.has(output)) continue
-      const assetType = detectAssetType(output)
-      if (!assetType) continue
-      unsaved.push({ output, index: i })
+      const output = outputs[i];
+      if (typeof output !== "string") continue;
+      if (output.startsWith("local-asset://")) continue;
+      if (autoSavedUrlsRef.current.has(output)) continue;
+      const assetType = detectAssetType(output);
+      if (!assetType) continue;
+      unsaved.push({ output, index: i });
     }
-    if (unsaved.length === 0) return
+    if (unsaved.length === 0) return;
 
     // Mark URLs immediately to prevent duplicate triggers
     for (const { output } of unsaved) {
-      autoSavedUrlsRef.current.add(output)
+      autoSavedUrlsRef.current.add(output);
     }
 
     const saveOutputs = async () => {
@@ -203,159 +269,173 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
             modelId,
             predictionId: prediction.id,
             originalUrl: output,
-            resultIndex: index
-          })
+            resultIndex: index,
+          });
           if (result) {
-            setSavedIndexes(prev => new Set(prev).add(index))
+            setSavedIndexes((prev) => new Set(prev).add(index));
           }
         } catch (err) {
-          console.error('Failed to auto-save asset:', err)
+          console.error("Failed to auto-save asset:", err);
         }
       }
       toast({
-        description: t('playground.autoSaved'),
+        title: t("playground.generationComplete", "Generation complete"),
+        description: t("playground.autoSaved"),
         duration: 2000,
-      })
-    }
-
-    saveOutputs()
-  }, [isLoading, outputs, prediction?.id, modelId, settings.autoSaveAssets, saveAsset, t])
+      });
+    };
+
+    saveOutputs();
+  }, [
+    isLoading,
+    outputs,
+    prediction?.id,
+    modelId,
+    settings.autoSaveAssets,
+    saveAsset,
+    t,
+  ]);
 
   // Reset saved indexes when outputs change substantially
   useEffect(() => {
-    setSavedIndexes(new Set())
-  }, [prediction?.id])
+    setSavedIndexes(new Set());
+  }, [prediction?.id]);
 
-  const handleSaveToAssets = useCallback(async (url: string, index: number) => {
-    if (!modelId) return
+  const handleSaveToAssets = useCallback(
+    async (url: string, index: number) => {
+      if (!modelId) return;
 
-    const assetType = detectAssetType(url)
-    if (!assetType) {
-      toast({
-        title: t('common.error'),
-        description: t('playground.unsupportedFormat'),
-        variant: 'destructive',
-      })
-      return
-    }
-
-    setSavingIndex(index)
-    try {
-      const result = await saveAsset(url, assetType, {
-        modelId,
-        predictionId: prediction?.id,
-        originalUrl: url,
-        resultIndex: index
-      })
-
-      if (result) {
-        setSavedIndexes(prev => new Set(prev).add(index))
+      const assetType = detectAssetType(url);
+      if (!assetType) {
         toast({
-          title: t('playground.savedToAssets'),
-          description: t('playground.savedToAssetsDesc'),
-        })
-      } else {
+          title: t("common.error"),
+          description: t("playground.unsupportedFormat"),
+          variant: "destructive",
+        });
+        return;
+      }
+
+      setSavingIndex(index);
+      try {
+        const result = await saveAsset(url, assetType, {
+          modelId,
+          predictionId: prediction?.id,
+          originalUrl: url,
+          resultIndex: index,
+        });
+
+        if (result) {
+          setSavedIndexes((prev) => new Set(prev).add(index));
+          toast({
+            title: t("playground.savedToAssets"),
+            description: t("playground.savedToAssetsDesc"),
+          });
+        } else {
+          toast({
+            title: t("common.error"),
+            description: t("playground.saveFailed"),
+            variant: "destructive",
+          });
+        }
+      } catch {
         toast({
-          title: t('common.error'),
-          description: t('playground.saveFailed'),
-          variant: 'destructive',
-        })
+          title: t("common.error"),
+          description: t("playground.saveFailed"),
+          variant: "destructive",
+        });
+      } finally {
+        setSavingIndex(null);
       }
-    } catch {
-      toast({
-        title: t('common.error'),
-        description: t('playground.saveFailed'),
-        variant: 'destructive',
-      })
-    } finally {
-      setSavingIndex(null)
-    }
-  }, [modelId, prediction?.id, saveAsset, t])
+    },
+    [modelId, prediction?.id, saveAsset, t],
+  );
 
   const handleDownload = async (url: string, index: number) => {
     const filename = generateDownloadFilename({
       modelId,
       url,
       predictionId: prediction?.id,
-      resultIndex: index
-    })
+      resultIndex: index,
+    });
 
     // Use Electron API if available (desktop)
     if (window.electronAPI?.downloadFile) {
-      const result = await window.electronAPI.downloadFile(url, filename)
+      const result = await window.electronAPI.downloadFile(url, filename);
       if (!result.success && !result.canceled) {
-        console.error('Download failed:', result.error)
+        console.error("Download failed:", result.error);
       }
-      return
+      return;
     }
 
     // Use Capacitor if available (mobile native)
     if (isCapacitorNative()) {
-      const result = await mobileDownload(url, filename)
+      const result = await mobileDownload(url, filename);
       if (result.success) {
         toast({
-          title: t('common.success'),
-          description: t('freeTools.downloadSuccess')
-        })
+          title: t("common.success"),
+          description: t("freeTools.downloadSuccess"),
+        });
       } else {
-        console.error('Mobile download failed:', result.error)
+        console.error("Mobile download failed:", result.error);
         toast({
-          title: t('common.error'),
-          description: result.error || 'Download failed',
-          variant: 'destructive'
-        })
+          title: t("common.error"),
+          description: result.error || "Download failed",
+          variant: "destructive",
+        });
       }
-      return
+      return;
     }
 
     // Browser fallback: open in new tab
-    window.open(url, '_blank')
-  }
+    window.open(url, "_blank");
+  };
 
   const handleCopy = async (url: string, index: number) => {
     try {
-      await navigator.clipboard.writeText(url)
+      await navigator.clipboard.writeText(url);
     } catch {
       // Fallback for WebView where clipboard API may be restricted
-      const textarea = document.createElement('textarea')
-      textarea.value = url
-      textarea.style.position = 'fixed'
-      textarea.style.opacity = '0'
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
+      const textarea = document.createElement("textarea");
+      textarea.value = url;
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand("copy");
+      document.body.removeChild(textarea);
     }
-    setCopiedIndex(index)
-    setTimeout(() => setCopiedIndex(null), 2000)
+    setCopiedIndex(index);
+    setTimeout(() => setCopiedIndex(null), 2000);
     if (isCapacitorNative()) {
-      toast({ title: t('common.copied', 'Copied') })
+      toast({ title: t("common.copied", "Copied") });
     }
-  }
+  };
 
   const handleOpenExternal = async (url: string) => {
     if (isCapacitorNative()) {
       try {
-        const { Browser } = await import(/* @vite-ignore */ '@capacitor/browser')
-        await Browser.open({ url })
+        const { Browser } = await import(
+          /* @vite-ignore */ "@capacitor/browser"
+        );
+        await Browser.open({ url });
       } catch {
-        window.open(url, '_blank')
+        window.open(url, "_blank");
       }
-      return
+      return;
     }
-    window.open(url, '_blank')
-  }
+    window.open(url, "_blank");
+  };
 
   if (error) {
     // Try to parse JSON error for better display
-    let errorMessage = error
-    let errorDetails: Record<string, unknown> | null = null
+    let errorMessage = error;
+    let errorDetails: Record<string, unknown> | null = null;
 
     try {
-      if (error.startsWith('{')) {
-        const parsed = JSON.parse(error)
-        errorMessage = parsed.message || parsed.error || error
-        errorDetails = parsed
+      if (error.startsWith("{")) {
+        const parsed = JSON.parse(error);
+        errorMessage = parsed.message || parsed.error || error;
+        errorDetails = parsed;
       }
     } catch {
       // Keep original error string
@@ -378,11 +458,14 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
           )}
         </div>
       </div>
-    )
+    );
   }
 
   // Show game when: no outputs, loading, or user toggled to game view
-  const showGameView = outputs.length === 0 || isLoading || (showGame && (gameEndedWithResults || isGameStarted))
+  const showGameView =
+    outputs.length === 0 ||
+    isLoading ||
+    (showGame && (gameEndedWithResults || isGameStarted));
 
   if (showGameView) {
     return (
@@ -391,219 +474,297 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
           onGameStart={handleGameStart}
           onGameEnd={handleGameEnd}
           isTaskRunning={isLoading}
-          taskStatus={t('playground.generating')}
-          idleMessage={outputs.length === 0 && !isLoading ? {
-            title: t('playground.noOutputs'),
-            subtitle: t('playground.configureAndRun')
-          } : undefined}
+          taskStatus={t("playground.generating")}
+          idleMessage={
+            outputs.length === 0 && !isLoading
+              ? {
+                  title: t("playground.noOutputs"),
+                  subtitle: t("playground.configureAndRun"),
+                }
+              : undefined
+          }
           hasResults={outputs.length > 0 && !isLoading}
           onViewResults={() => setShowGame(false)}
           modelId={modelId}
         />
       </div>
-    )
+    );
   }
 
   return (
     <div className="h-full flex flex-col relative">
       {/* Outputs - fill remaining space */}
-      <div className={cn(
+      <div
+        className={cn(
           "flex-1 min-h-0",
           outputs.length > 1
             ? "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 auto-rows-min overflow-auto p-1"
-            : "flex flex-col gap-4"
-        )}>
-          {outputs.map((output, index) => {
-            const isObject = typeof output === 'object' && output !== null
-            const outputStr = isObject ? JSON.stringify(output, null, 2) : String(output)
-            const isImage = !isObject && isImageUrl(outputStr)
-            const isVideo = !isObject && isVideoUrl(outputStr)
-            const isAudio = !isObject && isAudioUrl(outputStr)
-            const copyValue = isObject ? outputStr : outputStr
-
-            // Multi-output: BatchOutputGrid-style card with thumbnail + footer
-            if (outputs.length > 1) {
-              return (
-                <div
-                  key={index}
-                  className={cn(
-                    "relative group overflow-hidden rounded-xl border border-border/70 bg-card/80 transition-all cursor-pointer hover:border-primary/40 hover:shadow-md",
-                    savedIndexes.has(index) && "ring-1 ring-green-500/50 shadow-sm"
-                  )}
-                  onClick={() => setFullscreenIndex(index)}
-                >
-                  {/* Thumbnail */}
-                  <div className="aspect-square bg-muted/70 flex items-center justify-center">
-                    {isImage && <img src={outputStr} alt={`Result ${index + 1}`} className="w-full h-full object-cover" loading="lazy" />}
-                    {isVideo && <video src={outputStr} className="w-full h-full object-cover" muted playsInline preload="auto" onLoadedData={(e) => { e.currentTarget.currentTime = 0.1 }} />}
-                    {isAudio && <div className="text-muted-foreground text-xs">Audio</div>}
-                    {!isImage && !isVideo && !isAudio && <div className="text-muted-foreground text-xs">Output</div>}
-                  </div>
-                  {/* Footer */}
-                  <div className="flex items-center justify-between border-t border-border/60 bg-background/70 p-2">
-                    <span className="text-xs font-medium">#{index + 1}</span>
-                    <div className="flex items-center gap-1">
-                      {prediction?.timings?.inference && (
-                        <Badge variant="secondary" className="text-[10px] px-1 py-0">
-                          {(prediction.timings.inference / 1000).toFixed(1)}s
-                        </Badge>
-                      )}
-                      <CheckCircle2 className="h-3 w-3 text-green-500" />
-                    </div>
-                  </div>
-                  {/* Saved indicator */}
-                  {savedIndexes.has(index) && (
-                    <div className="absolute top-1 right-1">
-                      <Badge variant="secondary" className="text-[10px] px-1 py-0 bg-green-500/80 text-white">Saved</Badge>
-                    </div>
-                  )}
-                </div>
-              )
-            }
-
-            // Single output: original full-size display
+            : "flex flex-col gap-4",
+        )}
+      >
+        {outputs.map((output, index) => {
+          const isObject = typeof output === "object" && output !== null;
+          const outputStr = isObject
+            ? JSON.stringify(output, null, 2)
+            : String(output);
+          const isImage = !isObject && isImageUrl(outputStr);
+          const isVideo = !isObject && isVideoUrl(outputStr);
+          const isAudio = !isObject && isAudioUrl(outputStr);
+          const copyValue = isObject ? outputStr : outputStr;
+
+          // Multi-output: BatchOutputGrid-style card with thumbnail + footer
+          if (outputs.length > 1) {
             return (
               <div
                 key={index}
-                className="relative group rounded-lg border overflow-hidden bg-muted/30 flex items-center justify-center flex-1 min-h-0"
+                className={cn(
+                  "relative group overflow-hidden rounded-xl border border-border/70 bg-card/80 transition-all cursor-pointer hover:border-primary/40 hover:shadow-md",
+                  savedIndexes.has(index) &&
+                    "ring-1 ring-green-500/50 shadow-sm",
+                )}
+                onClick={() => setFullscreenIndex(index)}
               >
-                <div className="absolute left-2 top-2 z-10">
-                  <Badge variant="secondary" className="rounded-md bg-background/80 px-2 py-0.5 text-[11px] backdrop-blur">
-                    <Sparkles className="mr-1 h-3 w-3" />
-                    #{index + 1}
-                  </Badge>
+                {/* Thumbnail */}
+                <div className="aspect-square bg-muted/70 flex items-center justify-center">
+                  {isImage && (
+                    <img
+                      src={outputStr}
+                      alt={`Result ${index + 1}`}
+                      className="w-full h-full object-cover"
+                      loading="lazy"
+                    />
+                  )}
+                  {isVideo && (
+                    <video
+                      src={outputStr}
+                      className="w-full h-full object-cover"
+                      muted
+                      playsInline
+                      preload="auto"
+                      onLoadedData={(e) => {
+                        e.currentTarget.currentTime = 0.1;
+                      }}
+                    />
+                  )}
+                  {isAudio && (
+                    <div className="text-muted-foreground text-xs">Audio</div>
+                  )}
+                  {!isImage && !isVideo && !isAudio && (
+                    <div className="text-muted-foreground text-xs">Output</div>
+                  )}
                 </div>
-                {isImage && (
-                  <img
-                    src={outputStr}
-                    alt={`Output ${index + 1}`}
-                    className="max-w-full max-h-full object-contain cursor-pointer hover:opacity-90 transition-opacity"
-                    style={{ maxWidth: 'min(100%, var(--max-w, 100%))', maxHeight: 'min(100%, var(--max-h, 100%))' }}
-                    loading="lazy"
-                    onClick={() => setFullscreenIndex(index)}
-                    onLoad={(e) => {
-                      const img = e.currentTarget
-                      img.style.setProperty('--max-w', `${img.naturalWidth * 2}px`)
-                      img.style.setProperty('--max-h', `${img.naturalHeight * 2}px`)
-                    }}
-                  />
-                )}
-
-                {isVideo && (
-                  <video
-                    src={outputStr}
-                    controls
-                    playsInline
-                    className="max-w-full max-h-full object-contain"
-                    style={{ maxWidth: 'min(100%, var(--max-w, 100%))', maxHeight: 'min(100%, var(--max-h, 100%))' }}
-                    preload="auto"
-                    onLoadedData={(e) => {
-                      const video = e.currentTarget
-                      video.currentTime = 0.1
-                      video.style.setProperty('--max-w', `${video.videoWidth * 2}px`)
-                      video.style.setProperty('--max-h', `${video.videoHeight * 2}px`)
-                    }}
-                  />
-                )}
-
-                {isAudio && (
-                  <AudioPlayer src={outputStr} />
-                )}
-
-                {isObject && (
-                  <div className="p-4 w-full h-full overflow-auto">
-                    <pre className="text-sm font-mono whitespace-pre-wrap break-all">
-                      {outputStr}
-                    </pre>
+                {/* Footer */}
+                <div className="flex items-center justify-between border-t border-border/60 bg-background/70 p-2">
+                  <span className="text-xs font-medium">#{index + 1}</span>
+                  <div className="flex items-center gap-1">
+                    {prediction?.timings?.inference && (
+                      <Badge
+                        variant="secondary"
+                        className="text-[10px] px-1 py-0"
+                      >
+                        {(prediction.timings.inference / 1000).toFixed(1)}s
+                      </Badge>
+                    )}
+                    <CheckCircle2 className="h-3 w-3 text-green-500" />
                   </div>
-                )}
-
-                {!isImage && !isVideo && !isAudio && !isObject && (
-                  <div className="p-4">
-                    <p className="text-sm break-all">{outputStr}</p>
+                </div>
+                {/* Saved indicator */}
+                {savedIndexes.has(index) && (
+                  <div className="absolute top-1 right-1">
+                    <Badge
+                      variant="secondary"
+                      className="text-[10px] px-1 py-0 bg-green-500/80 text-white"
+                    >
+                      Saved
+                    </Badge>
                   </div>
                 )}
+              </div>
+            );
+          }
+
+          // Single output: original full-size display
+          return (
+            <div
+              key={index}
+              className="relative group rounded-lg border overflow-hidden bg-muted/30 flex items-center justify-center flex-1 min-h-0"
+            >
+              <div className="absolute left-2 top-2 z-10">
+                <Badge
+                  variant="secondary"
+                  className="rounded-md bg-background/80 px-2 py-0.5 text-[11px] backdrop-blur"
+                >
+                  <Sparkles className="mr-1 h-3 w-3" />#{index + 1}
+                </Badge>
+              </div>
+              {isImage && (
+                <img
+                  src={outputStr}
+                  alt={`Output ${index + 1}`}
+                  className="max-w-full max-h-full object-contain cursor-pointer hover:opacity-90 transition-opacity"
+                  style={{
+                    maxWidth: "min(100%, var(--max-w, 100%))",
+                    maxHeight: "min(100%, var(--max-h, 100%))",
+                  }}
+                  loading="lazy"
+                  onClick={() => setFullscreenIndex(index)}
+                  onLoad={(e) => {
+                    const img = e.currentTarget;
+                    img.style.setProperty(
+                      "--max-w",
+                      `${img.naturalWidth * 2}px`,
+                    );
+                    img.style.setProperty(
+                      "--max-h",
+                      `${img.naturalHeight * 2}px`,
+                    );
+                  }}
+                />
+              )}
+
+              {isVideo && (
+                <video
+                  src={outputStr}
+                  controls
+                  playsInline
+                  className="max-w-full max-h-full object-contain"
+                  style={{
+                    maxWidth: "min(100%, var(--max-w, 100%))",
+                    maxHeight: "min(100%, var(--max-h, 100%))",
+                  }}
+                  preload="auto"
+                  onLoadedData={(e) => {
+                    const video = e.currentTarget;
+                    video.currentTime = 0.1;
+                    video.style.setProperty(
+                      "--max-w",
+                      `${video.videoWidth * 2}px`,
+                    );
+                    video.style.setProperty(
+                      "--max-h",
+                      `${video.videoHeight * 2}px`,
+                    );
+                  }}
+                />
+              )}
+
+              {isAudio && <AudioPlayer src={outputStr} />}
+
+              {isObject && (
+                <div className="p-4 w-full h-full overflow-auto">
+                  <pre className="text-sm font-mono whitespace-pre-wrap break-all">
+                    {outputStr}
+                  </pre>
+                </div>
+              )}
+
+              {!isImage && !isVideo && !isAudio && !isObject && (
+                <div className="p-4">
+                  <p className="text-sm break-all">{outputStr}</p>
+                </div>
+              )}
 
-                {/* Timing overlay */}
-                {prediction?.timings?.inference && (
-                  <div className="absolute bottom-2 left-2 flex items-center gap-1">
-                    <Badge variant="secondary" className="border-0 bg-black/60 text-xs text-white">
-                      {(prediction.timings.inference / 1000).toFixed(2)}s
+              {/* Timing overlay */}
+              {prediction?.timings?.inference && (
+                <div className="absolute bottom-2 left-2 flex items-center gap-1">
+                  <Badge
+                    variant="secondary"
+                    className="border-0 bg-black/60 text-xs text-white"
+                  >
+                    {(prediction.timings.inference / 1000).toFixed(2)}s
+                  </Badge>
+                  {prediction.has_nsfw_contents?.some(Boolean) && (
+                    <Badge variant="destructive" className="text-xs">
+                      NSFW
                     </Badge>
-                    {prediction.has_nsfw_contents?.some(Boolean) && (
-                      <Badge variant="destructive" className="text-xs">NSFW</Badge>
-                    )}
-                  </div>
-                )}
+                  )}
+                </div>
+              )}
 
-                {/* Actions overlay */}
-                <div className={cn(
+              {/* Actions overlay */}
+              <div
+                className={cn(
                   "absolute top-2 right-2 flex gap-1 transition-opacity",
-                  isCapacitorNative() ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                )}>
+                  isCapacitorNative()
+                    ? "opacity-100"
+                    : "opacity-0 group-hover:opacity-100",
+                )}
+              >
+                <Button
+                  size="icon"
+                  variant="secondary"
+                  className="h-8 w-8 rounded-lg bg-background/90 backdrop-blur"
+                  onClick={() => handleCopy(copyValue, index)}
+                >
+                  {copiedIndex === index ? (
+                    <Check className="h-4 w-4" />
+                  ) : (
+                    <Copy className="h-4 w-4" />
+                  )}
+                </Button>
+                {!isObject && (
                   <Button
                     size="icon"
                     variant="secondary"
                     className="h-8 w-8 rounded-lg bg-background/90 backdrop-blur"
-                    onClick={() => handleCopy(copyValue, index)}
+                    onClick={() => handleOpenExternal(outputStr)}
                   >
-                    {copiedIndex === index ? (
-                      <Check className="h-4 w-4" />
-                    ) : (
-                      <Copy className="h-4 w-4" />
-                    )}
+                    <ExternalLink className="h-4 w-4" />
                   </Button>
-                  {!isObject && (
+                )}
+                {(isImage || isVideo || isAudio) && (
+                  <>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          size="icon"
+                          variant="secondary"
+                          className="h-8 w-8 rounded-lg bg-background/90 backdrop-blur"
+                          onClick={() => handleSaveToAssets(outputStr, index)}
+                          disabled={
+                            savedIndexes.has(index) ||
+                            savingIndex === index ||
+                            !modelId
+                          }
+                        >
+                          {savedIndexes.has(index) ? (
+                            <FolderHeart className="h-4 w-4 text-green-500" />
+                          ) : (
+                            <Save className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {savedIndexes.has(index)
+                          ? t("playground.alreadySaved")
+                          : t("playground.saveToAssets")}
+                      </TooltipContent>
+                    </Tooltip>
                     <Button
                       size="icon"
                       variant="secondary"
                       className="h-8 w-8 rounded-lg bg-background/90 backdrop-blur"
-                      onClick={() => handleOpenExternal(outputStr)}
+                      onClick={() => handleDownload(outputStr, index)}
                     >
-                      <ExternalLink className="h-4 w-4" />
+                      <Download className="h-4 w-4" />
                     </Button>
-                  )}
-                  {(isImage || isVideo || isAudio) && (
-                    <>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            size="icon"
-                            variant="secondary"
-                            className="h-8 w-8 rounded-lg bg-background/90 backdrop-blur"
-                            onClick={() => handleSaveToAssets(outputStr, index)}
-                            disabled={savedIndexes.has(index) || savingIndex === index || !modelId}
-                          >
-                            {savedIndexes.has(index) ? (
-                              <FolderHeart className="h-4 w-4 text-green-500" />
-                            ) : (
-                              <Save className="h-4 w-4" />
-                            )}
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {savedIndexes.has(index) ? t('playground.alreadySaved') : t('playground.saveToAssets')}
-                        </TooltipContent>
-                      </Tooltip>
-                      <Button
-                        size="icon"
-                        variant="secondary"
-                        className="h-8 w-8 rounded-lg bg-background/90 backdrop-blur"
-                        onClick={() => handleDownload(outputStr, index)}
-                      >
-                        <Download className="h-4 w-4" />
-                      </Button>
-                    </>
-                  )}
-                </div>
+                  </>
+                )}
               </div>
-            )
-          })}
-        </div>
+            </div>
+          );
+        })}
+      </div>
 
       {/* Fullscreen Preview Dialog */}
-      <Dialog open={fullscreenIndex !== null} onOpenChange={() => setFullscreenIndex(null)}>
-        <DialogContent className="w-screen h-screen max-w-none max-h-none p-0 border-0 bg-black flex items-center justify-center" hideCloseButton>
+      <Dialog
+        open={fullscreenIndex !== null}
+        onOpenChange={() => setFullscreenIndex(null)}
+      >
+        <DialogContent
+          className="w-screen h-screen max-w-none max-h-none p-0 border-0 bg-black flex items-center justify-center"
+          hideCloseButton
+        >
           <DialogTitle className="sr-only">Fullscreen Preview</DialogTitle>
           <Button
             variant="ghost"
@@ -613,7 +774,7 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
           >
             <X className="h-6 w-6" />
           </Button>
-          {/* Navigation arrows */}
+          {/* Navigation arrows — multi-output within generation */}
           {mediaOutputs.length > 1 && (
             <>
               <Button
@@ -621,10 +782,13 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
                 size="icon"
                 className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 h-10 w-10 [filter:drop-shadow(0_0_2px_rgba(0,0,0,0.8))_drop-shadow(0_0_4px_rgba(0,0,0,0.5))]"
                 onClick={() => {
-                  const curPos = mediaOutputs.findIndex(m => m.index === fullscreenIndex)
-                  if (curPos === -1) return
-                  const newPos = curPos === 0 ? mediaOutputs.length - 1 : curPos - 1
-                  setFullscreenIndex(mediaOutputs[newPos].index)
+                  const curPos = mediaOutputs.findIndex(
+                    (m) => m.index === fullscreenIndex,
+                  );
+                  if (curPos === -1) return;
+                  const newPos =
+                    curPos === 0 ? mediaOutputs.length - 1 : curPos - 1;
+                  setFullscreenIndex(mediaOutputs[newPos].index);
                 }}
               >
                 <span className="text-xl">◀</span>
@@ -634,24 +798,48 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
                 size="icon"
                 className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 h-10 w-10 [filter:drop-shadow(0_0_2px_rgba(0,0,0,0.8))_drop-shadow(0_0_4px_rgba(0,0,0,0.5))]"
                 onClick={() => {
-                  const curPos = mediaOutputs.findIndex(m => m.index === fullscreenIndex)
-                  if (curPos === -1) return
-                  const newPos = curPos === mediaOutputs.length - 1 ? 0 : curPos + 1
-                  setFullscreenIndex(mediaOutputs[newPos].index)
+                  const curPos = mediaOutputs.findIndex(
+                    (m) => m.index === fullscreenIndex,
+                  );
+                  if (curPos === -1) return;
+                  const newPos =
+                    curPos === mediaOutputs.length - 1 ? 0 : curPos + 1;
+                  setFullscreenIndex(mediaOutputs[newPos].index);
                 }}
               >
                 <span className="text-xl">▶</span>
               </Button>
             </>
           )}
-          {fullscreenMedia?.type === 'image' && (
+          {/* Navigation arrows — single output, browse across history generations */}
+          {showHistoryNav && (
+            <>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 h-10 w-10 [filter:drop-shadow(0_0_2px_rgba(0,0,0,0.8))_drop-shadow(0_0_4px_rgba(0,0,0,0.5))]"
+                onClick={() => onNavigateHistory!("prev")}
+              >
+                <span className="text-xl">◀</span>
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:bg-white/20 h-10 w-10 [filter:drop-shadow(0_0_2px_rgba(0,0,0,0.8))_drop-shadow(0_0_4px_rgba(0,0,0,0.5))]"
+                onClick={() => onNavigateHistory!("next")}
+              >
+                <span className="text-xl">▶</span>
+              </Button>
+            </>
+          )}
+          {fullscreenMedia?.type === "image" && (
             <img
               src={fullscreenMedia.url}
               alt="Fullscreen preview"
               className="max-w-full max-h-full object-contain"
             />
           )}
-          {fullscreenMedia?.type === 'video' && (
+          {fullscreenMedia?.type === "video" && (
             <video
               src={fullscreenMedia.url}
               controls
@@ -662,13 +850,12 @@ export function OutputDisplay({ prediction, outputs, error, isLoading, modelId,
           {/* Counter */}
           {mediaOutputs.length > 1 && fullscreenMedia && (
             <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-50 text-white/80 text-sm [filter:drop-shadow(0_0_2px_rgba(0,0,0,0.8))]">
-              {mediaOutputs.findIndex(m => m.index === fullscreenIndex) + 1} / {mediaOutputs.length}
+              {mediaOutputs.findIndex((m) => m.index === fullscreenIndex) + 1} /{" "}
+              {mediaOutputs.length}
             </div>
           )}
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
-
-
diff --git a/src/components/playground/PromptOptimizer.tsx b/src/components/playground/PromptOptimizer.tsx
index 58d9b8dc..b14abb86 100644
--- a/src/components/playground/PromptOptimizer.tsx
+++ b/src/components/playground/PromptOptimizer.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useMemo, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -8,117 +8,142 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/ui/dialog'
-import { Sparkles, Loader2 } from 'lucide-react'
-import { useModelsStore } from '@/stores/modelsStore'
-import { apiClient } from '@/api/client'
-import { schemaToFormFields, getDefaultValues, type FormFieldConfig } from '@/lib/schemaToForm'
-import { FormField } from './FormField'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+} from "@/components/ui/dialog";
+import { Sparkles, Loader2 } from "lucide-react";
+import { useModelsStore } from "@/stores/modelsStore";
+import { apiClient } from "@/api/client";
+import {
+  schemaToFormFields,
+  getDefaultValues,
+  type FormFieldConfig,
+} from "@/lib/schemaToForm";
+import { FormField } from "./FormField";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface PromptOptimizerProps {
-  currentPrompt: string
-  onOptimized: (optimizedPrompt: string) => void
-  disabled?: boolean
-  modelType?: string
-  imageValue?: string
+  currentPrompt: string;
+  onOptimized: (optimizedPrompt: string) => void;
+  disabled?: boolean;
+  modelType?: string;
+  imageValue?: string;
 }
 
 // Detect if a model is a video model based on its type
 function isVideoModel(modelType?: string): boolean {
-  if (!modelType) return false
-  return modelType.toLowerCase().includes('video')
+  if (!modelType) return false;
+  return modelType.toLowerCase().includes("video");
 }
 
-const PROMPT_OPTIMIZER_MODEL = 'wavespeed-ai/prompt-optimizer'
+const PROMPT_OPTIMIZER_MODEL = "wavespeed-ai/prompt-optimizer";
 
-export function PromptOptimizer({ currentPrompt, onOptimized, disabled, modelType, imageValue }: PromptOptimizerProps) {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [values, setValues] = useState<Record<string, unknown>>({})
-  const [error, setError] = useState<string | null>(null)
+export function PromptOptimizer({
+  currentPrompt,
+  onOptimized,
+  disabled,
+  modelType,
+  imageValue,
+}: PromptOptimizerProps) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [isOptimizing, setIsOptimizing] = useState(false);
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const [error, setError] = useState<string | null>(null);
 
-  const { models, fetchModels } = useModelsStore()
+  const { models, fetchModels } = useModelsStore();
 
   // Determine default mode based on current model type
-  const defaultMode = isVideoModel(modelType) ? 'video' : 'image'
+  const defaultMode = isVideoModel(modelType) ? "video" : "image";
 
   // Find the prompt optimizer model
   const optimizerModel = useMemo(() => {
-    return models.find(m => m.name === PROMPT_OPTIMIZER_MODEL)
-  }, [models])
+    return models.find((m) => m.name === PROMPT_OPTIMIZER_MODEL);
+  }, [models]);
 
   // Extract form fields from model schema
   const fields = useMemo<FormFieldConfig[]>(() => {
-    if (!optimizerModel) return []
+    if (!optimizerModel) return [];
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const apiSchemas = (optimizerModel.api_schema as any)?.api_schemas as Array<{
-      type: string
-      request_schema?: {
-        properties?: Record<string, unknown>
-        required?: string[]
-        'x-order-properties'?: string[]
-      }
-    }> | undefined
-
-    const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
-    if (!requestSchema?.properties) return []
+    const apiSchemas = (optimizerModel.api_schema as any)?.api_schemas as
+      | Array<{
+          type: string;
+          request_schema?: {
+            properties?: Record<string, unknown>;
+            required?: string[];
+            "x-order-properties"?: string[];
+          };
+        }>
+      | undefined;
+
+    const requestSchema = apiSchemas?.find(
+      (s) => s.type === "model_run",
+    )?.request_schema;
+    if (!requestSchema?.properties) return [];
 
     return schemaToFormFields(
-      requestSchema.properties as Record<string, import('@/types/model').SchemaProperty>,
+      requestSchema.properties as Record<
+        string,
+        import("@/types/model").SchemaProperty
+      >,
       requestSchema.required || [],
-      requestSchema['x-order-properties']
-    )
-  }, [optimizerModel])
+      requestSchema["x-order-properties"],
+    );
+  }, [optimizerModel]);
 
   // Set default values when dialog opens
   useEffect(() => {
     if (open && fields.length > 0) {
-      const defaults = getDefaultValues(fields)
+      const defaults = getDefaultValues(fields);
       // Pre-fill text field with current prompt, mode based on model type, and image if available
       setValues({
         ...defaults,
         text: currentPrompt,
         mode: defaultMode,
-        ...(imageValue ? { image: imageValue } : {})
-      })
-      setError(null)
+        ...(imageValue ? { image: imageValue } : {}),
+      });
+      setError(null);
     }
-  }, [open, fields, currentPrompt, defaultMode, imageValue])
+  }, [open, fields, currentPrompt, defaultMode, imageValue]);
 
   // Fetch models if not loaded
   useEffect(() => {
     if (open && models.length === 0) {
-      fetchModels()
+      fetchModels();
     }
-  }, [open, models.length, fetchModels])
+  }, [open, models.length, fetchModels]);
 
   const handleChange = useCallback((key: string, value: unknown) => {
-    setValues(prev => ({ ...prev, [key]: value }))
-  }, [])
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
 
   const handleOptimize = async () => {
     if (!values.text && !values.image) {
-      setError(t('playground.optimizer.enterPromptError'))
-      return
+      setError(t("playground.optimizer.enterPromptError"));
+      return;
     }
 
-    setIsOptimizing(true)
-    setError(null)
+    setIsOptimizing(true);
+    setError(null);
 
     try {
-      const optimizedPrompt = await apiClient.optimizePrompt(values)
-      onOptimized(optimizedPrompt)
-      setOpen(false)
+      const optimizedPrompt = await apiClient.optimizePrompt(values);
+      onOptimized(optimizedPrompt);
+      setOpen(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('playground.optimizer.failedError'))
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("playground.optimizer.failedError"),
+      );
     } finally {
-      setIsOptimizing(false)
+      setIsOptimizing(false);
     }
-  }
+  };
 
   return (
     <>
@@ -136,7 +161,7 @@ export function PromptOptimizer({ currentPrompt, onOptimized, disabled, modelTyp
           </Button>
         </TooltipTrigger>
         <TooltipContent side="top">
-          <p>{t('playground.optimizer.tooltip')}</p>
+          <p>{t("playground.optimizer.tooltip")}</p>
         </TooltipContent>
       </Tooltip>
 
@@ -145,26 +170,27 @@ export function PromptOptimizer({ currentPrompt, onOptimized, disabled, modelTyp
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
               <Sparkles className="h-5 w-5" />
-              {t('playground.optimizer.title')}
+              {t("playground.optimizer.title")}
               {optimizerModel?.base_price !== undefined && (
                 <span className="text-sm font-normal text-muted-foreground">
-                  (${optimizerModel.base_price.toFixed(3)}/{t('playground.optimizer.perRun')})
+                  (${optimizerModel.base_price.toFixed(3)}/
+                  {t("playground.optimizer.perRun")})
                 </span>
               )}
             </DialogTitle>
             <DialogDescription className="sr-only">
-              {t('playground.optimizer.tooltip')}
+              {t("playground.optimizer.tooltip")}
             </DialogDescription>
           </DialogHeader>
 
           {!optimizerModel ? (
             <div className="py-8 text-center text-muted-foreground">
               <Loader2 className="h-6 w-6 animate-spin mx-auto mb-2" />
-              <p>{t('playground.optimizer.loading')}</p>
+              <p>{t("playground.optimizer.loading")}</p>
             </div>
           ) : fields.length === 0 ? (
             <div className="py-8 text-center text-muted-foreground">
-              <p>{t('playground.optimizer.loadError')}</p>
+              <p>{t("playground.optimizer.loadError")}</p>
             </div>
           ) : (
             <ScrollArea className="max-h-[60vh]">
@@ -182,24 +208,29 @@ export function PromptOptimizer({ currentPrompt, onOptimized, disabled, modelTyp
             </ScrollArea>
           )}
 
-          {error && (
-            <p className="text-sm text-destructive">{error}</p>
-          )}
+          {error && <p className="text-sm text-destructive">{error}</p>}
 
           <DialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)} disabled={isOptimizing}>
-              {t('common.cancel')}
+            <Button
+              variant="outline"
+              onClick={() => setOpen(false)}
+              disabled={isOptimizing}
+            >
+              {t("common.cancel")}
             </Button>
-            <Button onClick={handleOptimize} disabled={isOptimizing || !optimizerModel}>
+            <Button
+              onClick={handleOptimize}
+              disabled={isOptimizing || !optimizerModel}
+            >
               {isOptimizing ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('playground.optimizer.optimizing')}
+                  {t("playground.optimizer.optimizing")}
                 </>
               ) : (
                 <>
                   <Sparkles className="mr-2 h-4 w-4" />
-                  {t('playground.optimizer.optimize')}
+                  {t("playground.optimizer.optimize")}
                 </>
               )}
             </Button>
@@ -207,5 +238,5 @@ export function PromptOptimizer({ currentPrompt, onOptimized, disabled, modelTyp
         </DialogContent>
       </Dialog>
     </>
-  )
+  );
 }
diff --git a/src/components/playground/ResultPanel.tsx b/src/components/playground/ResultPanel.tsx
new file mode 100644
index 00000000..7ebdc04e
--- /dev/null
+++ b/src/components/playground/ResultPanel.tsx
@@ -0,0 +1,69 @@
+import { OutputDisplay } from "./OutputDisplay";
+import { BatchOutputGrid } from "./BatchOutputGrid";
+import type { PredictionResult } from "@/types/prediction";
+import type { BatchResult, BatchQueueItem } from "@/types/batch";
+
+interface ResultPanelProps {
+  prediction: PredictionResult | null;
+  outputs: (string | Record<string, unknown>)[];
+  error: string | null;
+  isLoading: boolean;
+  modelId?: string;
+  // Batch
+  batchResults: BatchResult[];
+  batchIsRunning?: boolean;
+  batchTotalCount?: number;
+  batchQueue?: BatchQueueItem[];
+  onClearBatch: () => void;
+  // Batch preview
+  batchPreviewInputs: Record<string, unknown>[];
+  // History
+  historyIndex: number | null;
+  historyLength?: number;
+  onNavigateHistory?: (direction: "prev" | "next") => void;
+}
+
+export function ResultPanel({
+  prediction,
+  outputs,
+  error,
+  isLoading,
+  modelId,
+  batchResults,
+  batchIsRunning,
+  batchTotalCount,
+  batchQueue,
+  onClearBatch,
+  batchPreviewInputs,
+  historyIndex,
+  historyLength,
+  onNavigateHistory,
+}: ResultPanelProps) {
+  // Only show batch grid when there are actual results
+  const showBatchGrid = batchResults.length > 0 && historyIndex === null;
+
+  return (
+    <div className="flex-1 min-w-0 overflow-auto p-5 md:p-6">
+      {showBatchGrid ? (
+        <BatchOutputGrid
+          results={batchResults}
+          modelId={modelId}
+          onClear={onClearBatch}
+          isRunning={batchIsRunning}
+          totalCount={batchTotalCount}
+          queue={batchQueue}
+        />
+      ) : (
+        <OutputDisplay
+          prediction={prediction}
+          outputs={outputs}
+          error={error}
+          isLoading={isLoading}
+          modelId={modelId}
+          historyLength={historyLength}
+          onNavigateHistory={onNavigateHistory}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/playground/SizeSelector.tsx b/src/components/playground/SizeSelector.tsx
index 98934a4c..f02d3b19 100644
--- a/src/components/playground/SizeSelector.tsx
+++ b/src/components/playground/SizeSelector.tsx
@@ -1,139 +1,165 @@
-import { useState, useEffect, useMemo } from 'react'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Button } from '@/components/ui/button'
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
 
 // Compact aspect ratio icon
 function AspectIcon({ ratio }: { ratio: string }) {
   const getDimensions = () => {
     switch (ratio) {
-      case '1:1': return { w: 10, h: 10 }
-      case '16:9': return { w: 12, h: 7 }
-      case '9:16': return { w: 7, h: 12 }
-      case '4:3': return { w: 12, h: 9 }
-      case '3:4': return { w: 9, h: 12 }
-      case '3:2': return { w: 12, h: 8 }
-      case '2:3': return { w: 8, h: 12 }
-      default: return { w: 10, h: 10 }
+      case "1:1":
+        return { w: 10, h: 10 };
+      case "16:9":
+        return { w: 12, h: 7 };
+      case "9:16":
+        return { w: 7, h: 12 };
+      case "4:3":
+        return { w: 12, h: 9 };
+      case "3:4":
+        return { w: 9, h: 12 };
+      case "3:2":
+        return { w: 12, h: 8 };
+      case "2:3":
+        return { w: 8, h: 12 };
+      default:
+        return { w: 10, h: 10 };
     }
-  }
-  const { w, h } = getDimensions()
+  };
+  const { w, h } = getDimensions();
   return (
     <div
       className="border border-current rounded-[1px]"
       style={{ width: w, height: h }}
     />
-  )
+  );
 }
 
 interface SizeSelectorProps {
-  value: string
-  onChange: (value: string) => void
-  disabled?: boolean
-  min?: number  // minimum dimension value from schema
-  max?: number  // maximum dimension value from schema
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  min?: number; // minimum dimension value from schema
+  max?: number; // maximum dimension value from schema
 }
 
 // 1K presets (~1 megapixel total, similar to 1024×1024)
 const PRESETS_1K = [
-  { label: '1:1', width: 1024, height: 1024 },   // 1,048,576 px
-  { label: '16:9', width: 1280, height: 720 },   // 921,600 px (HD)
-  { label: '9:16', width: 720, height: 1280 },   // 921,600 px
-  { label: '4:3', width: 1152, height: 864 },    // 995,328 px
-  { label: '3:4', width: 864, height: 1152 },    // 995,328 px
-  { label: '3:2', width: 1216, height: 832 },    // 1,011,712 px
-  { label: '2:3', width: 832, height: 1216 },    // 1,011,712 px
-]
+  { label: "1:1", width: 1024, height: 1024 }, // 1,048,576 px
+  { label: "16:9", width: 1280, height: 720 }, // 921,600 px (HD)
+  { label: "9:16", width: 720, height: 1280 }, // 921,600 px
+  { label: "4:3", width: 1152, height: 864 }, // 995,328 px
+  { label: "3:4", width: 864, height: 1152 }, // 995,328 px
+  { label: "3:2", width: 1216, height: 832 }, // 1,011,712 px
+  { label: "2:3", width: 832, height: 1216 }, // 1,011,712 px
+];
 
 // 2K presets (~4 megapixels total, similar to 2048×2048)
 const PRESETS_2K = [
-  { label: '1:1', width: 2048, height: 2048 },   // 4,194,304 px
-  { label: '16:9', width: 2560, height: 1440 },  // 3,686,400 px (QHD/2K)
-  { label: '9:16', width: 1440, height: 2560 },  // 3,686,400 px
-  { label: '4:3', width: 2304, height: 1728 },   // 3,981,312 px
-  { label: '3:4', width: 1728, height: 2304 },   // 3,981,312 px
-  { label: '3:2', width: 2432, height: 1664 },   // 4,046,848 px
-  { label: '2:3', width: 1664, height: 2432 },   // 4,046,848 px
-]
+  { label: "1:1", width: 2048, height: 2048 }, // 4,194,304 px
+  { label: "16:9", width: 2560, height: 1440 }, // 3,686,400 px (QHD/2K)
+  { label: "9:16", width: 1440, height: 2560 }, // 3,686,400 px
+  { label: "4:3", width: 2304, height: 1728 }, // 3,981,312 px
+  { label: "3:4", width: 1728, height: 2304 }, // 3,981,312 px
+  { label: "3:2", width: 2432, height: 1664 }, // 4,046,848 px
+  { label: "2:3", width: 1664, height: 2432 }, // 4,046,848 px
+];
 
 // Generate presets based on min/max range
 // For each aspect ratio, prefer 2K if it fits, otherwise use 1K
 function generatePresets(min: number, max: number) {
-  const presets: { label: string; width: number; height: number }[] = []
+  const presets: { label: string; width: number; height: number }[] = [];
 
   for (let i = 0; i < PRESETS_1K.length; i++) {
-    const preset1k = PRESETS_1K[i]
-    const preset2k = PRESETS_2K[i]
+    const preset1k = PRESETS_1K[i];
+    const preset2k = PRESETS_2K[i];
 
     // Try 2K first
-    if (preset2k.width >= min && preset2k.width <= max && preset2k.height >= min && preset2k.height <= max) {
-      presets.push(preset2k)
-    } else if (preset1k.width >= min && preset1k.width <= max && preset1k.height >= min && preset1k.height <= max) {
+    if (
+      preset2k.width >= min &&
+      preset2k.width <= max &&
+      preset2k.height >= min &&
+      preset2k.height <= max
+    ) {
+      presets.push(preset2k);
+    } else if (
+      preset1k.width >= min &&
+      preset1k.width <= max &&
+      preset1k.height >= min &&
+      preset1k.height <= max
+    ) {
       // Fall back to 1K
-      presets.push(preset1k)
+      presets.push(preset1k);
     }
   }
 
-  return presets
+  return presets;
 }
 
-export function SizeSelector({ value, onChange, disabled, min = 256, max = 1536 }: SizeSelectorProps) {
-  const [width, setWidth] = useState(1024)
-  const [height, setHeight] = useState(1024)
-  const [widthInput, setWidthInput] = useState('1024')
-  const [heightInput, setHeightInput] = useState('1024')
+export function SizeSelector({
+  value,
+  onChange,
+  disabled,
+  min = 256,
+  max = 1536,
+}: SizeSelectorProps) {
+  const [width, setWidth] = useState(1024);
+  const [height, setHeight] = useState(1024);
+  const [widthInput, setWidthInput] = useState("1024");
+  const [heightInput, setHeightInput] = useState("1024");
+  const [swapRotation, setSwapRotation] = useState(0);
 
   // Parse value into width/height
   useEffect(() => {
     if (value) {
-      const parts = value.split('*')
+      const parts = value.split("*");
       if (parts.length === 2) {
-        const w = parseInt(parts[0], 10)
-        const h = parseInt(parts[1], 10)
+        const w = parseInt(parts[0], 10);
+        const h = parseInt(parts[1], 10);
         if (!isNaN(w) && !isNaN(h)) {
-          setWidth(w)
-          setHeight(h)
-          setWidthInput(String(w))
-          setHeightInput(String(h))
+          setWidth(w);
+          setHeight(h);
+          setWidthInput(String(w));
+          setHeightInput(String(h));
         }
       }
     }
-  }, [value])
+  }, [value]);
 
-  const clamp = (n: number) => Math.min(max, Math.max(min, n))
+  const clamp = (n: number) => Math.min(max, Math.max(min, n));
 
   const handleWidthChange = (w: number) => {
-    setWidth(w)
-    setWidthInput(String(w))
-    onChange(`${w}*${height}`)
-  }
+    setWidth(w);
+    setWidthInput(String(w));
+    onChange(`${w}*${height}`);
+  };
 
   const handleHeightChange = (h: number) => {
-    setHeight(h)
-    setHeightInput(String(h))
-    onChange(`${width}*${h}`)
-  }
+    setHeight(h);
+    setHeightInput(String(h));
+    onChange(`${width}*${h}`);
+  };
 
   const handlePreset = (w: number, h: number) => {
-    setWidth(w)
-    setHeight(h)
-    setWidthInput(String(w))
-    setHeightInput(String(h))
-    onChange(`${w}*${h}`)
-  }
+    setWidth(w);
+    setHeight(h);
+    setWidthInput(String(w));
+    setHeightInput(String(h));
+    onChange(`${w}*${h}`);
+  };
 
-  const handleSwap = () => {
-    setWidth(height)
-    setHeight(width)
-    setWidthInput(String(height))
-    setHeightInput(String(width))
-    onChange(`${height}*${width}`)
-  }
+  const handleSwap = useCallback(() => {
+    setWidth(height);
+    setHeight(width);
+    setWidthInput(String(height));
+    setHeightInput(String(width));
+    onChange(`${height}*${width}`);
+    setSwapRotation((r) => r + 180);
+  }, [width, height, onChange]);
 
   // Generate presets based on min/max range
-  const availablePresets = useMemo(() => generatePresets(min, max), [min, max])
+  const availablePresets = useMemo(() => generatePresets(min, max), [min, max]);
 
-  const isCurrentPreset = (w: number, h: number) => width === w && height === h
+  const isCurrentPreset = (w: number, h: number) => width === w && height === h;
 
   return (
     <div className="space-y-3">
@@ -143,7 +169,11 @@ export function SizeSelector({ value, onChange, disabled, min = 256, max = 1536
           <Button
             key={`${preset.width}x${preset.height}`}
             type="button"
-            variant={isCurrentPreset(preset.width, preset.height) ? 'default' : 'outline'}
+            variant={
+              isCurrentPreset(preset.width, preset.height)
+                ? "default"
+                : "outline"
+            }
             size="sm"
             onClick={() => handlePreset(preset.width, preset.height)}
             disabled={disabled}
@@ -164,21 +194,21 @@ export function SizeSelector({ value, onChange, disabled, min = 256, max = 1536
             type="number"
             value={widthInput}
             onChange={(e) => {
-              const next = e.target.value
-              setWidthInput(next)
-              if (next === '') return
-              const parsed = parseInt(next, 10)
-              if (Number.isNaN(parsed)) return
-              handleWidthChange(parsed)
+              const next = e.target.value;
+              setWidthInput(next);
+              if (next === "") return;
+              const parsed = parseInt(next, 10);
+              if (Number.isNaN(parsed)) return;
+              handleWidthChange(parsed);
             }}
             onBlur={() => {
-              if (widthInput === '') {
-                handleWidthChange(min)
-                return
+              if (widthInput === "") {
+                handleWidthChange(min);
+                return;
               }
-              const parsed = parseInt(widthInput, 10)
+              const parsed = parseInt(widthInput, 10);
               if (!Number.isNaN(parsed)) {
-                handleWidthChange(clamp(parsed))
+                handleWidthChange(clamp(parsed));
               }
             }}
             min={min}
@@ -208,6 +238,8 @@ export function SizeSelector({ value, onChange, disabled, min = 256, max = 1536
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
+            className="transition-transform duration-300"
+            style={{ transform: `rotate(${swapRotation}deg)` }}
           >
             <path d="M8 3L4 7l4 4" />
             <path d="M4 7h16" />
@@ -222,21 +254,21 @@ export function SizeSelector({ value, onChange, disabled, min = 256, max = 1536
             type="number"
             value={heightInput}
             onChange={(e) => {
-              const next = e.target.value
-              setHeightInput(next)
-              if (next === '') return
-              const parsed = parseInt(next, 10)
-              if (Number.isNaN(parsed)) return
-              handleHeightChange(parsed)
+              const next = e.target.value;
+              setHeightInput(next);
+              if (next === "") return;
+              const parsed = parseInt(next, 10);
+              if (Number.isNaN(parsed)) return;
+              handleHeightChange(parsed);
             }}
             onBlur={() => {
-              if (heightInput === '') {
-                handleHeightChange(min)
-                return
+              if (heightInput === "") {
+                handleHeightChange(min);
+                return;
               }
-              const parsed = parseInt(heightInput, 10)
+              const parsed = parseInt(heightInput, 10);
               if (!Number.isNaN(parsed)) {
-                handleHeightChange(clamp(parsed))
+                handleHeightChange(clamp(parsed));
               }
             }}
             min={min}
@@ -250,9 +282,13 @@ export function SizeSelector({ value, onChange, disabled, min = 256, max = 1536
 
       {/* Current size and range display */}
       <div className="flex items-center justify-between text-xs text-muted-foreground">
-        <span>{width} × {height} px</span>
-        <span>Range: {min} - {max}</span>
+        <span>
+          {width} × {height} px
+        </span>
+        <span>
+          Range: {min} - {max}
+        </span>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/playground/TemplatesPanel.tsx b/src/components/playground/TemplatesPanel.tsx
new file mode 100644
index 00000000..8aece5df
--- /dev/null
+++ b/src/components/playground/TemplatesPanel.tsx
@@ -0,0 +1,146 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TemplateBrowser } from "@/components/templates/TemplateBrowser";
+import {
+  TemplateDialog,
+  type TemplateFormData,
+} from "@/components/templates/TemplateDialog";
+import { useTemplateStore } from "@/stores/templateStore";
+import { toast } from "@/hooks/useToast";
+import type { Template } from "@/types/template";
+
+interface TemplatesPanelProps {
+  onUseTemplate: (template: Template) => void;
+}
+
+export function TemplatesPanel({ onUseTemplate }: TemplatesPanelProps) {
+  const { t } = useTranslation();
+  const { updateTemplate, deleteTemplate, exportTemplates } =
+    useTemplateStore();
+  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
+  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
+    null,
+  );
+
+  const handleSaveEdit = useCallback(
+    async (data: TemplateFormData) => {
+      if (!editingTemplate) return;
+      try {
+        await updateTemplate(editingTemplate.id, {
+          name: data.name,
+          description: data.description,
+          tags: data.tags,
+          thumbnail: data.thumbnail ?? null,
+        });
+        toast({
+          title: t("templates.templateUpdated"),
+          description: t("templates.updatedSuccessfully", { name: data.name }),
+        });
+        setEditingTemplate(null);
+      } catch (error) {
+        toast({
+          title: t("common.error"),
+          description: (error as Error).message,
+          variant: "destructive",
+        });
+      }
+    },
+    [editingTemplate, updateTemplate, t],
+  );
+
+  const handleDeleteConfirm = useCallback(async () => {
+    if (!deletingTemplate) return;
+    try {
+      await deleteTemplate(deletingTemplate.id);
+      toast({
+        title: t("templates.templateDeleted"),
+        description: t("templates.deletedSuccessfully", {
+          name: deletingTemplate.name,
+        }),
+      });
+      setDeletingTemplate(null);
+    } catch (error) {
+      toast({
+        title: t("common.error"),
+        description: (error as Error).message,
+        variant: "destructive",
+      });
+    }
+  }, [deletingTemplate, deleteTemplate, t]);
+
+  const handleExport = useCallback(
+    async (template: Template) => {
+      try {
+        await exportTemplates([template.id]);
+        toast({
+          title: t("templates.templateExported"),
+          description: t("templates.exportedSuccessfully", {
+            name: template.name,
+          }),
+        });
+      } catch (error) {
+        toast({
+          title: t("common.error"),
+          description: (error as Error).message,
+          variant: "destructive",
+        });
+      }
+    },
+    [exportTemplates, t],
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <TemplateBrowser
+        templateType="playground"
+        onUseTemplate={onUseTemplate}
+        onEditTemplate={setEditingTemplate}
+        onDeleteTemplate={setDeletingTemplate}
+        onExportTemplate={handleExport}
+      />
+
+      {/* Edit Dialog */}
+      <TemplateDialog
+        open={!!editingTemplate}
+        onOpenChange={(o) => !o && setEditingTemplate(null)}
+        template={editingTemplate}
+        onSave={handleSaveEdit}
+        mode="edit"
+      />
+
+      {/* Delete Confirmation */}
+      {deletingTemplate && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+          onClick={() => setDeletingTemplate(null)}
+        >
+          <div
+            className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-sm font-semibold mb-1">
+              {t("templates.deleteTemplate")}
+            </h3>
+            <p className="text-xs text-muted-foreground mb-4">
+              {t("templates.deleteConfirm", { name: deletingTemplate.name })}
+            </p>
+            <div className="flex justify-end gap-2">
+              <button
+                onClick={() => setDeletingTemplate(null)}
+                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {t("common.cancel")}
+              </button>
+              <button
+                onClick={handleDeleteConfirm}
+                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors"
+              >
+                {t("common.delete")}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/playground/VideoRecorder.tsx b/src/components/playground/VideoRecorder.tsx
index b12b61cd..2ad0e747 100644
--- a/src/components/playground/VideoRecorder.tsx
+++ b/src/components/playground/VideoRecorder.tsx
@@ -1,396 +1,412 @@
-import { useState, useRef, useCallback, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import { X, RotateCcw, Check, Loader2, Play, Pause, Video } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-type AspectRatio = '16:9' | '4:3' | '1:1' | '9:16'
-
-const ASPECT_RATIO_CONFIG: Record<AspectRatio, { width: number; height: number; class: string }> = {
-  '16:9': { width: 1920, height: 1080, class: 'aspect-[16/9]' },
-  '4:3': { width: 1440, height: 1080, class: 'aspect-[4/3]' },
-  '1:1': { width: 1080, height: 1080, class: 'aspect-[1/1]' },
-  '9:16': { width: 1080, height: 1920, class: 'aspect-[9/16]' },
-}
+} from "@/components/ui/select";
+import { X, RotateCcw, Check, Loader2, Play, Pause, Video } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type AspectRatio = "16:9" | "4:3" | "1:1" | "9:16";
+
+const ASPECT_RATIO_CONFIG: Record<
+  AspectRatio,
+  { width: number; height: number; class: string }
+> = {
+  "16:9": { width: 1920, height: 1080, class: "aspect-[16/9]" },
+  "4:3": { width: 1440, height: 1080, class: "aspect-[4/3]" },
+  "1:1": { width: 1080, height: 1080, class: "aspect-[1/1]" },
+  "9:16": { width: 1080, height: 1920, class: "aspect-[9/16]" },
+};
 
 interface VideoRecorderProps {
-  onRecord: (blob: Blob) => void
-  onClose: () => void
-  disabled?: boolean
+  onRecord: (blob: Blob) => void;
+  onClose: () => void;
+  disabled?: boolean;
 }
 
-export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProps) {
-  const { t } = useTranslation()
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const previewRef = useRef<HTMLVideoElement>(null)
-  const streamRef = useRef<MediaStream | null>(null)
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null)
-  const chunksRef = useRef<Blob[]>([])
-  const timerRef = useRef<NodeJS.Timeout | null>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const analyserRef = useRef<AnalyserNode | null>(null)
-  const audioContextRef = useRef<AudioContext | null>(null)
-  const animationRef = useRef<number | null>(null)
-
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [isRecording, setIsRecording] = useState(false)
-  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null)
-  const [recordedUrl, setRecordedUrl] = useState<string | null>(null)
-  const [duration, setDuration] = useState(0)
-  const [facingMode, setFacingMode] = useState<'user' | 'environment'>('environment')
-  const [aspectRatio, setAspectRatio] = useState<AspectRatio>('16:9')
-  const [, setAudioLevel] = useState(0)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [videoDuration, setVideoDuration] = useState(0)
+export function VideoRecorder({
+  onRecord,
+  onClose,
+  disabled,
+}: VideoRecorderProps) {
+  const { t } = useTranslation();
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const previewRef = useRef<HTMLVideoElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const animationRef = useRef<number | null>(null);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordedBlob, setRecordedBlob] = useState<Blob | null>(null);
+  const [recordedUrl, setRecordedUrl] = useState<string | null>(null);
+  const [duration, setDuration] = useState(0);
+  const [facingMode, setFacingMode] = useState<"user" | "environment">(
+    "environment",
+  );
+  const [aspectRatio, setAspectRatio] = useState<AspectRatio>("16:9");
+  const [, setAudioLevel] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [videoDuration, setVideoDuration] = useState(0);
 
   const drawWaveform = useCallback(() => {
-    if (!canvasRef.current || !analyserRef.current) return
+    if (!canvasRef.current || !analyserRef.current) return;
 
-    const canvas = canvasRef.current
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
-    const analyser = analyserRef.current
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Uint8Array(bufferLength)
+    const analyser = analyserRef.current;
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
 
     const draw = () => {
-      animationRef.current = requestAnimationFrame(draw)
-      analyser.getByteFrequencyData(dataArray)
+      animationRef.current = requestAnimationFrame(draw);
+      analyser.getByteFrequencyData(dataArray);
 
       // Calculate average audio level
-      const average = dataArray.reduce((a, b) => a + b, 0) / bufferLength
-      setAudioLevel(average / 255)
+      const average = dataArray.reduce((a, b) => a + b, 0) / bufferLength;
+      setAudioLevel(average / 255);
 
       // Clear canvas
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
 
       // Draw bars
-      const barCount = 32
-      const barWidth = canvas.width / barCount
-      const barGap = 2
+      const barCount = 32;
+      const barWidth = canvas.width / barCount;
+      const barGap = 2;
 
       for (let i = 0; i < barCount; i++) {
-        const dataIndex = Math.floor(i * bufferLength / barCount)
-        const barHeight = (dataArray[dataIndex] / 255) * canvas.height
+        const dataIndex = Math.floor((i * bufferLength) / barCount);
+        const barHeight = (dataArray[dataIndex] / 255) * canvas.height;
 
-        ctx.fillStyle = `rgba(59, 130, 246, ${0.5 + (dataArray[dataIndex] / 255) * 0.4})`
+        ctx.fillStyle = `rgba(59, 130, 246, ${0.5 + (dataArray[dataIndex] / 255) * 0.4})`;
         ctx.fillRect(
           i * barWidth + barGap / 2,
           canvas.height - barHeight,
           barWidth - barGap,
-          barHeight
-        )
+          barHeight,
+        );
       }
-    }
+    };
 
-    draw()
-  }, [])
+    draw();
+  }, []);
 
   useEffect(() => {
-    let mounted = true
-    let localStream: MediaStream | null = null
-    let localAudioContext: AudioContext | null = null
+    let mounted = true;
+    let localStream: MediaStream | null = null;
+    let localAudioContext: AudioContext | null = null;
 
     const startCamera = async () => {
-      setIsLoading(true)
-      setError(null)
+      setIsLoading(true);
+      setError(null);
 
       // Stop any existing stream
       if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop())
-        streamRef.current = null
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
       }
 
       try {
-        const config = ASPECT_RATIO_CONFIG[aspectRatio]
+        const config = ASPECT_RATIO_CONFIG[aspectRatio];
         const stream = await navigator.mediaDevices.getUserMedia({
           video: {
             facingMode,
             width: { ideal: config.width },
-            height: { ideal: config.height }
+            height: { ideal: config.height },
           },
-          audio: true
-        })
+          audio: true,
+        });
 
         if (!mounted) {
           // Component unmounted while waiting for permission
-          stream.getTracks().forEach(track => track.stop())
-          return
+          stream.getTracks().forEach((track) => track.stop());
+          return;
         }
 
-        localStream = stream
-        streamRef.current = stream
+        localStream = stream;
+        streamRef.current = stream;
 
         if (videoRef.current) {
-          videoRef.current.srcObject = stream
+          videoRef.current.srcObject = stream;
           try {
-            await videoRef.current.play()
+            await videoRef.current.play();
           } catch (playErr) {
-            if (playErr instanceof Error && playErr.name === 'AbortError') {
-              return
+            if (playErr instanceof Error && playErr.name === "AbortError") {
+              return;
             }
-            throw playErr
+            throw playErr;
           }
         }
 
         // Set up audio analyzer for waveform
-        const audioContext = new AudioContext()
-        localAudioContext = audioContext
-        audioContextRef.current = audioContext
+        const audioContext = new AudioContext();
+        localAudioContext = audioContext;
+        audioContextRef.current = audioContext;
         // Ensure AudioContext is running (browsers may start it suspended)
-        if (audioContext.state === 'suspended') {
-          await audioContext.resume()
+        if (audioContext.state === "suspended") {
+          await audioContext.resume();
         }
-        const source = audioContext.createMediaStreamSource(stream)
-        const analyser = audioContext.createAnalyser()
-        analyser.fftSize = 256
-        source.connect(analyser)
-        analyserRef.current = analyser
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 256;
+        source.connect(analyser);
+        analyserRef.current = analyser;
       } catch (err) {
-        if (!mounted) return
+        if (!mounted) return;
 
-        console.error('Camera/mic error:', err)
+        console.error("Camera/mic error:", err);
         if (err instanceof Error) {
-          if (err.name === 'NotAllowedError') {
-            setError(t('playground.capture.cameraPermissionDenied'))
-          } else if (err.name === 'NotFoundError') {
-            setError(t('playground.capture.noCameraFound'))
+          if (err.name === "NotAllowedError") {
+            setError(t("playground.capture.cameraPermissionDenied"));
+          } else if (err.name === "NotFoundError") {
+            setError(t("playground.capture.noCameraFound"));
           } else {
-            setError(t('playground.capture.cameraError'))
+            setError(t("playground.capture.cameraError"));
           }
         } else {
-          setError(t('playground.capture.cameraError'))
+          setError(t("playground.capture.cameraError"));
         }
       } finally {
         if (mounted) {
-          setIsLoading(false)
+          setIsLoading(false);
         }
       }
-    }
+    };
 
-    startCamera()
+    startCamera();
 
     return () => {
-      mounted = false
+      mounted = false;
       if (localStream) {
-        localStream.getTracks().forEach(track => track.stop())
+        localStream.getTracks().forEach((track) => track.stop());
       }
       if (streamRef.current) {
-        streamRef.current.getTracks().forEach(track => track.stop())
-        streamRef.current = null
+        streamRef.current.getTracks().forEach((track) => track.stop());
+        streamRef.current = null;
       }
       if (timerRef.current) {
-        clearInterval(timerRef.current)
+        clearInterval(timerRef.current);
       }
       if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
+        cancelAnimationFrame(animationRef.current);
       }
       if (localAudioContext) {
-        localAudioContext.close()
+        localAudioContext.close();
       }
       if (audioContextRef.current) {
-        audioContextRef.current.close()
-        audioContextRef.current = null
+        audioContextRef.current.close();
+        audioContextRef.current = null;
       }
-    }
-  }, [facingMode, aspectRatio, t])
+    };
+  }, [facingMode, aspectRatio, t]);
 
   // Start waveform when recording starts
   useEffect(() => {
     if (isRecording) {
       // Small delay to ensure canvas is rendered
       const timeout = setTimeout(() => {
-        drawWaveform()
-      }, 50)
-      return () => clearTimeout(timeout)
+        drawWaveform();
+      }, 50);
+      return () => clearTimeout(timeout);
     }
-  }, [isRecording, drawWaveform])
+  }, [isRecording, drawWaveform]);
 
   // Cleanup recorded URL on unmount
   useEffect(() => {
     return () => {
       if (recordedUrl) {
-        URL.revokeObjectURL(recordedUrl)
+        URL.revokeObjectURL(recordedUrl);
       }
-    }
-  }, [recordedUrl])
+    };
+  }, [recordedUrl]);
 
   const switchCamera = async () => {
-    if (isRecording) return
-    setFacingMode(prev => prev === 'user' ? 'environment' : 'user')
-  }
+    if (isRecording) return;
+    setFacingMode((prev) => (prev === "user" ? "environment" : "user"));
+  };
 
   const startRecording = () => {
-    if (!streamRef.current) return
+    if (!streamRef.current) return;
 
-    chunksRef.current = []
-    setDuration(0)
+    chunksRef.current = [];
+    setDuration(0);
 
     // Determine supported MIME type
     const mimeTypes = [
-      'video/webm;codecs=vp9,opus',
-      'video/webm;codecs=vp8,opus',
-      'video/webm',
-      'video/mp4'
-    ]
+      "video/webm;codecs=vp9,opus",
+      "video/webm;codecs=vp8,opus",
+      "video/webm",
+      "video/mp4",
+    ];
 
-    let mimeType = ''
+    let mimeType = "";
     for (const type of mimeTypes) {
       if (MediaRecorder.isTypeSupported(type)) {
-        mimeType = type
-        break
+        mimeType = type;
+        break;
       }
     }
 
     const mediaRecorder = new MediaRecorder(streamRef.current, {
-      mimeType: mimeType || undefined
-    })
+      mimeType: mimeType || undefined,
+    });
 
     mediaRecorder.ondataavailable = (event) => {
       if (event.data.size > 0) {
-        chunksRef.current.push(event.data)
+        chunksRef.current.push(event.data);
       }
-    }
+    };
 
     mediaRecorder.onstop = () => {
-      const blob = new Blob(chunksRef.current, { type: mimeType || 'video/webm' })
-      const url = URL.createObjectURL(blob)
-      setRecordedBlob(blob)
-      setRecordedUrl(url)
+      const blob = new Blob(chunksRef.current, {
+        type: mimeType || "video/webm",
+      });
+      const url = URL.createObjectURL(blob);
+      setRecordedBlob(blob);
+      setRecordedUrl(url);
 
       if (timerRef.current) {
-        clearInterval(timerRef.current)
+        clearInterval(timerRef.current);
       }
-    }
+    };
 
-    mediaRecorderRef.current = mediaRecorder
-    mediaRecorder.start(1000) // Collect data every second
-    setIsRecording(true)
+    mediaRecorderRef.current = mediaRecorder;
+    mediaRecorder.start(1000); // Collect data every second
+    setIsRecording(true);
 
     // Start timer
     timerRef.current = setInterval(() => {
-      setDuration(prev => prev + 1)
-    }, 1000)
-  }
+      setDuration((prev) => prev + 1);
+    }, 1000);
+  };
 
   const stopRecording = () => {
     if (mediaRecorderRef.current && isRecording) {
-      mediaRecorderRef.current.stop()
-      setIsRecording(false)
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
       if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
+        cancelAnimationFrame(animationRef.current);
       }
     }
-  }
+  };
 
   const retake = () => {
     if (recordedUrl) {
-      URL.revokeObjectURL(recordedUrl)
+      URL.revokeObjectURL(recordedUrl);
     }
-    setRecordedBlob(null)
-    setRecordedUrl(null)
-    setDuration(0)
-    setIsPlaying(false)
-    setCurrentTime(0)
-    setVideoDuration(0)
-  }
+    setRecordedBlob(null);
+    setRecordedUrl(null);
+    setDuration(0);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setVideoDuration(0);
+  };
 
   const togglePlayback = () => {
-    if (!previewRef.current) return
+    if (!previewRef.current) return;
 
     if (isPlaying) {
-      previewRef.current.pause()
+      previewRef.current.pause();
     } else {
-      previewRef.current.play()
+      previewRef.current.play();
     }
-    setIsPlaying(!isPlaying)
-  }
+    setIsPlaying(!isPlaying);
+  };
 
   const handleTimeUpdate = () => {
     if (previewRef.current) {
-      setCurrentTime(previewRef.current.currentTime)
+      setCurrentTime(previewRef.current.currentTime);
     }
-  }
+  };
 
   const handleLoadedMetadata = () => {
     if (previewRef.current) {
-      const dur = previewRef.current.duration
+      const dur = previewRef.current.duration;
       // WebM files often have Infinity duration, use recorded duration as fallback
       if (isFinite(dur) && dur > 0) {
-        setVideoDuration(dur)
+        setVideoDuration(dur);
       } else {
-        setVideoDuration(duration)
+        setVideoDuration(duration);
       }
     }
-  }
+  };
 
   const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!previewRef.current || !videoDuration) return
+    if (!previewRef.current || !videoDuration) return;
 
-    const rect = e.currentTarget.getBoundingClientRect()
-    const clickX = e.clientX - rect.left
-    const percentage = clickX / rect.width
-    const newTime = percentage * videoDuration
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percentage = clickX / rect.width;
+    const newTime = percentage * videoDuration;
 
-    previewRef.current.currentTime = newTime
-    setCurrentTime(newTime)
-  }
+    previewRef.current.currentTime = newTime;
+    setCurrentTime(newTime);
+  };
 
   const formatTime = (seconds: number) => {
     if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) {
-      return '0:00'
+      return "0:00";
     }
-    const mins = Math.floor(seconds / 60)
-    const secs = Math.floor(seconds % 60)
-    return `${mins}:${secs.toString().padStart(2, '0')}`
-  }
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
 
   const confirmRecording = () => {
     if (recordedBlob) {
-      onRecord(recordedBlob)
+      onRecord(recordedBlob);
     }
-  }
+  };
 
   const handleClose = () => {
     if (streamRef.current) {
-      streamRef.current.getTracks().forEach(track => track.stop())
+      streamRef.current.getTracks().forEach((track) => track.stop());
     }
     if (timerRef.current) {
-      clearInterval(timerRef.current)
+      clearInterval(timerRef.current);
     }
     if (animationRef.current) {
-      cancelAnimationFrame(animationRef.current)
+      cancelAnimationFrame(animationRef.current);
     }
     if (audioContextRef.current) {
-      audioContextRef.current.close()
+      audioContextRef.current.close();
     }
     if (recordedUrl) {
-      URL.revokeObjectURL(recordedUrl)
+      URL.revokeObjectURL(recordedUrl);
     }
-    onClose()
-  }
+    onClose();
+  };
 
   const formatDuration = (seconds: number) => {
-    const mins = Math.floor(seconds / 60)
-    const secs = seconds % 60
-    return `${mins}:${secs.toString().padStart(2, '0')}`
-  }
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
 
-  const aspectConfig = ASPECT_RATIO_CONFIG[aspectRatio]
+  const aspectConfig = ASPECT_RATIO_CONFIG[aspectRatio];
 
   return (
     <div className="space-y-3">
-      <div className={cn("relative rounded-lg overflow-hidden bg-black max-h-80 mx-auto", aspectConfig.class)}>
+      <div
+        className={cn(
+          "relative rounded-lg overflow-hidden bg-black max-h-80 mx-auto",
+          aspectConfig.class,
+        )}
+      >
         {isLoading && (
           <div className="absolute inset-0 flex items-center justify-center bg-muted">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -411,8 +427,8 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
           muted
           className={cn(
             "w-full h-full object-cover",
-            facingMode === 'user' && "scale-x-[-1]",
-            recordedUrl && "hidden"
+            facingMode === "user" && "scale-x-[-1]",
+            recordedUrl && "hidden",
           )}
         />
 
@@ -449,7 +465,11 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
               >
                 <div
                   className="h-full bg-white transition-all duration-100"
-                  style={{ width: videoDuration ? `${(currentTime / videoDuration) * 100}%` : '0%' }}
+                  style={{
+                    width: videoDuration
+                      ? `${(currentTime / videoDuration) * 100}%`
+                      : "0%",
+                  }}
                 />
               </div>
               <div className="flex justify-between text-white text-xs font-mono">
@@ -465,7 +485,9 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
           <>
             <div className="absolute top-2 left-2 flex items-center gap-2 bg-black/50 rounded-full px-3 py-1">
               <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
-              <span className="text-white text-sm font-mono">{formatDuration(duration)}</span>
+              <span className="text-white text-sm font-mono">
+                {formatDuration(duration)}
+              </span>
             </div>
             {/* Audio waveform overlay */}
             <canvas
@@ -473,7 +495,7 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
               width={320}
               height={40}
               className="absolute bottom-2 left-2 right-2 h-8 rounded bg-black/30"
-              style={{ width: 'calc(100% - 16px)' }}
+              style={{ width: "calc(100% - 16px)" }}
             />
           </>
         )}
@@ -498,7 +520,7 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
               size="icon"
               onClick={switchCamera}
               disabled={isLoading || !!error || disabled || isRecording}
-              title={t('playground.capture.switchCamera')}
+              title={t("playground.capture.switchCamera")}
             >
               <RotateCcw className="h-4 w-4" />
             </Button>
@@ -510,9 +532,13 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
                 "h-12 w-12 rounded-full transition-colors text-white",
                 isRecording
                   ? "bg-red-500 hover:bg-red-600"
-                  : "bg-primary hover:bg-primary/90"
+                  : "bg-primary hover:bg-primary/90",
               )}
-              title={isRecording ? t('playground.capture.stopRecording') : t('playground.capture.startRecording')}
+              title={
+                isRecording
+                  ? t("playground.capture.stopRecording")
+                  : t("playground.capture.startRecording")
+              }
             >
               {!isRecording && <Video className="h-5 w-5" />}
             </Button>
@@ -534,24 +560,17 @@ export function VideoRecorder({ onRecord, onClose, disabled }: VideoRecorderProp
           </>
         ) : (
           <>
-            <Button
-              variant="outline"
-              onClick={retake}
-              disabled={disabled}
-            >
+            <Button variant="outline" onClick={retake} disabled={disabled}>
               <RotateCcw className="h-4 w-4 mr-2" />
-              {t('playground.capture.retake')}
+              {t("playground.capture.retake")}
             </Button>
-            <Button
-              onClick={confirmRecording}
-              disabled={disabled}
-            >
+            <Button onClick={confirmRecording} disabled={disabled}>
               <Check className="h-4 w-4 mr-2" />
-              {t('playground.capture.useVideo')}
+              {t("playground.capture.useVideo")}
             </Button>
           </>
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/shared/ApiKeyRequired.tsx b/src/components/shared/ApiKeyRequired.tsx
index 463cd1fd..d5773814 100644
--- a/src/components/shared/ApiKeyRequired.tsx
+++ b/src/components/shared/ApiKeyRequired.tsx
@@ -1,33 +1,39 @@
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { KeyRound } from 'lucide-react'
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { KeyRound } from "lucide-react";
 
 interface ApiKeyRequiredProps {
-  description?: string
+  description?: string;
 }
 
-export function ApiKeyRequired({
-  description
-}: ApiKeyRequiredProps) {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
+export function ApiKeyRequired({ description }: ApiKeyRequiredProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
   return (
     <div className="flex h-full items-center justify-center">
       <Card className="max-w-md">
         <CardHeader className="text-center">
           <KeyRound className="mx-auto h-12 w-12 text-muted-foreground" />
-          <CardTitle>{t('apiKeyRequired.title')}</CardTitle>
-          <CardDescription>{description || t('apiKeyRequired.defaultDesc')}</CardDescription>
+          <CardTitle>{t("apiKeyRequired.title")}</CardTitle>
+          <CardDescription>
+            {description || t("apiKeyRequired.defaultDesc")}
+          </CardDescription>
         </CardHeader>
         <CardContent className="text-center">
-          <Button onClick={() => navigate('/settings')}>
-            {t('apiKeyRequired.goToSettings')}
+          <Button onClick={() => navigate("/settings")}>
+            {t("apiKeyRequired.goToSettings")}
           </Button>
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/src/components/shared/AudioPlayer.tsx b/src/components/shared/AudioPlayer.tsx
index b8dfa155..7015af1f 100644
--- a/src/components/shared/AudioPlayer.tsx
+++ b/src/components/shared/AudioPlayer.tsx
@@ -1,301 +1,325 @@
-import { useState, useRef, useEffect, useCallback } from 'react'
-import { Button } from '@/components/ui/button'
-import { Slider } from '@/components/ui/slider'
-import { Play, Pause, Volume2, VolumeX } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import { Play, Pause, Volume2, VolumeX } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface AudioPlayerProps {
-  src: string
-  compact?: boolean
-  className?: string
+  src: string;
+  compact?: boolean;
+  className?: string;
 }
 
-export function AudioPlayer({ src, compact = false, className }: AudioPlayerProps) {
-  const audioRef = useRef<HTMLAudioElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const animationRef = useRef<number>(0)
-  const analyserRef = useRef<AnalyserNode | null>(null)
-  const audioContextRef = useRef<AudioContext | null>(null)
-  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null)
-
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(0)
-  const [volume, setVolume] = useState(1)
-  const [isMuted, setIsMuted] = useState(false)
-  const [waveformData, setWaveformData] = useState<number[]>([])
+export function AudioPlayer({
+  src,
+  compact = false,
+  className,
+}: AudioPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animationRef = useRef<number>(0);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [isMuted, setIsMuted] = useState(false);
+  const [waveformData, setWaveformData] = useState<number[]>([]);
 
   // Load waveform data from audio file
   useEffect(() => {
     const loadWaveform = async () => {
       try {
-        const response = await fetch(src)
-        const arrayBuffer = await response.arrayBuffer()
-        const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
-        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
+        const response = await fetch(src);
+        const arrayBuffer = await response.arrayBuffer();
+        const audioContext = new (
+          window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext })
+            .webkitAudioContext
+        )();
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
 
         // Get audio data from first channel
-        const rawData = audioBuffer.getChannelData(0)
-        const samples = 100 // Number of bars to show
-        const blockSize = Math.floor(rawData.length / samples)
-        const filteredData: number[] = []
+        const rawData = audioBuffer.getChannelData(0);
+        const samples = 100; // Number of bars to show
+        const blockSize = Math.floor(rawData.length / samples);
+        const filteredData: number[] = [];
 
         for (let i = 0; i < samples; i++) {
-          let sum = 0
+          let sum = 0;
           for (let j = 0; j < blockSize; j++) {
-            sum += Math.abs(rawData[i * blockSize + j])
+            sum += Math.abs(rawData[i * blockSize + j]);
           }
-          filteredData.push(sum / blockSize)
+          filteredData.push(sum / blockSize);
         }
 
         // Normalize
-        const maxVal = Math.max(...filteredData)
-        const normalized = filteredData.map(val => val / maxVal)
-        setWaveformData(normalized)
+        const maxVal = Math.max(...filteredData);
+        const normalized = filteredData.map((val) => val / maxVal);
+        setWaveformData(normalized);
 
-        await audioContext.close()
+        await audioContext.close();
       } catch (err) {
-        console.error('Failed to load waveform:', err)
+        console.error("Failed to load waveform:", err);
         // Generate fallback waveform
-        const fallback = Array.from({ length: 100 }, (_, i) =>
-          0.3 + Math.sin(i * 0.2) * 0.3 + Math.random() * 0.2
-        )
-        setWaveformData(fallback)
+        const fallback = Array.from(
+          { length: 100 },
+          (_, i) => 0.3 + Math.sin(i * 0.2) * 0.3 + Math.random() * 0.2,
+        );
+        setWaveformData(fallback);
       }
-    }
+    };
 
-    loadWaveform()
-  }, [src])
+    loadWaveform();
+  }, [src]);
 
   // Draw static waveform
   const drawStaticWaveform = useCallback(() => {
-    const canvas = canvasRef.current
-    if (!canvas || waveformData.length === 0) return
+    const canvas = canvasRef.current;
+    if (!canvas || waveformData.length === 0) return;
 
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
-    const dpr = window.devicePixelRatio || 1
-    const rect = canvas.getBoundingClientRect()
-    canvas.width = rect.width * dpr
-    canvas.height = rect.height * dpr
-    ctx.scale(dpr, dpr)
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
 
-    const width = rect.width
-    const height = rect.height
-    const barWidth = width / waveformData.length
-    const gap = 1
+    const width = rect.width;
+    const height = rect.height;
+    const barWidth = width / waveformData.length;
+    const gap = 1;
 
-    ctx.clearRect(0, 0, width, height)
+    ctx.clearRect(0, 0, width, height);
 
     // Get CSS color from theme
-    const computedStyle = getComputedStyle(canvas)
-    const primaryColor = computedStyle.getPropertyValue('--primary').trim() || '221.2 83.2% 53.3%'
+    const computedStyle = getComputedStyle(canvas);
+    const primaryColor =
+      computedStyle.getPropertyValue("--primary").trim() || "221.2 83.2% 53.3%";
 
     waveformData.forEach((value, index) => {
-      const barHeight = value * height * 0.85
-      const x = index * barWidth
-      const y = (height - barHeight) / 2
+      const barHeight = value * height * 0.85;
+      const x = index * barWidth;
+      const y = (height - barHeight) / 2;
 
-      ctx.fillStyle = `hsl(${primaryColor} / 0.4)`
-      ctx.fillRect(x + gap / 2, y, barWidth - gap, barHeight)
-    })
-  }, [waveformData])
+      ctx.fillStyle = `hsl(${primaryColor} / 0.4)`;
+      ctx.fillRect(x + gap / 2, y, barWidth - gap, barHeight);
+    });
+  }, [waveformData]);
 
   // Draw waveform when data is loaded or when paused
   useEffect(() => {
     if (!isPlaying && waveformData.length > 0) {
-      drawStaticWaveform()
+      drawStaticWaveform();
     }
-  }, [isPlaying, waveformData, drawStaticWaveform])
+  }, [isPlaying, waveformData, drawStaticWaveform]);
 
   // Initialize audio context and analyser
   const initAudioContext = useCallback(() => {
-    if (audioContextRef.current || !audioRef.current) return
-
-    const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
-    const analyser = audioContext.createAnalyser()
-    analyser.fftSize = 256
-    analyser.smoothingTimeConstant = 0.8
-
-    const source = audioContext.createMediaElementSource(audioRef.current)
-    source.connect(analyser)
-    analyser.connect(audioContext.destination)
-
-    audioContextRef.current = audioContext
-    analyserRef.current = analyser
-    sourceRef.current = source
-  }, [])
+    if (audioContextRef.current || !audioRef.current) return;
+
+    const audioContext = new (
+      window.AudioContext ||
+      (window as unknown as { webkitAudioContext: typeof AudioContext })
+        .webkitAudioContext
+    )();
+    const analyser = audioContext.createAnalyser();
+    analyser.fftSize = 256;
+    analyser.smoothingTimeConstant = 0.8;
+
+    const source = audioContext.createMediaElementSource(audioRef.current);
+    source.connect(analyser);
+    analyser.connect(audioContext.destination);
+
+    audioContextRef.current = audioContext;
+    analyserRef.current = analyser;
+    sourceRef.current = source;
+  }, []);
 
   // Draw animated waveform
   const drawAnimatedWaveform = useCallback(() => {
-    const canvas = canvasRef.current
-    const analyser = analyserRef.current
-    if (!canvas || !analyser) return
+    const canvas = canvasRef.current;
+    const analyser = analyserRef.current;
+    if (!canvas || !analyser) return;
 
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
 
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Uint8Array(bufferLength)
-    analyser.getByteFrequencyData(dataArray)
+    const bufferLength = analyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    analyser.getByteFrequencyData(dataArray);
 
-    const dpr = window.devicePixelRatio || 1
-    const rect = canvas.getBoundingClientRect()
-    const width = rect.width
-    const height = rect.height
-    const barWidth = width / bufferLength * 2.5
+    const dpr = window.devicePixelRatio || 1;
+    const rect = canvas.getBoundingClientRect();
+    const width = rect.width;
+    const height = rect.height;
+    const barWidth = (width / bufferLength) * 2.5;
 
-    ctx.clearRect(0, 0, width * dpr, height * dpr)
-    ctx.save()
-    ctx.scale(dpr, dpr)
+    ctx.clearRect(0, 0, width * dpr, height * dpr);
+    ctx.save();
+    ctx.scale(dpr, dpr);
 
     // Get CSS color from theme
-    const computedStyle = getComputedStyle(canvas)
-    const primaryColor = computedStyle.getPropertyValue('--primary').trim() || '221.2 83.2% 53.3%'
+    const computedStyle = getComputedStyle(canvas);
+    const primaryColor =
+      computedStyle.getPropertyValue("--primary").trim() || "221.2 83.2% 53.3%";
 
-    let x = 0
+    let x = 0;
     for (let i = 0; i < bufferLength; i++) {
-      const barHeight = (dataArray[i] / 255) * height * 0.9
+      const barHeight = (dataArray[i] / 255) * height * 0.9;
 
-      ctx.fillStyle = `hsl(${primaryColor})`
-      ctx.fillRect(x, height - barHeight, barWidth - 1, barHeight)
+      ctx.fillStyle = `hsl(${primaryColor})`;
+      ctx.fillRect(x, height - barHeight, barWidth - 1, barHeight);
 
-      x += barWidth
+      x += barWidth;
     }
 
-    ctx.restore()
+    ctx.restore();
 
     if (isPlaying) {
-      animationRef.current = requestAnimationFrame(drawAnimatedWaveform)
+      animationRef.current = requestAnimationFrame(drawAnimatedWaveform);
     }
-  }, [isPlaying])
+  }, [isPlaying]);
 
   useEffect(() => {
-    const audio = audioRef.current
-    if (!audio) return
+    const audio = audioRef.current;
+    if (!audio) return;
 
-    const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
     const handleLoadedMetadata = () => {
-      setDuration(audio.duration)
-    }
+      setDuration(audio.duration);
+    };
     const handleEnded = () => {
-      setIsPlaying(false)
-      cancelAnimationFrame(animationRef.current)
-      drawStaticWaveform()
-    }
+      setIsPlaying(false);
+      cancelAnimationFrame(animationRef.current);
+      drawStaticWaveform();
+    };
     const handlePlay = () => {
-      initAudioContext()
-      setIsPlaying(true)
-    }
+      initAudioContext();
+      setIsPlaying(true);
+    };
     const handlePause = () => {
-      setIsPlaying(false)
-      cancelAnimationFrame(animationRef.current)
-      drawStaticWaveform()
-    }
+      setIsPlaying(false);
+      cancelAnimationFrame(animationRef.current);
+      drawStaticWaveform();
+    };
 
-    audio.addEventListener('timeupdate', handleTimeUpdate)
-    audio.addEventListener('loadedmetadata', handleLoadedMetadata)
-    audio.addEventListener('ended', handleEnded)
-    audio.addEventListener('play', handlePlay)
-    audio.addEventListener('pause', handlePause)
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("loadedmetadata", handleLoadedMetadata);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
 
     return () => {
-      audio.removeEventListener('timeupdate', handleTimeUpdate)
-      audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
-      audio.removeEventListener('ended', handleEnded)
-      audio.removeEventListener('play', handlePlay)
-      audio.removeEventListener('pause', handlePause)
-      cancelAnimationFrame(animationRef.current)
-    }
-  }, [initAudioContext, drawStaticWaveform])
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      cancelAnimationFrame(animationRef.current);
+    };
+  }, [initAudioContext, drawStaticWaveform]);
 
   // Start/stop animation when playing state changes
   useEffect(() => {
     if (isPlaying && analyserRef.current) {
-      drawAnimatedWaveform()
+      drawAnimatedWaveform();
     } else {
-      cancelAnimationFrame(animationRef.current)
+      cancelAnimationFrame(animationRef.current);
     }
-  }, [isPlaying, drawAnimatedWaveform])
+  }, [isPlaying, drawAnimatedWaveform]);
 
   // Handle resize
   useEffect(() => {
     const handleResize = () => {
       if (!isPlaying) {
-        drawStaticWaveform()
+        drawStaticWaveform();
       }
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [isPlaying, drawStaticWaveform])
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [isPlaying, drawStaticWaveform]);
 
   const togglePlay = () => {
-    const audio = audioRef.current
-    if (!audio) return
+    const audio = audioRef.current;
+    if (!audio) return;
 
     if (isPlaying) {
-      audio.pause()
+      audio.pause();
     } else {
-      audio.play()
+      audio.play();
     }
-  }
+  };
 
   const handleSeek = (value: number[]) => {
-    const audio = audioRef.current
-    if (!audio) return
+    const audio = audioRef.current;
+    if (!audio) return;
 
-    audio.currentTime = value[0]
-    setCurrentTime(value[0])
-  }
+    audio.currentTime = value[0];
+    setCurrentTime(value[0]);
+  };
 
   const handleVolumeChange = (value: number[]) => {
-    const audio = audioRef.current
-    if (!audio) return
+    const audio = audioRef.current;
+    if (!audio) return;
 
-    const newVolume = value[0]
-    audio.volume = newVolume
-    setVolume(newVolume)
-    setIsMuted(newVolume === 0)
-  }
+    const newVolume = value[0];
+    audio.volume = newVolume;
+    setVolume(newVolume);
+    setIsMuted(newVolume === 0);
+  };
 
   const toggleMute = () => {
-    const audio = audioRef.current
-    if (!audio) return
+    const audio = audioRef.current;
+    if (!audio) return;
 
     if (isMuted) {
-      audio.volume = volume || 1
-      setIsMuted(false)
+      audio.volume = volume || 1;
+      setIsMuted(false);
     } else {
-      audio.volume = 0
-      setIsMuted(true)
+      audio.volume = 0;
+      setIsMuted(true);
     }
-  }
+  };
 
   const formatTime = (time: number) => {
-    if (!isFinite(time)) return '0:00'
-    const minutes = Math.floor(time / 60)
-    const seconds = Math.floor(time % 60)
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`
-  }
+    if (!isFinite(time)) return "0:00";
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  };
 
   if (compact) {
     return (
       <div className={cn("flex items-center gap-2 w-full", className)}>
-        <audio ref={audioRef} src={src} preload="metadata" crossOrigin="anonymous" />
+        <audio
+          ref={audioRef}
+          src={src}
+          preload="metadata"
+          crossOrigin="anonymous"
+        />
         <Button
           size="icon"
           variant="ghost"
           className="h-8 w-8 shrink-0"
           onClick={togglePlay}
         >
-          {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+          {isPlaying ? (
+            <Pause className="h-4 w-4" />
+          ) : (
+            <Play className="h-4 w-4" />
+          )}
         </Button>
         <div className="flex-1 relative h-8">
           <canvas
             ref={canvasRef}
             className="absolute inset-0 w-full h-full opacity-50"
-            style={{ width: '100%', height: '100%' }}
+            style={{ width: "100%", height: "100%" }}
           />
           <Slider
             value={[currentTime]}
@@ -309,22 +333,29 @@ export function AudioPlayer({ src, compact = false, className }: AudioPlayerProp
           {formatTime(currentTime)}
         </span>
       </div>
-    )
+    );
   }
 
   return (
-    <div className={cn(
-      "flex flex-col items-center justify-center gap-4 p-6 w-full max-w-lg mx-auto",
-      className
-    )}>
-      <audio ref={audioRef} src={src} preload="metadata" crossOrigin="anonymous" />
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-4 p-6 w-full max-w-lg mx-auto",
+        className,
+      )}
+    >
+      <audio
+        ref={audioRef}
+        src={src}
+        preload="metadata"
+        crossOrigin="anonymous"
+      />
 
       {/* Waveform visualization */}
       <div className="w-full h-24 rounded-lg bg-muted/50 overflow-hidden">
         <canvas
           ref={canvasRef}
           className="w-full h-full"
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%" }}
         />
       </div>
 
@@ -382,5 +413,5 @@ export function AudioPlayer({ src, compact = false, className }: AudioPlayerProp
         />
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/shared/LogConsole.tsx b/src/components/shared/LogConsole.tsx
index 601aee37..fd8d279f 100644
--- a/src/components/shared/LogConsole.tsx
+++ b/src/components/shared/LogConsole.tsx
@@ -1,72 +1,73 @@
 // LogConsole Component - Real-time SD process logs viewer
-import { useState, useEffect, useRef } from 'react'
-import { ChevronDown, ChevronUp, Trash2, Terminal } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { cn } from '@/lib/utils'
-import { useSDModelsStore } from '@/stores/sdModelsStore'
+import { useState, useEffect, useRef } from "react";
+import { ChevronDown, ChevronUp, Trash2, Terminal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { useSDModelsStore } from "@/stores/sdModelsStore";
 
 interface LogConsoleProps {
-  isGenerating: boolean
+  isGenerating: boolean;
 }
 
 export function LogConsole({ isGenerating }: LogConsoleProps) {
-  const { sdLogs, addSdLog, clearSdLogs } = useSDModelsStore()
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [autoScroll, setAutoScroll] = useState(true)
-  const logsEndRef = useRef<HTMLDivElement>(null)
-  const logsContainerRef = useRef<HTMLDivElement>(null)
+  const { sdLogs, addSdLog, clearSdLogs } = useSDModelsStore();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
 
   // Listen to SD logs
   useEffect(() => {
     if (!window.electronAPI?.onSdLog || !isGenerating) {
-      return
+      return;
     }
 
     const removeListener = window.electronAPI.onSdLog((data) => {
       addSdLog({
         type: data.type,
         message: data.message,
-        timestamp: new Date()
-      })
-    })
+        timestamp: new Date(),
+      });
+    });
 
     return () => {
-      removeListener()
-    }
-  }, [isGenerating, addSdLog])
+      removeListener();
+    };
+  }, [isGenerating, addSdLog]);
 
   // Auto-scroll to bottom when new logs arrive
   useEffect(() => {
     if (autoScroll && logsContainerRef.current) {
       // Use scrollTop for instant, jank-free scrolling
-      logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight
+      logsContainerRef.current.scrollTop =
+        logsContainerRef.current.scrollHeight;
     }
-  }, [sdLogs, autoScroll])
+  }, [sdLogs, autoScroll]);
 
   // Detect manual scroll and disable auto-scroll
   const handleScroll = () => {
-    if (!logsContainerRef.current) return
+    if (!logsContainerRef.current) return;
 
-    const { scrollTop, scrollHeight, clientHeight } = logsContainerRef.current
-    const isAtBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 10
+    const { scrollTop, scrollHeight, clientHeight } = logsContainerRef.current;
+    const isAtBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 10;
 
-    setAutoScroll(isAtBottom)
-  }
+    setAutoScroll(isAtBottom);
+  };
 
   const formatTimestamp = (date: Date) => {
-    return date.toLocaleTimeString('en-US', {
+    return date.toLocaleTimeString("en-US", {
       hour12: false,
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      fractionalSecondDigits: 3
-    } as Intl.DateTimeFormatOptions)
-  }
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      fractionalSecondDigits: 3,
+    } as Intl.DateTimeFormatOptions);
+  };
 
   // Don't show console if not generating and no logs
   if (!isGenerating && sdLogs.length === 0) {
-    return null
+    return null;
   }
 
   return (
@@ -93,8 +94,8 @@ export function LogConsole({ isGenerating }: LogConsoleProps) {
               variant="ghost"
               size="sm"
               onClick={(e) => {
-                e.stopPropagation()
-                clearSdLogs()
+                e.stopPropagation();
+                clearSdLogs();
               }}
               className="h-6 px-2"
             >
@@ -127,8 +128,8 @@ export function LogConsole({ isGenerating }: LogConsoleProps) {
                 <div
                   key={log.id}
                   className={cn(
-                    'flex gap-2 leading-tight py-0.5',
-                    log.type === 'stderr' && 'text-yellow-400'
+                    "flex gap-2 leading-tight py-0.5",
+                    log.type === "stderr" && "text-yellow-400",
                   )}
                 >
                   <span className="text-gray-500 shrink-0 text-[9px]">
@@ -150,8 +151,8 @@ export function LogConsole({ isGenerating }: LogConsoleProps) {
                 variant="link"
                 size="sm"
                 onClick={() => {
-                  setAutoScroll(true)
-                  logsEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+                  setAutoScroll(true);
+                  logsEndRef.current?.scrollIntoView({ behavior: "smooth" });
                 }}
                 className="h-auto p-0 text-[10px]"
               >
@@ -162,5 +163,5 @@ export function LogConsole({ isGenerating }: LogConsoleProps) {
         </CardContent>
       )}
     </Card>
-  )
+  );
 }
diff --git a/src/components/shared/ProcessingProgress.tsx b/src/components/shared/ProcessingProgress.tsx
index 5b6be5ab..596a1d4a 100644
--- a/src/components/shared/ProcessingProgress.tsx
+++ b/src/components/shared/ProcessingProgress.tsx
@@ -1,45 +1,45 @@
-import { useTranslation } from 'react-i18next'
-import { Loader2, Check, Circle, AlertCircle } from 'lucide-react'
-import { Progress } from '@/components/ui/progress'
-import { cn } from '@/lib/utils'
-import type { MultiPhaseProgress, ProcessingPhase } from '@/types/progress'
-import { formatBytes } from '@/types/progress'
+import { useTranslation } from "react-i18next";
+import { Loader2, Check, Circle, AlertCircle } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+import type { MultiPhaseProgress, ProcessingPhase } from "@/types/progress";
+import { formatBytes } from "@/types/progress";
 
 interface ProcessingProgressProps {
-  progress: MultiPhaseProgress
-  showPhases?: boolean
-  showOverall?: boolean
-  showEta?: boolean
-  className?: string
+  progress: MultiPhaseProgress;
+  showPhases?: boolean;
+  showOverall?: boolean;
+  showEta?: boolean;
+  className?: string;
   /** Maximum number of phases to show dots for (default: 4). Set to 0 to always hide. */
-  maxPhaseDots?: number
+  maxPhaseDots?: number;
 }
 
 function PhaseIndicator({ phase }: { phase: ProcessingPhase }) {
-  const { status } = phase
+  const { status } = phase;
 
-  if (status === 'completed') {
+  if (status === "completed") {
     return (
       <div className="flex h-4 w-4 items-center justify-center rounded-full bg-primary">
         <Check className="h-2.5 w-2.5 text-primary-foreground" />
       </div>
-    )
+    );
   }
 
-  if (status === 'active') {
+  if (status === "active") {
     return (
       <div className="flex h-4 w-4 items-center justify-center rounded-full border-2 border-primary bg-primary/20">
         <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary" />
       </div>
-    )
+    );
   }
 
-  if (status === 'error') {
+  if (status === "error") {
     return (
       <div className="flex h-4 w-4 items-center justify-center rounded-full bg-destructive">
         <AlertCircle className="h-2.5 w-2.5 text-destructive-foreground" />
       </div>
-    )
+    );
   }
 
   // pending
@@ -47,31 +47,31 @@ function PhaseIndicator({ phase }: { phase: ProcessingPhase }) {
     <div className="flex h-4 w-4 items-center justify-center">
       <Circle className="h-2.5 w-2.5 text-muted-foreground/50" />
     </div>
-  )
+  );
 }
 
-function formatDetail(detail: ProcessingPhase['detail']): string | null {
+function formatDetail(detail: ProcessingPhase["detail"]): string | null {
   if (!detail || detail.current === undefined || detail.total === undefined) {
-    return null
+    return null;
   }
 
-  if (detail.unit === 'bytes') {
-    return `${formatBytes(detail.current)} / ${formatBytes(detail.total)}`
+  if (detail.unit === "bytes") {
+    return `${formatBytes(detail.current)} / ${formatBytes(detail.total)}`;
   }
 
-  if (detail.unit === 'frames') {
-    return `${detail.current} / ${detail.total}`
+  if (detail.unit === "frames") {
+    return `${detail.current} / ${detail.total}`;
   }
 
-  if (detail.unit === 'seconds') {
-    return `${detail.current}s / ${detail.total}s`
+  if (detail.unit === "seconds") {
+    return `${detail.current}s / ${detail.total}s`;
   }
 
-  if (detail.unit === 'items') {
-    return `${detail.current} / ${detail.total}`
+  if (detail.unit === "items") {
+    return `${detail.current} / ${detail.total}`;
   }
 
-  return null
+  return null;
 }
 
 export function ProcessingProgress({
@@ -80,30 +80,36 @@ export function ProcessingProgress({
   showOverall = true,
   showEta = true,
   className,
-  maxPhaseDots = 4
+  maxPhaseDots = 4,
 }: ProcessingProgressProps) {
-  const { t } = useTranslation()
-  const { phases, currentPhaseIndex, overallProgress, eta, isActive } = progress
+  const { t } = useTranslation();
+  const { phases, currentPhaseIndex, overallProgress, eta, isActive } =
+    progress;
 
-  const currentPhase = phases[currentPhaseIndex]
-  const isComplete = phases.length > 0 && phases.every((phase) => phase.status === 'completed')
+  const currentPhase = phases[currentPhaseIndex];
+  const isComplete =
+    phases.length > 0 && phases.every((phase) => phase.status === "completed");
   const currentLabel = isComplete
-    ? t('common.done')
+    ? t("common.done")
     : currentPhase
       ? t(currentPhase.labelKey)
-      : ''
+      : "";
 
   // Hide phase dots if too many phases
-  const shouldShowPhaseDots = showPhases && phases.length > 1 && phases.length <= maxPhaseDots
+  const shouldShowPhaseDots =
+    showPhases && phases.length > 1 && phases.length <= maxPhaseDots;
 
   if (!isActive && overallProgress === 0) {
-    return null
+    return null;
   }
 
-  const progressValue = showOverall && phases.length > 1 ? overallProgress : currentPhase?.progress || 0
+  const progressValue =
+    showOverall && phases.length > 1
+      ? overallProgress
+      : currentPhase?.progress || 0;
 
   return (
-    <div className={cn('space-y-1.5', className)}>
+    <div className={cn("space-y-1.5", className)}>
       {/* Top row: phase dots + label + ETA + percentage */}
       <div className="flex items-center gap-2">
         {/* Phase indicators - only show if not too many */}
@@ -115,10 +121,10 @@ export function ProcessingProgress({
                 {index < phases.length - 1 && (
                   <div
                     className={cn(
-                      'mx-0.5 h-0.5 w-3',
-                      phases[index + 1].status !== 'pending'
-                        ? 'bg-primary'
-                        : 'bg-muted-foreground/30'
+                      "mx-0.5 h-0.5 w-3",
+                      phases[index + 1].status !== "pending"
+                        ? "bg-primary"
+                        : "bg-muted-foreground/30",
                     )}
                   />
                 )}
@@ -130,18 +136,20 @@ export function ProcessingProgress({
         {/* Current phase label with spinner */}
         {currentLabel && (
           <span className="flex items-center gap-1.5 text-xs text-muted-foreground min-w-0">
-            {isActive && currentPhase?.status === 'active' && (
+            {isActive && currentPhase?.status === "active" && (
               <Loader2 className="h-3 w-3 animate-spin shrink-0" />
             )}
-            {currentPhase?.status === 'completed' && (
+            {currentPhase?.status === "completed" && (
               <Check className="h-3 w-3 text-primary shrink-0" />
             )}
             <span className="truncate">{currentLabel}</span>
-            {!isComplete && currentPhase?.detail && formatDetail(currentPhase.detail) && (
-              <span className="text-muted-foreground/60 shrink-0">
-                ({formatDetail(currentPhase.detail)})
-              </span>
-            )}
+            {!isComplete &&
+              currentPhase?.detail &&
+              formatDetail(currentPhase.detail) && (
+                <span className="text-muted-foreground/60 shrink-0">
+                  ({formatDetail(currentPhase.detail)})
+                </span>
+              )}
           </span>
         )}
 
@@ -160,10 +168,7 @@ export function ProcessingProgress({
       </div>
 
       {/* Progress bar - full width on its own row */}
-      <Progress
-        value={progressValue}
-        className="h-1.5"
-      />
+      <Progress value={progressValue} className="h-1.5" />
     </div>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateBrowser.tsx b/src/components/templates/TemplateBrowser.tsx
index f76ca5fe..ce1df366 100644
--- a/src/components/templates/TemplateBrowser.tsx
+++ b/src/components/templates/TemplateBrowser.tsx
@@ -2,18 +2,29 @@
  * TemplateBrowser — reusable template browsing UI with left sidebar filters + gallery grid.
  * Used by both TemplatesPage (full page) and WorkflowTemplateDialog (modal).
  */
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { TemplateGallery } from './TemplateGallery'
-import { Folder, Globe, User, Star, Grid3x3, Image, Video, Music, Sparkle } from 'lucide-react'
-import type { Template } from '@/types/template'
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TemplateGallery } from "./TemplateGallery";
+import {
+  Folder,
+  Globe,
+  User,
+  Star,
+  Grid3x3,
+  Image,
+  Video,
+  Music,
+  Sparkle,
+} from "lucide-react";
+import type { Template } from "@/types/template";
 
 interface TemplateBrowserProps {
-  templateType: 'playground' | 'workflow'
-  onUseTemplate: (template: Template) => void
-  onEditTemplate?: (template: Template) => void
-  onDeleteTemplate?: (template: Template) => void
-  onExportTemplate?: (template: Template) => void
+  templateType: "playground" | "workflow";
+  onUseTemplate: (template: Template) => void;
+  onEditTemplate?: (template: Template) => void;
+  onDeleteTemplate?: (template: Template) => void;
+  onExportTemplate?: (template: Template) => void;
+  externalSearch?: string; // search from top bar
 }
 
 export function TemplateBrowser({
@@ -22,10 +33,15 @@ export function TemplateBrowser({
   onEditTemplate,
   onDeleteTemplate,
   onExportTemplate,
+  externalSearch,
 }: TemplateBrowserProps) {
-  const { t } = useTranslation()
-  const [sourceFilter, setSourceFilter] = useState<'public' | 'custom' | 'favorites' | undefined>(undefined)
-  const [categoryFilter, setCategoryFilter] = useState<string | undefined>(undefined)
+  const { t } = useTranslation();
+  const [sourceFilter, setSourceFilter] = useState<
+    "public" | "custom" | "favorites" | undefined
+  >(undefined);
+  const [categoryFilter, setCategoryFilter] = useState<string | undefined>(
+    undefined,
+  );
 
   return (
     <div className="flex flex-1 overflow-hidden">
@@ -35,21 +51,39 @@ export function TemplateBrowser({
           {/* Source Filter */}
           <div className="space-y-0.5">
             <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-              {t('templates.source')}
+              {t("templates.source")}
             </h3>
-            {([
-              { key: undefined, icon: <Folder className="h-4 w-4" />, label: t('templates.allSources') },
-              { key: 'public' as const, icon: <Globe className="h-4 w-4" />, label: t('templates.public') },
-              { key: 'custom' as const, icon: <User className="h-4 w-4" />, label: t('templates.myTemplates') },
-              { key: 'favorites' as const, icon: <Star className="h-4 w-4" />, label: t('templates.favorites') },
-            ] as const).map(opt => (
+            {(
+              [
+                {
+                  key: undefined,
+                  icon: <Folder className="h-4 w-4" />,
+                  label: t("templates.allSources"),
+                },
+                {
+                  key: "public" as const,
+                  icon: <Globe className="h-4 w-4" />,
+                  label: t("templates.public"),
+                },
+                {
+                  key: "custom" as const,
+                  icon: <User className="h-4 w-4" />,
+                  label: t("templates.myTemplates"),
+                },
+                {
+                  key: "favorites" as const,
+                  icon: <Star className="h-4 w-4" />,
+                  label: t("templates.favorites"),
+                },
+              ] as const
+            ).map((opt) => (
               <button
-                key={opt.key ?? 'all'}
+                key={opt.key ?? "all"}
                 onClick={() => setSourceFilter(opt.key)}
                 className={`w-full flex items-center gap-3 ml-1 px-3 py-1.5 text-sm rounded-lg transition-colors ${
                   sourceFilter === opt.key
-                    ? 'bg-accent text-foreground'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+                    ? "bg-accent text-foreground"
+                    : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
                 }`}
               >
                 {opt.icon}
@@ -59,25 +93,47 @@ export function TemplateBrowser({
           </div>
 
           {/* Category Filter (only for workflow) */}
-          {templateType === 'workflow' && (
+          {templateType === "workflow" && (
             <div className="space-y-0.5">
               <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                {t('templates.category')}
+                {t("templates.category")}
               </h3>
-              {([
-                { key: undefined, icon: <Grid3x3 className="h-4 w-4" />, label: t('templates.allCategories') },
-                { key: 'image-processing', icon: <Image className="h-4 w-4" />, label: t('templates.imageProcessing') },
-                { key: 'video-editing', icon: <Video className="h-4 w-4" />, label: t('templates.videoEditing') },
-                { key: 'audio-conversion', icon: <Music className="h-4 w-4" />, label: t('templates.audioConversion') },
-                { key: 'ai-generation', icon: <Sparkle className="h-4 w-4" />, label: t('templates.aiGeneration') },
-              ] as const).map(opt => (
+              {(
+                [
+                  {
+                    key: undefined,
+                    icon: <Grid3x3 className="h-4 w-4" />,
+                    label: t("templates.allCategories"),
+                  },
+                  {
+                    key: "image-processing",
+                    icon: <Image className="h-4 w-4" />,
+                    label: t("templates.imageProcessing"),
+                  },
+                  {
+                    key: "video-editing",
+                    icon: <Video className="h-4 w-4" />,
+                    label: t("templates.videoEditing"),
+                  },
+                  {
+                    key: "audio-conversion",
+                    icon: <Music className="h-4 w-4" />,
+                    label: t("templates.audioConversion"),
+                  },
+                  {
+                    key: "ai-generation",
+                    icon: <Sparkle className="h-4 w-4" />,
+                    label: t("templates.aiGeneration"),
+                  },
+                ] as const
+              ).map((opt) => (
                 <button
-                  key={opt.key ?? 'all'}
+                  key={opt.key ?? "all"}
                   onClick={() => setCategoryFilter(opt.key)}
                   className={`w-full flex items-center gap-3 ml-1 px-3 py-1.5 text-sm rounded-lg transition-colors ${
                     categoryFilter === opt.key
-                      ? 'bg-accent text-foreground'
-                      : 'text-muted-foreground hover:text-foreground hover:bg-accent/50'
+                      ? "bg-accent text-foreground"
+                      : "text-muted-foreground hover:text-foreground hover:bg-accent/50"
                   }`}
                 >
                   {opt.icon}
@@ -95,18 +151,19 @@ export function TemplateBrowser({
           <TemplateGallery
             initialFilter={{
               templateType,
-              type: sourceFilter === 'favorites' ? undefined : sourceFilter,
+              type: sourceFilter === "favorites" ? undefined : sourceFilter,
               category: categoryFilter,
-              isFavorite: sourceFilter === 'favorites' ? true : undefined,
+              isFavorite: sourceFilter === "favorites" ? true : undefined,
             }}
             onUseTemplate={onUseTemplate}
             onEditTemplate={onEditTemplate}
             onDeleteTemplate={onDeleteTemplate}
             onExportTemplate={onExportTemplate}
             showFilters={false}
+            externalSearch={externalSearch}
           />
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateCard.tsx b/src/components/templates/TemplateCard.tsx
index a4bb74af..407551af 100644
--- a/src/components/templates/TemplateCard.tsx
+++ b/src/components/templates/TemplateCard.tsx
@@ -1,25 +1,35 @@
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Card } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Heart, Play, Pencil, Trash2, Download, MoreVertical, Sparkles, Workflow, BarChart3 } from 'lucide-react'
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Heart,
+  Play,
+  Pencil,
+  Trash2,
+  Download,
+  MoreVertical,
+  Sparkles,
+  Workflow,
+  BarChart3,
+} from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import type { Template } from '@/types/template'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/dropdown-menu";
+import type { Template } from "@/types/template";
+import { cn } from "@/lib/utils";
 
 interface TemplateCardProps {
-  template: Template
-  onUse: (template: Template) => void
-  onEdit?: (template: Template) => void
-  onDelete?: (template: Template) => void
-  onExport?: (template: Template) => void
-  onToggleFavorite: (template: Template) => void
-  compact?: boolean
+  template: Template;
+  onUse: (template: Template) => void;
+  onEdit?: (template: Template) => void;
+  onDelete?: (template: Template) => void;
+  onExport?: (template: Template) => void;
+  onToggleFavorite: (template: Template) => void;
+  compact?: boolean;
 }
 
 export function TemplateCard({
@@ -29,23 +39,28 @@ export function TemplateCard({
   onDelete,
   onExport,
   onToggleFavorite,
-  compact = false
+  compact = false,
 }: TemplateCardProps) {
-  const { t } = useTranslation()
-  const [imageError, setImageError] = useState(false)
-  
-  const isCustom = template.type === 'custom'
-  const isPlayground = template.templateType === 'playground'
-  const isFileTemplate = template.id.startsWith('file-')
+  const { t } = useTranslation();
+  const [imageError, setImageError] = useState(false);
+
+  const isCustom = template.type === "custom";
+  const isPlayground = template.templateType === "playground";
+  const isFileTemplate = template.id.startsWith("file-");
 
   // Resolve i18n name/description for file templates with i18nKey
   const displayName = template.i18nKey
-    ? t(`presetTemplates.${template.i18nKey}.name`, { defaultValue: template.name })
-    : template.name
-  const displayDesc = template.i18nKey && template.description
-    ? t(`presetTemplates.${template.i18nKey}.description`, { defaultValue: template.description })
-    : template.description
-  
+    ? t(`presetTemplates.${template.i18nKey}.name`, {
+        defaultValue: template.name,
+      })
+    : template.name;
+  const displayDesc =
+    template.i18nKey && template.description
+      ? t(`presetTemplates.${template.i18nKey}.description`, {
+          defaultValue: template.description,
+        })
+      : template.description;
+
   if (compact) {
     return (
       <Card className="group relative overflow-hidden hover:shadow-md transition-all duration-200">
@@ -53,70 +68,132 @@ export function TemplateCard({
           {/* Compact thumbnail */}
           <div className="relative w-16 h-16 flex-shrink-0 rounded-md bg-gradient-to-br from-muted/50 to-muted overflow-hidden">
             {template.thumbnail && !imageError ? (
-              <img src={template.thumbnail} alt={displayName} className="w-full h-full object-cover" onError={() => setImageError(true)} />
+              <img
+                src={template.thumbnail}
+                alt={displayName}
+                className="w-full h-full object-cover"
+                onError={() => setImageError(true)}
+              />
             ) : (
               <div className="w-full h-full flex items-center justify-center">
-                {isPlayground ? <Sparkles className="h-6 w-6 text-muted-foreground/50" /> : <Workflow className="h-6 w-6 text-muted-foreground/50" />}
+                {isPlayground ? (
+                  <Sparkles className="h-6 w-6 text-muted-foreground/50" />
+                ) : (
+                  <Workflow className="h-6 w-6 text-muted-foreground/50" />
+                )}
               </div>
             )}
           </div>
           {/* Info */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2">
-              <span className="text-sm font-medium truncate">{displayName}</span>
+              <span className="text-sm font-medium truncate">
+                {displayName}
+              </span>
               <button
-                onClick={(e) => { e.stopPropagation(); onToggleFavorite(template) }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleFavorite(template);
+                }}
                 className={cn(
                   "p-0.5 rounded-full transition-all duration-200 hover:scale-110 active:scale-95",
-                  template.isFavorite ? "text-rose-500" : "text-muted-foreground/50 hover:text-rose-400"
+                  template.isFavorite
+                    ? "text-rose-500"
+                    : "text-muted-foreground/50 hover:text-rose-400",
                 )}
               >
-                <Heart className={cn("h-3.5 w-3.5 transition-all duration-200", template.isFavorite && "fill-current drop-shadow-[0_0_3px_rgba(244,63,94,0.4)]")} />
+                <Heart
+                  className={cn(
+                    "h-3.5 w-3.5 transition-all duration-200",
+                    template.isFavorite &&
+                      "fill-current drop-shadow-[0_0_3px_rgba(244,63,94,0.4)]",
+                  )}
+                />
               </button>
             </div>
-            {displayDesc && <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{displayDesc}</p>}
+            {displayDesc && (
+              <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
+                {displayDesc}
+              </p>
+            )}
             <div className="flex items-center gap-2 text-[11px] text-muted-foreground mt-1">
-              {isPlayground && template.playgroundData && <span className="truncate">{template.playgroundData.modelName}</span>}
-              {!isPlayground && template.workflowData && <span className="flex items-center gap-0.5"><BarChart3 className="h-3 w-3" />{template.workflowData.nodeCount} {t('templates.nodes')}</span>}
+              {isPlayground && template.playgroundData && (
+                <span className="truncate">
+                  {template.playgroundData.modelName}
+                </span>
+              )}
+              {!isPlayground && template.workflowData && (
+                <span className="flex items-center gap-0.5">
+                  <BarChart3 className="h-3 w-3" />
+                  {template.workflowData.nodeCount} {t("templates.nodes")}
+                </span>
+              )}
             </div>
           </div>
           {/* Use button */}
-          <Button size="sm" variant="outline" className="self-center flex-shrink-0 h-7 text-xs" onClick={() => onUse(template)}>
+          <Button
+            size="sm"
+            variant="outline"
+            className="self-center flex-shrink-0 h-7 text-xs"
+            onClick={() => onUse(template)}
+          >
             <Play className="mr-1 h-3 w-3" />
-            {t('templates.use')}
+            {t("templates.use")}
           </Button>
         </div>
       </Card>
-    )
+    );
   }
 
   return (
-    <Card className="group relative overflow-hidden hover:shadow-lg transition-all duration-200 cursor-pointer" onClick={() => onUse(template)}>
+    <Card
+      className="group relative overflow-hidden hover:shadow-lg transition-all duration-200 cursor-pointer"
+      onClick={() => onUse(template)}
+    >
       {/* Favorite Button */}
       <button
         onClick={(e) => {
-          e.stopPropagation()
-          onToggleFavorite(template)
+          e.stopPropagation();
+          onToggleFavorite(template);
         }}
         className={cn(
           "absolute top-2.5 right-2.5 z-10 p-2 rounded-full transition-all duration-200",
           "hover:scale-110 active:scale-95",
           template.isFavorite
             ? "opacity-100 text-rose-500 bg-rose-500/15 backdrop-blur-md hover:bg-rose-500/25"
-            : "opacity-0 group-hover:opacity-100 text-white/80 bg-black/30 backdrop-blur-md hover:text-rose-400 hover:bg-black/40"
+            : "opacity-0 group-hover:opacity-100 text-white/80 bg-black/30 backdrop-blur-md hover:text-rose-400 hover:bg-black/40",
         )}
-        title={template.isFavorite ? t('templates.unfavorite') : t('templates.favorite')}
+        title={
+          template.isFavorite
+            ? t("templates.unfavorite")
+            : t("templates.favorite")
+        }
       >
-        <Heart className={cn("h-4 w-4 transition-all duration-200", template.isFavorite && "fill-current drop-shadow-[0_0_4px_rgba(244,63,94,0.5)]")} />
+        <Heart
+          className={cn(
+            "h-4 w-4 transition-all duration-200",
+            template.isFavorite &&
+              "fill-current drop-shadow-[0_0_4px_rgba(244,63,94,0.5)]",
+          )}
+        />
       </button>
 
       {/* Thumbnail */}
       <div className="relative h-40 bg-gradient-to-br from-muted/50 to-muted overflow-hidden">
         {template.thumbnail && !imageError ? (
-          <img src={template.thumbnail} alt={displayName} className="w-full h-full object-cover" onError={() => setImageError(true)} />
+          <img
+            src={template.thumbnail}
+            alt={displayName}
+            className="w-full h-full object-cover"
+            onError={() => setImageError(true)}
+          />
         ) : (
           <div className="w-full h-full flex items-center justify-center">
-            {isPlayground ? <Sparkles className="h-12 w-12 text-muted-foreground/30" /> : <Workflow className="h-12 w-12 text-muted-foreground/30" />}
+            {isPlayground ? (
+              <Sparkles className="h-12 w-12 text-muted-foreground/30" />
+            ) : (
+              <Workflow className="h-12 w-12 text-muted-foreground/30" />
+            )}
           </div>
         )}
         {/* Type Badge */}
@@ -125,31 +202,53 @@ export function TemplateCard({
       {/* Content */}
       <div className="p-4">
         <div className="flex items-start justify-between gap-2 mb-2">
-          <h3 className="font-semibold text-sm line-clamp-1 flex-1">{displayName}</h3>
+          <h3 className="font-semibold text-sm line-clamp-1 flex-1">
+            {displayName}
+          </h3>
           {(onEdit || onDelete || onExport) && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
-                <Button variant="ghost" size="sm" className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 w-7 p-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
                   <MoreVertical className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 {onEdit && !isFileTemplate && (
-                  <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onEdit(template) }}>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onEdit(template);
+                    }}
+                  >
                     <Pencil className="mr-2 h-4 w-4" />
-                    {t('common.edit')}
+                    {t("common.edit")}
                   </DropdownMenuItem>
                 )}
                 {onExport && (
-                  <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onExport(template) }}>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onExport(template);
+                    }}
+                  >
                     <Download className="mr-2 h-4 w-4" />
-                    {t('templates.export')}
+                    {t("templates.export")}
                   </DropdownMenuItem>
                 )}
                 {onDelete && !isFileTemplate && isCustom && (
-                  <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onDelete(template) }} className="text-destructive">
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDelete(template);
+                    }}
+                    className="text-destructive"
+                  >
                     <Trash2 className="mr-2 h-4 w-4" />
-                    {t('common.delete')}
+                    {t("common.delete")}
                   </DropdownMenuItem>
                 )}
               </DropdownMenuContent>
@@ -158,27 +257,33 @@ export function TemplateCard({
         </div>
 
         {displayDesc && (
-          <p className="text-xs text-muted-foreground line-clamp-2 mb-3">{displayDesc}</p>
+          <p className="text-xs text-muted-foreground line-clamp-2 mb-3">
+            {displayDesc}
+          </p>
         )}
 
         {/* Meta Info */}
         <div className="flex items-center justify-between text-xs text-muted-foreground">
           <div className="flex items-center gap-3">
             {isPlayground && template.playgroundData && (
-              <span className="truncate max-w-[150px]">{template.playgroundData.modelName}</span>
+              <span className="truncate max-w-[150px]">
+                {template.playgroundData.modelName}
+              </span>
             )}
             {!isPlayground && template.workflowData && (
               <span className="flex items-center gap-1">
                 <BarChart3 className="h-3 w-3" />
-                {template.workflowData.nodeCount} {t('templates.nodes')}
+                {template.workflowData.nodeCount} {t("templates.nodes")}
               </span>
             )}
           </div>
           {template.useCount > 0 && (
-            <span>{template.useCount} {t('templates.uses')}</span>
+            <span>
+              {template.useCount} {t("templates.uses")}
+            </span>
           )}
         </div>
       </div>
     </Card>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateDialog.tsx b/src/components/templates/TemplateDialog.tsx
index 1899e390..163de927 100644
--- a/src/components/templates/TemplateDialog.tsx
+++ b/src/components/templates/TemplateDialog.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useState, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import {
   Dialog,
   DialogContent,
@@ -7,33 +7,33 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea } from '@/components/ui/textarea'
-import { Label } from '@/components/ui/label'
-import { Badge } from '@/components/ui/badge'
-import { X, ImagePlus, Trash2 } from 'lucide-react'
-import type { Template } from '@/types/template'
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { X, ImagePlus, Trash2 } from "lucide-react";
+import type { Template } from "@/types/template";
 
 interface TemplateDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  template?: Template | null
-  onSave: (data: TemplateFormData) => void | Promise<void>
-  mode: 'create' | 'edit'
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  template?: Template | null;
+  onSave: (data: TemplateFormData) => void | Promise<void>;
+  mode: "create" | "edit";
   /** Pre-fill name for create mode */
-  defaultName?: string
+  defaultName?: string;
   /** Whether this is a workflow template (shows category field) */
-  isWorkflow?: boolean
+  isWorkflow?: boolean;
 }
 
 export interface TemplateFormData {
-  name: string
-  description: string
-  tags: string[]
-  category?: string
-  thumbnail?: string | null
+  name: string;
+  description: string;
+  tags: string[];
+  category?: string;
+  thumbnail?: string | null;
 }
 
 export function TemplateDialog({
@@ -45,72 +45,72 @@ export function TemplateDialog({
   defaultName,
   isWorkflow,
 }: TemplateDialogProps) {
-  const { t } = useTranslation()
-  const [name, setName] = useState('')
-  const [description, setDescription] = useState('')
-  const [tags, setTags] = useState<string[]>([])
-  const [tagInput, setTagInput] = useState('')
-  const [category, setCategory] = useState('')
-  const [thumbnail, setThumbnail] = useState<string | null>(null)
-  const [isSaving, setIsSaving] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [tags, setTags] = useState<string[]>([]);
+  const [tagInput, setTagInput] = useState("");
+  const [category, setCategory] = useState("");
+  const [thumbnail, setThumbnail] = useState<string | null>(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const showCategoryField = isWorkflow ?? template?.templateType === 'workflow'
+  const showCategoryField = isWorkflow ?? template?.templateType === "workflow";
 
   // Initialize form with template data
   useEffect(() => {
     if (template) {
-      setName(template.name)
-      setDescription(template.description || '')
-      setTags(template.tags || [])
-      setThumbnail(template.thumbnail || null)
+      setName(template.name);
+      setDescription(template.description || "");
+      setTags(template.tags || []);
+      setThumbnail(template.thumbnail || null);
       if (template.workflowData) {
-        setCategory(template.workflowData.category || '')
+        setCategory(template.workflowData.category || "");
       }
     } else {
-      setName(defaultName || '')
-      setDescription('')
-      setTags([])
-      setCategory('')
-      setThumbnail(null)
+      setName(defaultName || "");
+      setDescription("");
+      setTags([]);
+      setCategory("");
+      setThumbnail(null);
     }
-  }, [template, open, defaultName])
+  }, [template, open, defaultName]);
 
   const handleAddTag = () => {
-    const trimmed = tagInput.trim()
+    const trimmed = tagInput.trim();
     if (trimmed && !tags.includes(trimmed)) {
-      setTags([...tags, trimmed])
-      setTagInput('')
+      setTags([...tags, trimmed]);
+      setTagInput("");
     }
-  }
+  };
 
   const handleRemoveTag = (tag: string) => {
-    setTags(tags.filter(t => t !== tag))
-  }
+    setTags(tags.filter((t) => t !== tag));
+  };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      handleAddTag()
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddTag();
     }
-  }
+  };
 
   const handleThumbnailSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
+    const file = e.target.files?.[0];
+    if (!file) return;
     // Convert to base64 data URL
-    const reader = new FileReader()
+    const reader = new FileReader();
     reader.onload = () => {
-      setThumbnail(reader.result as string)
-    }
-    reader.readAsDataURL(file)
-    e.target.value = ''
-  }
+      setThumbnail(reader.result as string);
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  };
 
   const handleSave = async () => {
-    if (!name.trim()) return
+    if (!name.trim()) return;
 
-    setIsSaving(true)
+    setIsSaving(true);
     try {
       await onSave({
         name: name.trim(),
@@ -118,31 +118,33 @@ export function TemplateDialog({
         tags,
         category: category.trim() || undefined,
         thumbnail,
-      })
-      onOpenChange(false)
+      });
+      onOpenChange(false);
     } finally {
-      setIsSaving(false)
+      setIsSaving(false);
     }
-  }
+  };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>
-            {mode === 'create' ? t('templates.createTemplate') : t('templates.editTemplate')}
+            {mode === "create"
+              ? t("templates.createTemplate")
+              : t("templates.editTemplate")}
           </DialogTitle>
           <DialogDescription>
-            {mode === 'create' 
-              ? t('templates.createTemplateDesc') 
-              : t('templates.editTemplateDesc')}
+            {mode === "create"
+              ? t("templates.createTemplateDesc")
+              : t("templates.editTemplateDesc")}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">
           {/* Thumbnail / Cover Image */}
           <div className="space-y-2">
-            <Label>{t('templates.coverImage', 'Cover Image')}</Label>
+            <Label>{t("templates.coverImage", "Cover Image")}</Label>
             <input
               ref={fileInputRef}
               type="file"
@@ -152,7 +154,11 @@ export function TemplateDialog({
             />
             {thumbnail ? (
               <div className="relative group rounded-lg overflow-hidden border border-border">
-                <img src={thumbnail} alt="Cover" className="w-full h-32 object-cover" />
+                <img
+                  src={thumbnail}
+                  alt="Cover"
+                  className="w-full h-32 object-cover"
+                />
                 <button
                   onClick={() => setThumbnail(null)}
                   className="absolute top-2 right-2 p-1.5 rounded-full bg-black/60 text-white opacity-0 group-hover:opacity-100 transition-opacity hover:bg-black/80"
@@ -166,30 +172,34 @@ export function TemplateDialog({
                 className="w-full h-24 rounded-lg border-2 border-dashed border-border hover:border-primary/50 transition-colors flex flex-col items-center justify-center gap-1.5 text-muted-foreground hover:text-foreground"
               >
                 <ImagePlus className="h-5 w-5" />
-                <span className="text-xs">{t('templates.uploadCover', 'Click to upload cover image')}</span>
+                <span className="text-xs">
+                  {t("templates.uploadCover", "Click to upload cover image")}
+                </span>
               </button>
             )}
           </div>
 
           {/* Name */}
           <div className="space-y-2">
-            <Label htmlFor="template-name">{t('templates.templateName')}</Label>
+            <Label htmlFor="template-name">{t("templates.templateName")}</Label>
             <Input
               id="template-name"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              placeholder={t('templates.templateNamePlaceholder')}
+              placeholder={t("templates.templateNamePlaceholder")}
             />
           </div>
 
           {/* Description */}
           <div className="space-y-2">
-            <Label htmlFor="template-description">{t('templates.descriptionLabel', 'Description')}</Label>
+            <Label htmlFor="template-description">
+              {t("templates.descriptionLabel", "Description")}
+            </Label>
             <Textarea
               id="template-description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              placeholder={t('templates.descriptionPlaceholder')}
+              placeholder={t("templates.descriptionPlaceholder")}
               rows={3}
             />
           </div>
@@ -197,26 +207,28 @@ export function TemplateDialog({
           {/* Category (for workflow templates) */}
           {showCategoryField && (
             <div className="space-y-2">
-              <Label htmlFor="template-category">{t('templates.category')}</Label>
+              <Label htmlFor="template-category">
+                {t("templates.category")}
+              </Label>
               <Input
                 id="template-category"
                 value={category}
                 onChange={(e) => setCategory(e.target.value)}
-                placeholder={t('templates.categoryPlaceholder')}
+                placeholder={t("templates.categoryPlaceholder")}
               />
             </div>
           )}
 
           {/* Tags */}
           <div className="space-y-2">
-            <Label htmlFor="template-tags">{t('templates.tags')}</Label>
+            <Label htmlFor="template-tags">{t("templates.tags")}</Label>
             <div className="flex gap-2">
               <Input
                 id="template-tags"
                 value={tagInput}
                 onChange={(e) => setTagInput(e.target.value)}
                 onKeyDown={handleKeyDown}
-                placeholder={t('templates.tagsPlaceholder')}
+                placeholder={t("templates.tagsPlaceholder")}
               />
               <Button
                 type="button"
@@ -224,7 +236,7 @@ export function TemplateDialog({
                 onClick={handleAddTag}
                 disabled={!tagInput.trim()}
               >
-                {t('common.add')}
+                {t("common.add")}
               </Button>
             </div>
             {tags.length > 0 && (
@@ -251,16 +263,13 @@ export function TemplateDialog({
             onClick={() => onOpenChange(false)}
             disabled={isSaving}
           >
-            {t('common.cancel')}
+            {t("common.cancel")}
           </Button>
-          <Button
-            onClick={handleSave}
-            disabled={!name.trim() || isSaving}
-          >
-            {isSaving ? t('common.saving') : t('common.save')}
+          <Button onClick={handleSave} disabled={!name.trim() || isSaving}>
+            {isSaving ? t("common.saving") : t("common.save")}
           </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateDrawer.tsx b/src/components/templates/TemplateDrawer.tsx
index c9305d4b..45b25bf3 100644
--- a/src/components/templates/TemplateDrawer.tsx
+++ b/src/components/templates/TemplateDrawer.tsx
@@ -1,92 +1,145 @@
-import { useEffect, useState, useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@/components/ui/sheet'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Button } from '@/components/ui/button'
-import { TemplateCard } from './TemplateCard'
-import { TemplateSearch } from './TemplateSearch'
-import { Loader2, FolderOpen, ExternalLink, Folder, Globe, User, Star } from 'lucide-react'
-import { useTemplateStore } from '@/stores/templateStore'
-import { cn } from '@/lib/utils'
-import type { Template, TemplateFilter } from '@/types/template'
+import { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { TemplateCard } from "./TemplateCard";
+import { TemplateSearch } from "./TemplateSearch";
+import {
+  Loader2,
+  FolderOpen,
+  ExternalLink,
+  Folder,
+  Globe,
+  User,
+  Star,
+} from "lucide-react";
+import { useTemplateStore } from "@/stores/templateStore";
+import { cn } from "@/lib/utils";
+import type { Template, TemplateFilter } from "@/types/template";
 
 interface TemplateDrawerProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  templateType: 'playground' | 'workflow'
-  onUseTemplate: (template: Template) => void
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  templateType: "playground" | "workflow";
+  onUseTemplate: (template: Template) => void;
 }
 
-type SourceFilter = 'all' | 'public' | 'custom' | 'favorites'
+type SourceFilter = "all" | "public" | "custom" | "favorites";
 
-export function TemplateDrawer({ open, onOpenChange, templateType, onUseTemplate }: TemplateDrawerProps) {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const [searchQuery, setSearchQuery] = useState('')
-  const [sourceFilter, setSourceFilter] = useState<SourceFilter>('all')
-  const [sortBy, setSortBy] = useState<'updatedAt' | 'useCount'>('updatedAt')
+export function TemplateDrawer({
+  open,
+  onOpenChange,
+  templateType,
+  onUseTemplate,
+}: TemplateDrawerProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sourceFilter, setSourceFilter] = useState<SourceFilter>("all");
+  const [sortBy, setSortBy] = useState<"updatedAt" | "useCount">("updatedAt");
 
   // Use a separate store instance for the drawer to avoid interfering with TemplatesPage
-  const [templates, setTemplates] = useState<Template[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const { toggleFavorite, useTemplate: incrementUseCount } = useTemplateStore()
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const { toggleFavorite, useTemplate: incrementUseCount } = useTemplateStore();
 
   const loadTemplates = useCallback(async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       const filter: TemplateFilter = {
         templateType,
         search: searchQuery || undefined,
         sortBy,
-        type: sourceFilter === 'public' ? 'public' : sourceFilter === 'custom' ? 'custom' : undefined,
-        isFavorite: sourceFilter === 'favorites' ? true : undefined,
-      }
-      const result = await (window.workflowAPI?.invoke?.('template:query', filter) as Promise<Template[]>)
-      setTemplates(result ?? [])
+        type:
+          sourceFilter === "public"
+            ? "public"
+            : sourceFilter === "custom"
+              ? "custom"
+              : undefined,
+        isFavorite: sourceFilter === "favorites" ? true : undefined,
+      };
+      const result = await (window.workflowAPI?.invoke?.(
+        "template:query",
+        filter,
+      ) as Promise<Template[]>);
+      setTemplates(result ?? []);
     } catch {
-      setTemplates([])
+      setTemplates([]);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [templateType, searchQuery, sortBy, sourceFilter])
+  }, [templateType, searchQuery, sortBy, sourceFilter]);
 
   // Load templates when drawer opens or filters change
   useEffect(() => {
-    if (open) loadTemplates()
-  }, [open, loadTemplates])
+    if (open) loadTemplates();
+  }, [open, loadTemplates]);
 
   const handleUse = async (template: Template) => {
-    await incrementUseCount(template.id)
-    onUseTemplate(template)
-    onOpenChange(false)
-  }
+    await incrementUseCount(template.id);
+    onUseTemplate(template);
+    onOpenChange(false);
+  };
 
   const handleToggleFavorite = async (template: Template) => {
-    await toggleFavorite(template.id)
+    await toggleFavorite(template.id);
     // Refresh local list
-    setTemplates(prev => prev.map(t => t.id === template.id ? { ...t, isFavorite: !t.isFavorite } : t))
-  }
+    setTemplates((prev) =>
+      prev.map((t) =>
+        t.id === template.id ? { ...t, isFavorite: !t.isFavorite } : t,
+      ),
+    );
+  };
 
   const handleBrowseAll = () => {
-    onOpenChange(false)
-    navigate('/templates')
-  }
-
-  const sourceOptions: { key: SourceFilter; icon: React.ReactNode; label: string }[] = [
-    { key: 'all', icon: <Folder className="h-3 w-3" />, label: t('templates.allSources') },
-    { key: 'public', icon: <Globe className="h-3 w-3" />, label: t('templates.public') },
-    { key: 'custom', icon: <User className="h-3 w-3" />, label: t('templates.myTemplates') },
-    { key: 'favorites', icon: <Star className="h-3 w-3" />, label: t('templates.favorites') },
-  ]
+    onOpenChange(false);
+    navigate("/templates");
+  };
+
+  const sourceOptions: {
+    key: SourceFilter;
+    icon: React.ReactNode;
+    label: string;
+  }[] = [
+    {
+      key: "all",
+      icon: <Folder className="h-3 w-3" />,
+      label: t("templates.allSources"),
+    },
+    {
+      key: "public",
+      icon: <Globe className="h-3 w-3" />,
+      label: t("templates.public"),
+    },
+    {
+      key: "custom",
+      icon: <User className="h-3 w-3" />,
+      label: t("templates.myTemplates"),
+    },
+    {
+      key: "favorites",
+      icon: <Star className="h-3 w-3" />,
+      label: t("templates.favorites"),
+    },
+  ];
 
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent className="flex flex-col p-0">
         {/* Header */}
         <SheetHeader className="px-5 pt-5 pb-3">
-          <SheetTitle>{t('templates.title')}</SheetTitle>
-          <SheetDescription>{t('templates.drawerDesc', 'Browse and apply templates')}</SheetDescription>
+          <SheetTitle>{t("templates.title")}</SheetTitle>
+          <SheetDescription>
+            {t("templates.drawerDesc", "Browse and apply templates")}
+          </SheetDescription>
         </SheetHeader>
 
         {/* Search */}
@@ -96,15 +149,15 @@ export function TemplateDrawer({ open, onOpenChange, templateType, onUseTemplate
 
         {/* Source filter pills */}
         <div className="px-5 pb-2 flex items-center gap-1.5 flex-wrap">
-          {sourceOptions.map(opt => (
+          {sourceOptions.map((opt) => (
             <button
               key={opt.key}
               onClick={() => setSourceFilter(opt.key)}
               className={cn(
-                'flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-full border transition-colors',
+                "flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-full border transition-colors",
                 sourceFilter === opt.key
-                  ? 'bg-primary/10 border-primary/30 text-primary'
-                  : 'border-border text-muted-foreground hover:text-foreground hover:bg-accent'
+                  ? "bg-primary/10 border-primary/30 text-primary"
+                  : "border-border text-muted-foreground hover:text-foreground hover:bg-accent",
               )}
             >
               {opt.icon}
@@ -117,11 +170,17 @@ export function TemplateDrawer({ open, onOpenChange, templateType, onUseTemplate
         <div className="px-5 pb-3">
           <select
             value={sortBy}
-            onChange={e => setSortBy(e.target.value as 'updatedAt' | 'useCount')}
+            onChange={(e) =>
+              setSortBy(e.target.value as "updatedAt" | "useCount")
+            }
             className="w-full px-3 py-1.5 text-xs border rounded-md bg-card hover:bg-accent/50 transition-colors cursor-pointer"
           >
-            <option value="updatedAt">⏰ {t('templates.sortBy')}: {t('templates.newest')}</option>
-            <option value="useCount">🔥 {t('templates.sortBy')}: {t('templates.mostUsed')}</option>
+            <option value="updatedAt">
+              ⏰ {t("templates.sortBy")}: {t("templates.newest")}
+            </option>
+            <option value="useCount">
+              🔥 {t("templates.sortBy")}: {t("templates.mostUsed")}
+            </option>
           </select>
         </div>
 
@@ -136,14 +195,18 @@ export function TemplateDrawer({ open, onOpenChange, templateType, onUseTemplate
           {!isLoading && templates.length === 0 && (
             <div className="flex flex-col items-center justify-center py-16 text-center">
               <FolderOpen className="h-10 w-10 mb-3 text-muted-foreground opacity-50" />
-              <p className="text-sm font-medium mb-1">{t('templates.noTemplates')}</p>
-              <p className="text-xs text-muted-foreground">{t('templates.noResultsDesc')}</p>
+              <p className="text-sm font-medium mb-1">
+                {t("templates.noTemplates")}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                {t("templates.noResultsDesc")}
+              </p>
             </div>
           )}
 
           {!isLoading && templates.length > 0 && (
             <div className="space-y-2 pb-4">
-              {templates.map(template => (
+              {templates.map((template) => (
                 <TemplateCard
                   key={template.id}
                   template={template}
@@ -158,12 +221,17 @@ export function TemplateDrawer({ open, onOpenChange, templateType, onUseTemplate
 
         {/* Footer — browse all link */}
         <div className="border-t px-5 py-3">
-          <Button variant="outline" size="sm" className="w-full" onClick={handleBrowseAll}>
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={handleBrowseAll}
+          >
             <ExternalLink className="mr-2 h-3.5 w-3.5" />
-            {t('templates.browseAll', 'Browse All Templates')}
+            {t("templates.browseAll", "Browse All Templates")}
           </Button>
         </div>
       </SheetContent>
     </Sheet>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateFilters.tsx b/src/components/templates/TemplateFilters.tsx
index 5d457809..3a3fac23 100644
--- a/src/components/templates/TemplateFilters.tsx
+++ b/src/components/templates/TemplateFilters.tsx
@@ -1,29 +1,42 @@
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Checkbox } from '@/components/ui/checkbox'
-import { X, Folder, Globe, User, Grid3x3, Image, Video, Music, Sparkle, Star } from 'lucide-react'
-import type { TemplateFilter } from '@/types/template'
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  X,
+  Folder,
+  Globe,
+  User,
+  Grid3x3,
+  Image,
+  Video,
+  Music,
+  Sparkle,
+  Star,
+} from "lucide-react";
+import type { TemplateFilter } from "@/types/template";
 
 interface TemplateFiltersProps {
-  filter: TemplateFilter
-  onChange: (filter: TemplateFilter) => void
-  onClear: () => void
+  filter: TemplateFilter;
+  onChange: (filter: TemplateFilter) => void;
+  onClear: () => void;
 }
 
-export function TemplateFilters({ filter, onChange, onClear }: TemplateFiltersProps) {
-  const { t } = useTranslation()
+export function TemplateFilters({
+  filter,
+  onChange,
+  onClear,
+}: TemplateFiltersProps) {
+  const { t } = useTranslation();
 
-  const hasActiveFilters = 
-    filter.type || 
-    filter.isFavorite !== undefined || 
-    filter.category
+  const hasActiveFilters =
+    filter.type || filter.isFavorite !== undefined || filter.category;
 
   return (
     <div className="space-y-4">
       {/* Header with Clear */}
       <div className="flex items-center justify-between mb-2">
-        <h3 className="font-semibold">{t('templates.filters')}</h3>
+        <h3 className="font-semibold">{t("templates.filters")}</h3>
         {hasActiveFilters && (
           <Button
             variant="ghost"
@@ -32,7 +45,7 @@ export function TemplateFilters({ filter, onChange, onClear }: TemplateFiltersPr
             className="h-8 px-2 text-xs"
           >
             <X className="h-3 w-3 mr-1" />
-            {t('common.clear')}
+            {t("common.clear")}
           </Button>
         )}
       </div>
@@ -40,45 +53,46 @@ export function TemplateFilters({ filter, onChange, onClear }: TemplateFiltersPr
       {/* Source Filter */}
       <div>
         <select
-          value={filter.type || 'all'}
-          onChange={(e) => onChange({ ...filter, type: e.target.value === 'all' ? undefined : e.target.value as 'public' | 'custom' })}
+          value={filter.type || "all"}
+          onChange={(e) =>
+            onChange({
+              ...filter,
+              type:
+                e.target.value === "all"
+                  ? undefined
+                  : (e.target.value as "public" | "custom"),
+            })
+          }
           className="w-full px-3 py-2 text-sm border rounded-lg bg-card hover:bg-accent/50 transition-colors cursor-pointer"
         >
-          <option value="all">
-            {t('templates.source')}
-          </option>
-          <option value="public">
-            {t('templates.public')}
-          </option>
-          <option value="custom">
-            {t('templates.myTemplates')}
-          </option>
+          <option value="all">{t("templates.source")}</option>
+          <option value="public">{t("templates.public")}</option>
+          <option value="custom">{t("templates.myTemplates")}</option>
         </select>
       </div>
 
       {/* Category Filter (for workflow templates) */}
-      {filter.templateType === 'workflow' && (
+      {filter.templateType === "workflow" && (
         <div>
           <select
-            value={filter.category || 'all'}
-            onChange={(e) => onChange({ ...filter, category: e.target.value === 'all' ? undefined : e.target.value })}
+            value={filter.category || "all"}
+            onChange={(e) =>
+              onChange({
+                ...filter,
+                category: e.target.value === "all" ? undefined : e.target.value,
+              })
+            }
             className="w-full px-3 py-2 text-sm border rounded-lg bg-card hover:bg-accent/50 transition-colors cursor-pointer"
           >
-            <option value="all">
-              {t('templates.category')}
-            </option>
+            <option value="all">{t("templates.category")}</option>
             <option value="image-processing">
-              {t('templates.imageProcessing')}
-            </option>
-            <option value="video-editing">
-              {t('templates.videoEditing')}
+              {t("templates.imageProcessing")}
             </option>
+            <option value="video-editing">{t("templates.videoEditing")}</option>
             <option value="audio-conversion">
-              {t('templates.audioConversion')}
-            </option>
-            <option value="ai-generation">
-              {t('templates.aiGeneration')}
+              {t("templates.audioConversion")}
             </option>
+            <option value="ai-generation">{t("templates.aiGeneration")}</option>
           </select>
         </div>
       )}
@@ -88,18 +102,21 @@ export function TemplateFilters({ filter, onChange, onClear }: TemplateFiltersPr
         <Checkbox
           id="favorites"
           checked={filter.isFavorite === true}
-          onCheckedChange={(checked) => 
-            onChange({ 
-              ...filter, 
-              isFavorite: checked ? true : undefined
+          onCheckedChange={(checked) =>
+            onChange({
+              ...filter,
+              isFavorite: checked ? true : undefined,
             })
           }
         />
-        <Label htmlFor="favorites" className="font-normal cursor-pointer text-sm flex items-center gap-2">
+        <Label
+          htmlFor="favorites"
+          className="font-normal cursor-pointer text-sm flex items-center gap-2"
+        >
           <Star className="h-3.5 w-3.5" />
-          {t('templates.favoritesOnly')}
+          {t("templates.favoritesOnly")}
         </Label>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateGallery.tsx b/src/components/templates/TemplateGallery.tsx
index 9758284a..ecef77fa 100644
--- a/src/components/templates/TemplateGallery.tsx
+++ b/src/components/templates/TemplateGallery.tsx
@@ -1,21 +1,22 @@
-import { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useTemplateStore } from '@/stores/templateStore'
-import { TemplateCard } from './TemplateCard'
-import { TemplateFilters } from './TemplateFilters'
-import { TemplateSearch } from './TemplateSearch'
-import { Button } from '@/components/ui/button'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Loader2, FolderOpen, ArrowUpDown } from 'lucide-react'
-import type { Template, TemplateFilter } from '@/types/template'
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useTemplateStore } from "@/stores/templateStore";
+import { TemplateCard } from "./TemplateCard";
+import { TemplateFilters } from "./TemplateFilters";
+import { TemplateSearch } from "./TemplateSearch";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Loader2, FolderOpen, ArrowUpDown } from "lucide-react";
+import type { Template, TemplateFilter } from "@/types/template";
 
 interface TemplateGalleryProps {
-  onUseTemplate: (template: Template) => void
-  onEditTemplate?: (template: Template) => void
-  onDeleteTemplate?: (template: Template) => void
-  onExportTemplate?: (template: Template) => void
-  initialFilter?: TemplateFilter
-  showFilters?: boolean
+  onUseTemplate: (template: Template) => void;
+  onEditTemplate?: (template: Template) => void;
+  onDeleteTemplate?: (template: Template) => void;
+  onExportTemplate?: (template: Template) => void;
+  initialFilter?: TemplateFilter;
+  showFilters?: boolean;
+  externalSearch?: string;
 }
 
 export function TemplateGallery({
@@ -24,58 +25,76 @@ export function TemplateGallery({
   onDeleteTemplate,
   onExportTemplate,
   initialFilter = {},
-  showFilters = true
+  showFilters = true,
+  externalSearch,
 }: TemplateGalleryProps) {
-  const { t } = useTranslation()
-  const { templates, isLoading, error, loadTemplates, toggleFavorite, setFilter, currentFilter } = useTemplateStore()
-  const [searchQuery, setSearchQuery] = useState('')
-  const prevSearchRef = useRef(searchQuery)
+  const { t } = useTranslation();
+  const {
+    templates,
+    isLoading,
+    error,
+    loadTemplates,
+    toggleFavorite,
+    setFilter,
+    currentFilter,
+  } = useTemplateStore();
+  const [searchQuery, setSearchQuery] = useState("");
+  const prevSearchRef = useRef(searchQuery);
+
+  // Use external search when provided, otherwise use internal
+  const effectiveSearch =
+    externalSearch !== undefined ? externalSearch : searchQuery;
 
   // Sync filter whenever initialFilter props change
   useEffect(() => {
-    const filter = { ...initialFilter, search: searchQuery }
-    setFilter(filter)
+    const filter = { ...initialFilter, search: effectiveSearch };
+    setFilter(filter);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialFilter?.templateType, initialFilter?.type, initialFilter?.category, initialFilter?.isFavorite])
+  }, [
+    initialFilter?.templateType,
+    initialFilter?.type,
+    initialFilter?.category,
+    initialFilter?.isFavorite,
+  ]);
 
   // Update filter when search query changes (skip initial mount)
   useEffect(() => {
-    if (prevSearchRef.current === searchQuery) return
-    prevSearchRef.current = searchQuery
+    if (prevSearchRef.current === effectiveSearch) return;
+    prevSearchRef.current = effectiveSearch;
     // Use store's current filter to avoid stale closure
-    const storeFilter = useTemplateStore.getState().currentFilter
-    setFilter({ ...storeFilter, search: searchQuery })
+    const storeFilter = useTemplateStore.getState().currentFilter;
+    setFilter({ ...storeFilter, search: effectiveSearch });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchQuery])
+  }, [effectiveSearch]);
 
   const handleFilterChange = (newFilter: TemplateFilter) => {
-    setFilter({ ...newFilter, search: searchQuery })
-  }
+    setFilter({ ...newFilter, search: effectiveSearch });
+  };
 
   const handleClearFilters = () => {
-    setFilter({ search: searchQuery })
-  }
+    setFilter({ search: effectiveSearch });
+  };
 
   const handleToggleFavorite = async (template: Template) => {
-    await toggleFavorite(template.id)
-  }
+    await toggleFavorite(template.id);
+  };
 
   if (error) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="text-center">
-          <p className="text-destructive mb-2">{t('common.error')}</p>
+          <p className="text-destructive mb-2">{t("common.error")}</p>
           <p className="text-sm text-muted-foreground">{error}</p>
           <Button
             variant="outline"
             onClick={() => loadTemplates(currentFilter)}
             className="mt-4"
           >
-            {t('common.retry')}
+            {t("common.retry")}
           </Button>
         </div>
       </div>
-    )
+    );
   }
 
   return (
@@ -94,28 +113,32 @@ export function TemplateGallery({
       )}
 
       {/* Main Content */}
-      <div className="flex-1 min-w-0">
+      <div className="flex-1 min-w-0 flex flex-col">
         {/* Search and Filters Bar */}
         <div className="mb-6">
           <div className="flex items-center gap-3">
-            {/* Search Bar */}
-            <div className="w-64">
-              <TemplateSearch
-                value={searchQuery}
-                onChange={setSearchQuery}
-              />
-            </div>
+            {/* Search Bar — hidden when external search is provided */}
+            {externalSearch === undefined && (
+              <div className="w-64">
+                <TemplateSearch value={searchQuery} onChange={setSearchQuery} />
+              </div>
+            )}
 
             {/* Sort By Dropdown */}
             <div className="relative">
               <ArrowUpDown className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
               <select
-                value={currentFilter.sortBy || 'updatedAt'}
-                onChange={(e) => handleFilterChange({ ...currentFilter, sortBy: e.target.value as 'updatedAt' | 'useCount' })}
+                value={currentFilter.sortBy || "updatedAt"}
+                onChange={(e) =>
+                  handleFilterChange({
+                    ...currentFilter,
+                    sortBy: e.target.value as "updatedAt" | "useCount",
+                  })
+                }
                 className="pl-9 pr-3 py-2 text-sm border rounded-lg bg-card hover:bg-accent/50 transition-colors cursor-pointer min-w-[130px] appearance-none"
               >
-                <option value="updatedAt">{t('templates.newest')}</option>
-                <option value="useCount">{t('templates.mostUsed')}</option>
+                <option value="updatedAt">{t("templates.newest")}</option>
+                <option value="useCount">{t("templates.mostUsed")}</option>
               </select>
             </div>
           </div>
@@ -133,11 +156,16 @@ export function TemplateGallery({
           <div className="flex items-center justify-center h-64">
             <div className="text-center">
               <FolderOpen className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
-              <h3 className="text-lg font-medium mb-2">{t('templates.noTemplates')}</h3>
+              <h3 className="text-lg font-medium mb-2">
+                {t("templates.noTemplates")}
+              </h3>
               <p className="text-sm text-muted-foreground">
-                {searchQuery || currentFilter.templateType || currentFilter.type || currentFilter.isFavorite
-                  ? t('templates.noResultsDesc')
-                  : t('templates.noTemplatesDesc')}
+                {effectiveSearch ||
+                currentFilter.templateType ||
+                currentFilter.type ||
+                currentFilter.isFavorite
+                  ? t("templates.noResultsDesc")
+                  : t("templates.noTemplatesDesc")}
               </p>
             </div>
           </div>
@@ -145,8 +173,8 @@ export function TemplateGallery({
 
         {/* Templates Grid */}
         {!isLoading && templates.length > 0 && (
-          <ScrollArea className="h-[calc(100vh-12rem)]">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 pb-4">
+          <ScrollArea className="flex-1">
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4 pb-4">
               {templates.map((template) => (
                 <TemplateCard
                   key={template.id}
@@ -163,5 +191,5 @@ export function TemplateGallery({
         )}
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/templates/TemplatePickerDialog.tsx b/src/components/templates/TemplatePickerDialog.tsx
index 49f1703f..de3ab5ba 100644
--- a/src/components/templates/TemplatePickerDialog.tsx
+++ b/src/components/templates/TemplatePickerDialog.tsx
@@ -3,92 +3,140 @@
  * Reuses TemplateBrowser (same layout as TemplatesPage) without the type tabs.
  * Used by both PlaygroundPage and WorkflowPage.
  */
-import { useState, useEffect, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { TemplateBrowser } from '@/components/templates/TemplateBrowser'
-import { TemplateDialog, type TemplateFormData } from '@/components/templates/TemplateDialog'
-import { useTemplateStore } from '@/stores/templateStore'
-import { toast } from '@/hooks/useToast'
-import type { Template } from '@/types/template'
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { TemplateBrowser } from "@/components/templates/TemplateBrowser";
+import {
+  TemplateDialog,
+  type TemplateFormData,
+} from "@/components/templates/TemplateDialog";
+import { useTemplateStore } from "@/stores/templateStore";
+import { toast } from "@/hooks/useToast";
+import type { Template } from "@/types/template";
 
 interface TemplatePickerDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  templateType: 'playground' | 'workflow'
-  onUseTemplate: (template: Template) => void
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  templateType: "playground" | "workflow";
+  onUseTemplate: (template: Template) => void;
 }
 
-export function TemplatePickerDialog({ open, onOpenChange, templateType, onUseTemplate }: TemplatePickerDialogProps) {
-  const { t } = useTranslation()
-  const { updateTemplate, deleteTemplate, exportTemplates } = useTemplateStore()
-  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null)
-  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(null)
+export function TemplatePickerDialog({
+  open,
+  onOpenChange,
+  templateType,
+  onUseTemplate,
+}: TemplatePickerDialogProps) {
+  const { t } = useTranslation();
+  const { updateTemplate, deleteTemplate, exportTemplates } =
+    useTemplateStore();
+  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
+  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
+    null,
+  );
 
-  const handleUse = useCallback((template: Template) => {
-    onUseTemplate(template)
-    onOpenChange(false)
-  }, [onUseTemplate, onOpenChange])
+  const handleUse = useCallback(
+    (template: Template) => {
+      onUseTemplate(template);
+      onOpenChange(false);
+    },
+    [onUseTemplate, onOpenChange],
+  );
 
-  const handleSaveEdit = useCallback(async (data: TemplateFormData) => {
-    if (!editingTemplate) return
-    try {
-      await updateTemplate(editingTemplate.id, {
-        name: data.name,
-        description: data.description,
-        tags: data.tags,
-        thumbnail: data.thumbnail ?? null,
-      })
-      toast({ title: t('templates.templateUpdated'), description: t('templates.updatedSuccessfully', { name: data.name }) })
-      setEditingTemplate(null)
-    } catch (error) {
-      toast({ title: t('common.error'), description: (error as Error).message, variant: 'destructive' })
-    }
-  }, [editingTemplate, updateTemplate, t])
+  const handleSaveEdit = useCallback(
+    async (data: TemplateFormData) => {
+      if (!editingTemplate) return;
+      try {
+        await updateTemplate(editingTemplate.id, {
+          name: data.name,
+          description: data.description,
+          tags: data.tags,
+          thumbnail: data.thumbnail ?? null,
+        });
+        toast({
+          title: t("templates.templateUpdated"),
+          description: t("templates.updatedSuccessfully", { name: data.name }),
+        });
+        setEditingTemplate(null);
+      } catch (error) {
+        toast({
+          title: t("common.error"),
+          description: (error as Error).message,
+          variant: "destructive",
+        });
+      }
+    },
+    [editingTemplate, updateTemplate, t],
+  );
 
   const handleDeleteConfirm = useCallback(async () => {
-    if (!deletingTemplate) return
+    if (!deletingTemplate) return;
     try {
-      await deleteTemplate(deletingTemplate.id)
-      toast({ title: t('templates.templateDeleted'), description: t('templates.deletedSuccessfully', { name: deletingTemplate.name }) })
-      setDeletingTemplate(null)
+      await deleteTemplate(deletingTemplate.id);
+      toast({
+        title: t("templates.templateDeleted"),
+        description: t("templates.deletedSuccessfully", {
+          name: deletingTemplate.name,
+        }),
+      });
+      setDeletingTemplate(null);
     } catch (error) {
-      toast({ title: t('common.error'), description: (error as Error).message, variant: 'destructive' })
+      toast({
+        title: t("common.error"),
+        description: (error as Error).message,
+        variant: "destructive",
+      });
     }
-  }, [deletingTemplate, deleteTemplate, t])
+  }, [deletingTemplate, deleteTemplate, t]);
 
-  const handleExport = useCallback(async (template: Template) => {
-    try {
-      await exportTemplates([template.id])
-      toast({ title: t('templates.templateExported'), description: t('templates.exportedSuccessfully', { name: template.name }) })
-    } catch (error) {
-      toast({ title: t('common.error'), description: (error as Error).message, variant: 'destructive' })
-    }
-  }, [exportTemplates, t])
+  const handleExport = useCallback(
+    async (template: Template) => {
+      try {
+        await exportTemplates([template.id]);
+        toast({
+          title: t("templates.templateExported"),
+          description: t("templates.exportedSuccessfully", {
+            name: template.name,
+          }),
+        });
+      } catch (error) {
+        toast({
+          title: t("common.error"),
+          description: (error as Error).message,
+          variant: "destructive",
+        });
+      }
+    },
+    [exportTemplates, t],
+  );
 
   // Close on Escape key
   useEffect(() => {
-    if (!open) return
+    if (!open) return;
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        onOpenChange(false)
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onOpenChange(false);
       }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [open, onOpenChange])
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
 
-  if (!open) return null
+  if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60" onClick={() => onOpenChange(false)}>
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+      onClick={() => onOpenChange(false)}
+    >
       <div
         className="w-[85vw] max-w-[1100px] h-[75vh] rounded-xl border border-border bg-card shadow-2xl flex flex-col overflow-hidden"
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-5 py-3 border-b border-border">
-          <h2 className="text-base font-semibold">{t('templates.title')}</h2>
+          <h2 className="text-base font-semibold">{t("templates.title")}</h2>
           <button
             onClick={() => onOpenChange(false)}
             className="text-muted-foreground hover:text-foreground transition-colors text-sm px-2 py-1"
@@ -118,25 +166,37 @@ export function TemplatePickerDialog({ open, onOpenChange, templateType, onUseTe
 
       {/* Delete Confirmation */}
       {deletingTemplate && (
-        <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/60" onClick={() => setDeletingTemplate(null)}>
-          <div className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl" onClick={e => e.stopPropagation()}>
-            <h3 className="text-sm font-semibold mb-1">{t('templates.deleteTemplate')}</h3>
+        <div
+          className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/60"
+          onClick={() => setDeletingTemplate(null)}
+        >
+          <div
+            className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-sm font-semibold mb-1">
+              {t("templates.deleteTemplate")}
+            </h3>
             <p className="text-xs text-muted-foreground mb-4">
-              {t('templates.deleteConfirm', { name: deletingTemplate.name })}
+              {t("templates.deleteConfirm", { name: deletingTemplate.name })}
             </p>
             <div className="flex justify-end gap-2">
-              <button onClick={() => setDeletingTemplate(null)}
-                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors">
-                {t('common.cancel')}
+              <button
+                onClick={() => setDeletingTemplate(null)}
+                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {t("common.cancel")}
               </button>
-              <button onClick={handleDeleteConfirm}
-                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors">
-                {t('common.delete')}
+              <button
+                onClick={handleDeleteConfirm}
+                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors"
+              >
+                {t("common.delete")}
               </button>
             </div>
           </div>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/components/templates/TemplateSearch.tsx b/src/components/templates/TemplateSearch.tsx
index a55f4ffe..7eaaa66e 100644
--- a/src/components/templates/TemplateSearch.tsx
+++ b/src/components/templates/TemplateSearch.tsx
@@ -1,37 +1,41 @@
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Search, X } from 'lucide-react'
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Search, X } from "lucide-react";
 
 interface TemplateSearchProps {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
 }
 
-export function TemplateSearch({ value, onChange, placeholder }: TemplateSearchProps) {
-  const { t } = useTranslation()
-  const [localValue, setLocalValue] = useState(value)
+export function TemplateSearch({
+  value,
+  onChange,
+  placeholder,
+}: TemplateSearchProps) {
+  const { t } = useTranslation();
+  const [localValue, setLocalValue] = useState(value);
 
   // Debounce search
   useEffect(() => {
     const timer = setTimeout(() => {
-      onChange(localValue)
-    }, 300)
+      onChange(localValue);
+    }, 300);
 
-    return () => clearTimeout(timer)
-  }, [localValue, onChange])
+    return () => clearTimeout(timer);
+  }, [localValue, onChange]);
 
   // Sync with external value changes
   useEffect(() => {
-    setLocalValue(value)
-  }, [value])
+    setLocalValue(value);
+  }, [value]);
 
   const handleClear = () => {
-    setLocalValue('')
-    onChange('')
-  }
+    setLocalValue("");
+    onChange("");
+  };
 
   return (
     <div className="relative">
@@ -39,7 +43,7 @@ export function TemplateSearch({ value, onChange, placeholder }: TemplateSearchP
       <Input
         value={localValue}
         onChange={(e) => setLocalValue(e.target.value)}
-        placeholder={placeholder || t('templates.searchPlaceholder')}
+        placeholder={placeholder || t("templates.searchPlaceholder")}
         className="pl-10 pr-10"
       />
       {localValue && (
@@ -53,5 +57,5 @@ export function TemplateSearch({ value, onChange, placeholder }: TemplateSearchP
         </Button>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 1b71981b..72b0afe9 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,14 +1,14 @@
-import * as React from 'react'
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/components/ui/button'
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -16,14 +16,14 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -34,14 +34,14 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        className
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
       )}
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -49,13 +49,13 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col space-y-2 text-center sm:text-left',
-      className
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -63,13 +63,13 @@ const AlertDialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      className
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -77,11 +77,11 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg font-semibold', className)}
+    className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -89,12 +89,12 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -105,8 +105,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -115,14 +115,14 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: 'outline' }),
-      'mt-2 sm:mt-0',
-      className
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className,
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -136,4 +136,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index ab761d17..d964627c 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -15,8 +15,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -28,8 +28,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -40,8 +40,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -52,7 +52,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index 907c17a6..e23b356e 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -18,24 +18,24 @@ const badgeVariants = cva(
           "border-transparent bg-green-500 text-white hover:bg-green-500/80",
         warning:
           "border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80",
-        info:
-          "border-transparent bg-blue-500 text-white hover:bg-blue-500/80",
+        info: "border-transparent bg-blue-500 text-white hover:bg-blue-500/80",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends
+    React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 3a79da4f..e260083b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -9,9 +9,12 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border/80 bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-border/80 bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "text-foreground hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -26,27 +29,28 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index fcfa97c4..51bf1ace 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,5 +1,5 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,12 +9,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-xl border border-border/70 bg-card text-card-foreground shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -25,8 +25,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -36,12 +36,12 @@ const CardTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -52,16 +52,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -72,7 +72,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 5f0b6925..58d17681 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -11,18 +11,18 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-      className
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
+      className={cn("flex items-center justify-center text-current")}
     >
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index aec287ad..9f5282f9 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,15 +1,15 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -19,16 +19,18 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideCloseButton?: boolean }
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    hideCloseButton?: boolean;
+  }
 >(({ className, children, hideCloseButton, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
@@ -36,7 +38,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -49,8 +51,8 @@ const DialogContent = React.forwardRef<
       )}
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -59,12 +61,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -73,12 +75,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -88,12 +90,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -104,8 +106,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -118,4 +120,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index d2ab0b1b..2b00e514 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,25 +1,25 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -27,16 +27,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -46,13 +46,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,18 +65,18 @@ const DropdownMenuContent = React.forwardRef<
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -84,12 +84,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -111,9 +111,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -134,13 +134,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -148,12 +148,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -164,8 +164,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -176,9 +176,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -196,4 +196,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
index b03c84b5..210ea488 100644
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -18,12 +18,12 @@ const HoverCardContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </HoverCardPrimitive.Portal>
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index dee96001..8218e209 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,18 +1,17 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, value, onChange, ...props }, ref) => {
-    const needsCompositionGuard = !type || type === 'text' || type === 'search'
-    const composingRef = React.useRef(false)
-    const [localValue, setLocalValue] = React.useState(String(value ?? ''))
+    const needsCompositionGuard = !type || type === "text" || type === "search";
+    const composingRef = React.useRef(false);
+    const [localValue, setLocalValue] = React.useState(String(value ?? ""));
 
     React.useEffect(() => {
-      if (!composingRef.current) setLocalValue(String(value ?? ''))
-    }, [value])
+      if (!composingRef.current) setLocalValue(String(value ?? ""));
+    }, [value]);
 
     if (needsCompositionGuard) {
       return (
@@ -20,23 +19,28 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           type={type}
           className={cn(
             "flex h-10 w-full rounded-lg border border-border/80 bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50 transition-all",
-            className
+            className,
           )}
           ref={ref}
           value={localValue}
-          onChange={e => {
-            setLocalValue(e.target.value)
-            if (!composingRef.current) onChange?.(e)
+          onChange={(e) => {
+            setLocalValue(e.target.value);
+            if (!composingRef.current) onChange?.(e);
           }}
-          onCompositionStart={() => { composingRef.current = true }}
-          onCompositionEnd={e => {
-            composingRef.current = false
-            setLocalValue((e.target as HTMLInputElement).value)
-            onChange?.({ target: e.target, currentTarget: e.currentTarget } as React.ChangeEvent<HTMLInputElement>)
+          onCompositionStart={() => {
+            composingRef.current = true;
+          }}
+          onCompositionEnd={(e) => {
+            composingRef.current = false;
+            setLocalValue((e.target as HTMLInputElement).value);
+            onChange?.({
+              target: e.target,
+              currentTarget: e.currentTarget,
+            } as React.ChangeEvent<HTMLInputElement>);
           }}
           {...props}
         />
-      )
+      );
     }
 
     return (
@@ -44,16 +48,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-10 w-full rounded-lg border border-border/80 bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/15 disabled:cursor-not-allowed disabled:opacity-50 transition-all",
-          className
+          className,
         )}
         ref={ref}
         value={value}
         onChange={onChange}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index e0d8e049..22a57fb3 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,11 +1,11 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -17,7 +17,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 3f6614fc..8b69a9b2 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -11,7 +11,7 @@ const Progress = React.forwardRef<
     ref={ref}
     className={cn(
       "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-      className
+      className,
     )}
     {...props}
   >
@@ -19,11 +19,11 @@ const Progress = React.forwardRef<
       className="h-full w-full flex-1 bg-primary"
       style={{
         transform: `translateX(-${100 - (value || 0)}%)`,
-        transition: (value || 0) > 0 ? 'transform 200ms ease' : 'none'
+        transition: (value || 0) > 0 ? "transform 200ms ease" : "none",
       }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 32258390..94e0ec38 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -17,8 +17,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -33,13 +33,13 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      className,
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index fe56d4d3..9b769ec5 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,14 +1,14 @@
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -27,8 +27,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,14 +38,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,15 +55,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -94,8 +94,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -106,8 +106,8 @@ const SelectLabel = React.forwardRef<
     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -117,7 +117,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -129,8 +129,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -141,8 +141,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -155,4 +155,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index e7773186..698cb2e7 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -8,7 +8,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -17,12 +17,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index 256b64f2..65361749 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
 
-const Sheet = DialogPrimitive.Root
-const SheetTrigger = DialogPrimitive.Trigger
-const SheetClose = DialogPrimitive.Close
-const SheetPortal = DialogPrimitive.Portal
+const Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -15,17 +15,19 @@ const SheetOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { overlayClassName?: string }
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    overlayClassName?: string;
+  }
 >(({ className, children, overlayClassName, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay className={overlayClassName} />
@@ -34,7 +36,7 @@ const SheetContent = React.forwardRef<
       className={cn(
         "fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
         "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-[480px]",
-        className
+        className,
       )}
       {...props}
     >
@@ -45,12 +47,18 @@ const SheetContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = DialogPrimitive.Content.displayName
+));
+SheetContent.displayName = DialogPrimitive.Content.displayName;
 
-const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-left", className)} {...props} />
-)
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col space-y-2 text-left", className)}
+    {...props}
+  />
+);
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -61,8 +69,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = DialogPrimitive.Title.displayName
+));
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -73,8 +81,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = DialogPrimitive.Description.displayName
+));
+SheetDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -86,4 +94,4 @@ export {
   SheetHeader,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 5230d825..799b9de9 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,22 +1,23 @@
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, value, defaultValue, ...props }, ref) => {
   // Determine how many thumbs to render based on value/defaultValue
-  const thumbCount = Array.isArray(value) ? value.length : Array.isArray(defaultValue) ? defaultValue.length : 1
+  const thumbCount = Array.isArray(value)
+    ? value.length
+    : Array.isArray(defaultValue)
+      ? defaultValue.length
+      : 1;
 
   return (
     <SliderPrimitive.Root
       ref={ref}
-      className={cn(
-        "relative flex w-full select-none items-center",
-        className
-      )}
+      className={cn("relative flex w-full select-none items-center", className)}
       value={value}
       defaultValue={defaultValue}
       {...props}
@@ -31,8 +32,8 @@ const Slider = React.forwardRef<
         />
       ))}
     </SliderPrimitive.Root>
-  )
-})
-Slider.displayName = SliderPrimitive.Root.displayName
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { Slider };
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index fbb280ca..d92c0f7a 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -9,18 +9,18 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 4c751b30..f6b75352 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -12,12 +12,12 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -27,12 +27,12 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -42,11 +42,11 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index be8a2c78..05a9284b 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,41 +1,45 @@
-import * as React from "react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, value, onChange, ...props }, ref) => {
-    const composingRef = React.useRef(false)
-    const [localValue, setLocalValue] = React.useState(String(value ?? ''))
+    const composingRef = React.useRef(false);
+    const [localValue, setLocalValue] = React.useState(String(value ?? ""));
 
     React.useEffect(() => {
-      if (!composingRef.current) setLocalValue(String(value ?? ''))
-    }, [value])
+      if (!composingRef.current) setLocalValue(String(value ?? ""));
+    }, [value]);
 
     return (
       <textarea
         className={cn(
           "flex min-h-[80px] w-full rounded-md border border-input bg-white dark:bg-card px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-50 transition-colors",
-          className
+          className,
         )}
         ref={ref}
         value={localValue}
-        onChange={e => {
-          setLocalValue(e.target.value)
-          if (!composingRef.current) onChange?.(e)
+        onChange={(e) => {
+          setLocalValue(e.target.value);
+          if (!composingRef.current) onChange?.(e);
         }}
-        onCompositionStart={() => { composingRef.current = true }}
-        onCompositionEnd={e => {
-          composingRef.current = false
-          setLocalValue((e.target as HTMLTextAreaElement).value)
-          onChange?.({ target: e.target, currentTarget: e.currentTarget } as React.ChangeEvent<HTMLTextAreaElement>)
+        onCompositionStart={() => {
+          composingRef.current = true;
+        }}
+        onCompositionEnd={(e) => {
+          composingRef.current = false;
+          setLocalValue((e.target as HTMLTextAreaElement).value);
+          onChange?.({
+            target: e.target,
+            currentTarget: e.currentTarget,
+          } as React.ChangeEvent<HTMLTextAreaElement>);
         }}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index c558805e..30576ea2 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,10 +1,10 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -14,12 +14,12 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
@@ -34,8 +34,8 @@ const toastVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -48,9 +48,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -60,12 +60,12 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -75,15 +75,15 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
     toast-close=""
     {...props}
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -94,8 +94,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold", className)}
     {...props}
   />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -106,11 +106,11 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -122,4 +122,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index 67e4e6ce..98e06f8b 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,4 +1,4 @@
-import { useToast } from "@/hooks/useToast"
+import { useToast } from "@/hooks/useToast";
 import {
   Toast,
   ToastClose,
@@ -6,10 +6,10 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
+} from "@/components/ui/toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider duration={5000}>
@@ -25,9 +25,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 218d1835..8cfe869d 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,13 +1,13 @@
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -19,12 +19,12 @@ const TooltipContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/hooks/useBackgroundRemoverWorker.ts b/src/hooks/useBackgroundRemoverWorker.ts
index e7805f98..3d7e6d52 100644
--- a/src/hooks/useBackgroundRemoverWorker.ts
+++ b/src/hooks/useBackgroundRemoverWorker.ts
@@ -1,230 +1,247 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
 
-type ModelType = 'isnet_quint8' | 'isnet_fp16' | 'isnet'
-type OutputType = 'foreground' | 'background' | 'mask'
+type ModelType = "isnet_quint8" | "isnet_fp16" | "isnet";
+type OutputType = "foreground" | "background" | "mask";
 
 interface WorkerMessage {
-  type: 'phase' | 'progress' | 'result' | 'resultAll' | 'error' | 'disposed'
-  payload?: unknown
+  type: "phase" | "progress" | "result" | "resultAll" | "error" | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id: number
+  phase: string;
+  id: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id: number;
 }
 
 interface ResultPayload {
-  arrayBuffer: ArrayBuffer
-  id: number
+  arrayBuffer: ArrayBuffer;
+  id: number;
 }
 
 interface ResultAllPayload {
-  foreground: ArrayBuffer
-  background: ArrayBuffer
-  mask: ArrayBuffer
-  id: number
+  foreground: ArrayBuffer;
+  background: ArrayBuffer;
+  mask: ArrayBuffer;
+  id: number;
 }
 
 export interface AllOutputsResult {
-  foreground: Blob
-  background: Blob
-  mask: Blob
+  foreground: Blob;
+  background: Blob;
+  mask: Blob;
 }
 
 interface UseBackgroundRemoverWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
 }
 
 export function useBackgroundRemoverWorker(
-  options: UseBackgroundRemoverWorkerOptions = {}
+  options: UseBackgroundRemoverWorkerOptions = {},
 ) {
-  const workerRef = useRef<Worker | null>(null)
-  const callbacksRef = useRef<Map<number, (result: Blob) => void>>(new Map())
-  const callbacksAllRef = useRef<Map<number, (result: AllOutputsResult) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
+  const workerRef = useRef<Worker | null>(null);
+  const callbacksRef = useRef<Map<number, (result: Blob) => void>>(new Map());
+  const callbacksAllRef = useRef<
+    Map<number, (result: AllOutputsResult) => void>
+  >(new Map());
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
+    hasFailedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/backgroundRemover.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/backgroundRemover.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'result': {
-          const { arrayBuffer, id } = payload as ResultPayload
-          const callback = callbacksRef.current.get(id)
+        case "result": {
+          const { arrayBuffer, id } = payload as ResultPayload;
+          const callback = callbacksRef.current.get(id);
           if (callback) {
             // Convert ArrayBuffer back to Blob
-            const blob = new Blob([arrayBuffer], { type: 'image/png' })
-            callback(blob)
-            callbacksRef.current.delete(id)
+            const blob = new Blob([arrayBuffer], { type: "image/png" });
+            callback(blob);
+            callbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'resultAll': {
-          const { foreground, background, mask, id } = payload as ResultAllPayload
-          const callback = callbacksAllRef.current.get(id)
+        case "resultAll": {
+          const { foreground, background, mask, id } =
+            payload as ResultAllPayload;
+          const callback = callbacksAllRef.current.get(id);
           if (callback) {
             // Convert ArrayBuffers back to Blobs
             callback({
-              foreground: new Blob([foreground], { type: 'image/png' }),
-              background: new Blob([background], { type: 'image/png' }),
-              mask: new Blob([mask], { type: 'image/png' })
-            })
-            callbacksAllRef.current.delete(id)
+              foreground: new Blob([foreground], { type: "image/png" }),
+              background: new Blob([background], { type: "image/png" }),
+              mask: new Blob([mask], { type: "image/png" }),
+            });
+            callbacksAllRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
-          break
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   const removeBackground = useCallback(
     (
       imageBlob: Blob,
-      model: ModelType = 'isnet_fp16',
-      outputType: OutputType = 'foreground'
+      model: ModelType = "isnet_fp16",
+      outputType: OutputType = "foreground",
     ): Promise<Blob> => {
       return new Promise((resolve, reject) => {
-        ensureWorker()
+        ensureWorker();
 
         if (!workerRef.current) {
-          reject(new Error('Worker not initialized'))
-          return
+          reject(new Error("Worker not initialized"));
+          return;
         }
 
-        const id = idCounterRef.current++
-        callbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        callbacksRef.current.set(id, resolve);
 
         // Set up error handler for this specific call
         const handleError = (e: MessageEvent<WorkerMessage>) => {
-          if (e.data.type === 'error') {
-            callbacksRef.current.delete(id)
-            workerRef.current?.removeEventListener('message', handleError)
-            reject(new Error(e.data.payload as string))
+          if (e.data.type === "error") {
+            callbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
           }
-        }
-        workerRef.current.addEventListener('message', handleError)
+        };
+        workerRef.current.addEventListener("message", handleError);
 
         workerRef.current.postMessage({
-          type: 'process',
-          payload: { imageBlob, model, outputType, id }
-        })
-      })
+          type: "process",
+          payload: { imageBlob, model, outputType, id },
+        });
+      });
     },
-    [ensureWorker]
-  )
+    [ensureWorker],
+  );
 
   const removeBackgroundAll = useCallback(
-    (imageBlob: Blob, model: ModelType = 'isnet_fp16'): Promise<AllOutputsResult> => {
+    (
+      imageBlob: Blob,
+      model: ModelType = "isnet_fp16",
+    ): Promise<AllOutputsResult> => {
       return new Promise((resolve, reject) => {
-        ensureWorker()
+        ensureWorker();
 
         if (!workerRef.current) {
-          reject(new Error('Worker not initialized'))
-          return
+          reject(new Error("Worker not initialized"));
+          return;
         }
 
-        const id = idCounterRef.current++
-        callbacksAllRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        callbacksAllRef.current.set(id, resolve);
 
         // Set up error handler for this specific call
         const handleError = (e: MessageEvent<WorkerMessage>) => {
-          if (e.data.type === 'error') {
-            callbacksAllRef.current.delete(id)
-            workerRef.current?.removeEventListener('message', handleError)
-            reject(new Error(e.data.payload as string))
+          if (e.data.type === "error") {
+            callbacksAllRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
           }
-        }
-        workerRef.current.addEventListener('message', handleError)
+        };
+        workerRef.current.addEventListener("message", handleError);
 
         workerRef.current.postMessage({
-          type: 'processAll',
-          payload: { imageBlob, model, id }
-        })
-      })
+          type: "processAll",
+          payload: { imageBlob, model, id },
+        });
+      });
     },
-    [ensureWorker]
-  )
+    [ensureWorker],
+  );
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    workerRef.current?.terminate()
-    workerRef.current = null
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+  }, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
 
   // Cancel ongoing processing by terminating and recreating the worker
   const cancel = useCallback(() => {
     // Clear all pending callbacks
-    callbacksRef.current.clear()
-    callbacksAllRef.current.clear()
+    callbacksRef.current.clear();
+    callbacksAllRef.current.clear();
     // Terminate and recreate worker
     if (workerRef.current) {
-      workerRef.current.terminate()
-      workerRef.current = null
+      workerRef.current.terminate();
+      workerRef.current = null;
     }
-    createWorker()
-  }, [createWorker])
-
-  return { removeBackground, removeBackgroundAll, dispose, retryWorker, hasFailed, cancel }
+    createWorker();
+  }, [createWorker]);
+
+  return {
+    removeBackground,
+    removeBackgroundAll,
+    dispose,
+    retryWorker,
+    hasFailed,
+    cancel,
+  };
 }
diff --git a/src/hooks/useFFmpegWorker.ts b/src/hooks/useFFmpegWorker.ts
index c8f3da48..3b0186d1 100644
--- a/src/hooks/useFFmpegWorker.ts
+++ b/src/hooks/useFFmpegWorker.ts
@@ -1,351 +1,383 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
 
 interface ConvertOptions {
   // Video options
-  videoCodec?: string
-  videoBitrate?: string
-  resolution?: string
-  fps?: number
+  videoCodec?: string;
+  videoBitrate?: string;
+  resolution?: string;
+  fps?: number;
   // Audio options
-  audioCodec?: string
-  audioBitrate?: string
-  sampleRate?: number
+  audioCodec?: string;
+  audioBitrate?: string;
+  sampleRate?: number;
   // Image options
-  quality?: number
+  quality?: number;
 }
 
 interface MediaInfo {
-  duration: number | null
-  resolution: { width: number; height: number } | null
-  videoCodec: string | null
-  audioCodec: string | null
+  duration: number | null;
+  resolution: { width: number; height: number } | null;
+  videoCodec: string | null;
+  audioCodec: string | null;
 }
 
 interface WorkerMessage {
-  type: 'loaded' | 'phase' | 'progress' | 'result' | 'info' | 'error' | 'disposed'
-  payload?: unknown
+  type:
+    | "loaded"
+    | "phase"
+    | "progress"
+    | "result"
+    | "info"
+    | "error"
+    | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id?: number
+  phase: string;
+  id?: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id?: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id?: number;
 }
 
 interface ResultPayload {
-  data: ArrayBuffer
-  filename: string
-  id: number
+  data: ArrayBuffer;
+  filename: string;
+  id: number;
 }
 
 interface InfoPayload extends MediaInfo {
-  id: number
+  id: number;
 }
 
 interface UseFFmpegWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
 }
 
 export function useFFmpegWorker(options: UseFFmpegWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const resultCallbacksRef = useRef<Map<number, (result: { data: ArrayBuffer; filename: string }) => void>>(new Map())
-  const infoCallbacksRef = useRef<Map<number, (info: MediaInfo) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
-  const isLoadedRef = useRef(false)
+  const workerRef = useRef<Worker | null>(null);
+  const resultCallbacksRef = useRef<
+    Map<number, (result: { data: ArrayBuffer; filename: string }) => void>
+  >(new Map());
+  const infoCallbacksRef = useRef<Map<number, (info: MediaInfo) => void>>(
+    new Map(),
+  );
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
+  const isLoadedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
-    isLoadedRef.current = false
+    hasFailedRef.current = false;
+    isLoadedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/ffmpeg.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/ffmpeg.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'loaded': {
-          isLoadedRef.current = true
-          break
+        case "loaded": {
+          isLoadedRef.current = true;
+          break;
         }
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'result': {
-          const { data, filename, id } = payload as ResultPayload
-          const callback = resultCallbacksRef.current.get(id)
+        case "result": {
+          const { data, filename, id } = payload as ResultPayload;
+          const callback = resultCallbacksRef.current.get(id);
           if (callback) {
-            callback({ data, filename })
-            resultCallbacksRef.current.delete(id)
+            callback({ data, filename });
+            resultCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'info': {
-          const { id, ...info } = payload as InfoPayload
-          const callback = infoCallbacksRef.current.get(id)
+        case "info": {
+          const { id, ...info } = payload as InfoPayload;
+          const callback = infoCallbacksRef.current.get(id);
           if (callback) {
-            callback(info)
-            infoCallbacksRef.current.delete(id)
+            callback(info);
+            infoCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
           // Reject all pending callbacks
           resultCallbacksRef.current.forEach((_, id) => {
-            resultCallbacksRef.current.delete(id)
-          })
+            resultCallbacksRef.current.delete(id);
+          });
           infoCallbacksRef.current.forEach((_, id) => {
-            infoCallbacksRef.current.delete(id)
-          })
-          break
+            infoCallbacksRef.current.delete(id);
+          });
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   // Pre-load FFmpeg (optional, can be called early)
   const load = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
-      ensureWorker()
+      ensureWorker();
 
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
       if (isLoadedRef.current) {
-        resolve()
-        return
+        resolve();
+        return;
       }
 
       const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'loaded') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          resolve()
-        } else if (e.data.type === 'error') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          reject(new Error(e.data.payload as string))
+        if (e.data.type === "loaded") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          resolve();
+        } else if (e.data.type === "error") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          reject(new Error(e.data.payload as string));
         }
-      }
+      };
 
-      workerRef.current.addEventListener('message', handleMessage)
-      workerRef.current.postMessage({ type: 'load' })
-    })
-  }, [ensureWorker])
+      workerRef.current.addEventListener("message", handleMessage);
+      workerRef.current.postMessage({ type: "load" });
+    });
+  }, [ensureWorker]);
 
   // Convert media file
-  const convert = useCallback((
-    file: ArrayBuffer,
-    fileName: string,
-    outputFormat: string,
-    outputExt: string,
-    options?: ConvertOptions
-  ): Promise<{ data: ArrayBuffer; filename: string }> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const convert = useCallback(
+    (
+      file: ArrayBuffer,
+      fileName: string,
+      outputFormat: string,
+      outputExt: string,
+      options?: ConvertOptions,
+    ): Promise<{ data: ArrayBuffer; filename: string }> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      resultCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        resultCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          resultCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'convert',
-          payload: { file, fileName, outputFormat, outputExt, options, id }
-        },
-        { transfer: [file] }
-      )
-    })
-  }, [ensureWorker])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            resultCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "convert",
+            payload: { file, fileName, outputFormat, outputExt, options, id },
+          },
+          { transfer: [file] },
+        );
+      });
+    },
+    [ensureWorker],
+  );
 
   // Merge multiple media files
-  const merge = useCallback((
-    files: ArrayBuffer[],
-    fileNames: string[],
-    outputFormat: string,
-    outputExt: string
-  ): Promise<{ data: ArrayBuffer; filename: string }> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const merge = useCallback(
+    (
+      files: ArrayBuffer[],
+      fileNames: string[],
+      outputFormat: string,
+      outputExt: string,
+    ): Promise<{ data: ArrayBuffer; filename: string }> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      resultCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        resultCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          resultCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'merge',
-          payload: { files, fileNames, outputFormat, outputExt, id }
-        },
-        { transfer: files }
-      )
-    })
-  }, [ensureWorker])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            resultCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "merge",
+            payload: { files, fileNames, outputFormat, outputExt, id },
+          },
+          { transfer: files },
+        );
+      });
+    },
+    [ensureWorker],
+  );
 
   // Trim media file
-  const trim = useCallback((
-    file: ArrayBuffer,
-    fileName: string,
-    startTime: number,
-    endTime: number,
-    outputFormat: string,
-    outputExt: string
-  ): Promise<{ data: ArrayBuffer; filename: string }> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const trim = useCallback(
+    (
+      file: ArrayBuffer,
+      fileName: string,
+      startTime: number,
+      endTime: number,
+      outputFormat: string,
+      outputExt: string,
+    ): Promise<{ data: ArrayBuffer; filename: string }> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      resultCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        resultCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          resultCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'trim',
-          payload: { file, fileName, startTime, endTime, outputFormat, outputExt, id }
-        },
-        { transfer: [file] }
-      )
-    })
-  }, [ensureWorker])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            resultCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "trim",
+            payload: {
+              file,
+              fileName,
+              startTime,
+              endTime,
+              outputFormat,
+              outputExt,
+              id,
+            },
+          },
+          { transfer: [file] },
+        );
+      });
+    },
+    [ensureWorker],
+  );
 
   // Get media info
-  const getMediaInfo = useCallback((
-    file: ArrayBuffer,
-    fileName: string
-  ): Promise<MediaInfo> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+  const getMediaInfo = useCallback(
+    (file: ArrayBuffer, fileName: string): Promise<MediaInfo> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      infoCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        infoCallbacksRef.current.set(id, resolve);
 
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          infoCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      // Clone the buffer since we can't transfer and keep
-      const clonedBuffer = file.slice(0)
-      workerRef.current.postMessage(
-        {
-          type: 'getInfo',
-          payload: { file: clonedBuffer, fileName, id }
-        },
-        { transfer: [clonedBuffer] }
-      )
-    })
-  }, [ensureWorker])
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            infoCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        // Clone the buffer since we can't transfer and keep
+        const clonedBuffer = file.slice(0);
+        workerRef.current.postMessage(
+          {
+            type: "getInfo",
+            payload: { file: clonedBuffer, fileName, id },
+          },
+          { transfer: [clonedBuffer] },
+        );
+      });
+    },
+    [ensureWorker],
+  );
 
   // Cancel current operation
   const cancel = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'cancel' })
-  }, [])
+    workerRef.current?.postMessage({ type: "cancel" });
+  }, []);
 
   // Dispose worker
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    workerRef.current?.terminate()
-    workerRef.current = null
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+  }, []);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
-  const isLoaded = useCallback(() => isLoadedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
+  const isLoaded = useCallback(() => isLoadedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
   return {
     load,
@@ -357,6 +389,6 @@ export function useFFmpegWorker(options: UseFFmpegWorkerOptions = {}) {
     dispose,
     hasFailed,
     isLoaded,
-    retryWorker
-  }
+    retryWorker,
+  };
 }
diff --git a/src/hooks/useFaceEnhancerWorker.ts b/src/hooks/useFaceEnhancerWorker.ts
index 254b99f2..93e9224a 100644
--- a/src/hooks/useFaceEnhancerWorker.ts
+++ b/src/hooks/useFaceEnhancerWorker.ts
@@ -1,36 +1,40 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
-import { getDownloadTimeoutMs } from '@/stores/settingsStore'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
+import { getDownloadTimeoutMs } from "@/stores/settingsStore";
 
 interface EnhanceResult {
-  data: Float32Array
-  width: number
-  height: number
-  faces: number
-  id: number
+  data: Float32Array;
+  width: number;
+  height: number;
+  faces: number;
+  id: number;
 }
 
 interface WorkerMessage {
-  type: 'ready' | 'phase' | 'progress' | 'result' | 'error' | 'disposed'
-  payload?: unknown
+  type: "ready" | "phase" | "progress" | "result" | "error" | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id?: number
+  phase: string;
+  id?: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id?: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id?: number;
 }
 
 interface UseFaceEnhancerWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
 }
 
 /**
@@ -39,225 +43,232 @@ interface UseFaceEnhancerWorkerOptions {
 function float32ToImageData(
   data: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): ImageData {
-  const imageData = new ImageData(width, height)
-  const pixels = imageData.data
+  const imageData = new ImageData(width, height);
+  const pixels = imageData.data;
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 3
-      const dstIdx = (y * width + x) * 4
+      const srcIdx = (y * width + x) * 3;
+      const dstIdx = (y * width + x) * 4;
 
-      pixels[dstIdx] = Math.round(data[srcIdx] * 255) // R
-      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255) // G
-      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255) // B
-      pixels[dstIdx + 3] = 255 // A
+      pixels[dstIdx] = Math.round(data[srcIdx] * 255); // R
+      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255); // G
+      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255); // B
+      pixels[dstIdx + 3] = 255; // A
     }
   }
 
-  return imageData
+  return imageData;
 }
 
 /**
  * Convert ImageData to Float32Array HWC [0,1]
  */
 function imageDataToFloat32(imageData: ImageData): Float32Array {
-  const { width, height, data } = imageData
-  const result = new Float32Array(width * height * 3)
+  const { width, height, data } = imageData;
+  const result = new Float32Array(width * height * 3);
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 4
-      const dstIdx = (y * width + x) * 3
+      const srcIdx = (y * width + x) * 4;
+      const dstIdx = (y * width + x) * 3;
 
-      result[dstIdx] = data[srcIdx] / 255 // R
-      result[dstIdx + 1] = data[srcIdx + 1] / 255 // G
-      result[dstIdx + 2] = data[srcIdx + 2] / 255 // B
+      result[dstIdx] = data[srcIdx] / 255; // R
+      result[dstIdx + 1] = data[srcIdx + 1] / 255; // G
+      result[dstIdx + 2] = data[srcIdx + 2] / 255; // B
     }
   }
 
-  return result
+  return result;
 }
 
 /**
  * Convert ImageData to data URL
  */
 function imageDataToDataURL(imageData: ImageData): string {
-  const canvas = document.createElement('canvas')
-  canvas.width = imageData.width
-  canvas.height = imageData.height
-  const ctx = canvas.getContext('2d')!
-  ctx.putImageData(imageData, 0, 0)
-  return canvas.toDataURL('image/png')
+  const canvas = document.createElement("canvas");
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
 }
 
-export function useFaceEnhancerWorker(options: UseFaceEnhancerWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const callbacksRef = useRef<Map<number, (result: { dataUrl: string; faces: number }) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
-  const isInitializedRef = useRef(false)
+export function useFaceEnhancerWorker(
+  options: UseFaceEnhancerWorkerOptions = {},
+) {
+  const workerRef = useRef<Worker | null>(null);
+  const callbacksRef = useRef<
+    Map<number, (result: { dataUrl: string; faces: number }) => void>
+  >(new Map());
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
+  const isInitializedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
-    isInitializedRef.current = false
+    hasFailedRef.current = false;
+    isInitializedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/faceEnhancer.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/faceEnhancer.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'result': {
-          const { data, width, height, faces, id } = payload as EnhanceResult
-          const callback = callbacksRef.current.get(id)
+        case "result": {
+          const { data, width, height, faces, id } = payload as EnhanceResult;
+          const callback = callbacksRef.current.get(id);
           if (callback) {
             // Convert Float32Array to data URL
-            const imageData = float32ToImageData(data, width, height)
-            const dataUrl = imageDataToDataURL(imageData)
-            callback({ dataUrl, faces })
-            callbacksRef.current.delete(id)
+            const imageData = float32ToImageData(data, width, height);
+            const dataUrl = imageDataToDataURL(imageData);
+            callback({ dataUrl, faces });
+            callbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'ready':
-          isInitializedRef.current = true
-          break
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
-          break
+        case "ready":
+          isInitializedRef.current = true;
+          break;
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   const initModel = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
-      ensureWorker()
+      ensureWorker();
 
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
       if (isInitializedRef.current) {
-        resolve()
-        return
+        resolve();
+        return;
       }
 
-      const id = idCounterRef.current++
+      const id = idCounterRef.current++;
 
       const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'ready') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          resolve()
-        } else if (e.data.type === 'error') {
-          workerRef.current?.removeEventListener('message', handleMessage)
-          reject(new Error(e.data.payload as string))
+        if (e.data.type === "ready") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          resolve();
+        } else if (e.data.type === "error") {
+          workerRef.current?.removeEventListener("message", handleMessage);
+          reject(new Error(e.data.payload as string));
         }
-      }
+      };
 
-      workerRef.current.addEventListener('message', handleMessage)
+      workerRef.current.addEventListener("message", handleMessage);
       workerRef.current.postMessage({
-        type: 'init',
+        type: "init",
         payload: {
           id,
-          timeout: getDownloadTimeoutMs()
+          timeout: getDownloadTimeoutMs(),
+        },
+      });
+    });
+  }, [ensureWorker]);
+
+  const enhance = useCallback(
+    (imageData: ImageData): Promise<{ dataUrl: string; faces: number }> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
         }
-      })
-    })
-  }, [ensureWorker])
-
-  const enhance = useCallback((imageData: ImageData): Promise<{ dataUrl: string; faces: number }> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
 
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
-
-      const id = idCounterRef.current++
-      callbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        callbacksRef.current.set(id, resolve);
 
-      // Convert ImageData to Float32Array
-      const float32Data = imageDataToFloat32(imageData)
+        // Convert ImageData to Float32Array
+        const float32Data = imageDataToFloat32(imageData);
 
-      // Set up error handler for this specific call
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          callbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
-
-      workerRef.current.postMessage(
-        {
-          type: 'enhance',
-          payload: {
-            imageData: float32Data,
-            width: imageData.width,
-            height: imageData.height,
-            id
+        // Set up error handler for this specific call
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            callbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
           }
-        },
-        { transfer: [float32Data.buffer] }
-      )
-    })
-  }, [ensureWorker])
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "enhance",
+            payload: {
+              imageData: float32Data,
+              width: imageData.width,
+              height: imageData.height,
+              id,
+            },
+          },
+          { transfer: [float32Data.buffer] },
+        );
+      });
+    },
+    [ensureWorker],
+  );
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    workerRef.current?.terminate()
-    workerRef.current = null
-    isInitializedRef.current = false
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+    isInitializedRef.current = false;
+  }, []);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
-  return { initModel, enhance, dispose, hasFailed, retryWorker }
+  return { initModel, enhance, dispose, hasFailed, retryWorker };
 }
diff --git a/src/hooks/useFaceSwapperWorker.ts b/src/hooks/useFaceSwapperWorker.ts
index a993e68f..d7fc268d 100644
--- a/src/hooks/useFaceSwapperWorker.ts
+++ b/src/hooks/useFaceSwapperWorker.ts
@@ -1,62 +1,73 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
-import { getDownloadTimeoutMs } from '@/stores/settingsStore'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
+import { getDownloadTimeoutMs } from "@/stores/settingsStore";
 
 interface FaceBox {
-  x: number
-  y: number
-  width: number
-  height: number
-  confidence: number
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  confidence: number;
 }
 
 interface DetectedFace {
-  box: FaceBox
-  landmarks: number[][]
-  index: number
+  box: FaceBox;
+  landmarks: number[][];
+  index: number;
 }
 
 interface DetectResult {
-  faces: DetectedFace[]
-  imageId: 'source' | 'target'
-  id: number
+  faces: DetectedFace[];
+  imageId: "source" | "target";
+  id: number;
 }
 
 interface SwapResult {
-  data: Float32Array
-  width: number
-  height: number
-  id: number
+  data: Float32Array;
+  width: number;
+  height: number;
+  id: number;
 }
 
 interface WorkerMessage {
-  type: 'ready' | 'phase' | 'progress' | 'detectResult' | 'swapResult' | 'error' | 'disposed'
-  payload?: unknown
+  type:
+    | "ready"
+    | "phase"
+    | "progress"
+    | "detectResult"
+    | "swapResult"
+    | "error"
+    | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id?: number
+  phase: string;
+  id?: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id?: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id?: number;
 }
 
 interface UseFaceSwapperWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
 }
 
 interface SwapParams {
-  sourceImage: ImageData
-  sourceLandmarks: number[][]
-  targetImage: ImageData
-  targetFaces: { landmarks: number[][]; box: FaceBox }[]
+  sourceImage: ImageData;
+  sourceLandmarks: number[][];
+  targetImage: ImageData;
+  targetFaces: { landmarks: number[][]; box: FaceBox }[];
 }
 
 /**
@@ -65,289 +76,311 @@ interface SwapParams {
 function float32ToImageData(
   data: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): ImageData {
-  const imageData = new ImageData(width, height)
-  const pixels = imageData.data
+  const imageData = new ImageData(width, height);
+  const pixels = imageData.data;
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 3
-      const dstIdx = (y * width + x) * 4
+      const srcIdx = (y * width + x) * 3;
+      const dstIdx = (y * width + x) * 4;
 
-      pixels[dstIdx] = Math.round(data[srcIdx] * 255) // R
-      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255) // G
-      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255) // B
-      pixels[dstIdx + 3] = 255 // A
+      pixels[dstIdx] = Math.round(data[srcIdx] * 255); // R
+      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255); // G
+      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255); // B
+      pixels[dstIdx + 3] = 255; // A
     }
   }
 
-  return imageData
+  return imageData;
 }
 
 /**
  * Convert ImageData to Float32Array HWC [0,1]
  */
 function imageDataToFloat32(imageData: ImageData): Float32Array {
-  const { width, height, data } = imageData
-  const result = new Float32Array(width * height * 3)
+  const { width, height, data } = imageData;
+  const result = new Float32Array(width * height * 3);
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 4
-      const dstIdx = (y * width + x) * 3
+      const srcIdx = (y * width + x) * 4;
+      const dstIdx = (y * width + x) * 3;
 
-      result[dstIdx] = data[srcIdx] / 255 // R
-      result[dstIdx + 1] = data[srcIdx + 1] / 255 // G
-      result[dstIdx + 2] = data[srcIdx + 2] / 255 // B
+      result[dstIdx] = data[srcIdx] / 255; // R
+      result[dstIdx + 1] = data[srcIdx + 1] / 255; // G
+      result[dstIdx + 2] = data[srcIdx + 2] / 255; // B
     }
   }
 
-  return result
+  return result;
 }
 
 /**
  * Convert ImageData to data URL
  */
 function imageDataToDataURL(imageData: ImageData): string {
-  const canvas = document.createElement('canvas')
-  canvas.width = imageData.width
-  canvas.height = imageData.height
-  const ctx = canvas.getContext('2d')!
-  ctx.putImageData(imageData, 0, 0)
-  return canvas.toDataURL('image/png')
+  const canvas = document.createElement("canvas");
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
 }
 
-export function useFaceSwapperWorker(options: UseFaceSwapperWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const detectCallbacksRef = useRef<Map<number, (result: DetectedFace[]) => void>>(new Map())
-  const swapCallbacksRef = useRef<Map<number, (result: { dataUrl: string }) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
-  const isInitializedRef = useRef(false)
+export function useFaceSwapperWorker(
+  options: UseFaceSwapperWorkerOptions = {},
+) {
+  const workerRef = useRef<Worker | null>(null);
+  const detectCallbacksRef = useRef<
+    Map<number, (result: DetectedFace[]) => void>
+  >(new Map());
+  const swapCallbacksRef = useRef<
+    Map<number, (result: { dataUrl: string }) => void>
+  >(new Map());
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
+  const isInitializedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
-    isInitializedRef.current = false
+    hasFailedRef.current = false;
+    isInitializedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/faceSwapper.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/faceSwapper.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'detectResult': {
-          const { faces, id } = payload as DetectResult
-          const callback = detectCallbacksRef.current.get(id)
+        case "detectResult": {
+          const { faces, id } = payload as DetectResult;
+          const callback = detectCallbacksRef.current.get(id);
           if (callback) {
-            callback(faces)
-            detectCallbacksRef.current.delete(id)
+            callback(faces);
+            detectCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'swapResult': {
-          const { data, width, height, id } = payload as SwapResult
-          const callback = swapCallbacksRef.current.get(id)
+        case "swapResult": {
+          const { data, width, height, id } = payload as SwapResult;
+          const callback = swapCallbacksRef.current.get(id);
           if (callback) {
             // Convert Float32Array to data URL
-            const imageData = float32ToImageData(data, width, height)
-            const dataUrl = imageDataToDataURL(imageData)
-            callback({ dataUrl })
-            swapCallbacksRef.current.delete(id)
+            const imageData = float32ToImageData(data, width, height);
+            const dataUrl = imageDataToDataURL(imageData);
+            callback({ dataUrl });
+            swapCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'ready':
-          isInitializedRef.current = true
-          break
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
-          break
+        case "ready":
+          isInitializedRef.current = true;
+          break;
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
-
-  const initModels = useCallback((enableEnhancement: boolean = false): Promise<void> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      const worker = workerRef.current
-      if (!worker) {
-        reject(new Error('Failed to create worker'))
-        return
-      }
-
-      if (isInitializedRef.current) {
-        resolve()
-        return
-      }
-
-      const id = idCounterRef.current++
-
-      const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'ready') {
-          worker.removeEventListener('message', handleMessage)
-          resolve()
-        } else if (e.data.type === 'error') {
-          worker.removeEventListener('message', handleMessage)
-          reject(new Error(e.data.payload as string))
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
+
+  const initModels = useCallback(
+    (enableEnhancement: boolean = false): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        const worker = workerRef.current;
+        if (!worker) {
+          reject(new Error("Failed to create worker"));
+          return;
         }
-      }
 
-      worker.addEventListener('message', handleMessage)
-      worker.postMessage({
-        type: 'init',
-        payload: {
-          id,
-          timeout: getDownloadTimeoutMs(),
-          enableEnhancement
+        if (isInitializedRef.current) {
+          resolve();
+          return;
         }
-      })
-    })
-  }, [ensureWorker])
-
-  const detectFaces = useCallback((
-    imageData: ImageData,
-    imageId: 'source' | 'target'
-  ): Promise<DetectedFace[]> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
-
-      const id = idCounterRef.current++
-      detectCallbacksRef.current.set(id, resolve)
 
-      // Convert ImageData to Float32Array
-      const float32Data = imageDataToFloat32(imageData)
+        const id = idCounterRef.current++;
 
-      // Set up error handler
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          detectCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
-        }
-      }
-      workerRef.current.addEventListener('message', handleError)
+        const handleMessage = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "ready") {
+            worker.removeEventListener("message", handleMessage);
+            resolve();
+          } else if (e.data.type === "error") {
+            worker.removeEventListener("message", handleMessage);
+            reject(new Error(e.data.payload as string));
+          }
+        };
 
-      workerRef.current.postMessage(
-        {
-          type: 'detect',
+        worker.addEventListener("message", handleMessage);
+        worker.postMessage({
+          type: "init",
           payload: {
-            imageData: float32Data,
-            width: imageData.width,
-            height: imageData.height,
-            imageId,
-            id
-          }
-        },
-        { transfer: [float32Data.buffer] }
-      )
-    })
-  }, [ensureWorker])
-
-  const swapFaces = useCallback((params: SwapParams): Promise<{ dataUrl: string }> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+            id,
+            timeout: getDownloadTimeoutMs(),
+            enableEnhancement,
+          },
+        });
+      });
+    },
+    [ensureWorker],
+  );
+
+  const detectFaces = useCallback(
+    (
+      imageData: ImageData,
+      imageId: "source" | "target",
+    ): Promise<DetectedFace[]> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
+        }
 
-      const id = idCounterRef.current++
-      swapCallbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        detectCallbacksRef.current.set(id, resolve);
 
-      // Convert ImageData to Float32Array
-      const sourceFloat32 = imageDataToFloat32(params.sourceImage)
-      const targetFloat32 = imageDataToFloat32(params.targetImage)
+        // Convert ImageData to Float32Array
+        const float32Data = imageDataToFloat32(imageData);
 
-      // Set up error handler
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          swapCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
+        // Set up error handler
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            detectCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "detect",
+            payload: {
+              imageData: float32Data,
+              width: imageData.width,
+              height: imageData.height,
+              imageId,
+              id,
+            },
+          },
+          { transfer: [float32Data.buffer] },
+        );
+      });
+    },
+    [ensureWorker],
+  );
+
+  const swapFaces = useCallback(
+    (params: SwapParams): Promise<{ dataUrl: string }> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
         }
-      }
-      workerRef.current.addEventListener('message', handleError)
 
-      workerRef.current.postMessage(
-        {
-          type: 'swap',
-          payload: {
-            sourceImage: sourceFloat32,
-            sourceWidth: params.sourceImage.width,
-            sourceHeight: params.sourceImage.height,
-            sourceLandmarks: params.sourceLandmarks,
-            targetImage: targetFloat32,
-            targetWidth: params.targetImage.width,
-            targetHeight: params.targetImage.height,
-            targetFaces: params.targetFaces,
-            id
+        const id = idCounterRef.current++;
+        swapCallbacksRef.current.set(id, resolve);
+
+        // Convert ImageData to Float32Array
+        const sourceFloat32 = imageDataToFloat32(params.sourceImage);
+        const targetFloat32 = imageDataToFloat32(params.targetImage);
+
+        // Set up error handler
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            swapCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
           }
-        },
-        { transfer: [sourceFloat32.buffer, targetFloat32.buffer] }
-      )
-    })
-  }, [ensureWorker])
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage(
+          {
+            type: "swap",
+            payload: {
+              sourceImage: sourceFloat32,
+              sourceWidth: params.sourceImage.width,
+              sourceHeight: params.sourceImage.height,
+              sourceLandmarks: params.sourceLandmarks,
+              targetImage: targetFloat32,
+              targetWidth: params.targetImage.width,
+              targetHeight: params.targetImage.height,
+              targetFaces: params.targetFaces,
+              id,
+            },
+          },
+          { transfer: [sourceFloat32.buffer, targetFloat32.buffer] },
+        );
+      });
+    },
+    [ensureWorker],
+  );
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    workerRef.current?.terminate()
-    workerRef.current = null
-    isInitializedRef.current = false
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+    isInitializedRef.current = false;
+  }, []);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
-
-  return { initModels, detectFaces, swapFaces, dispose, hasFailed, retryWorker }
+    createWorker();
+  }, [createWorker]);
+
+  return {
+    initModels,
+    detectFaces,
+    swapFaces,
+    dispose,
+    hasFailed,
+    retryWorker,
+  };
 }
 
-export type { DetectedFace, FaceBox }
+export type { DetectedFace, FaceBox };
diff --git a/src/hooks/useImageEraserWorker.ts b/src/hooks/useImageEraserWorker.ts
index d4e7d47c..0faadaa8 100644
--- a/src/hooks/useImageEraserWorker.ts
+++ b/src/hooks/useImageEraserWorker.ts
@@ -1,256 +1,270 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
-import { getDownloadTimeoutMs } from '@/stores/settingsStore'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
+import { getDownloadTimeoutMs } from "@/stores/settingsStore";
 
 interface WorkerMessage {
-  type: 'phase' | 'progress' | 'ready' | 'result' | 'error' | 'disposed'
-  payload?: unknown
+  type: "phase" | "progress" | "ready" | "result" | "error" | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id: number
+  phase: string;
+  id: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id: number;
 }
 
 interface ReadyPayload {
-  id: number
+  id: number;
 }
 
 interface ResultPayload {
-  data: Float32Array
-  width: number
-  height: number
-  id: number
+  data: Float32Array;
+  width: number;
+  height: number;
+  id: number;
 }
 
 export interface EraserResult {
-  data: Float32Array
-  width: number
-  height: number
+  data: Float32Array;
+  width: number;
+  height: number;
 }
 
 interface UseImageEraserWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onReady?: () => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onReady?: () => void;
+  onError?: (error: string) => void;
 }
 
-export function useImageEraserWorker(options: UseImageEraserWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
+export function useImageEraserWorker(
+  options: UseImageEraserWorkerOptions = {},
+) {
+  const workerRef = useRef<Worker | null>(null);
   const callbacksRef = useRef<Map<number, (result: EraserResult) => void>>(
-    new Map()
-  )
-  const readyCallbacksRef = useRef<Map<number, () => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const isInitializedRef = useRef(false)
-  const hasFailedRef = useRef(false)
+    new Map(),
+  );
+  const readyCallbacksRef = useRef<Map<number, () => void>>(new Map());
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const isInitializedRef = useRef(false);
+  const hasFailedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    isInitializedRef.current = false
-    hasFailedRef.current = false
+    isInitializedRef.current = false;
+    hasFailedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/imageEraser.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/imageEraser.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'ready': {
-          const { id } = payload as ReadyPayload
-          isInitializedRef.current = true
-          optionsRef.current.onReady?.()
-          const callback = readyCallbacksRef.current.get(id)
+        case "ready": {
+          const { id } = payload as ReadyPayload;
+          isInitializedRef.current = true;
+          optionsRef.current.onReady?.();
+          const callback = readyCallbacksRef.current.get(id);
           if (callback) {
-            callback()
-            readyCallbacksRef.current.delete(id)
+            callback();
+            readyCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'result': {
-          const { data, width, height, id } = payload as ResultPayload
-          const callback = callbacksRef.current.get(id)
+        case "result": {
+          const { data, width, height, id } = payload as ResultPayload;
+          const callback = callbacksRef.current.get(id);
           if (callback) {
-            callback({ data, width, height })
-            callbacksRef.current.delete(id)
+            callback({ data, width, height });
+            callbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
           // Reject all pending callbacks
           for (const [id] of callbacksRef.current) {
-            callbacksRef.current.delete(id)
+            callbacksRef.current.delete(id);
           }
           for (const [id] of readyCallbacksRef.current) {
-            readyCallbacksRef.current.delete(id)
+            readyCallbacksRef.current.delete(id);
           }
-          break
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-      isInitializedRef.current = false
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+      isInitializedRef.current = false;
+    };
+  }, [createWorker]);
 
   const initModel = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
-      ensureWorker()
+      ensureWorker();
 
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
       // If already initialized, resolve immediately
       if (isInitializedRef.current) {
-        resolve()
-        return
+        resolve();
+        return;
       }
 
-      const id = idCounterRef.current++
-      readyCallbacksRef.current.set(id, resolve)
+      const id = idCounterRef.current++;
+      readyCallbacksRef.current.set(id, resolve);
 
       // Set up error handler for this specific call
       const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          readyCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
+        if (e.data.type === "error") {
+          readyCallbacksRef.current.delete(id);
+          workerRef.current?.removeEventListener("message", handleError);
+          reject(new Error(e.data.payload as string));
         }
-      }
-      workerRef.current.addEventListener('message', handleError)
+      };
+      workerRef.current.addEventListener("message", handleError);
 
       workerRef.current.postMessage({
-        type: 'init',
+        type: "init",
         payload: {
           id,
-          timeout: getDownloadTimeoutMs()
-        }
-      })
-    })
-  }, [ensureWorker])
+          timeout: getDownloadTimeoutMs(),
+        },
+      });
+    });
+  }, [ensureWorker]);
 
   const removeObjects = useCallback(
     (
       imageData: Float32Array,
       maskData: Float32Array,
       width: number,
-      height: number
+      height: number,
     ): Promise<EraserResult> => {
       return new Promise((resolve, reject) => {
-        ensureWorker()
+        ensureWorker();
 
         if (!workerRef.current) {
-          reject(new Error('Worker not initialized'))
-          return
+          reject(new Error("Worker not initialized"));
+          return;
         }
 
-        const id = idCounterRef.current++
-        callbacksRef.current.set(id, resolve)
+        const id = idCounterRef.current++;
+        callbacksRef.current.set(id, resolve);
 
         // Set up error handler for this specific call
         const handleError = (e: MessageEvent<WorkerMessage>) => {
-          if (e.data.type === 'error') {
-            callbacksRef.current.delete(id)
-            workerRef.current?.removeEventListener('message', handleError)
-            reject(new Error(e.data.payload as string))
+          if (e.data.type === "error") {
+            callbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
           }
-        }
-        workerRef.current.addEventListener('message', handleError)
+        };
+        workerRef.current.addEventListener("message", handleError);
 
         // Clone data to transfer
-        const imageDataCopy = new Float32Array(imageData)
-        const maskDataCopy = new Float32Array(maskData)
+        const imageDataCopy = new Float32Array(imageData);
+        const maskDataCopy = new Float32Array(maskData);
 
         workerRef.current.postMessage(
           {
-            type: 'process',
+            type: "process",
             payload: {
               imageData: imageDataCopy,
               maskData: maskDataCopy,
               width,
               height,
-              id
-            }
+              id,
+            },
           },
-          { transfer: [imageDataCopy.buffer, maskDataCopy.buffer] }
-        )
-      })
+          { transfer: [imageDataCopy.buffer, maskDataCopy.buffer] },
+        );
+      });
     },
-    [ensureWorker]
-  )
+    [ensureWorker],
+  );
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    workerRef.current?.terminate()
-    workerRef.current = null
-    isInitializedRef.current = false
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+    isInitializedRef.current = false;
+  }, []);
 
-  const isInitialized = useCallback(() => isInitializedRef.current, [])
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
+  const isInitialized = useCallback(() => isInitializedRef.current, []);
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
   // Cancel ongoing processing by terminating and recreating the worker
   const cancel = useCallback(() => {
     // Clear all pending callbacks
-    callbacksRef.current.clear()
-    readyCallbacksRef.current.clear()
+    callbacksRef.current.clear();
+    readyCallbacksRef.current.clear();
     // Terminate and recreate worker
     if (workerRef.current) {
-      workerRef.current.terminate()
-      workerRef.current = null
+      workerRef.current.terminate();
+      workerRef.current = null;
     }
-    isInitializedRef.current = false
-    createWorker()
-  }, [createWorker])
-
-  return { initModel, removeObjects, dispose, isInitialized, hasFailed, retryWorker, cancel }
+    isInitializedRef.current = false;
+    createWorker();
+  }, [createWorker]);
+
+  return {
+    initModel,
+    removeObjects,
+    dispose,
+    isInitialized,
+    hasFailed,
+    retryWorker,
+    cancel,
+  };
 }
diff --git a/src/hooks/useInView.ts b/src/hooks/useInView.ts
index 668e3e9b..5fe17fbe 100644
--- a/src/hooks/useInView.ts
+++ b/src/hooks/useInView.ts
@@ -1,30 +1,32 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from "react";
 
-export function useInView<T extends Element>(options?: IntersectionObserverInit) {
-  const ref = useRef<T | null>(null)
-  const [isInView, setIsInView] = useState(false)
-  const root = options?.root ?? null
-  const rootMargin = options?.rootMargin ?? '200px'
-  const threshold = options?.threshold ?? 0
+export function useInView<T extends Element>(
+  options?: IntersectionObserverInit,
+) {
+  const ref = useRef<T | null>(null);
+  const [isInView, setIsInView] = useState(false);
+  const root = options?.root ?? null;
+  const rootMargin = options?.rootMargin ?? "200px";
+  const threshold = options?.threshold ?? 0;
 
   useEffect(() => {
-    if (isInView) return
-    const node = ref.current
-    if (!node) return
+    if (isInView) return;
+    const node = ref.current;
+    if (!node) return;
 
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
-          setIsInView(true)
-          observer.disconnect()
+          setIsInView(true);
+          observer.disconnect();
         }
       },
-      { root, rootMargin, threshold }
-    )
+      { root, rootMargin, threshold },
+    );
 
-    observer.observe(node)
-    return () => observer.disconnect()
-  }, [isInView, root, rootMargin, threshold])
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [isInView, root, rootMargin, threshold]);
 
-  return { ref, isInView }
+  return { ref, isInView };
 }
diff --git a/src/hooks/useMultiPhaseProgress.ts b/src/hooks/useMultiPhaseProgress.ts
index 640bf668..cff653b6 100644
--- a/src/hooks/useMultiPhaseProgress.ts
+++ b/src/hooks/useMultiPhaseProgress.ts
@@ -1,15 +1,15 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo } from "react";
 import type {
   PhaseConfig,
   ProcessingPhase,
   MultiPhaseProgress,
   ProgressDetail,
-  PhaseStatus
-} from '@/types/progress'
-import { formatTime } from '@/types/progress'
+  PhaseStatus,
+} from "@/types/progress";
+import { formatTime } from "@/types/progress";
 
 interface UseMultiPhaseProgressOptions {
-  phases: PhaseConfig[]
+  phases: PhaseConfig[];
 }
 
 export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
@@ -17,73 +17,76 @@ export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
     options.phases.map((config) => ({
       ...config,
       progress: 0,
-      status: 'pending' as PhaseStatus
-    }))
-  )
-  const [startTime, setStartTime] = useState<number | null>(null)
-  const [isActive, setIsActive] = useState(false)
+      status: "pending" as PhaseStatus,
+    })),
+  );
+  const [startTime, setStartTime] = useState<number | null>(null);
+  const [isActive, setIsActive] = useState(false);
 
   // Calculate overall progress from weighted phases
   const overallProgress = useMemo(() => {
     // If all phases are completed, return exactly 100 to avoid floating point issues
-    const allCompleted = phases.every((p) => p.status === 'completed')
+    const allCompleted = phases.every((p) => p.status === "completed");
     if (allCompleted && phases.length > 0) {
-      return 100
+      return 100;
     }
 
-    let totalWeight = 0
-    let weightedProgress = 0
+    let totalWeight = 0;
+    let weightedProgress = 0;
 
     phases.forEach((phase) => {
-      totalWeight += phase.weight
-      if (phase.status === 'completed') {
-        weightedProgress += phase.weight * 100
-      } else if (phase.status === 'active') {
-        weightedProgress += phase.weight * phase.progress
+      totalWeight += phase.weight;
+      if (phase.status === "completed") {
+        weightedProgress += phase.weight * 100;
+      } else if (phase.status === "active") {
+        weightedProgress += phase.weight * phase.progress;
       }
-    })
+    });
 
-    return totalWeight > 0 ? weightedProgress / totalWeight : 0
-  }, [phases])
+    return totalWeight > 0 ? weightedProgress / totalWeight : 0;
+  }, [phases]);
 
   // Calculate ETA based on elapsed time and progress
   const eta = useMemo(() => {
-    if (!startTime || overallProgress < 5) return null
-    const elapsed = (Date.now() - startTime) / 1000 // seconds
-    const totalEstimated = elapsed / (overallProgress / 100)
-    const remaining = totalEstimated - elapsed
-    if (remaining <= 0 || !isFinite(remaining)) return null
-    return formatTime(remaining)
-  }, [startTime, overallProgress])
+    if (!startTime || overallProgress < 5) return null;
+    const elapsed = (Date.now() - startTime) / 1000; // seconds
+    const totalEstimated = elapsed / (overallProgress / 100);
+    const remaining = totalEstimated - elapsed;
+    if (remaining <= 0 || !isFinite(remaining)) return null;
+    return formatTime(remaining);
+  }, [startTime, overallProgress]);
 
   // Get current phase index
   const currentPhaseIndex = useMemo(() => {
-    const activeIndex = phases.findIndex((p) => p.status === 'active')
-    if (activeIndex >= 0) return activeIndex
+    const activeIndex = phases.findIndex((p) => p.status === "active");
+    if (activeIndex >= 0) return activeIndex;
     // If no active phase, return last completed or first pending
-    const lastCompleted = phases.reduce((lastIdx: number, p: ProcessingPhase, idx: number) =>
-      p.status === 'completed' ? idx : lastIdx, -1)
-    return lastCompleted >= 0 ? lastCompleted : 0
-  }, [phases])
+    const lastCompleted = phases.reduce(
+      (lastIdx: number, p: ProcessingPhase, idx: number) =>
+        p.status === "completed" ? idx : lastIdx,
+      -1,
+    );
+    return lastCompleted >= 0 ? lastCompleted : 0;
+  }, [phases]);
 
   // Start a specific phase (completes all previous phases)
   const startPhase = useCallback((phaseId: string) => {
     setPhases((prev) => {
-      const phaseIndex = prev.findIndex((p) => p.id === phaseId)
+      const phaseIndex = prev.findIndex((p) => p.id === phaseId);
       return prev.map((phase, idx) => {
         if (phase.id === phaseId) {
-          return { ...phase, status: 'active', progress: 0 }
+          return { ...phase, status: "active", progress: 0 };
         }
         // Complete all phases before the new one
-        if (idx < phaseIndex && phase.status !== 'completed') {
-          return { ...phase, status: 'completed', progress: 100 }
+        if (idx < phaseIndex && phase.status !== "completed") {
+          return { ...phase, status: "completed", progress: 100 };
         }
-        return phase
-      })
-    })
-    setIsActive(true)
-    setStartTime((prev) => prev ?? Date.now())
-  }, [])
+        return phase;
+      });
+    });
+    setIsActive(true);
+    setStartTime((prev) => prev ?? Date.now());
+  }, []);
 
   // Update progress for a specific phase
   const updatePhase = useCallback(
@@ -95,40 +98,40 @@ export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
               ...phase,
               progress: Math.min(100, Math.max(0, progress)),
               detail,
-              status: phase.status === 'pending' ? 'active' : phase.status
-            }
+              status: phase.status === "pending" ? "active" : phase.status,
+            };
           }
-          return phase
-        })
-      )
+          return phase;
+        }),
+      );
     },
-    []
-  )
+    [],
+  );
 
   // Complete a specific phase
   const completePhase = useCallback((phaseId: string) => {
     setPhases((prev) =>
       prev.map((phase) => {
         if (phase.id === phaseId) {
-          return { ...phase, status: 'completed', progress: 100 }
+          return { ...phase, status: "completed", progress: 100 };
         }
-        return phase
-      })
-    )
-  }, [])
+        return phase;
+      }),
+    );
+  }, []);
 
   // Set error on a specific phase
   const setError = useCallback((phaseId: string) => {
     setPhases((prev) =>
       prev.map((phase) => {
         if (phase.id === phaseId) {
-          return { ...phase, status: 'error' }
+          return { ...phase, status: "error" };
         }
-        return phase
-      })
-    )
-    setIsActive(false)
-  }, [])
+        return phase;
+      }),
+    );
+    setIsActive(false);
+  }, []);
 
   // Reset all progress
   const reset = useCallback(() => {
@@ -136,13 +139,13 @@ export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
       options.phases.map((config) => ({
         ...config,
         progress: 0,
-        status: 'pending' as PhaseStatus,
-        detail: undefined
-      }))
-    )
-    setStartTime(null)
-    setIsActive(false)
-  }, [options.phases])
+        status: "pending" as PhaseStatus,
+        detail: undefined,
+      })),
+    );
+    setStartTime(null);
+    setIsActive(false);
+  }, [options.phases]);
 
   // Reset and start a specific phase atomically (useful for re-running)
   const resetAndStart = useCallback(
@@ -151,27 +154,30 @@ export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
         options.phases.map((config) => ({
           ...config,
           progress: 0,
-          status: config.id === phaseId ? ('active' as PhaseStatus) : ('pending' as PhaseStatus),
-          detail: undefined
-        }))
-      )
-      setStartTime(Date.now())
-      setIsActive(true)
+          status:
+            config.id === phaseId
+              ? ("active" as PhaseStatus)
+              : ("pending" as PhaseStatus),
+          detail: undefined,
+        })),
+      );
+      setStartTime(Date.now());
+      setIsActive(true);
     },
-    [options.phases]
-  )
+    [options.phases],
+  );
 
   // Complete all phases (finish processing)
   const complete = useCallback(() => {
     setPhases((prev) =>
       prev.map((phase) => ({
         ...phase,
-        status: 'completed',
-        progress: 100
-      }))
-    )
-    setIsActive(false)
-  }, [])
+        status: "completed",
+        progress: 100,
+      })),
+    );
+    setIsActive(false);
+  }, []);
 
   const progress: MultiPhaseProgress = {
     phases,
@@ -179,8 +185,8 @@ export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
     overallProgress,
     startTime,
     eta,
-    isActive
-  }
+    isActive,
+  };
 
   return {
     progress,
@@ -190,6 +196,6 @@ export function useMultiPhaseProgress(options: UseMultiPhaseProgressOptions) {
     setError,
     reset,
     resetAndStart,
-    complete
-  }
+    complete,
+  };
 }
diff --git a/src/hooks/useSegmentAnythingWorker.ts b/src/hooks/useSegmentAnythingWorker.ts
index 79baa017..8dab396f 100644
--- a/src/hooks/useSegmentAnythingWorker.ts
+++ b/src/hooks/useSegmentAnythingWorker.ts
@@ -1,303 +1,346 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
 
 interface PointPrompt {
-  point: [number, number] // Normalized coordinates (0-1)
-  label: 0 | 1 // 0 = negative (exclude), 1 = positive (include)
+  point: [number, number]; // Normalized coordinates (0-1)
+  label: 0 | 1; // 0 = negative (exclude), 1 = positive (include)
 }
 
 export interface MaskResult {
-  mask: Uint8Array
-  width: number
-  height: number
-  scores: Float32Array
+  mask: Uint8Array;
+  width: number;
+  height: number;
+  scores: Float32Array;
 }
 
 interface UseSegmentAnythingOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onReady?: () => void
-  onSegmented?: () => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onReady?: () => void;
+  onSegmented?: () => void;
+  onError?: (error: string) => void;
 }
 
 // Worker message types
 interface PhasePayload {
-  phase: string
-  id: number
+  phase: string;
+  id: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id: number;
 }
 
 interface MaskResultPayload {
-  mask: ArrayBuffer
-  width: number
-  height: number
-  scores: ArrayBuffer
-  id: number
+  mask: ArrayBuffer;
+  width: number;
+  height: number;
+  scores: ArrayBuffer;
+  id: number;
 }
 
 interface ErrorPayload {
-  message: string
-  id: number
+  message: string;
+  id: number;
 }
 
 interface WorkerMessage {
-  type: 'phase' | 'progress' | 'ready' | 'segmented' | 'maskResult' | 'reset' | 'error' | 'disposed'
-  payload: PhasePayload | ProgressPayload | MaskResultPayload | ErrorPayload | { id: number }
+  type:
+    | "phase"
+    | "progress"
+    | "ready"
+    | "segmented"
+    | "maskResult"
+    | "reset"
+    | "error"
+    | "disposed";
+  payload:
+    | PhasePayload
+    | ProgressPayload
+    | MaskResultPayload
+    | ErrorPayload
+    | { id: number };
 }
 
-export function useSegmentAnythingWorker(options: UseSegmentAnythingOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const optionsRef = useRef(options)
-  const idCounterRef = useRef(0)
-  const maskCallbacksRef = useRef<Map<number, (result: MaskResult) => void>>(new Map())
-  const segmentCallbacksRef = useRef<Map<number, () => void>>(new Map())
-  const resetCallbacksRef = useRef<Map<number, () => void>>(new Map())
-  const initCallbacksRef = useRef<Map<number, () => void>>(new Map())
-  const hasFailedRef = useRef(false)
-  const isInitializedRef = useRef(false)
-  const isSegmentedRef = useRef(false)
+export function useSegmentAnythingWorker(
+  options: UseSegmentAnythingOptions = {},
+) {
+  const workerRef = useRef<Worker | null>(null);
+  const optionsRef = useRef(options);
+  const idCounterRef = useRef(0);
+  const maskCallbacksRef = useRef<Map<number, (result: MaskResult) => void>>(
+    new Map(),
+  );
+  const segmentCallbacksRef = useRef<Map<number, () => void>>(new Map());
+  const resetCallbacksRef = useRef<Map<number, () => void>>(new Map());
+  const initCallbacksRef = useRef<Map<number, () => void>>(new Map());
+  const hasFailedRef = useRef(false);
+  const isInitializedRef = useRef(false);
+  const isSegmentedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
-    isInitializedRef.current = false
-    isSegmentedRef.current = false
+    hasFailedRef.current = false;
+    isInitializedRef.current = false;
+    isSegmentedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/segmentAnything.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/segmentAnything.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'ready': {
-          const { id } = payload as { id: number }
-          isInitializedRef.current = true
-          optionsRef.current.onReady?.()
-          const callback = initCallbacksRef.current.get(id)
+        case "ready": {
+          const { id } = payload as { id: number };
+          isInitializedRef.current = true;
+          optionsRef.current.onReady?.();
+          const callback = initCallbacksRef.current.get(id);
           if (callback) {
-            callback()
-            initCallbacksRef.current.delete(id)
+            callback();
+            initCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'segmented': {
-          const { id } = payload as { id: number }
-          isSegmentedRef.current = true
-          optionsRef.current.onSegmented?.()
-          const callback = segmentCallbacksRef.current.get(id)
+        case "segmented": {
+          const { id } = payload as { id: number };
+          isSegmentedRef.current = true;
+          optionsRef.current.onSegmented?.();
+          const callback = segmentCallbacksRef.current.get(id);
           if (callback) {
-            callback()
-            segmentCallbacksRef.current.delete(id)
+            callback();
+            segmentCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'maskResult': {
-          const { mask, width, height, scores, id } = payload as MaskResultPayload
-          const callback = maskCallbacksRef.current.get(id)
+        case "maskResult": {
+          const { mask, width, height, scores, id } =
+            payload as MaskResultPayload;
+          const callback = maskCallbacksRef.current.get(id);
           if (callback) {
             callback({
               mask: new Uint8Array(mask),
               width,
               height,
-              scores: new Float32Array(scores)
-            })
-            maskCallbacksRef.current.delete(id)
+              scores: new Float32Array(scores),
+            });
+            maskCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'reset': {
-          const { id } = payload as { id: number }
-          isSegmentedRef.current = false
-          const callback = resetCallbacksRef.current.get(id)
+        case "reset": {
+          const { id } = payload as { id: number };
+          isSegmentedRef.current = false;
+          const callback = resetCallbacksRef.current.get(id);
           if (callback) {
-            callback()
-            resetCallbacksRef.current.delete(id)
+            callback();
+            resetCallbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'error': {
-          const { message } = payload as ErrorPayload
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(message)
-          break
+        case "error": {
+          const { message } = payload as ErrorPayload;
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(message);
+          break;
         }
-        case 'disposed':
-          isSegmentedRef.current = false
-          break
+        case "disposed":
+          isSegmentedRef.current = false;
+          break;
       }
-    }
+    };
 
     workerRef.current.onerror = (e) => {
-      console.error('Worker error:', e)
-      hasFailedRef.current = true
-      optionsRef.current.onError?.(e.message || 'Worker error')
-    }
-  }, [])
+      console.error("Worker error:", e);
+      hasFailedRef.current = true;
+      optionsRef.current.onError?.(e.message || "Worker error");
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker on mount
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose', payload: {} })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose", payload: {} });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   const initModel = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
-      ensureWorker()
+      ensureWorker();
 
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
-      const id = idCounterRef.current++
-      initCallbacksRef.current.set(id, resolve)
+      const id = idCounterRef.current++;
+      initCallbacksRef.current.set(id, resolve);
 
       const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error' && (e.data.payload as ErrorPayload).id === id) {
-          initCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error((e.data.payload as ErrorPayload).message))
+        if (
+          e.data.type === "error" &&
+          (e.data.payload as ErrorPayload).id === id
+        ) {
+          initCallbacksRef.current.delete(id);
+          workerRef.current?.removeEventListener("message", handleError);
+          reject(new Error((e.data.payload as ErrorPayload).message));
         }
-      }
-      workerRef.current.addEventListener('message', handleError)
+      };
+      workerRef.current.addEventListener("message", handleError);
 
-      workerRef.current.postMessage({ type: 'init', payload: { id } })
-    })
-  }, [ensureWorker])
+      workerRef.current.postMessage({ type: "init", payload: { id } });
+    });
+  }, [ensureWorker]);
 
-  const segmentImage = useCallback((imageDataUrl: string): Promise<void> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
+  const segmentImage = useCallback(
+    (imageDataUrl: string): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
 
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
-
-      const id = idCounterRef.current++
-      segmentCallbacksRef.current.set(id, resolve)
-
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error' && (e.data.payload as ErrorPayload).id === id) {
-          segmentCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error((e.data.payload as ErrorPayload).message))
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
         }
-      }
-      workerRef.current.addEventListener('message', handleError)
 
-      workerRef.current.postMessage({ type: 'segment', payload: { id, imageDataUrl } })
-    })
-  }, [ensureWorker])
-
-  const decodeMask = useCallback((points: PointPrompt[]): Promise<MaskResult> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
-
-      const id = idCounterRef.current++
-      maskCallbacksRef.current.set(id, resolve)
-
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error' && (e.data.payload as ErrorPayload).id === id) {
-          maskCallbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error((e.data.payload as ErrorPayload).message))
+        const id = idCounterRef.current++;
+        segmentCallbacksRef.current.set(id, resolve);
+
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (
+            e.data.type === "error" &&
+            (e.data.payload as ErrorPayload).id === id
+          ) {
+            segmentCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error((e.data.payload as ErrorPayload).message));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage({
+          type: "segment",
+          payload: { id, imageDataUrl },
+        });
+      });
+    },
+    [ensureWorker],
+  );
+
+  const decodeMask = useCallback(
+    (points: PointPrompt[]): Promise<MaskResult> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
+
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
         }
-      }
-      workerRef.current.addEventListener('message', handleError)
 
-      workerRef.current.postMessage({ type: 'decodeMask', payload: { id, points } })
-    })
-  }, [ensureWorker])
+        const id = idCounterRef.current++;
+        maskCallbacksRef.current.set(id, resolve);
+
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (
+            e.data.type === "error" &&
+            (e.data.payload as ErrorPayload).id === id
+          ) {
+            maskCallbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error((e.data.payload as ErrorPayload).message));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage({
+          type: "decodeMask",
+          payload: { id, points },
+        });
+      });
+    },
+    [ensureWorker],
+  );
 
   const reset = useCallback((): Promise<void> => {
     return new Promise((resolve, reject) => {
-      ensureWorker()
+      ensureWorker();
 
       if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
+        reject(new Error("Worker not initialized"));
+        return;
       }
 
-      const id = idCounterRef.current++
-      resetCallbacksRef.current.set(id, resolve)
+      const id = idCounterRef.current++;
+      resetCallbacksRef.current.set(id, resolve);
 
-      workerRef.current.postMessage({ type: 'reset', payload: { id } })
-    })
-  }, [ensureWorker])
+      workerRef.current.postMessage({ type: "reset", payload: { id } });
+    });
+  }, [ensureWorker]);
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose', payload: {} })
-    workerRef.current?.terminate()
-    workerRef.current = null
-    isSegmentedRef.current = false
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose", payload: {} });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+    isSegmentedRef.current = false;
+  }, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
-  const checkIsInitialized = useCallback(() => isInitializedRef.current, [])
-  const checkIsSegmented = useCallback(() => isSegmentedRef.current, [])
-  const checkHasFailed = useCallback(() => hasFailedRef.current, [])
+  const checkIsInitialized = useCallback(() => isInitializedRef.current, []);
+  const checkIsSegmented = useCallback(() => isSegmentedRef.current, []);
+  const checkHasFailed = useCallback(() => hasFailedRef.current, []);
 
   // Cancel ongoing processing by terminating and recreating the worker
   const cancel = useCallback(() => {
     // Clear all pending callbacks
-    maskCallbacksRef.current.clear()
-    segmentCallbacksRef.current.clear()
-    resetCallbacksRef.current.clear()
-    initCallbacksRef.current.clear()
+    maskCallbacksRef.current.clear();
+    segmentCallbacksRef.current.clear();
+    resetCallbacksRef.current.clear();
+    initCallbacksRef.current.clear();
     // Terminate and recreate worker
     if (workerRef.current) {
-      workerRef.current.terminate()
-      workerRef.current = null
+      workerRef.current.terminate();
+      workerRef.current = null;
     }
-    isInitializedRef.current = false
-    isSegmentedRef.current = false
-    createWorker()
-  }, [createWorker])
+    isInitializedRef.current = false;
+    isSegmentedRef.current = false;
+    createWorker();
+  }, [createWorker]);
 
   return {
     initModel,
@@ -309,6 +352,6 @@ export function useSegmentAnythingWorker(options: UseSegmentAnythingOptions = {}
     isInitialized: checkIsInitialized,
     isSegmented: checkIsSegmented,
     hasFailed: checkHasFailed,
-    cancel
-  }
+    cancel,
+  };
 }
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
index d9c7753b..e60cecaf 100644
--- a/src/hooks/useToast.ts
+++ b/src/hooks/useToast.ts
@@ -1,71 +1,71 @@
-import * as React from "react"
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+import * as React from "react";
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
+    });
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
-}
+  toastTimeouts.set(toastId, timeout);
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -73,25 +73,25 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
     case "UPDATE_TOAST":
       return {
         ...state,
         toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
-      }
+      };
 
     case "DISMISS_TOAST": {
-      const { toastId } = action
+      const { toastId } = action;
 
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+          addToRemoveQueue(toast.id);
+        });
       }
 
       return {
@@ -102,46 +102,46 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
-      }
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+    listener(memoryState);
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
@@ -150,36 +150,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };
diff --git a/src/hooks/useUpscalerWorker.ts b/src/hooks/useUpscalerWorker.ts
index a2132a1e..c1ba9e22 100644
--- a/src/hooks/useUpscalerWorker.ts
+++ b/src/hooks/useUpscalerWorker.ts
@@ -1,202 +1,215 @@
-import { useRef, useCallback, useEffect } from 'react'
-import type { ProgressDetail } from '@/types/progress'
+import { useRef, useCallback, useEffect } from "react";
+import type { ProgressDetail } from "@/types/progress";
 
-type ModelType = 'slim' | 'medium' | 'thick'
-type ScaleType = '2x' | '3x' | '4x'
+type ModelType = "slim" | "medium" | "thick";
+type ScaleType = "2x" | "3x" | "4x";
 
 interface UpscaleResult {
-  imageData: ImageData
-  width: number
-  height: number
-  id: number
+  imageData: ImageData;
+  width: number;
+  height: number;
+  id: number;
 }
 
 interface WorkerMessage {
-  type: 'loaded' | 'phase' | 'progress' | 'result' | 'error' | 'disposed'
-  payload?: unknown
+  type: "loaded" | "phase" | "progress" | "result" | "error" | "disposed";
+  payload?: unknown;
 }
 
 interface PhasePayload {
-  phase: string
-  id?: number
+  phase: string;
+  id?: number;
 }
 
 interface ProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
-  id?: number
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
+  id?: number;
 }
 
 interface UseUpscalerWorkerOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: ProgressDetail) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (
+    phase: string,
+    progress: number,
+    detail?: ProgressDetail,
+  ) => void;
+  onError?: (error: string) => void;
 }
 
 // Helper function to convert ImageData to data URL
 function imageDataToDataURL(
   imageData: ImageData,
   width: number,
-  height: number
+  height: number,
 ): string {
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d')!
-  ctx.putImageData(imageData, 0, 0)
-  return canvas.toDataURL('image/png')
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
 }
 
 export function useUpscalerWorker(options: UseUpscalerWorkerOptions = {}) {
-  const workerRef = useRef<Worker | null>(null)
-  const callbacksRef = useRef<Map<number, (result: string) => void>>(new Map())
-  const idCounterRef = useRef(0)
-  const optionsRef = useRef(options)
-  const hasFailedRef = useRef(false)
+  const workerRef = useRef<Worker | null>(null);
+  const callbacksRef = useRef<Map<number, (result: string) => void>>(new Map());
+  const idCounterRef = useRef(0);
+  const optionsRef = useRef(options);
+  const hasFailedRef = useRef(false);
 
   // Keep options ref up to date
-  optionsRef.current = options
+  optionsRef.current = options;
 
   const createWorker = useCallback(() => {
     if (workerRef.current) {
-      workerRef.current.terminate()
+      workerRef.current.terminate();
     }
-    hasFailedRef.current = false
+    hasFailedRef.current = false;
 
     workerRef.current = new Worker(
-      new URL('../workers/upscaler.worker.ts', import.meta.url),
-      { type: 'module' }
-    )
+      new URL("../workers/upscaler.worker.ts", import.meta.url),
+      { type: "module" },
+    );
 
     workerRef.current.onmessage = (e: MessageEvent<WorkerMessage>) => {
-      const { type, payload } = e.data
+      const { type, payload } = e.data;
 
       switch (type) {
-        case 'phase': {
-          const { phase } = payload as PhasePayload
-          optionsRef.current.onPhase?.(phase)
-          break
+        case "phase": {
+          const { phase } = payload as PhasePayload;
+          optionsRef.current.onPhase?.(phase);
+          break;
         }
-        case 'progress': {
-          const { phase, progress, detail } = payload as ProgressPayload
-          optionsRef.current.onProgress?.(phase, progress, detail)
-          break
+        case "progress": {
+          const { phase, progress, detail } = payload as ProgressPayload;
+          optionsRef.current.onProgress?.(phase, progress, detail);
+          break;
         }
-        case 'result': {
-          const { imageData, width, height, id } = payload as UpscaleResult
-          const callback = callbacksRef.current.get(id)
+        case "result": {
+          const { imageData, width, height, id } = payload as UpscaleResult;
+          const callback = callbacksRef.current.get(id);
           if (callback) {
             // Convert ImageData to data URL in main thread
-            const dataURL = imageDataToDataURL(imageData, width, height)
-            callback(dataURL)
-            callbacksRef.current.delete(id)
+            const dataURL = imageDataToDataURL(imageData, width, height);
+            callback(dataURL);
+            callbacksRef.current.delete(id);
           }
-          break
+          break;
         }
-        case 'error':
-          hasFailedRef.current = true
-          optionsRef.current.onError?.(payload as string)
-          break
+        case "error":
+          hasFailedRef.current = true;
+          optionsRef.current.onError?.(payload as string);
+          break;
       }
-    }
-  }, [])
+    };
+  }, []);
 
   const ensureWorker = useCallback(() => {
     if (!workerRef.current) {
-      createWorker()
+      createWorker();
     }
-  }, [createWorker])
+  }, [createWorker]);
 
   // Initialize worker
   useEffect(() => {
-    createWorker()
+    createWorker();
 
     return () => {
-      workerRef.current?.postMessage({ type: 'dispose' })
-      workerRef.current?.terminate()
-      workerRef.current = null
-    }
-  }, [createWorker])
+      workerRef.current?.postMessage({ type: "dispose" });
+      workerRef.current?.terminate();
+      workerRef.current = null;
+    };
+  }, [createWorker]);
 
   const loadModel = useCallback(
     (model: ModelType, scale: ScaleType): Promise<void> => {
       return new Promise((resolve, reject) => {
-        ensureWorker()
+        ensureWorker();
 
         if (!workerRef.current) {
-          reject(new Error('Worker not initialized'))
-          return
+          reject(new Error("Worker not initialized"));
+          return;
         }
 
-        const id = idCounterRef.current++
+        const id = idCounterRef.current++;
 
         const handleMessage = (e: MessageEvent<WorkerMessage>) => {
-          if (e.data.type === 'loaded') {
-            workerRef.current?.removeEventListener('message', handleMessage)
-            resolve()
-          } else if (e.data.type === 'error') {
-            workerRef.current?.removeEventListener('message', handleMessage)
-            reject(new Error(e.data.payload as string))
+          if (e.data.type === "loaded") {
+            workerRef.current?.removeEventListener("message", handleMessage);
+            resolve();
+          } else if (e.data.type === "error") {
+            workerRef.current?.removeEventListener("message", handleMessage);
+            reject(new Error(e.data.payload as string));
           }
-        }
-
-        workerRef.current.addEventListener('message', handleMessage)
-        workerRef.current.postMessage({ type: 'load', payload: { model, scale, id } })
-      })
+        };
+
+        workerRef.current.addEventListener("message", handleMessage);
+        workerRef.current.postMessage({
+          type: "load",
+          payload: { model, scale, id },
+        });
+      });
     },
-    [ensureWorker]
-  )
-
-  const upscale = useCallback((imageData: ImageData): Promise<string> => {
-    return new Promise((resolve, reject) => {
-      ensureWorker()
-
-      if (!workerRef.current) {
-        reject(new Error('Worker not initialized'))
-        return
-      }
+    [ensureWorker],
+  );
 
-      const id = idCounterRef.current++
-      callbacksRef.current.set(id, resolve)
+  const upscale = useCallback(
+    (imageData: ImageData): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        ensureWorker();
 
-      // Set up error handler for this specific call
-      const handleError = (e: MessageEvent<WorkerMessage>) => {
-        if (e.data.type === 'error') {
-          callbacksRef.current.delete(id)
-          workerRef.current?.removeEventListener('message', handleError)
-          reject(new Error(e.data.payload as string))
+        if (!workerRef.current) {
+          reject(new Error("Worker not initialized"));
+          return;
         }
-      }
-      workerRef.current.addEventListener('message', handleError)
 
-      workerRef.current.postMessage({ type: 'upscale', payload: { imageData, id } })
-    })
-  }, [ensureWorker])
+        const id = idCounterRef.current++;
+        callbacksRef.current.set(id, resolve);
+
+        // Set up error handler for this specific call
+        const handleError = (e: MessageEvent<WorkerMessage>) => {
+          if (e.data.type === "error") {
+            callbacksRef.current.delete(id);
+            workerRef.current?.removeEventListener("message", handleError);
+            reject(new Error(e.data.payload as string));
+          }
+        };
+        workerRef.current.addEventListener("message", handleError);
+
+        workerRef.current.postMessage({
+          type: "upscale",
+          payload: { imageData, id },
+        });
+      });
+    },
+    [ensureWorker],
+  );
 
   const dispose = useCallback(() => {
-    workerRef.current?.postMessage({ type: 'dispose' })
-    workerRef.current?.terminate()
-    workerRef.current = null
-  }, [])
+    workerRef.current?.postMessage({ type: "dispose" });
+    workerRef.current?.terminate();
+    workerRef.current = null;
+  }, []);
 
-  const hasFailed = useCallback(() => hasFailedRef.current, [])
+  const hasFailed = useCallback(() => hasFailedRef.current, []);
 
   const retryWorker = useCallback(() => {
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
   // Cancel ongoing processing by terminating and recreating the worker
   const cancel = useCallback(() => {
     // Clear all pending callbacks
-    callbacksRef.current.clear()
+    callbacksRef.current.clear();
     // Terminate and recreate worker
     if (workerRef.current) {
-      workerRef.current.terminate()
-      workerRef.current = null
+      workerRef.current.terminate();
+      workerRef.current = null;
     }
-    createWorker()
-  }, [createWorker])
+    createWorker();
+  }, [createWorker]);
 
-  return { loadModel, upscale, dispose, hasFailed, retryWorker, cancel }
+  return { loadModel, upscale, dispose, hasFailed, retryWorker, cancel };
 }
diff --git a/src/hooks/useZImage.ts b/src/hooks/useZImage.ts
index 7928d3c8..51caf84e 100644
--- a/src/hooks/useZImage.ts
+++ b/src/hooks/useZImage.ts
@@ -8,54 +8,51 @@
  * - HTTP Range requests for resume support
  */
 
-import { useCallback, useRef, useEffect } from 'react'
-import type { GenerationParams } from '@/types/stable-diffusion'
-import { useSDModelsStore } from '@/stores/sdModelsStore'
-import { ChunkedDownloader } from '@/lib/chunkedDownloader'
-import { getDownloadTimeoutMs } from '@/stores/settingsStore'
-import type { ProgressDetail } from '@/types/progress'
+import { useCallback, useRef, useEffect } from "react";
+import type { GenerationParams } from "@/types/stable-diffusion";
+import { useSDModelsStore } from "@/stores/sdModelsStore";
+import { ChunkedDownloader } from "@/lib/chunkedDownloader";
+import { getDownloadTimeoutMs } from "@/stores/settingsStore";
+import type { ProgressDetail } from "@/types/progress";
 
 // Model URLs
 const MODELS = {
   llm: {
-    url: 'https://huggingface.co/unsloth/Qwen3-4B-Instruct-2507-GGUF/resolve/main/Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf',
-    name: 'Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf',
-    size: 2400000000
+    url: "https://huggingface.co/unsloth/Qwen3-4B-Instruct-2507-GGUF/resolve/main/Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf",
+    name: "Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf",
+    size: 2400000000,
   },
   vae: {
-    url: 'https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/vae/ae.safetensors',
-    name: 'ae.safetensors',
-    size: 335000000
-  }
-}
+    url: "https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/vae/ae.safetensors",
+    name: "ae.safetensors",
+    size: 335000000,
+  },
+};
 
 interface UseZImageOptions {
-  onPhase?: (phase: string) => void
-  onProgress?: (phase: string, progress: number, detail?: unknown) => void
-  onError?: (error: string) => void
+  onPhase?: (phase: string) => void;
+  onProgress?: (phase: string, progress: number, detail?: unknown) => void;
+  onError?: (error: string) => void;
 }
 
 export function useZImage(options: UseZImageOptions = {}) {
   // Use store for persistent state
-  const {
-    updateBinaryStatus,
-    updateVaeStatus,
-    updateLlmStatus
-  } = useSDModelsStore()
+  const { updateBinaryStatus, updateVaeStatus, updateLlmStatus } =
+    useSDModelsStore();
 
-  const optionsRef = useRef(options)
+  const optionsRef = useRef(options);
 
   // Track active downloader instances for cancellation
   const downloadersRef = useRef<{
-    llm?: ChunkedDownloader
-    vae?: ChunkedDownloader
-    binary?: ChunkedDownloader
-  }>({})
+    llm?: ChunkedDownloader;
+    vae?: ChunkedDownloader;
+    binary?: ChunkedDownloader;
+  }>({});
 
   // Update options ref when options change
   useEffect(() => {
-    optionsRef.current = options
-  }, [options])
+    optionsRef.current = options;
+  }, [options]);
 
   /**
    * Download LLM model
@@ -64,72 +61,114 @@ export function useZImage(options: UseZImageOptions = {}) {
     try {
       // Check if Electron API is available (required for local generation)
       if (!window.electronAPI) {
-        throw new Error('Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.')
+        throw new Error(
+          "Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.",
+        );
       }
 
       // Check if file already exists before starting download
-      const checkResult = await window.electronAPI?.sdCheckAuxiliaryModels()
+      const checkResult = await window.electronAPI?.sdCheckAuxiliaryModels();
       if (checkResult?.success && checkResult.llmExists) {
-        console.log('[useZImage] LLM already exists, skipping download')
-        updateLlmStatus({ downloaded: true, downloading: false, progress: 100, error: null })
-        optionsRef.current.onProgress?.('download-llm', 100, { current: 100, total: 100, unit: 'percent' })
-        return
+        console.log("[useZImage] LLM already exists, skipping download");
+        updateLlmStatus({
+          downloaded: true,
+          downloading: false,
+          progress: 100,
+          error: null,
+        });
+        optionsRef.current.onProgress?.("download-llm", 100, {
+          current: 100,
+          total: 100,
+          unit: "percent",
+        });
+        return;
       }
 
       // Get download path
-      const pathResult = await window.electronAPI?.sdGetAuxiliaryModelDownloadPath('llm')
+      const pathResult =
+        await window.electronAPI?.sdGetAuxiliaryModelDownloadPath("llm");
       if (!pathResult?.success || !pathResult.path) {
-        throw new Error('Failed to get LLM download path')
+        throw new Error("Failed to get LLM download path");
       }
 
       // Start download
-      updateLlmStatus({ downloaded: false, downloading: true, progress: 0, error: null })
-      optionsRef.current.onPhase?.('download-llm')
-      console.log('[useZImage] Starting LLM download...')
+      updateLlmStatus({
+        downloaded: false,
+        downloading: true,
+        progress: 0,
+        error: null,
+      });
+      optionsRef.current.onPhase?.("download-llm");
+      console.log("[useZImage] Starting LLM download...");
 
       // Create and track downloader instance
-      const downloader = new ChunkedDownloader()
-      downloadersRef.current.llm = downloader
+      const downloader = new ChunkedDownloader();
+      downloadersRef.current.llm = downloader;
 
       const result = await downloader.download({
         url: MODELS.llm.url,
         destPath: pathResult.path,
         onProgress: (progress) => {
-          updateLlmStatus({ downloading: true, downloaded: false, progress: progress.progress, detail: progress.detail })
-          optionsRef.current.onProgress?.('download-llm', progress.progress, progress.detail)
+          updateLlmStatus({
+            downloading: true,
+            downloaded: false,
+            progress: progress.progress,
+            detail: progress.detail,
+          });
+          optionsRef.current.onProgress?.(
+            "download-llm",
+            progress.progress,
+            progress.detail,
+          );
         },
         chunkSize: 10 * 1024 * 1024, // 10MB chunks
         minValidSize: MODELS.llm.size * 0.95, // Allow 5% tolerance
-        timeout: getDownloadTimeoutMs()
-      })
+        timeout: getDownloadTimeoutMs(),
+      });
 
       // Clear downloader reference
-      downloadersRef.current.llm = undefined
+      downloadersRef.current.llm = undefined;
 
       if (!result.success) {
-        throw new Error(result.error || 'Failed to download LLM model')
+        throw new Error(result.error || "Failed to download LLM model");
       }
 
       // Download completed - verify file exists before marking as downloaded
-      const verifyResult = await window.electronAPI?.sdCheckAuxiliaryModels()
+      const verifyResult = await window.electronAPI?.sdCheckAuxiliaryModels();
       if (!verifyResult?.success || !verifyResult.llmExists) {
-        throw new Error('LLM download completed but file verification failed')
+        throw new Error("LLM download completed but file verification failed");
       }
 
-      console.log('[useZImage] LLM download completed and verified successfully')
-      updateLlmStatus({ downloaded: true, downloading: false, progress: 100, error: null })
-      optionsRef.current.onProgress?.('download-llm', 100, { current: 100, total: 100, unit: 'percent' })
+      console.log(
+        "[useZImage] LLM download completed and verified successfully",
+      );
+      updateLlmStatus({
+        downloaded: true,
+        downloading: false,
+        progress: 100,
+        error: null,
+      });
+      optionsRef.current.onProgress?.("download-llm", 100, {
+        current: 100,
+        total: 100,
+        unit: "percent",
+      });
     } catch (error) {
       // Clear downloader reference on error
-      downloadersRef.current.llm = undefined
-
-      const errorMsg = (error as Error).message
-      console.error('[useZImage] LLM download failed:', errorMsg)
-      updateLlmStatus({ downloaded: false, downloading: false, progress: 0, error: errorMsg })
-      optionsRef.current.onError?.(errorMsg)
-      throw error // Re-throw to stop the download chain
+      downloadersRef.current.llm = undefined;
+
+      const errorMsg = (error as Error).message;
+      console.error("[useZImage] LLM download failed:", errorMsg);
+      updateLlmStatus({
+        downloaded: false,
+        downloading: false,
+        progress: 0,
+        error: errorMsg,
+      });
+      optionsRef.current.onError?.(errorMsg);
+      throw error; // Re-throw to stop the download chain
     }
-  }, [updateLlmStatus])
+  }, [updateLlmStatus]);
 
   /**
    * Download VAE model
@@ -138,72 +177,114 @@ export function useZImage(options: UseZImageOptions = {}) {
     try {
       // Check if Electron API is available (required for local generation)
       if (!window.electronAPI) {
-        throw new Error('Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.')
+        throw new Error(
+          "Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.",
+        );
       }
 
       // Check if file already exists before starting download
-      const checkResult = await window.electronAPI?.sdCheckAuxiliaryModels()
+      const checkResult = await window.electronAPI?.sdCheckAuxiliaryModels();
       if (checkResult?.success && checkResult.vaeExists) {
-        console.log('[useZImage] VAE already exists, skipping download')
-        updateVaeStatus({ downloaded: true, downloading: false, progress: 100, error: null })
-        optionsRef.current.onProgress?.('download-vae', 100, { current: 100, total: 100, unit: 'percent' })
-        return
+        console.log("[useZImage] VAE already exists, skipping download");
+        updateVaeStatus({
+          downloaded: true,
+          downloading: false,
+          progress: 100,
+          error: null,
+        });
+        optionsRef.current.onProgress?.("download-vae", 100, {
+          current: 100,
+          total: 100,
+          unit: "percent",
+        });
+        return;
       }
 
       // Get download path
-      const pathResult = await window.electronAPI?.sdGetAuxiliaryModelDownloadPath('vae')
+      const pathResult =
+        await window.electronAPI?.sdGetAuxiliaryModelDownloadPath("vae");
       if (!pathResult?.success || !pathResult.path) {
-        throw new Error('Failed to get VAE download path')
+        throw new Error("Failed to get VAE download path");
       }
 
       // Start download
-      updateVaeStatus({ downloaded: false, downloading: true, progress: 0, error: null })
-      optionsRef.current.onPhase?.('download-vae')
-      console.log('[useZImage] Starting VAE download...')
+      updateVaeStatus({
+        downloaded: false,
+        downloading: true,
+        progress: 0,
+        error: null,
+      });
+      optionsRef.current.onPhase?.("download-vae");
+      console.log("[useZImage] Starting VAE download...");
 
       // Create and track downloader instance
-      const downloader = new ChunkedDownloader()
-      downloadersRef.current.vae = downloader
+      const downloader = new ChunkedDownloader();
+      downloadersRef.current.vae = downloader;
 
       const result = await downloader.download({
         url: MODELS.vae.url,
         destPath: pathResult.path,
         onProgress: (progress) => {
-          updateVaeStatus({ downloading: true, downloaded: false, progress: progress.progress, detail: progress.detail })
-          optionsRef.current.onProgress?.('download-vae', progress.progress, progress.detail)
+          updateVaeStatus({
+            downloading: true,
+            downloaded: false,
+            progress: progress.progress,
+            detail: progress.detail,
+          });
+          optionsRef.current.onProgress?.(
+            "download-vae",
+            progress.progress,
+            progress.detail,
+          );
         },
         chunkSize: 10 * 1024 * 1024, // 10MB chunks
         minValidSize: MODELS.vae.size * 0.95, // Allow 5% tolerance
-        timeout: getDownloadTimeoutMs()
-      })
+        timeout: getDownloadTimeoutMs(),
+      });
 
       // Clear downloader reference
-      downloadersRef.current.vae = undefined
+      downloadersRef.current.vae = undefined;
 
       if (!result.success) {
-        throw new Error(result.error || 'Failed to download VAE model')
+        throw new Error(result.error || "Failed to download VAE model");
       }
 
       // Download completed - verify file exists before marking as downloaded
-      const verifyResult = await window.electronAPI?.sdCheckAuxiliaryModels()
+      const verifyResult = await window.electronAPI?.sdCheckAuxiliaryModels();
       if (!verifyResult?.success || !verifyResult.vaeExists) {
-        throw new Error('VAE download completed but file verification failed')
+        throw new Error("VAE download completed but file verification failed");
       }
 
-      console.log('[useZImage] VAE download completed and verified successfully')
-      updateVaeStatus({ downloaded: true, downloading: false, progress: 100, error: null })
-      optionsRef.current.onProgress?.('download-vae', 100, { current: 100, total: 100, unit: 'percent' })
+      console.log(
+        "[useZImage] VAE download completed and verified successfully",
+      );
+      updateVaeStatus({
+        downloaded: true,
+        downloading: false,
+        progress: 100,
+        error: null,
+      });
+      optionsRef.current.onProgress?.("download-vae", 100, {
+        current: 100,
+        total: 100,
+        unit: "percent",
+      });
     } catch (error) {
       // Clear downloader reference on error
-      downloadersRef.current.vae = undefined
-
-      const errorMsg = (error as Error).message
-      console.error('[useZImage] VAE download failed:', errorMsg)
-      updateVaeStatus({ downloaded: false, downloading: false, progress: 0, error: errorMsg })
-      optionsRef.current.onError?.(errorMsg)
-      throw error // Re-throw to stop the download chain
+      downloadersRef.current.vae = undefined;
+
+      const errorMsg = (error as Error).message;
+      console.error("[useZImage] VAE download failed:", errorMsg);
+      updateVaeStatus({
+        downloaded: false,
+        downloading: false,
+        progress: 0,
+        error: errorMsg,
+      });
+      optionsRef.current.onError?.(errorMsg);
+      throw error; // Re-throw to stop the download chain
     }
-  }, [updateVaeStatus])
+  }, [updateVaeStatus]);
 
   /**
    * Download SD binary
@@ -212,173 +293,226 @@ export function useZImage(options: UseZImageOptions = {}) {
     try {
       // Check if Electron API is available (required for local generation)
       if (!window.electronAPI) {
-        throw new Error('Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.')
+        throw new Error(
+          "Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.",
+        );
       }
 
       // Check if file already exists before starting download
-      const checkResult = await window.electronAPI?.sdGetBinaryPath()
+      const checkResult = await window.electronAPI?.sdGetBinaryPath();
       if (checkResult?.success && checkResult.path) {
-        console.log('[useZImage] SD Binary already exists, skipping download')
-        const detail: ProgressDetail = { current: 100, total: 100, unit: 'percent' }
-        updateBinaryStatus({ downloaded: true, downloading: false, progress: 100, error: null, detail })
-        optionsRef.current.onProgress?.('download-binary', 100, detail)
-        return
+        console.log("[useZImage] SD Binary already exists, skipping download");
+        const detail: ProgressDetail = {
+          current: 100,
+          total: 100,
+          unit: "percent",
+        };
+        updateBinaryStatus({
+          downloaded: true,
+          downloading: false,
+          progress: 100,
+          error: null,
+          detail,
+        });
+        optionsRef.current.onProgress?.("download-binary", 100, detail);
+        return;
       }
 
       // Get download path
-      const pathResult = await window.electronAPI?.sdGetBinaryDownloadPath()
+      const pathResult = await window.electronAPI?.sdGetBinaryDownloadPath();
       if (!pathResult?.success || !pathResult.path) {
-        throw new Error('Failed to get binary download path')
+        throw new Error("Failed to get binary download path");
       }
 
       // Get system info to determine download URL
-      const systemInfo = await window.electronAPI?.sdGetSystemInfo()
+      const systemInfo = await window.electronAPI?.sdGetSystemInfo();
       if (!systemInfo) {
-        throw new Error('Failed to get system info')
+        throw new Error("Failed to get system info");
       }
 
-      const { platform, acceleration } = systemInfo
+      const { platform, acceleration } = systemInfo;
 
-      console.log(`[useZImage] System info - Platform: ${platform}, Acceleration: ${acceleration}`)
+      console.log(
+        `[useZImage] System info - Platform: ${platform}, Acceleration: ${acceleration}`,
+      );
 
       // Determine download URL based on platform and acceleration
-      let url = ''
-      const githubBaseUrl = 'https://github.com/WaveSpeedAI/stable-diffusion.cpp/releases/download/master-434-52e09ea'
+      let url = "";
+      const githubBaseUrl =
+        "https://github.com/WaveSpeedAI/stable-diffusion.cpp/releases/download/master-434-52e09ea";
 
-      if (platform === 'win32') {
+      if (platform === "win32") {
         // Windows: Use Vulkan build from WaveSpeed release
-        console.log('[useZImage] Using Windows Vulkan build from WaveSpeed release')
-        url = `${githubBaseUrl}/sd-master-52e09ea-bin-win-vulkan-x64.zip`
-      } else if (platform === 'darwin') {
+        console.log(
+          "[useZImage] Using Windows Vulkan build from WaveSpeed release",
+        );
+        url = `${githubBaseUrl}/sd-master-52e09ea-bin-win-vulkan-x64.zip`;
+      } else if (platform === "darwin") {
         // macOS: Use Metal build from WaveSpeed release
-        console.log('[useZImage] Using macOS Metal build from WaveSpeed release')
-        url = `${githubBaseUrl}/sd-master-52e09ea-bin-Darwin-macOS-15.7.2-arm64-metal.zip`
+        console.log(
+          "[useZImage] Using macOS Metal build from WaveSpeed release",
+        );
+        url = `${githubBaseUrl}/sd-master-52e09ea-bin-Darwin-macOS-15.7.2-arm64-metal.zip`;
       } else {
         // Linux: Use AVX2 build from WaveSpeed release
-        url = `${githubBaseUrl}/sd-master-52e09ea-bin-Linux-Ubuntu-24.04-x86_64-avx2.zip`
+        url = `${githubBaseUrl}/sd-master-52e09ea-bin-Linux-Ubuntu-24.04-x86_64-avx2.zip`;
       }
 
-      console.log(`[useZImage] Download URL: ${url}`)
+      console.log(`[useZImage] Download URL: ${url}`);
 
       // Start download
-      updateBinaryStatus({ downloaded: false, downloading: true, progress: 0, error: null })
-      optionsRef.current.onPhase?.('download-binary')
-      console.log('[useZImage] Starting SD Binary download...')
+      updateBinaryStatus({
+        downloaded: false,
+        downloading: true,
+        progress: 0,
+        error: null,
+      });
+      optionsRef.current.onPhase?.("download-binary");
+      console.log("[useZImage] Starting SD Binary download...");
 
       // Create and track downloader instance
-      const downloader = new ChunkedDownloader()
-      downloadersRef.current.binary = downloader
+      const downloader = new ChunkedDownloader();
+      downloadersRef.current.binary = downloader;
 
-      const zipPath = pathResult.path + '.zip'
+      const zipPath = pathResult.path + ".zip";
       const result = await downloader.download({
         url,
         destPath: zipPath,
         onProgress: (progress) => {
-          updateBinaryStatus({ downloading: true, downloaded: false, progress: progress.progress, detail: progress.detail })
-          optionsRef.current.onProgress?.('download-binary', progress.progress, progress.detail)
+          updateBinaryStatus({
+            downloading: true,
+            downloaded: false,
+            progress: progress.progress,
+            detail: progress.detail,
+          });
+          optionsRef.current.onProgress?.(
+            "download-binary",
+            progress.progress,
+            progress.detail,
+          );
         },
         chunkSize: 10 * 1024 * 1024, // 10MB chunks
         minValidSize: 1024 * 1024, // At least 1MB
-        timeout: getDownloadTimeoutMs()
-      })
+        timeout: getDownloadTimeoutMs(),
+      });
 
       // Clear downloader reference
-      downloadersRef.current.binary = undefined
+      downloadersRef.current.binary = undefined;
 
       if (!result.success) {
-        throw new Error(result.error || 'Failed to download SD binary')
+        throw new Error(result.error || "Failed to download SD binary");
       }
 
-      console.log('[useZImage] Download completed, extracting zip file...')
+      console.log("[useZImage] Download completed, extracting zip file...");
 
       // Extract zip file
-      const extractResult = await window.electronAPI?.sdExtractBinary(zipPath, pathResult.path)
+      const extractResult = await window.electronAPI?.sdExtractBinary(
+        zipPath,
+        pathResult.path,
+      );
       if (!extractResult?.success) {
-        throw new Error(extractResult?.error || 'Failed to extract SD binary')
+        throw new Error(extractResult?.error || "Failed to extract SD binary");
       }
 
-      console.log('[useZImage] SD Binary extracted and verified successfully')
-      const detail: ProgressDetail = { current: 100, total: 100, unit: 'percent' }
-      updateBinaryStatus({ downloaded: true, downloading: false, progress: 100, error: null, detail })
-      optionsRef.current.onProgress?.('download-binary', 100, detail)
+      console.log("[useZImage] SD Binary extracted and verified successfully");
+      const detail: ProgressDetail = {
+        current: 100,
+        total: 100,
+        unit: "percent",
+      };
+      updateBinaryStatus({
+        downloaded: true,
+        downloading: false,
+        progress: 100,
+        error: null,
+        detail,
+      });
+      optionsRef.current.onProgress?.("download-binary", 100, detail);
     } catch (error) {
       // Clear downloader reference on error
-      downloadersRef.current.binary = undefined
-
-      const errorMsg = (error as Error).message
-      console.error('[useZImage] SD Binary download failed:', errorMsg)
-      updateBinaryStatus({ downloaded: false, downloading: false, progress: 0, error: errorMsg })
-      optionsRef.current.onError?.(errorMsg)
-      throw error // Re-throw to stop the download chain
+      downloadersRef.current.binary = undefined;
+
+      const errorMsg = (error as Error).message;
+      console.error("[useZImage] SD Binary download failed:", errorMsg);
+      updateBinaryStatus({
+        downloaded: false,
+        downloading: false,
+        progress: 0,
+        error: errorMsg,
+      });
+      optionsRef.current.onError?.(errorMsg);
+      throw error; // Re-throw to stop the download chain
     }
-  }, [updateBinaryStatus])
+  }, [updateBinaryStatus]);
 
   /**
    * Generate image
    */
   const generate = useCallback(
-    async (params: Omit<GenerationParams, 'outputPath'>) => {
-      optionsRef.current.onPhase?.('generate')
+    async (params: Omit<GenerationParams, "outputPath">) => {
+      optionsRef.current.onPhase?.("generate");
 
       if (!window.electronAPI?.sdGenerateImage) {
-        throw new Error('Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.')
+        throw new Error(
+          "Z-Image requires the WaveSpeed Desktop app. This feature is not available in browser mode.",
+        );
       }
 
       // Get models info
-      const modelsInfo = await window.electronAPI.sdCheckAuxiliaryModels()
+      const modelsInfo = await window.electronAPI.sdCheckAuxiliaryModels();
       if (!modelsInfo.success) {
-        throw new Error('Failed to check models')
+        throw new Error("Failed to check models");
       }
 
       // Generate output path using electron API to ensure correct path separators on all platforms
-      const outputPath = await window.electronAPI.getZImageOutputPath()
+      const outputPath = await window.electronAPI.getZImageOutputPath();
 
       const result = await window.electronAPI.sdGenerateImage({
         ...params,
         llmPath: modelsInfo.llmPath,
         vaePath: modelsInfo.vaePath,
-        outputPath
-      })
+        outputPath,
+      });
 
-      return result
+      return result;
     },
-    []
-  )
+    [],
+  );
 
   /**
    * Cancel download
    * ChunkedDownloader uses AbortController for clean cancellation
    */
   const cancelDownload = useCallback(() => {
-    console.log('[useZImage] Cancelling all active downloads')
+    console.log("[useZImage] Cancelling all active downloads");
 
     // Cancel LLM download
     if (downloadersRef.current.llm) {
-      console.log('[useZImage] Cancelling LLM download')
-      downloadersRef.current.llm.cancel()
-      downloadersRef.current.llm = undefined
+      console.log("[useZImage] Cancelling LLM download");
+      downloadersRef.current.llm.cancel();
+      downloadersRef.current.llm = undefined;
     }
 
     // Cancel VAE download
     if (downloadersRef.current.vae) {
-      console.log('[useZImage] Cancelling VAE download')
-      downloadersRef.current.vae.cancel()
-      downloadersRef.current.vae = undefined
+      console.log("[useZImage] Cancelling VAE download");
+      downloadersRef.current.vae.cancel();
+      downloadersRef.current.vae = undefined;
     }
 
     // Cancel Binary download
     if (downloadersRef.current.binary) {
-      console.log('[useZImage] Cancelling Binary download')
-      downloadersRef.current.binary.cancel()
-      downloadersRef.current.binary = undefined
+      console.log("[useZImage] Cancelling Binary download");
+      downloadersRef.current.binary.cancel();
+      downloadersRef.current.binary = undefined;
     }
-  }, [])
+  }, []);
 
   return {
     downloadLlm,
     downloadVae,
     downloadBinary,
     generate,
-    cancelDownload
-  }
+    cancelDownload,
+  };
 }
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index e81ac036..34b04605 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,55 +1,55 @@
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
 
-import en from './locales/en.json'
-import zhCN from './locales/zh-CN.json'
-import zhTW from './locales/zh-TW.json'
-import ja from './locales/ja.json'
-import ko from './locales/ko.json'
-import es from './locales/es.json'
-import fr from './locales/fr.json'
-import de from './locales/de.json'
-import ru from './locales/ru.json'
-import hi from './locales/hi.json'
-import id from './locales/id.json'
-import ms from './locales/ms.json'
-import ar from './locales/ar.json'
-import vi from './locales/vi.json'
-import th from './locales/th.json'
-import pt from './locales/pt.json'
-import tr from './locales/tr.json'
-import it from './locales/it.json'
+import en from "./locales/en.json";
+import zhCN from "./locales/zh-CN.json";
+import zhTW from "./locales/zh-TW.json";
+import ja from "./locales/ja.json";
+import ko from "./locales/ko.json";
+import es from "./locales/es.json";
+import fr from "./locales/fr.json";
+import de from "./locales/de.json";
+import ru from "./locales/ru.json";
+import hi from "./locales/hi.json";
+import id from "./locales/id.json";
+import ms from "./locales/ms.json";
+import ar from "./locales/ar.json";
+import vi from "./locales/vi.json";
+import th from "./locales/th.json";
+import pt from "./locales/pt.json";
+import tr from "./locales/tr.json";
+import it from "./locales/it.json";
 
 export const languages = [
-  { code: 'auto', name: 'Auto (System)', nativeName: 'Auto' },
+  { code: "auto", name: "Auto (System)", nativeName: "Auto" },
   // Western languages
-  { code: 'en', name: 'English', nativeName: 'English' },
-  { code: 'es', name: 'Spanish', nativeName: 'Español' },
-  { code: 'pt', name: 'Portuguese', nativeName: 'Português' },
-  { code: 'fr', name: 'French', nativeName: 'Français' },
-  { code: 'de', name: 'German', nativeName: 'Deutsch' },
-  { code: 'it', name: 'Italian', nativeName: 'Italiano' },
-  { code: 'ru', name: 'Russian', nativeName: 'Русский' },
+  { code: "en", name: "English", nativeName: "English" },
+  { code: "es", name: "Spanish", nativeName: "Español" },
+  { code: "pt", name: "Portuguese", nativeName: "Português" },
+  { code: "fr", name: "French", nativeName: "Français" },
+  { code: "de", name: "German", nativeName: "Deutsch" },
+  { code: "it", name: "Italian", nativeName: "Italiano" },
+  { code: "ru", name: "Russian", nativeName: "Русский" },
   // Eastern/Asian languages
-  { code: 'zh-CN', name: 'Chinese (Simplified)', nativeName: '简体中文' },
-  { code: 'zh-TW', name: 'Chinese (Traditional)', nativeName: '繁體中文' },
-  { code: 'ja', name: 'Japanese', nativeName: '日本語' },
-  { code: 'ko', name: 'Korean', nativeName: '한국어' },
-  { code: 'th', name: 'Thai', nativeName: 'ไทย' },
-  { code: 'vi', name: 'Vietnamese', nativeName: 'Tiếng Việt' },
-  { code: 'id', name: 'Indonesian', nativeName: 'Bahasa Indonesia' },
-  { code: 'ms', name: 'Malay', nativeName: 'Bahasa Melayu' },
+  { code: "zh-CN", name: "Chinese (Simplified)", nativeName: "简体中文" },
+  { code: "zh-TW", name: "Chinese (Traditional)", nativeName: "繁體中文" },
+  { code: "ja", name: "Japanese", nativeName: "日本語" },
+  { code: "ko", name: "Korean", nativeName: "한국어" },
+  { code: "th", name: "Thai", nativeName: "ไทย" },
+  { code: "vi", name: "Vietnamese", nativeName: "Tiếng Việt" },
+  { code: "id", name: "Indonesian", nativeName: "Bahasa Indonesia" },
+  { code: "ms", name: "Malay", nativeName: "Bahasa Melayu" },
   // Other languages
-  { code: 'ar', name: 'Arabic', nativeName: 'العربية' },
-  { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी' },
-  { code: 'tr', name: 'Turkish', nativeName: 'Türkçe' },
-]
+  { code: "ar", name: "Arabic", nativeName: "العربية" },
+  { code: "hi", name: "Hindi", nativeName: "हिन्दी" },
+  { code: "tr", name: "Turkish", nativeName: "Türkçe" },
+];
 
 const resources = {
   en: { translation: en },
-  'zh-CN': { translation: zhCN },
-  'zh-TW': { translation: zhTW },
+  "zh-CN": { translation: zhCN },
+  "zh-TW": { translation: zhTW },
   ja: { translation: ja },
   ko: { translation: ko },
   es: { translation: es },
@@ -65,13 +65,13 @@ const resources = {
   vi: { translation: vi },
   tr: { translation: tr },
   ar: { translation: ar },
-}
+};
 
 // Get saved language from localStorage
-const savedLanguage = localStorage.getItem('wavespeed_language')
+const savedLanguage = localStorage.getItem("wavespeed_language");
 
 // If 'auto' or not set, let the detector decide based on browser language
-const effectiveLanguage = savedLanguage === 'auto' ? undefined : savedLanguage
+const effectiveLanguage = savedLanguage === "auto" ? undefined : savedLanguage;
 
 i18n
   .use(LanguageDetector)
@@ -79,14 +79,14 @@ i18n
   .init({
     resources,
     lng: effectiveLanguage || undefined, // Use saved language or let detector decide
-    fallbackLng: 'en',
+    fallbackLng: "en",
     interpolation: {
       escapeValue: false, // React already escapes
     },
     detection: {
-      order: ['navigator'], // Only use navigator when auto mode
+      order: ["navigator"], // Only use navigator when auto mode
       caches: [], // Don't cache when in auto mode
     },
-  })
+  });
 
-export default i18n
+export default i18n;
diff --git a/src/i18n/locales/ar.json b/src/i18n/locales/ar.json
index b79bf288..e9e99421 100644
--- a/src/i18n/locales/ar.json
+++ b/src/i18n/locales/ar.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "لوحة العقد",
-        "desc": "اضغط هذا الزر لفتح لوحة العقد — صندوق أدواتك الذي يحتوي على جميع العقد المتاحة. يمكنك أيضًا البحث أو السحب أو النقر لإضافة عقد إلى اللوحة."
+        "desc": "اضغط هذا الزر لفتح لوحة العقد — صندوق أدواتك الذي يحتوي على جميع العقد المتاحة."
       },
       "nodePalette": {
         "title": "فئات العقد",
-        "desc": "يتم تنظيم العقد حسب الفئة:\n• إدخال — ارفع ملفات أو أدخل نصًا كنقطة بداية\n• مهمة ذكاء اصطناعي — شغّل أي نموذج WaveSpeed AI (انظر الخطوة التالية)\n• أدوات مجانية — 12 أداة مدمجة مثل إزالة الخلفية وتحسين الوجه وتحويل الصيغ\n• إخراج — عاين النتائج أو صدّر الملفات إلى القرص\n\nاسحب عقدة إلى اللوحة أو انقر لإضافتها."
+        "desc": "يتم تنظيم العقد في 5 فئات:\n• نموذج ذكاء اصطناعي — شغّل أي نموذج WaveSpeed AI\n• إدخال — ارفع ملفات وسائط أو أدخل نصًا\n• إخراج — صدّر الملفات أو عاين النتائج\n• معالجة — ادمج أو اختر النتائج\n• أدوات مجانية — 12 أداة مدمجة (إزالة الخلفية، تحسين الوجه، تحويل الصيغ، إلخ)\n\nاسحب عقدة إلى اللوحة أو انقر لإضافتها."
       },
       "aiTask": {
-        "title": "عقدة مهمة الذكاء الاصطناعي — الأساس",
-        "desc": "عقدة مهمة الذكاء الاصطناعي هي أقوى عقدة في Workflow. يمكنها تشغيل أي نموذج WaveSpeed AI لتوليد الصور، وإنشاء الفيديو، ونقل الأنماط، والمزيد.",
+        "title": "عقدة WaveSpeed API",
+        "desc": "عقدة WaveSpeed API هي جوهر Workflow — يمكنها تشغيل أي نموذج ذكاء اصطناعي على المنصة. عند اختيار نموذج، تتوسع بطاقة العقدة لعرض جميع المعلمات القابلة للتكوين مباشرة. بعد التنفيذ، تُعرض النتائج أيضًا داخل العقدة مباشرة.",
         "features": {
-          "modelSwitch": "اختر من بين مئات نماذج الذكاء الاصطناعي — يتم تحديث لوحة المعلمات تلقائيًا حسب النموذج المحدد",
-          "dynamicParams": "لكل نموذج معلماته الخاصة (الوصف، حجم الصورة، البذرة، إلخ) وتظهر تلقائيًا عند الاختيار",
+          "modelSwitch": "اختر من بين مئات نماذج الذكاء الاصطناعي — يتم تحديث المعلمات تلقائيًا حسب النموذج المحدد",
+          "dynamicParams": "لكل نموذج معلماته الخاصة (الوصف، حجم الصورة، البذرة، إلخ) وتظهر تلقائيًا داخل العقدة عند الاختيار",
           "costEstimate": "تقدير تكلفة لحظي لكل تشغيل حتى تعرف السعر دائمًا قبل التنفيذ",
-          "upstream": "وصّل مخرجات العقد السابقة (صور، نص) كمدخلات لبناء خطوط معالجة ذكاء اصطناعي متعددة الخطوات"
+          "upstream": "وصّل مخرجات العقد السابقة (صور، نص) كمدخلات — ابنِ خطوط معالجة ذكاء اصطناعي متعددة الخطوات"
         }
       },
       "canvas": {
         "title": "التفاعل مع اللوحة",
-        "desc": "اللوحة المركزية هي مساحة عملك:\n• اسحب العقد من اللوحة لوضعها\n• اسحب من منافذ الإخراج إلى منافذ الإدخال لإنشاء اتصالات\n• انقر بزر الفأرة الأيمن لفتح القائمة السياقية (نسخ، لصق، حذف)\n• مرّر للتكبير، واسحب الخلفية لتحريك العرض\n• الاختصارات: Ctrl+Z للتراجع، Ctrl+C/V للنسخ واللصق، Delete للحذف"
+        "desc": "اللوحة هي مساحة عملك:\n• اسحب العقد لوضعها\n• اسحب من منافذ الإخراج إلى منافذ الإدخال لإنشاء اتصالات\n• انقر على عقدة لتحديدها — تتوسع المعلمات داخل العقدة للتعديل\n• انقر بزر الفأرة الأيمن لفتح القائمة السياقية (نسخ، لصق، حذف)\n• مرّر للتكبير، واسحب الخلفية لتحريك العرض\n• الاختصارات: Ctrl+Z للتراجع، Ctrl+C/V للنسخ واللصق، Delete للحذف"
       },
       "canvasTools": {
         "title": "أدوات اللوحة",
-        "desc": "ثلاث أدوات مفيدة للتنقل وتنظيم اللوحة:\n• وضع التحديد / اليد — بدّل بين تحديد العقد (V) وتحريك اللوحة (H)\n• احتواء العرض — تكبير/تصغير تلقائي لإظهار كل العقد داخل نافذة العرض\n• تخطيط تلقائي — ترتيب العقد تلقائيًا بشكل منظم وسهل القراءة"
-      },
-      "config": {
-        "title": "الإعداد وعرض النتائج",
-        "desc": "انقر أي عقدة لتحديدها. تعرض اللوحة اليمنى تبويبين:\n• الإعداد — اضبط معلمات النموذج، ارفع ملفات، أدخل المطالبات\n• النتائج — اعرض مخرجات التنفيذ (صور، فيديوهات، نماذج ثلاثية الأبعاد)\n\nتتحدث المعلمات ديناميكيًا حسب نوع العقدة والنموذج المحدد. وتدعم النتائج المعاينة بملء الشاشة والتنزيل."
+        "desc": "شريط أدوات على يمين اللوحة:\n• الشبكة — إظهار/إخفاء شبكة الخلفية\n• التحديد / اليد — بدّل بين تحديد العقد وتحريك اللوحة\n• تكبير / تصغير\n• احتواء العرض — تكبير/تصغير تلقائي لإظهار كل العقد\n• تخطيط تلقائي — ترتيب العقد تلقائيًا بشكل منظم وسهل القراءة"
       },
       "run": {
         "title": "شغّل سير العمل",
-        "desc": "انقر \"تشغيل سير العمل\" لتنفيذ المسار بالكامل:\n• عيّن عدد مرات التشغيل (×1 إلى ×99) للمعالجة الدفعية\n• أوقف التنفيذ في أي وقت عبر زر الإيقاف\n• راقب التقدم اللحظي في شاشة التنفيذ\n• تعرض كل عقدة حالتها: في الانتظار → قيد التشغيل → تم"
+        "desc": "انقر \"Run\" لتنفيذ المسار بالكامل:\n• عيّن عدد مرات التشغيل (×1 إلى ×99) للمعالجة الدفعية\n• أوقف التنفيذ في أي وقت عبر زر الإيقاف\n• انقر على أيقونة الساعة لفتح شاشة التنفيذ ومراقبة التقدم اللحظي\n• تعرض كل عقدة حالتها: في الانتظار → قيد التشغيل → تم"
       },
-      "templates": {
-        "title": "القوالب والاستيراد والتصدير",
-        "desc": "انقر قائمة ⋮ للوصول إلى الميزات المتقدمة:\n• احفظ سير العمل كقالب قابل لإعادة الاستخدام\n• استيراد/تصدير سير العمل بصيغة JSON للمشاركة\n• افتح عدة مسارات في تبويبات (مثل المتصفح)\n• تصفح القوالب الجاهزة من شريط الأدوات"
+      "moreMenu": {
+        "title": "الحفظ والاستيراد والتصدير",
+        "desc": "انقر قائمة ⋮:\n• حفظ — حفظ سير العمل الحالي\n• حفظ كقالب — حفظ سير العمل كقالب قابل لإعادة الاستخدام\n• استيراد / تصدير — مشاركة سير العمل عبر ملفات JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index a2377b99..82fe26d2 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -1348,41 +1348,37 @@
       },
       "nodePaletteBtn": {
         "title": "Knotenpalette",
-        "desc": "Klicken Sie auf diese Schaltfläche, um die Knotenpalette zu öffnen — Ihre Werkzeugkiste mit allen verfügbaren Knoten. Sie können auch suchen, ziehen oder klicken, um Knoten zur Leinwand hinzuzufügen."
+        "desc": "Klicken Sie auf diese Schaltfläche, um die Knotenpalette zu öffnen — Ihre Werkzeugkiste mit allen verfügbaren Knoten."
       },
       "nodePalette": {
         "title": "Knotenkategorien",
-        "desc": "Knoten sind nach Kategorien organisiert:\n• Eingabe — Dateien hochladen oder Text als Startdaten eingeben\n• AI-Aufgabe — Beliebiges WaveSpeed AI-Modell ausführen (siehe nächster Schritt)\n• Kostenlose Tools — 12 integrierte Tools wie Hintergrundentfernung, Gesichtsverbesserung, Formatkonvertierung\n• Ausgabe — Ergebnisse in der Vorschau anzeigen oder Dateien auf die Festplatte exportieren\n\nZiehen Sie einen Knoten auf die Leinwand oder klicken Sie, um ihn hinzuzufügen."
+        "desc": "Knoten sind in 5 Kategorien unterteilt:\n• AI-Modell — Beliebiges WaveSpeed AI-Modell ausführen\n• Eingabe — Mediendateien hochladen oder Text eingeben\n• Ausgabe — Dateien exportieren oder Ergebnisse in der Vorschau anzeigen\n• Verarbeitung — Ausgabeergebnisse verketten oder auswählen\n• Kostenlose Tools — 12 integrierte Tools (Hintergrundentfernung, Gesichtsverbesserung, Formatkonvertierung usw.)\n\nZiehen Sie einen Knoten auf die Leinwand oder klicken Sie, um ihn hinzuzufügen."
       },
       "aiTask": {
-        "title": "AI-Aufgabenknoten — Das Herzstück",
-        "desc": "Der AI-Aufgabenknoten ist der leistungsstärkste Knoten in Workflow. Er kann jedes WaveSpeed AI-Modell für Bilderzeugung, Videoerstellung, Stiltransfer und mehr ausführen.",
+        "title": "WaveSpeed API-Knoten",
+        "desc": "Der WaveSpeed API-Knoten ist das Herzstück Ihres Workflows — er kann jedes AI-Modell auf der Plattform ausführen. Wählen Sie ein Modell aus, und die Knotenkarte erweitert sich, um alle konfigurierbaren Parameter inline anzuzeigen. Nach der Ausführung werden die Ergebnisse ebenfalls direkt im Knoten angezeigt.",
         "features": {
-          "modelSwitch": "Wählen Sie aus Hunderten von AI-Modellen — das Parameterfeld aktualisiert sich dynamisch basierend auf dem ausgewählten Modell",
-          "dynamicParams": "Jedes Modell hat eigene Parameter (Prompt, Bildgröße, Seed usw.), die bei Auswahl automatisch angezeigt werden",
+          "modelSwitch": "Wählen Sie aus Hunderten von AI-Modellen — Parameter aktualisieren sich dynamisch basierend auf dem ausgewählten Modell",
+          "dynamicParams": "Jedes Modell hat eigene Parameter (Prompt, Bildgröße, Seed usw.), die automatisch im Knoten angezeigt werden",
           "costEstimate": "Echtzeit-Kostenschätzung pro Ausführung, damit Sie den Preis immer vor dem Start kennen",
           "upstream": "Verbinden Sie Ausgaben vorgelagerter Knoten (Bilder, Text) als Eingaben — erstellen Sie mehrstufige AI-Pipelines"
         }
       },
       "canvas": {
         "title": "Leinwand-Interaktionen",
-        "desc": "Die zentrale Leinwand ist Ihr Arbeitsbereich:\n• Ziehen Sie Knoten aus der Palette, um sie zu positionieren\n• Ziehen Sie von Ausgangsports zu Eingangsports, um Verbindungen zu erstellen\n• Rechtsklick für Kontextmenü (Kopieren, Einfügen, Löschen)\n• Scrollen zum Zoomen, Hintergrund ziehen zum Schwenken\n• Tastenkürzel: Ctrl+Z Rückgängig, Ctrl+C/V Kopieren/Einfügen, Delete zum Entfernen"
+        "desc": "Die Leinwand ist Ihr Arbeitsbereich:\n• Ziehen Sie Knoten, um sie zu positionieren\n• Ziehen Sie von Ausgangsports zu Eingangsports, um Verbindungen zu erstellen\n• Klicken Sie auf einen Knoten, um ihn auszuwählen — Parameter werden im Knoten zur Bearbeitung erweitert\n• Rechtsklick für Kontextmenü (Kopieren, Einfügen, Löschen)\n• Scrollen zum Zoomen, Hintergrund ziehen zum Schwenken\n• Tastenkürzel: Ctrl+Z Rückgängig, Ctrl+C/V Kopieren/Einfügen, Delete zum Entfernen"
       },
       "canvasTools": {
         "title": "Leinwand-Werkzeuge",
-        "desc": "Drei praktische Werkzeuge zum Navigieren und Organisieren Ihrer Leinwand:\n• Auswahl- / Handmodus — zwischen Knotenauswahl (V) und Leinwandschwenken (H) wechseln\n• Ansicht anpassen — automatisch zoomen, damit alle Knoten im Sichtfeld sind\n• Auto-Layout — Knoten automatisch in einem übersichtlichen, lesbaren Layout anordnen"
-      },
-      "config": {
-        "title": "Konfigurieren und Ergebnisse anzeigen",
-        "desc": "Klicken Sie auf einen Knoten, um ihn auszuwählen. Das rechte Panel zeigt zwei Tabs:\n• Konfiguration — Modellparameter festlegen, Dateien hochladen, Prompts eingeben\n• Ergebnisse — Ausführungsergebnisse anzeigen (Bilder, Videos, 3D-Modelle)\n\nParameter aktualisieren sich dynamisch basierend auf dem Knotentyp und dem ausgewählten Modell. Ergebnisse unterstützen Vollbildvorschau und Download."
+        "desc": "Werkzeugleiste rechts auf der Leinwand:\n• Raster — Hintergrundraster ein-/ausblenden\n• Auswahl / Hand — zwischen Knotenauswahl und Leinwandschwenken wechseln\n• Vergrößern / Verkleinern\n• Ansicht anpassen — automatisch zoomen, um alle Knoten anzuzeigen\n• Auto-Layout — Knoten automatisch übersichtlich anordnen"
       },
       "run": {
         "title": "Workflow ausführen",
-        "desc": "Klicken Sie auf „Workflow ausführen, um die gesamte Pipeline zu starten:\n• Legen Sie eine Ausführungsanzahl fest (×1 bis ×99) für Stapelverarbeitung\n• Jederzeit mit der Stopp-Schaltfläche abbrechen\n• Echtzeit-Fortschritt im Ausführungsmonitor überwachen\n• Jeder Knoten zeigt seinen Status: Warteschlange → Läuft → Fertig"
+        "desc": "Klicken Sie auf Run, um die gesamte Pipeline zu starten:\n• Legen Sie eine Ausführungsanzahl fest (×1 bis ×99) für Stapelverarbeitung\n• Jederzeit mit der Stopp-Schaltfläche abbrechen\n• Klicken Sie auf das Uhr-Symbol, um den Ausführungsmonitor für Echtzeit-Fortschritt zu öffnen\n• Jeder Knoten zeigt seinen Status: Warteschlange → Läuft → Fertig"
       },
-      "templates": {
-        "title": "Vorlagen, Import & Export",
-        "desc": "Klicken Sie auf das ⋮-Menü für erweiterte Funktionen:\n• Speichern Sie Ihren Workflow als wiederverwendbare Vorlage\n• Importieren/Exportieren Sie Workflows als JSON zum Teilen\n• Öffnen Sie mehrere Workflows in Tabs (wie ein Browser)\n• Durchsuchen Sie vorgefertigte Vorlagen in der Symbolleiste"
+      "moreMenu": {
+        "title": "Speichern, Import & Export",
+        "desc": "Klicken Sie auf das ⋮-Menü:\n• Speichern — aktuellen Workflow speichern\n• Als Vorlage speichern — Workflow als wiederverwendbare Vorlage speichern\n• Import / Export — Workflows als JSON-Dateien teilen"
       }
     },
     "promptOptimizer": {
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index e881c73e..d971d507 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -124,6 +124,8 @@
     "title": "Playground",
     "selectModel": "Select a model",
     "searchModels": "Search models...",
+    "modelSelector": "Model Selector",
+    "specificFunction": "Specific Model Function",
     "noModelSelected": "No model selected",
     "selectModelPrompt": "Select a model to configure parameters",
     "run": "Run",
@@ -146,6 +148,8 @@
     "webPage": "WebPage",
     "docs": "Docs",
     "noTabs": "No playground tabs open",
+    "openSessions": "Open Sessions",
+    "workspace": "Workspace",
     "tabs": {
       "newTab": "New Tab",
       "closeTab": "Close tab",
@@ -195,6 +199,7 @@
       "removeFile": "Remove File",
       "removeFileConfirm": "Are you sure you want to remove this file?"
     },
+    "generationComplete": "Generation complete",
     "autoSaved": "Auto-saved to Assets",
     "autoSavedDesc": "Saved {{count}} output(s) to My Assets",
     "savedToAssets": "Saved to Assets",
@@ -263,7 +268,27 @@
     },
     "history": {
       "title": "History"
-    }
+    },
+    "rightPanel": {
+      "explore": "Explore",
+      "allModels": "All Models",
+      "models": "Models",
+      "featuredModels": "Featured Models",
+      "resultsHub": "Results Hub",
+      "result": "Result",
+      "templates": "Templates",
+      "assets": "My Assets"
+    },
+    "explore": {
+      "searchPlaceholder": "Search models, LoRAs, and styles...",
+      "all": "All",
+      "allModels": "All Models",
+      "favorites": "Favorites",
+      "noFavorites": "No favorites yet — star a model to save it here",
+      "searchResults": "{{count}} results"
+    },
+    "recentGenerations": "Recent Generations",
+    "viewAll": "View All"
   },
   "history": {
     "title": "History",
@@ -1382,41 +1407,37 @@
       },
       "nodePaletteBtn": {
         "title": "Node Palette",
-        "desc": "Click this button to open the Node Palette — your toolbox of all available nodes. You can also search, drag, or click to add nodes to the canvas."
+        "desc": "Click this button to open the Node Palette — your toolbox of all available nodes."
       },
       "nodePalette": {
         "title": "Node Categories",
-        "desc": "Nodes are organized by category:\n• Input — Upload files or enter text as starting data\n• AI Task — Run any WaveSpeed AI model (see next step)\n• Free Tools — 12 built-in tools like background removal, face enhancement, format conversion\n• Output — Preview results or export files to disk\n\nDrag a node to the canvas or click to add it."
+        "desc": "Nodes are organized into 5 categories:\n• AI Model — Run any WaveSpeed AI model\n• Input — Upload media files or enter text\n• Output — Export files or preview results\n• Processing — Combine or select outputs\n• Free Tools — 12 built-in tools (background removal, face enhancement, format conversion, etc.)\n\nDrag a node to the canvas or click to add it."
       },
       "aiTask": {
-        "title": "AI Task Node — The Core",
-        "desc": "The AI Task node is the most powerful node in Workflow. It can run any WaveSpeed AI model for image generation, video creation, style transfer, and more.",
+        "title": "WaveSpeed API Node",
+        "desc": "The WaveSpeed API node is the core of Workflow — it can run any AI model on the platform. When you select a model, the node card expands to show all configurable parameters inline. After execution, results are also displayed directly inside the node.",
         "features": {
-          "modelSwitch": "Choose from hundreds of AI models — the parameter panel updates dynamically based on the selected model",
-          "dynamicParams": "Each model has its own parameters (prompt, image size, seed, etc.) that appear automatically when selected",
+          "modelSwitch": "Choose from hundreds of AI models — parameters update dynamically based on the selected model",
+          "dynamicParams": "Each model has its own parameters (prompt, image size, seed, etc.) that appear automatically inside the node when selected",
           "costEstimate": "Real-time cost estimation per execution, so you always know the price before running",
           "upstream": "Connect upstream node outputs (images, text) as inputs — build multi-step AI pipelines"
         }
       },
       "canvas": {
         "title": "Canvas Interactions",
-        "desc": "The central canvas is your workspace:\n• Drag nodes from the palette to position them\n• Drag from output ports to input ports to create connections\n• Right-click for context menu (copy, paste, delete)\n• Scroll to zoom, drag background to pan\n• Shortcuts: Ctrl+Z undo, Ctrl+C/V copy-paste, Delete to remove"
+        "desc": "The canvas is your workspace:\n• Drag nodes to position them\n• Drag from output ports to input ports to create connections\n• Click a node to select it — parameters expand inside the node for editing\n• Right-click for context menu (copy, paste, delete)\n• Scroll to zoom, drag background to pan\n• Shortcuts: Ctrl+Z undo, Ctrl+C/V copy-paste, Delete to remove"
       },
       "canvasTools": {
         "title": "Canvas Tools",
-        "desc": "Three handy tools for navigating and organizing your canvas:\n• Select / Hand mode — toggle between selecting nodes (V) and panning the canvas (H)\n• Fit View — auto-zoom to fit all nodes in the viewport\n• Auto Layout — automatically arrange nodes in a clean, readable layout"
-      },
-      "config": {
-        "title": "Configure & View Results",
-        "desc": "Click any node to select it. Config and Results appear inside the node card:\n• Config — Set model parameters, upload files, enter prompts\n• Results — View execution outputs (images, videos, 3D models)\n\nParameters update dynamically based on the node type and selected model. Results support fullscreen preview and download."
+        "desc": "Right-side toolbar on the canvas:\n• Grid — Toggle background grid display\n• Select / Hand — Switch between selecting nodes and panning the canvas\n• Zoom in / Zoom out\n• Fit View — Auto-zoom to fit all nodes in the viewport\n• Auto Layout — Automatically arrange nodes in a clean, readable layout"
       },
       "run": {
         "title": "Run Your Workflow",
-        "desc": "Click \"Run\" to execute the entire pipeline:\n• Set a run count (×1 to ×99) for batch processing\n• Cancel anytime with the stop button\n• Monitor real-time progress in the Execution Monitor\n• Each node shows its status: queued → running → done"
+        "desc": "Click \"Run\" to execute the entire pipeline:\n• Set a run count (×1 to ×99) for batch processing\n• Cancel anytime with the stop button\n• Click the clock icon to open the Execution Monitor and track real-time progress\n• Each node shows its status: queued → running → done"
       },
-      "templates": {
-        "title": "Templates, Import & Export",
-        "desc": "Click the ⋮ menu for advanced features:\n• Save your workflow as a reusable template\n• Import/Export workflows as JSON to share\n• Open multiple workflows in tabs (like a browser)\n• Browse pre-built templates from the toolbar"
+      "moreMenu": {
+        "title": "Save, Import & Export",
+        "desc": "Click the ⋮ menu:\n• Save — Save the current workflow\n• Save as Template — Save the workflow as a reusable template\n• Import / Export — Share workflows via JSON files"
       }
     },
     "promptOptimizer": {
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 8a3fdf67..2851464d 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Paleta de nodos",
-        "desc": "Haz clic en este botón para abrir la Paleta de nodos: tu caja de herramientas con todos los nodos disponibles. También puedes buscar, arrastrar o hacer clic para añadir nodos al lienzo."
+        "desc": "Haz clic en este botón para abrir la Paleta de nodos — tu caja de herramientas con todos los nodos disponibles."
       },
       "nodePalette": {
         "title": "Categorías de nodos",
-        "desc": "Los nodos están organizados por categoría:\n• Entrada — Sube archivos o introduce texto como datos iniciales\n• Tarea de IA — Ejecuta cualquier modelo de WaveSpeed AI (ver siguiente paso)\n• Herramientas gratuitas — 12 herramientas integradas como eliminación de fondo, mejora facial y conversión de formato\n• Salida — Previsualiza resultados o exporta archivos al disco\n\nArrastra un nodo al lienzo o haz clic para añadirlo."
+        "desc": "Los nodos están organizados en 5 categorías:\n• Modelo AI — Ejecuta cualquier modelo WaveSpeed AI\n• Entrada — Sube archivos multimedia o introduce texto\n• Salida — Exporta archivos o previsualiza resultados\n• Procesamiento — Combina o selecciona resultados\n• Herramientas gratuitas — 12 herramientas integradas (eliminación de fondo, mejora facial, conversión de formato, etc.)\n\nArrastra un nodo al lienzo o haz clic para añadirlo."
       },
       "aiTask": {
-        "title": "Nodo de Tarea de IA — El núcleo",
-        "desc": "El nodo de Tarea de IA es el más potente de Workflow. Puede ejecutar cualquier modelo de WaveSpeed AI para generación de imágenes, creación de video, transferencia de estilo y más.",
+        "title": "Nodo WaveSpeed API",
+        "desc": "El nodo WaveSpeed API es el núcleo de Workflow — puede ejecutar cualquier modelo AI de la plataforma. Al seleccionar un modelo, la tarjeta del nodo se expande mostrando todos los parámetros configurables en línea. Tras la ejecución, los resultados también se muestran directamente dentro del nodo.",
         "features": {
-          "modelSwitch": "Elige entre cientos de modelos de IA; el panel de parámetros se actualiza dinámicamente según el modelo seleccionado",
-          "dynamicParams": "Cada modelo tiene sus propios parámetros (prompt, tamaño de imagen, semilla, etc.) que aparecen automáticamente al seleccionarlo",
+          "modelSwitch": "Elige entre cientos de modelos AI — los parámetros se actualizan dinámicamente según el modelo seleccionado",
+          "dynamicParams": "Cada modelo tiene sus propios parámetros (prompt, tamaño de imagen, semilla, etc.) que aparecen automáticamente dentro del nodo al seleccionarlo",
           "costEstimate": "Estimación de costo en tiempo real por ejecución, para que siempre conozcas el precio antes de ejecutar",
-          "upstream": "Conecta salidas de nodos anteriores (imágenes, texto) como entradas para construir flujos de IA de varios pasos"
+          "upstream": "Conecta salidas de nodos anteriores (imágenes, texto) como entradas — construye flujos de IA de varios pasos"
         }
       },
       "canvas": {
         "title": "Interacciones del lienzo",
-        "desc": "El lienzo central es tu espacio de trabajo:\n• Arrastra nodos desde la paleta para colocarlos\n• Arrastra desde puertos de salida a puertos de entrada para crear conexiones\n• Clic derecho para menú contextual (copiar, pegar, eliminar)\n• Desplaza para hacer zoom y arrastra el fondo para mover la vista\n• Atajos: Ctrl+Z deshacer, Ctrl+C/V copiar-pegar, Delete para eliminar"
+        "desc": "El lienzo es tu espacio de trabajo:\n• Arrastra nodos para colocarlos\n• Arrastra desde puertos de salida a puertos de entrada para crear conexiones\n• Haz clic en un nodo para seleccionarlo — los parámetros se expanden dentro del nodo para editar\n• Clic derecho para menú contextual (copiar, pegar, eliminar)\n• Desplaza para hacer zoom y arrastra el fondo para mover la vista\n• Atajos: Ctrl+Z deshacer, Ctrl+C/V copiar-pegar, Delete para eliminar"
       },
       "canvasTools": {
         "title": "Herramientas del lienzo",
-        "desc": "Tres herramientas prácticas para navegar y organizar el lienzo:\n• Modo Selección / Mano — Alterna entre seleccionar nodos (V) y mover el lienzo (H)\n• Ajustar vista — Zoom automático para encajar todos los nodos en la ventana\n• Diseño automático — Organiza los nodos automáticamente en un diseño limpio y legible"
-      },
-      "config": {
-        "title": "Configurar y ver resultados",
-        "desc": "Haz clic en cualquier nodo para seleccionarlo. El panel derecho muestra dos pestañas:\n• Configuración — Define parámetros del modelo, sube archivos e introduce prompts\n• Resultados — Visualiza las salidas de ejecución (imágenes, videos, modelos 3D)\n\nLos parámetros se actualizan dinámicamente según el tipo de nodo y el modelo seleccionado. Los resultados permiten vista en pantalla completa y descarga."
+        "desc": "Barra de herramientas a la derecha del lienzo:\n• Cuadrícula — Mostrar/ocultar la cuadrícula de fondo\n• Selección / Mano — Alterna entre seleccionar nodos y mover el lienzo\n• Acercar / Alejar\n• Ajustar vista — Zoom automático para encajar todos los nodos\n• Diseño automático — Organiza los nodos automáticamente de forma limpia y legible"
       },
       "run": {
         "title": "Ejecuta tu workflow",
-        "desc": "Haz clic en \"Ejecutar workflow\" para ejecutar toda la canalización:\n• Define la cantidad de ejecuciones (×1 a ×99) para procesamiento por lotes\n• Cancela en cualquier momento con el botón de detener\n• Supervisa el progreso en tiempo real en el Monitor de ejecución\n• Cada nodo muestra su estado: queued → running → done"
+        "desc": "Haz clic en \"Run\" para ejecutar toda la canalización:\n• Define la cantidad de ejecuciones (×1 a ×99) para procesamiento por lotes\n• Cancela en cualquier momento con el botón de detener\n• Haz clic en el icono de reloj para abrir el Monitor de ejecución y supervisar el progreso en tiempo real\n• Cada nodo muestra su estado: en cola → ejecutando → completado"
       },
-      "templates": {
-        "title": "Plantillas, importar y exportar",
-        "desc": "Haz clic en el menú ⋮ para funciones avanzadas:\n• Guarda tu workflow como plantilla reutilizable\n• Importa/exporta workflows como JSON para compartir\n• Abre varios workflows en pestañas (como un navegador)\n• Explora plantillas predefinidas desde la barra de herramientas"
+      "moreMenu": {
+        "title": "Guardar, importar y exportar",
+        "desc": "Haz clic en el menú ⋮:\n• Guardar — Guardar el workflow actual\n• Guardar como plantilla — Guardar el workflow como plantilla reutilizable\n• Importar / Exportar — Compartir workflows mediante archivos JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 376d173c..0b07305e 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -1348,41 +1348,37 @@
       },
       "nodePaletteBtn": {
         "title": "Palette de nœuds",
-        "desc": "Cliquez sur ce bouton pour ouvrir la Palette de nœuds — votre boîte à outils de tous les nœuds disponibles. Vous pouvez également rechercher, glisser ou cliquer pour ajouter des nœuds au canevas."
+        "desc": "Cliquez sur ce bouton pour ouvrir la Palette de nœuds — votre boîte à outils de tous les nœuds disponibles."
       },
       "nodePalette": {
         "title": "Catégories de nœuds",
-        "desc": "Les nœuds sont organisés par catégorie :\n• Entrée — Téléchargez des fichiers ou saisissez du texte comme données de départ\n• Tâche AI — Exécutez n'importe quel modèle WaveSpeed AI (voir l'étape suivante)\n• Outils gratuits — 12 outils intégrés comme la suppression d'arrière-plan, l'amélioration des visages, la conversion de format\n• Sortie — Prévisualisez les résultats ou exportez les fichiers sur le disque\n\nGlissez un nœud sur le canevas ou cliquez pour l'ajouter."
+        "desc": "Les nœuds sont organisés en 5 catégories :\n• Modèle AI — Exécutez n'importe quel modèle WaveSpeed AI\n• Entrée — Téléchargez des fichiers média ou saisissez du texte\n• Sortie — Exportez des fichiers ou prévisualisez les résultats\n• Traitement — Combinez ou sélectionnez les résultats\n• Outils gratuits — 12 outils intégrés (suppression d'arrière-plan, amélioration des visages, conversion de format, etc.)\n\nGlissez un nœud sur le canevas ou cliquez pour l'ajouter."
       },
       "aiTask": {
-        "title": "Nœud Tâche AI — Le cœur",
-        "desc": "Le nœud Tâche AI est le nœud le plus puissant de Workflow. Il peut exécuter n'importe quel modèle WaveSpeed AI pour la génération d'images, la création vidéo, le transfert de style et plus encore.",
+        "title": "Nœud WaveSpeed API",
+        "desc": "Le nœud WaveSpeed API est le cœur de Workflow — il peut exécuter n'importe quel modèle AI de la plateforme. Lorsque vous sélectionnez un modèle, la carte du nœud s'étend pour afficher tous les paramètres configurables en ligne. Après l'exécution, les résultats s'affichent également directement dans le nœud.",
         "features": {
-          "modelSwitch": "Choisissez parmi des centaines de modèles AI — le panneau de paramètres se met à jour dynamiquement selon le modèle sélectionné",
-          "dynamicParams": "Chaque modèle a ses propres paramètres (prompt, taille d'image, seed, etc.) qui apparaissent automatiquement lors de la sélection",
+          "modelSwitch": "Choisissez parmi des centaines de modèles AI — les paramètres se mettent à jour dynamiquement selon le modèle sélectionné",
+          "dynamicParams": "Chaque modèle a ses propres paramètres (prompt, taille d'image, seed, etc.) qui apparaissent automatiquement dans le nœud lors de la sélection",
           "costEstimate": "Estimation du coût en temps réel par exécution, pour toujours connaître le prix avant de lancer",
           "upstream": "Connectez les sorties des nœuds en amont (images, texte) comme entrées — construisez des pipelines AI multi-étapes"
         }
       },
       "canvas": {
         "title": "Interactions du canevas",
-        "desc": "Le canevas central est votre espace de travail :\n• Glissez les nœuds depuis la palette pour les positionner\n• Glissez des ports de sortie vers les ports d'entrée pour créer des connexions\n• Clic droit pour le menu contextuel (copier, coller, supprimer)\n• Défilez pour zoomer, glissez l'arrière-plan pour naviguer\n• Raccourcis : Ctrl+Z annuler, Ctrl+C/V copier-coller, Delete pour supprimer"
+        "desc": "Le canevas est votre espace de travail :\n• Glissez les nœuds pour les positionner\n• Glissez des ports de sortie vers les ports d'entrée pour créer des connexions\n• Cliquez sur un nœud pour le sélectionner — les paramètres s'étendent dans le nœud pour l'édition\n• Clic droit pour le menu contextuel (copier, coller, supprimer)\n• Défilez pour zoomer, glissez l'arrière-plan pour naviguer\n• Raccourcis : Ctrl+Z annuler, Ctrl+C/V copier-coller, Delete pour supprimer"
       },
       "canvasTools": {
         "title": "Outils du canevas",
-        "desc": "Trois outils pratiques pour naviguer et organiser votre canevas :\n• Mode Sélection / Main — basculez entre la sélection de nœuds (V) et le déplacement du canevas (H)\n• Ajuster la vue — zoom automatique pour afficher tous les nœuds dans la fenêtre\n• Disposition automatique — arrange automatiquement les nœuds de manière claire et lisible"
-      },
-      "config": {
-        "title": "Configurer et voir les résultats",
-        "desc": "Cliquez sur un nœud pour le sélectionner. Le panneau droit affiche deux onglets :\n• Config — Définir les paramètres du modèle, télécharger des fichiers, saisir des prompts\n• Résultats — Voir les sorties d'exécution (images, vidéos, modèles 3D)\n\nLes paramètres se mettent à jour dynamiquement selon le type de nœud et le modèle sélectionné. Les résultats supportent l'aperçu plein écran et le téléchargement."
+        "desc": "Barre d'outils à droite du canevas :\n• Grille — Afficher/masquer la grille d'arrière-plan\n• Sélection / Main — basculez entre la sélection de nœuds et le déplacement du canevas\n• Zoom avant / Zoom arrière\n• Ajuster la vue — zoom automatique pour afficher tous les nœuds\n• Disposition automatique — arrange automatiquement les nœuds de manière claire et lisible"
       },
       "run": {
         "title": "Exécuter votre workflow",
-        "desc": "Cliquez sur « Exécuter le workflow » pour lancer l'ensemble du pipeline :\n• Définissez un nombre d'exécutions (×1 à ×99) pour le traitement par lots\n• Annulez à tout moment avec le bouton d'arrêt\n• Surveillez la progression en temps réel dans le Moniteur d'exécution\n• Chaque nœud affiche son statut : en attente → en cours → terminé"
+        "desc": "Cliquez sur « Run » pour lancer l'ensemble du pipeline :\n• Définissez un nombre d'exécutions (×1 à ×99) pour le traitement par lots\n• Annulez à tout moment avec le bouton d'arrêt\n• Cliquez sur l'icône horloge pour ouvrir le Moniteur d'exécution et suivre la progression en temps réel\n• Chaque nœud affiche son statut : en attente → en cours → terminé"
       },
-      "templates": {
-        "title": "Modèles, import et export",
-        "desc": "Cliquez sur le menu ⋮ pour les fonctionnalités avancées :\n• Enregistrez votre workflow comme modèle réutilisable\n• Importez/Exportez des workflows en JSON pour les partager\n• Ouvrez plusieurs workflows dans des onglets (comme un navigateur)\n• Parcourez les modèles prédéfinis depuis la barre d'outils"
+      "moreMenu": {
+        "title": "Enregistrer, importer et exporter",
+        "desc": "Cliquez sur le menu ⋮ :\n• Enregistrer — Sauvegarder le workflow actuel\n• Enregistrer comme modèle — Sauvegarder le workflow comme modèle réutilisable\n• Importer / Exporter — Partager des workflows via des fichiers JSON"
       }
     },
     "promptOptimizer": {
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
index b9ed4722..7911dbef 100644
--- a/src/i18n/locales/hi.json
+++ b/src/i18n/locales/hi.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "नोड पैलेट",
-        "desc": "इस बटन पर क्लिक करके नोड पैलेट खोलें — उपलब्ध सभी नोड्स का आपका टूलबॉक्स। आप खोज सकते हैं, ड्रैग कर सकते हैं, या क्लिक करके कैनवास में नोड जोड़ सकते हैं।"
+        "desc": "इस बटन पर क्लिक करके नोड पैलेट खोलें — उपलब्ध सभी नोड्स का आपका टूलबॉक्स।"
       },
       "nodePalette": {
         "title": "नोड श्रेणियां",
-        "desc": "नोड्स श्रेणियों के अनुसार व्यवस्थित हैं:\n• इनपुट — शुरुआती डेटा के लिए फाइल अपलोड करें या टेक्स्ट दर्ज करें\n• AI टास्क — कोई भी WaveSpeed AI मॉडल चलाएं (अगला चरण देखें)\n• फ्री टूल्स — 12 बिल्ट-इन टूल्स, जैसे बैकग्राउंड हटाना, फेस एन्हांसमेंट, फॉर्मेट कन्वर्ज़न\n• आउटपुट — परिणाम देखें या फाइलों को डिस्क में एक्सपोर्ट करें\n\nनोड को कैनवास पर ड्रैग करें या क्लिक करके जोड़ें।"
+        "desc": "नोड्स 5 श्रेणियों में व्यवस्थित हैं:\n• AI मॉडल — कोई भी WaveSpeed AI मॉडल चलाएं\n• इनपुट — मीडिया फाइल अपलोड करें या टेक्स्ट दर्ज करें\n• आउटपुट — फाइलें एक्सपोर्ट करें या परिणाम देखें\n• प्रोसेसिंग — आउटपुट को जोड़ें या चुनें\n• फ्री टूल्स — 12 बिल्ट-इन टूल्स (बैकग्राउंड हटाना, फेस एन्हांसमेंट, फॉर्मेट कन्वर्ज़न आदि)\n\nनोड को कैनवास पर ड्रैग करें या क्लिक करके जोड़ें।"
       },
       "aiTask": {
-        "title": "AI टास्क नोड — मुख्य हिस्सा",
-        "desc": "AI टास्क नोड Workflow का सबसे शक्तिशाली नोड है। यह इमेज जनरेशन, वीडियो क्रिएशन, स्टाइल ट्रांसफर और अधिक के लिए किसी भी WaveSpeed AI मॉडल को चला सकता है।",
+        "title": "WaveSpeed API नोड",
+        "desc": "WaveSpeed API नोड Workflow का मुख्य हिस्सा है — यह प्लेटफॉर्म पर किसी भी AI मॉडल को चला सकता है। मॉडल चुनने पर, नोड कार्ड विस्तारित होकर सभी कॉन्फ़िगर करने योग्य पैरामीटर इनलाइन दिखाता है। रन के बाद, परिणाम भी सीधे नोड के अंदर दिखाई देते हैं।",
         "features": {
-          "modelSwitch": "सैकड़ों AI मॉडलों में से चुनें — चयनित मॉडल के आधार पर पैरामीटर पैनल डायनामिक रूप से अपडेट होता है",
-          "dynamicParams": "हर मॉडल के अपने पैरामीटर (प्रॉम्प्ट, इमेज साइज़, सीड आदि) होते हैं, जो चयन के बाद अपने आप दिखते हैं",
+          "modelSwitch": "सैकड़ों AI मॉडलों में से चुनें — चयनित मॉडल के आधार पर पैरामीटर डायनामिक रूप से अपडेट होते हैं",
+          "dynamicParams": "हर मॉडल के अपने पैरामीटर (प्रॉम्प्ट, इमेज साइज़, सीड आदि) होते हैं, जो चयन के बाद नोड के अंदर अपने आप दिखते हैं",
           "costEstimate": "हर रन के लिए रियल-टाइम लागत अनुमान, ताकि रन से पहले ही कीमत पता रहे",
           "upstream": "अपस्ट्रीम नोड आउटपुट (इमेज, टेक्स्ट) को इनपुट के रूप में जोड़कर मल्टी-स्टेप AI पाइपलाइन बनाएं"
         }
       },
       "canvas": {
         "title": "कैनवास इंटरैक्शन",
-        "desc": "केंद्रीय कैनवास आपका कार्यक्षेत्र है:\n• नोड्स को पैलेट से ड्रैग करके स्थान दें\n• कनेक्शन बनाने के लिए आउटपुट पोर्ट से इनपुट पोर्ट तक ड्रैग करें\n• कॉन्टेक्स्ट मेनू (कॉपी, पेस्ट, डिलीट) के लिए राइट-क्लिक करें\n• ज़ूम के लिए स्क्रॉल करें, पैन करने के लिए बैकग्राउंड ड्रैग करें\n• शॉर्टकट: Ctrl+Z undo, Ctrl+C/V copy-paste, Delete हटाने के लिए"
+        "desc": "कैनवास आपका कार्यक्षेत्र है:\n• नोड्स को ड्रैग करके स्थान दें\n• कनेक्शन बनाने के लिए आउटपुट पोर्ट से इनपुट पोर्ट तक ड्रैग करें\n• नोड पर क्लिक करके चुनें — पैरामीटर नोड के अंदर विस्तारित होकर एडिट के लिए दिखते हैं\n• कॉन्टेक्स्ट मेनू (कॉपी, पेस्ट, डिलीट) के लिए राइट-क्लिक करें\n• ज़ूम के लिए स्क्रॉल करें, पैन करने के लिए बैकग्राउंड ड्रैग करें\n• शॉर्टकट: Ctrl+Z undo, Ctrl+C/V copy-paste, Delete हटाने के लिए"
       },
       "canvasTools": {
         "title": "कैनवास टूल्स",
-        "desc": "कैनवास नेविगेट और व्यवस्थित करने के लिए 3 उपयोगी टूल्स:\n• Select / Hand मोड — नोड चुनने (V) और कैनवास पैन करने (H) के बीच टॉगल\n• Fit View — सभी नोड्स को व्यूपोर्ट में फिट करने के लिए ऑटो-ज़ूम\n• Auto Layout — नोड्स को साफ और पढ़ने योग्य लेआउट में स्वतः व्यवस्थित करें"
-      },
-      "config": {
-        "title": "कॉन्फ़िगर करें और परिणाम देखें",
-        "desc": "किसी भी नोड को चुनने के लिए उस पर क्लिक करें। दाईं ओर का पैनल दो टैब दिखाता है:\n• Config — मॉडल पैरामीटर सेट करें, फाइल अपलोड करें, प्रॉम्प्ट दर्ज करें\n• Results — रन आउटपुट देखें (इमेज, वीडियो, 3D मॉडल)\n\nनोड प्रकार और चयनित मॉडल के आधार पर पैरामीटर डायनामिक रूप से अपडेट होते हैं। परिणाम फुलस्क्रीन प्रीव्यू और डाउनलोड को सपोर्ट करते हैं।"
+        "desc": "कैनवास के दाईं ओर टूलबार:\n• ग्रिड — बैकग्राउंड ग्रिड दिखाएं/छुपाएं\n• Select / Hand — नोड चुनने और कैनवास पैन करने के बीच टॉगल\n• ज़ूम इन / ज़ूम आउट\n• Fit View — सभी नोड्स को दिखाने के लिए ऑटो-ज़ूम\n• Auto Layout — नोड्स को साफ और पढ़ने योग्य लेआउट में स्वतः व्यवस्थित करें"
       },
       "run": {
         "title": "अपना Workflow चलाएं",
-        "desc": "पूरी पाइपलाइन चलाने के लिए \"चलाएं\" पर क्लिक करें:\n• बैच प्रोसेसिंग के लिए रन काउंट (×1 से ×99) सेट करें\n• स्टॉप बटन से कभी भी रद्द करें\n• Execution Monitor में रियल-टाइम प्रगति देखें\n• हर नोड की स्थिति दिखती है: queued → running → done"
+        "desc": "पूरी पाइपलाइन चलाने के लिए \"Run\" पर क्लिक करें:\n• बैच प्रोसेसिंग के लिए रन काउंट (×1 से ×99) सेट करें\n• स्टॉप बटन से कभी भी रद्द करें\n• घड़ी आइकन पर क्लिक करके Execution Monitor खोलें और रियल-टाइम प्रगति देखें\n• हर नोड की स्थिति दिखती है: कतार में → चल रहा → पूर्ण"
       },
-      "templates": {
-        "title": "टेम्पलेट, इम्पोर्ट और एक्सपोर्ट",
-        "desc": "एडवांस फीचर्स के लिए ⋮ मेनू पर क्लिक करें:\n• अपने workflow को पुन: प्रयोज्य टेम्पलेट के रूप में सहेजें\n• शेयर करने के लिए workflows को JSON के रूप में इम्पोर्ट/एक्सपोर्ट करें\n• कई workflows को टैब्स में खोलें (ब्राउज़र की तरह)\n• टूलबार से पहले से बने टेम्पलेट ब्राउज़ करें"
+      "moreMenu": {
+        "title": "सहेजें, इम्पोर्ट और एक्सपोर्ट",
+        "desc": "⋮ मेनू पर क्लिक करें:\n• सहेजें — वर्तमान workflow सहेजें\n• टेम्पलेट के रूप में सहेजें — workflow को पुन: प्रयोज्य टेम्पलेट के रूप में सहेजें\n• इम्पोर्ट / एक्सपोर्ट — JSON फाइलों के माध्यम से workflow शेयर करें"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/id.json b/src/i18n/locales/id.json
index 787375ca..a8d4b99d 100644
--- a/src/i18n/locales/id.json
+++ b/src/i18n/locales/id.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Palet Node",
-        "desc": "Klik tombol ini untuk membuka Palet Node — kotak alat berisi semua node yang tersedia. Anda juga dapat mencari, menyeret, atau klik untuk menambahkan node ke kanvas."
+        "desc": "Klik tombol ini untuk membuka Palet Node — kotak alat berisi semua node yang tersedia."
       },
       "nodePalette": {
         "title": "Kategori Node",
-        "desc": "Node diatur berdasarkan kategori:\n• Input — Unggah file atau masukkan teks sebagai data awal\n• Tugas AI — Jalankan model WaveSpeed AI apa pun (lihat langkah berikutnya)\n• Alat Gratis — 12 alat bawaan seperti penghapus latar, peningkatan wajah, konversi format\n• Output — Pratinjau hasil atau ekspor file ke disk\n\nSeret node ke kanvas atau klik untuk menambahkannya."
+        "desc": "Node diatur dalam 5 kategori:\n• Model AI — Jalankan model WaveSpeed AI apa pun\n• Input — Unggah file media atau masukkan teks\n• Output — Ekspor file atau pratinjau hasil\n• Pemrosesan — Gabungkan atau pilih hasil\n• Alat Gratis — 12 alat bawaan (penghapus latar, peningkatan wajah, konversi format, dll.)\n\nSeret node ke kanvas atau klik untuk menambahkannya."
       },
       "aiTask": {
-        "title": "Node Tugas AI — Inti Utama",
-        "desc": "Node Tugas AI adalah node paling kuat di Workflow. Node ini dapat menjalankan model WaveSpeed AI apa pun untuk pembuatan gambar, pembuatan video, transfer gaya, dan lainnya.",
+        "title": "Node WaveSpeed API",
+        "desc": "Node WaveSpeed API adalah inti dari Workflow — dapat menjalankan model AI apa pun di platform. Saat model dipilih, kartu node akan meluas menampilkan semua parameter konfigurasi secara inline. Setelah eksekusi, hasil juga ditampilkan langsung di dalam node.",
         "features": {
-          "modelSwitch": "Pilih dari ratusan model AI — panel parameter diperbarui dinamis sesuai model yang dipilih",
-          "dynamicParams": "Setiap model memiliki parameternya sendiri (prompt, ukuran gambar, seed, dll.) yang muncul otomatis saat dipilih",
+          "modelSwitch": "Pilih dari ratusan model AI — parameter diperbarui dinamis sesuai model yang dipilih",
+          "dynamicParams": "Setiap model memiliki parameternya sendiri (prompt, ukuran gambar, seed, dll.) yang muncul otomatis di dalam node saat dipilih",
           "costEstimate": "Estimasi biaya real-time per eksekusi agar Anda selalu tahu harga sebelum menjalankan",
           "upstream": "Hubungkan output node hulu (gambar, teks) sebagai input — bangun pipeline AI multi-langkah"
         }
       },
       "canvas": {
         "title": "Interaksi Kanvas",
-        "desc": "Kanvas utama adalah ruang kerja Anda:\n• Seret node dari palet untuk memposisikannya\n• Seret dari port output ke port input untuk membuat koneksi\n• Klik kanan untuk menu konteks (salin, tempel, hapus)\n• Gulir untuk zoom, seret latar untuk pan\n• Pintasan: Ctrl+Z undo, Ctrl+C/V copy-paste, Delete untuk menghapus"
+        "desc": "Kanvas adalah ruang kerja Anda:\n• Seret node untuk memposisikannya\n• Seret dari port output ke port input untuk membuat koneksi\n• Klik node untuk memilihnya — parameter meluas di dalam node untuk diedit\n• Klik kanan untuk menu konteks (salin, tempel, hapus)\n• Gulir untuk zoom, seret latar untuk pan\n• Pintasan: Ctrl+Z undo, Ctrl+C/V copy-paste, Delete untuk menghapus"
       },
       "canvasTools": {
         "title": "Alat Kanvas",
-        "desc": "Tiga alat praktis untuk menavigasi dan mengatur kanvas:\n• Mode Pilih / Tangan — alihkan antara memilih node (V) dan menggeser kanvas (H)\n• Fit View — zoom otomatis agar semua node muat di viewport\n• Tata Letak Otomatis — susun node secara otomatis agar rapi dan mudah dibaca"
-      },
-      "config": {
-        "title": "Konfigurasi & Lihat Hasil",
-        "desc": "Klik node mana pun untuk memilihnya. Panel kanan menampilkan dua tab:\n• Konfigurasi — Atur parameter model, unggah file, masukkan prompt\n• Hasil — Lihat output eksekusi (gambar, video, model 3D)\n\nParameter diperbarui secara dinamis berdasarkan jenis node dan model yang dipilih. Hasil mendukung pratinjau layar penuh dan unduhan."
+        "desc": "Bilah alat di sisi kanan kanvas:\n• Grid — Tampilkan/sembunyikan grid latar belakang\n• Pilih / Tangan — alihkan antara memilih node dan menggeser kanvas\n• Perbesar / Perkecil\n• Fit View — zoom otomatis agar semua node muat\n• Tata Letak Otomatis — susun node secara otomatis agar rapi dan mudah dibaca"
       },
       "run": {
         "title": "Jalankan Workflow Anda",
-        "desc": "Klik \"Jalankan\" untuk mengeksekusi seluruh pipeline:\n• Atur jumlah run (×1 hingga ×99) untuk pemrosesan batch\n• Batalkan kapan saja dengan tombol stop\n• Pantau progres real-time di Execution Monitor\n• Setiap node menampilkan status: queued → running → done"
+        "desc": "Klik \"Run\" untuk mengeksekusi seluruh pipeline:\n• Atur jumlah run (×1 hingga ×99) untuk pemrosesan batch\n• Batalkan kapan saja dengan tombol stop\n• Klik ikon jam untuk membuka Execution Monitor dan pantau progres real-time\n• Setiap node menampilkan status: antrean → berjalan → selesai"
       },
-      "templates": {
-        "title": "Template, Impor & Ekspor",
-        "desc": "Klik menu ⋮ untuk fitur lanjutan:\n• Simpan workflow Anda sebagai template yang dapat digunakan ulang\n• Impor/Ekspor workflow sebagai JSON untuk dibagikan\n• Buka beberapa workflow dalam tab (seperti browser)\n• Jelajahi template siap pakai dari toolbar"
+      "moreMenu": {
+        "title": "Simpan, Impor & Ekspor",
+        "desc": "Klik menu ⋮:\n• Simpan — Simpan workflow saat ini\n• Simpan sebagai template — Simpan workflow sebagai template yang dapat digunakan ulang\n• Impor / Ekspor — Bagikan workflow melalui file JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index b710e90c..fb9c399d 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Palette dei nodi",
-        "desc": "Fai clic su questo pulsante per aprire la Palette dei nodi, la tua cassetta degli attrezzi con tutti i nodi disponibili. Puoi anche cercare, trascinare o fare clic per aggiungere nodi alla canvas."
+        "desc": "Fai clic su questo pulsante per aprire la Palette dei nodi — la tua cassetta degli attrezzi con tutti i nodi disponibili."
       },
       "nodePalette": {
         "title": "Categorie di nodi",
-        "desc": "I nodi sono organizzati per categoria:\n• Input — Carica file o inserisci testo come dati iniziali\n• Attivita AI — Esegui qualsiasi modello WaveSpeed AI (vedi passaggio successivo)\n• Strumenti gratuiti — 12 strumenti integrati come rimozione sfondo, miglioramento volto, conversione formato\n• Output — Anteprima dei risultati o esportazione file su disco\n\nTrascina un nodo sulla canvas o fai clic per aggiungerlo."
+        "desc": "I nodi sono organizzati in 5 categorie:\n• Modello AI — Esegui qualsiasi modello WaveSpeed AI\n• Input — Carica file multimediali o inserisci testo\n• Output — Esporta file o visualizza risultati in anteprima\n• Elaborazione — Combina o seleziona i risultati\n• Strumenti gratuiti — 12 strumenti integrati (rimozione sfondo, miglioramento volto, conversione formato, ecc.)\n\nTrascina un nodo sulla canvas o fai clic per aggiungerlo."
       },
       "aiTask": {
-        "title": "Nodo Attivita AI - Il cuore",
-        "desc": "Il nodo Attivita AI e il nodo piu potente in Workflow. Puo eseguire qualsiasi modello WaveSpeed AI per generazione immagini, creazione video, trasferimento di stile e altro.",
+        "title": "Nodo WaveSpeed API",
+        "desc": "Il nodo WaveSpeed API e il cuore di Workflow — puo eseguire qualsiasi modello AI della piattaforma. Quando selezioni un modello, la scheda del nodo si espande mostrando tutti i parametri configurabili in linea. Dopo l'esecuzione, i risultati vengono mostrati direttamente all'interno del nodo.",
         "features": {
-          "modelSwitch": "Scegli tra centinaia di modelli AI: il pannello parametri si aggiorna dinamicamente in base al modello selezionato",
-          "dynamicParams": "Ogni modello ha i propri parametri (prompt, dimensione immagine, seed, ecc.) che appaiono automaticamente alla selezione",
+          "modelSwitch": "Scegli tra centinaia di modelli AI — i parametri si aggiornano dinamicamente in base al modello selezionato",
+          "dynamicParams": "Ogni modello ha i propri parametri (prompt, dimensione immagine, seed, ecc.) che appaiono automaticamente all'interno del nodo alla selezione",
           "costEstimate": "Stima dei costi in tempo reale per ogni esecuzione, cosi conosci sempre il prezzo prima di avviare",
-          "upstream": "Collega gli output dei nodi a monte (immagini, testo) come input e crea pipeline AI multi-step"
+          "upstream": "Collega gli output dei nodi a monte (immagini, testo) come input — crea pipeline AI multi-step"
         }
       },
       "canvas": {
         "title": "Interazioni della canvas",
-        "desc": "La canvas centrale e il tuo spazio di lavoro:\n• Trascina i nodi dalla palette per posizionarli\n• Trascina dalle porte di output alle porte di input per creare connessioni\n• Clic destro per menu contestuale (copia, incolla, elimina)\n• Scorri per zoom, trascina lo sfondo per pan\n• Scorciatoie: Ctrl+Z annulla, Ctrl+C/V copia-incolla, Delete per rimuovere"
+        "desc": "La canvas e il tuo spazio di lavoro:\n• Trascina i nodi per posizionarli\n• Trascina dalle porte di output alle porte di input per creare connessioni\n• Fai clic su un nodo per selezionarlo — i parametri si espandono nel nodo per la modifica\n• Clic destro per menu contestuale (copia, incolla, elimina)\n• Scorri per zoom, trascina lo sfondo per pan\n• Scorciatoie: Ctrl+Z annulla, Ctrl+C/V copia-incolla, Delete per rimuovere"
       },
       "canvasTools": {
         "title": "Strumenti della canvas",
-        "desc": "Tre strumenti utili per navigare e organizzare la canvas:\n• Modalita Seleziona / Mano — alterna tra selezione nodi (V) e spostamento canvas (H)\n• Adatta vista — zoom automatico per includere tutti i nodi nel viewport\n• Layout automatico — dispone automaticamente i nodi in modo ordinato e leggibile"
-      },
-      "config": {
-        "title": "Configura e visualizza risultati",
-        "desc": "Fai clic su qualsiasi nodo per selezionarlo. Il pannello destro mostra due tab:\n• Config — Imposta parametri modello, carica file, inserisci prompt\n• Risultati — Visualizza output di esecuzione (immagini, video, modelli 3D)\n\nI parametri si aggiornano dinamicamente in base al tipo di nodo e al modello selezionato. I risultati supportano anteprima a schermo intero e download."
+        "desc": "Barra degli strumenti a destra della canvas:\n• Griglia — Mostra/nascondi la griglia di sfondo\n• Seleziona / Mano — alterna tra selezione nodi e spostamento canvas\n• Zoom avanti / Zoom indietro\n• Adatta vista — zoom automatico per includere tutti i nodi\n• Layout automatico — dispone automaticamente i nodi in modo ordinato e leggibile"
       },
       "run": {
         "title": "Esegui il tuo workflow",
-        "desc": "Fai clic su \"Esegui workflow\" per eseguire l'intera pipeline:\n• Imposta un numero di esecuzioni (×1 a ×99) per il batch\n• Annulla in qualsiasi momento con il pulsante stop\n• Monitora il progresso in tempo reale nel Monitor di esecuzione\n• Ogni nodo mostra il proprio stato: queued → running → done"
+        "desc": "Fai clic su \"Run\" per eseguire l'intera pipeline:\n• Imposta un numero di esecuzioni (×1 a ×99) per il batch\n• Annulla in qualsiasi momento con il pulsante stop\n• Fai clic sull'icona orologio per aprire il Monitor di esecuzione e monitorare il progresso in tempo reale\n• Ogni nodo mostra il proprio stato: in coda → in esecuzione → completato"
       },
-      "templates": {
-        "title": "Template, importazione ed esportazione",
-        "desc": "Fai clic sul menu ⋮ per funzioni avanzate:\n• Salva il workflow come template riutilizzabile\n• Importa/Esporta workflow in JSON per condividerli\n• Apri piu workflow in tab (come un browser)\n• Sfoglia template predefiniti dalla toolbar"
+      "moreMenu": {
+        "title": "Salva, importa ed esporta",
+        "desc": "Fai clic sul menu ⋮:\n• Salva — Salva il workflow corrente\n• Salva come template — Salva il workflow come template riutilizzabile\n• Importa / Esporta — Condividi workflow tramite file JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index c1858fad..aeebee9a 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -1315,41 +1315,37 @@
       },
       "nodePaletteBtn": {
         "title": "ノードパレット",
-        "desc": "このボタンをクリックしてノードパレットを開きます。利用可能なすべてのノードのツールボックスです。検索、ドラッグ、またはクリックでノードをキャンバスに追加できます。"
+        "desc": "このボタンをクリックしてノードパレットを開きます。利用可能なすべてのノードのツールボックスです。"
       },
       "nodePalette": {
         "title": "ノードカテゴリ",
-        "desc": "ノードはカテゴリ別に整理されています：\n• 入力 — ファイルをアップロードまたはテキストを入力して開始データとする\n• AIタスク — 任意のWaveSpeed AIモデルを実行（次のステップを参照）\n• 無料ツール — 背景除去、顔補正、フォーマット変換など12種類の内蔵ツール\n• 出力 — 結果をプレビューまたはファイルをディスクにエクスポート\n\nノードをキャンバスにドラッグするか、クリックして追加します。"
+        "desc": "ノードは5つのカテゴリに分類されています：\n• AIモデル — 任意のWaveSpeed AIモデルを実行\n• 入力 — メディアファイルをアップロードまたはテキストを入力\n• 出力 — ファイルをエクスポートまたは結果をプレビュー\n• 処理 — 出力結果の結合または選択\n• 無料ツール — 12種類の内蔵ツール（背景除去、顔補正、フォーマット変換など）\n\nノードをキャンバスにドラッグするか、クリックして追加します。"
       },
       "aiTask": {
-        "title": "AIタスクノード — コア機能",
-        "desc": "AIタスクノードはワークフローで最も強力なノードです。画像生成、動画作成、スタイル転送など、任意のWaveSpeed AIモデルを実行できます。",
+        "title": "WaveSpeed API ノード",
+        "desc": "WaveSpeed API ノードはワークフローの中核です。プラットフォーム上の任意のAIモデルを実行できます。モデルを選択すると、ノードカードが展開してすべての設定パラメータがインラインで表示されます。実行後、結果もノード内に直接表示されます。",
         "features": {
-          "modelSwitch": "数百のAIモデルから選択 — 選択したモデルに応じてパラメータパネルが動的に更新されます",
-          "dynamicParams": "各モデルには独自のパラメータ（プロンプト、画像サイズ、シードなど）があり、選択時に自動的に表示されます",
+          "modelSwitch": "数百のAIモデルから選択 — 選択したモデルに応じてパラメータが動的に更新されます",
+          "dynamicParams": "各モデルには独自のパラメータ（プロンプト、画像サイズ、シードなど）があり、ノード内に自動的に表示されます",
           "costEstimate": "実行ごとのリアルタイムコスト見積もりで、実行前に常に価格を確認できます",
           "upstream": "上流ノードの出力（画像、テキスト）を入力として接続 — マルチステップAIパイプラインを構築"
         }
       },
       "canvas": {
         "title": "キャンバス操作",
-        "desc": "中央のキャンバスがワークスペースです：\n• パレットからノードをドラッグして配置\n• 出力ポートから入力ポートにドラッグして接続を作成\n• 右クリックでコンテキストメニュー（コピー、貼り付け、削除）\n• スクロールでズーム、背景をドラッグでパン\n• ショートカット：Ctrl+Z 元に戻す、Ctrl+C/V コピー＆ペースト、Delete で削除"
+        "desc": "キャンバスがワークスペースです：\n• ノードをドラッグして配置\n• 出力ポートから入力ポートにドラッグして接続を作成\n• ノードをクリックして選択 — パラメータがノード内に展開して編集可能に\n• 右クリックでコンテキストメニュー（コピー、貼り付け、削除）\n• スクロールでズーム、背景をドラッグでパン\n• ショートカット：Ctrl+Z 元に戻す、Ctrl+C/V コピー＆ペースト、Delete で削除"
       },
       "canvasTools": {
         "title": "キャンバスツール",
-        "desc": "キャンバスのナビゲーションと整理に便利な3つのツール：\n• 選択 / ハンドモード — ノードの選択（V）とキャンバスのパン（H）を切り替え\n• ビューに合わせる — すべてのノードがビューポートに収まるよう自動ズーム\n• 自動レイアウト — ノードを見やすく整然と自動配置"
-      },
-      "config": {
-        "title": "設定と結果の確認",
-        "desc": "任意のノードをクリックして選択します。右パネルに2つのタブが表示されます：\n• 設定 — モデルパラメータの設定、ファイルのアップロード、プロンプトの入力\n• 結果 — 実行出力の表示（画像、動画、3Dモデル）\n\nパラメータはノードタイプと選択したモデルに応じて動的に更新されます。結果はフルスクリーンプレビューとダウンロードに対応しています。"
+        "desc": "キャンバス右側のツールバー：\n• グリッド — 背景グリッドの表示切替\n• 選択 / ハンド — ノードの選択とキャンバスのパンを切り替え\n• ズームイン / ズームアウト\n• ビューに合わせる — すべてのノードが表示されるよう自動ズーム\n• 自動レイアウト — ノードを整然と自動配置"
       },
       "run": {
         "title": "ワークフローを実行",
-        "desc": "「ワークフローを実行」をクリックしてパイプライン全体を実行します：\n• バッチ処理用に実行回数を設定（×1〜×99）\n• 停止ボタンでいつでもキャンセル可能\n• 実行モニターでリアルタイムの進捗を監視\n• 各ノードのステータスを表示：待機中 → 実行中 → 完了"
+        "desc": "「Run」をクリックしてパイプライン全体を実行します：\n• バッチ処理用に実行回数を設定（×1〜×99）\n• 停止ボタンでいつでもキャンセル可能\n• 時計アイコンをクリックして実行モニターでリアルタイムの進捗を確認\n• 各ノードのステータスを表示：待機中 → 実行中 → 完了"
       },
-      "templates": {
-        "title": "テンプレート、インポート＆エクスポート",
-        "desc": "⋮メニューをクリックして高度な機能にアクセス：\n• ワークフローを再利用可能なテンプレートとして保存\n• ワークフローをJSONとしてインポート/エクスポートして共有\n• ブラウザのようにタブで複数のワークフローを開く\n• ツールバーからプリビルトテンプレートを閲覧"
+      "moreMenu": {
+        "title": "保存、インポート＆エクスポート",
+        "desc": "⋮メニューをクリック：\n• 保存 — 現在のワークフローを保存\n• テンプレートとして保存 — ワークフローを再利用可能なテンプレートとして保存\n• インポート / エクスポート — JSONファイルでワークフローを共有"
       }
     },
     "promptOptimizer": {
diff --git a/src/i18n/locales/ko.json b/src/i18n/locales/ko.json
index e7f251a8..c6a3be79 100644
--- a/src/i18n/locales/ko.json
+++ b/src/i18n/locales/ko.json
@@ -1348,41 +1348,37 @@
       },
       "nodePaletteBtn": {
         "title": "노드 팔레트",
-        "desc": "이 버튼을 클릭하여 노드 팔레트를 엽니다 — 사용 가능한 모든 노드의 도구 상자입니다. 검색, 드래그 또는 클릭으로 캔버스에 노드를 추가할 수 있습니다."
+        "desc": "이 버튼을 클릭하여 노드 팔레트를 엽니다 — 사용 가능한 모든 노드의 도구 상자입니다."
       },
       "nodePalette": {
         "title": "노드 카테고리",
-        "desc": "노드는 카테고리별로 정리되어 있습니다:\n• 입력 — 파일을 업로드하거나 텍스트를 입력하여 시작 데이터로 사용\n• AI 작업 — 모든 WaveSpeed AI 모델 실행 (다음 단계 참조)\n• 무료 도구 — 배경 제거, 얼굴 보정, 형식 변환 등 12가지 내장 도구\n• 출력 — 결과 미리보기 또는 파일을 디스크로 내보내기\n\n노드를 캔버스에 드래그하거나 클릭하여 추가합니다."
+        "desc": "노드는 5개 카테고리로 분류됩니다:\n• AI 모델 — 모든 WaveSpeed AI 모델 실행\n• 입력 — 미디어 파일 업로드 또는 텍스트 입력\n• 출력 — 파일 내보내기 또는 결과 미리보기\n• 처리 — 출력 결과 결합 또는 선택\n• 무료 도구 — 12가지 내장 도구 (배경 제거, 얼굴 보정, 형식 변환 등)\n\n노드를 캔버스에 드래그하거나 클릭하여 추가합니다."
       },
       "aiTask": {
-        "title": "AI 작업 노드 — 핵심 기능",
-        "desc": "AI 작업 노드는 워크플로우에서 가장 강력한 노드입니다. 이미지 생성, 비디오 제작, 스타일 전환 등 모든 WaveSpeed AI 모델을 실행할 수 있습니다.",
+        "title": "WaveSpeed API 노드",
+        "desc": "WaveSpeed API 노드는 워크플로우의 핵심입니다 — 플랫폼의 모든 AI 모델을 실행할 수 있습니다. 모델을 선택하면 노드 카드가 확장되어 모든 설정 매개변수가 인라인으로 표시됩니다. 실행 후 결과도 노드 내에 직접 표시됩니다.",
         "features": {
-          "modelSwitch": "수백 개의 AI 모델 중 선택 — 선택한 모델에 따라 매개변수 패널이 동적으로 업데이트됩니다",
-          "dynamicParams": "각 모델에는 고유한 매개변수(프롬프트, 이미지 크기, 시드 등)가 있으며 선택 시 자동으로 표시됩니다",
+          "modelSwitch": "수백 개의 AI 모델 중 선택 — 선택한 모델에 따라 매개변수가 동적으로 업데이트됩니다",
+          "dynamicParams": "각 모델에는 고유한 매개변수(프롬프트, 이미지 크기, 시드 등)가 있으며 노드 내에 자동으로 표시됩니다",
           "costEstimate": "실행당 실시간 비용 추정으로 실행 전 항상 가격을 확인할 수 있습니다",
           "upstream": "상위 노드 출력(이미지, 텍스트)을 입력으로 연결 — 다단계 AI 파이프라인 구축"
         }
       },
       "canvas": {
         "title": "캔버스 상호작용",
-        "desc": "중앙 캔버스가 작업 공간입니다:\n• 팔레트에서 노드를 드래그하여 배치\n• 출력 포트에서 입력 포트로 드래그하여 연결 생성\n• 우클릭으로 컨텍스트 메뉴 (복사, 붙여넣기, 삭제)\n• 스크롤로 확대/축소, 배경 드래그로 이동\n• 단축키: Ctrl+Z 실행 취소, Ctrl+C/V 복사/붙여넣기, Delete로 삭제"
+        "desc": "캔버스가 작업 공간입니다:\n• 노드를 드래그하여 배치\n• 출력 포트에서 입력 포트로 드래그하여 연결 생성\n• 노드를 클릭하여 선택 — 매개변수가 노드 내에서 확장되어 편집 가능\n• 우클릭으로 컨텍스트 메뉴 (복사, 붙여넣기, 삭제)\n• 스크롤로 확대/축소, 배경 드래그로 이동\n• 단축키: Ctrl+Z 실행 취소, Ctrl+C/V 복사/붙여넣기, Delete로 삭제"
       },
       "canvasTools": {
         "title": "캔버스 도구",
-        "desc": "캔버스 탐색 및 정리를 위한 3가지 편리한 도구:\n• 선택 / 손 모드 — 노드 선택(V)과 캔버스 이동(H) 전환\n• 화면에 맞추기 — 모든 노드가 뷰포트에 맞도록 자동 확대/축소\n• 자동 레이아웃 — 노드를 깔끔하고 읽기 쉽게 자동 배치"
-      },
-      "config": {
-        "title": "설정 및 결과 확인",
-        "desc": "노드를 클릭하여 선택합니다. 오른쪽 패널에 두 개의 탭이 표시됩니다:\n• 설정 — 모델 매개변수 설정, 파일 업로드, 프롬프트 입력\n• 결과 — 실행 출력 보기 (이미지, 비디오, 3D 모델)\n\n매개변수는 노드 유형과 선택한 모델에 따라 동적으로 업데이트됩니다. 결과는 전체 화면 미리보기와 다운로드를 지원합니다."
+        "desc": "캔버스 오른쪽 도구 모음:\n• 그리드 — 배경 그리드 표시 전환\n• 선택 / 손 — 노드 선택과 캔버스 이동 전환\n• 확대 / 축소\n• 화면에 맞추기 — 모든 노드가 표시되도록 자동 확대/축소\n• 자동 레이아웃 — 노드를 깔끔하게 자동 배치"
       },
       "run": {
         "title": "워크플로우 실행",
-        "desc": "\"워크플로우 실행\"을 클릭하여 전체 파이프라인을 실행합니다:\n• 일괄 처리를 위한 실행 횟수 설정 (×1~×99)\n• 중지 버튼으로 언제든지 취소 가능\n• 실행 모니터에서 실시간 진행 상황 확인\n• 각 노드의 상태 표시: 대기 중 → 실행 중 → 완료"
+        "desc": "\"Run\"을 클릭하여 전체 파이프라인을 실행합니다:\n• 일괄 처리를 위한 실행 횟수 설정 (×1~×99)\n• 중지 버튼으로 언제든지 취소 가능\n• 시계 아이콘을 클릭하여 실행 모니터에서 실시간 진행 상황 확인\n• 각 노드의 상태 표시: 대기 중 → 실행 중 → 완료"
       },
-      "templates": {
-        "title": "템플릿, 가져오기 및 내보내기",
-        "desc": "⋮ 메뉴를 클릭하여 고급 기능에 접근:\n• 워크플로우를 재사용 가능한 템플릿으로 저장\n• 워크플로우를 JSON으로 가져오기/내보내기하여 공유\n• 브라우저처럼 탭에서 여러 워크플로우 열기\n• 도구 모음에서 사전 제작된 템플릿 둘러보기"
+      "moreMenu": {
+        "title": "저장, 가져오기 및 내보내기",
+        "desc": "⋮ 메뉴를 클릭:\n• 저장 — 현재 워크플로우 저장\n• 템플릿으로 저장 — 워크플로우를 재사용 가능한 템플릿으로 저장\n• 가져오기 / 내보내기 — JSON 파일로 워크플로우 공유"
       }
     },
     "promptOptimizer": {
diff --git a/src/i18n/locales/ms.json b/src/i18n/locales/ms.json
index d81a82f0..0c0e0080 100644
--- a/src/i18n/locales/ms.json
+++ b/src/i18n/locales/ms.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Palet Nod",
-        "desc": "Klik butang ini untuk membuka Palet Nod — kotak alat anda untuk semua nod yang tersedia. Anda juga boleh cari, seret, atau klik untuk menambah nod ke kanvas."
+        "desc": "Klik butang ini untuk membuka Palet Nod — kotak alat anda untuk semua nod yang tersedia."
       },
       "nodePalette": {
         "title": "Kategori Nod",
-        "desc": "Nod disusun mengikut kategori:\n• Input — Muat naik fail atau masukkan teks sebagai data permulaan\n• Tugasan AI — Jalankan mana-mana model WaveSpeed AI (lihat langkah seterusnya)\n• Alat Percuma — 12 alat terbina dalam seperti buang latar, peningkatan wajah, penukaran format\n• Output — Pratonton hasil atau eksport fail ke cakera\n\nSeret nod ke kanvas atau klik untuk menambahkannya."
+        "desc": "Nod disusun dalam 5 kategori:\n• Model AI — Jalankan mana-mana model WaveSpeed AI\n• Input — Muat naik fail media atau masukkan teks\n• Output — Eksport fail atau pratonton hasil\n• Pemprosesan — Gabungkan atau pilih hasil\n• Alat Percuma — 12 alat terbina dalam (buang latar, peningkatan wajah, penukaran format, dll.)\n\nSeret nod ke kanvas atau klik untuk menambahkannya."
       },
       "aiTask": {
-        "title": "Nod Tugasan AI — Teras Utama",
-        "desc": "Nod Tugasan AI ialah nod paling berkuasa dalam Workflow. Ia boleh menjalankan mana-mana model WaveSpeed AI untuk penjanaan imej, penciptaan video, pemindahan gaya dan banyak lagi.",
+        "title": "Nod WaveSpeed API",
+        "desc": "Nod WaveSpeed API ialah teras Workflow — ia boleh menjalankan mana-mana model AI di platform. Apabila model dipilih, kad nod akan berkembang menunjukkan semua parameter konfigurasi secara sebaris. Selepas pelaksanaan, hasil juga dipaparkan terus dalam nod.",
         "features": {
-          "modelSwitch": "Pilih daripada ratusan model AI — panel parameter dikemas kini secara dinamik berdasarkan model yang dipilih",
-          "dynamicParams": "Setiap model mempunyai parameter tersendiri (prompt, saiz imej, seed, dll.) yang akan muncul secara automatik apabila dipilih",
+          "modelSwitch": "Pilih daripada ratusan model AI — parameter dikemas kini secara dinamik berdasarkan model yang dipilih",
+          "dynamicParams": "Setiap model mempunyai parameter tersendiri (prompt, saiz imej, seed, dll.) yang akan muncul secara automatik dalam nod apabila dipilih",
           "costEstimate": "Anggaran kos masa nyata bagi setiap pelaksanaan supaya anda sentiasa tahu harga sebelum berjalan",
           "upstream": "Sambungkan output nod huluan (imej, teks) sebagai input — bina saluran AI berbilang langkah"
         }
       },
       "canvas": {
         "title": "Interaksi Kanvas",
-        "desc": "Kanvas pusat ialah ruang kerja anda:\n• Seret nod dari palet untuk meletakkannya\n• Seret dari port output ke port input untuk membuat sambungan\n• Klik kanan untuk menu konteks (salin, tampal, padam)\n• Skrol untuk zum, seret latar belakang untuk pan\n• Pintasan: Ctrl+Z undur, Ctrl+C/V salin-tampal, Delete untuk buang"
+        "desc": "Kanvas ialah ruang kerja anda:\n• Seret nod untuk meletakkannya\n• Seret dari port output ke port input untuk membuat sambungan\n• Klik nod untuk memilihnya — parameter berkembang dalam nod untuk penyuntingan\n• Klik kanan untuk menu konteks (salin, tampal, padam)\n• Skrol untuk zum, seret latar belakang untuk pan\n• Pintasan: Ctrl+Z undur, Ctrl+C/V salin-tampal, Delete untuk buang"
       },
       "canvasTools": {
         "title": "Alat Kanvas",
-        "desc": "Tiga alat berguna untuk menavigasi dan menyusun kanvas:\n• Mod Pilih / Tangan — tukar antara memilih nod (V) dan mengalih kanvas (H)\n• Muat Paparan — zum automatik supaya semua nod muat dalam viewport\n• Susun Atur Auto — susun nod secara automatik agar kemas dan mudah dibaca"
-      },
-      "config": {
-        "title": "Konfigurasi & Lihat Hasil",
-        "desc": "Klik mana-mana nod untuk memilihnya. Panel kanan memaparkan dua tab:\n• Konfigurasi — Tetapkan parameter model, muat naik fail, masukkan prompt\n• Hasil — Lihat output pelaksanaan (imej, video, model 3D)\n\nParameter dikemas kini secara dinamik berdasarkan jenis nod dan model yang dipilih. Hasil menyokong pratonton skrin penuh dan muat turun."
+        "desc": "Bar alat di sebelah kanan kanvas:\n• Grid — Tunjuk/sembunyikan grid latar belakang\n• Pilih / Tangan — tukar antara memilih nod dan mengalih kanvas\n• Zum masuk / Zum keluar\n• Muat Paparan — zum automatik supaya semua nod muat\n• Susun Atur Auto — susun nod secara automatik agar kemas dan mudah dibaca"
       },
       "run": {
         "title": "Jalankan Workflow Anda",
-        "desc": "Klik \"Jalankan Workflow\" untuk menjalankan keseluruhan saluran:\n• Tetapkan bilangan larian (×1 hingga ×99) untuk pemprosesan kelompok\n• Batalkan pada bila-bila masa dengan butang henti\n• Pantau kemajuan masa nyata dalam Pemantau Pelaksanaan\n• Setiap nod menunjukkan status: queued → running → done"
+        "desc": "Klik \"Run\" untuk menjalankan keseluruhan saluran:\n• Tetapkan bilangan larian (×1 hingga ×99) untuk pemprosesan kelompok\n• Batalkan pada bila-bila masa dengan butang henti\n• Klik ikon jam untuk membuka Pemantau Pelaksanaan dan pantau kemajuan masa nyata\n• Setiap nod menunjukkan status: beratur → berjalan → selesai"
       },
-      "templates": {
-        "title": "Templat, Import & Eksport",
-        "desc": "Klik menu ⋮ untuk ciri lanjutan:\n• Simpan workflow anda sebagai templat boleh guna semula\n• Import/Eksport workflow sebagai JSON untuk dikongsi\n• Buka berbilang workflow dalam tab (seperti pelayar)\n• Semak templat siap bina dari bar alat"
+      "moreMenu": {
+        "title": "Simpan, Import & Eksport",
+        "desc": "Klik menu ⋮:\n• Simpan — Simpan workflow semasa\n• Simpan sebagai templat — Simpan workflow sebagai templat boleh guna semula\n• Import / Eksport — Kongsi workflow melalui fail JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index 4083f8d9..494b5c01 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Paleta de Nos",
-        "desc": "Clique neste botao para abrir a Paleta de Nos — sua caixa de ferramentas com todos os nos disponiveis. Voce tambem pode pesquisar, arrastar ou clicar para adicionar nos ao canvas."
+        "desc": "Clique neste botao para abrir a Paleta de Nos — sua caixa de ferramentas com todos os nos disponiveis."
       },
       "nodePalette": {
         "title": "Categorias de Nos",
-        "desc": "Os nos sao organizados por categoria:\n• Entrada — Envie arquivos ou insira texto como dados iniciais\n• Tarefa de IA — Execute qualquer modelo WaveSpeed AI (veja a proxima etapa)\n• Ferramentas gratuitas — 12 ferramentas integradas, como remocao de fundo, aprimoramento facial e conversao de formato\n• Saida — Visualize resultados ou exporte arquivos para o disco\n\nArraste um no para o canvas ou clique para adiciona-lo."
+        "desc": "Os nos sao organizados em 5 categorias:\n• Modelo AI — Execute qualquer modelo WaveSpeed AI\n• Entrada — Envie arquivos de midia ou insira texto\n• Saida — Exporte arquivos ou visualize resultados\n• Processamento — Combine ou selecione resultados\n• Ferramentas gratuitas — 12 ferramentas integradas (remocao de fundo, aprimoramento facial, conversao de formato, etc.)\n\nArraste um no para o canvas ou clique para adiciona-lo."
       },
       "aiTask": {
-        "title": "No de Tarefa de IA — O nucleo",
-        "desc": "O no de Tarefa de IA e o mais poderoso do Workflow. Ele pode executar qualquer modelo WaveSpeed AI para geracao de imagens, criacao de video, transferencia de estilo e mais.",
+        "title": "No WaveSpeed API",
+        "desc": "O no WaveSpeed API e o nucleo do Workflow — pode executar qualquer modelo AI da plataforma. Ao selecionar um modelo, o cartao do no se expande mostrando todos os parametros configuraveis em linha. Apos a execucao, os resultados tambem sao exibidos diretamente dentro do no.",
         "features": {
-          "modelSwitch": "Escolha entre centenas de modelos de IA — o painel de parametros e atualizado dinamicamente com base no modelo selecionado",
-          "dynamicParams": "Cada modelo tem seus proprios parametros (prompt, tamanho da imagem, seed etc.) que aparecem automaticamente ao selecionar",
+          "modelSwitch": "Escolha entre centenas de modelos AI — os parametros sao atualizados dinamicamente com base no modelo selecionado",
+          "dynamicParams": "Cada modelo tem seus proprios parametros (prompt, tamanho da imagem, seed etc.) que aparecem automaticamente dentro do no ao selecionar",
           "costEstimate": "Estimativa de custo em tempo real por execucao, para voce sempre saber o preco antes de executar",
           "upstream": "Conecte saidas de nos anteriores (imagens, texto) como entradas — construa pipelines de IA em varias etapas"
         }
       },
       "canvas": {
         "title": "Interacoes do canvas",
-        "desc": "O canvas central e seu espaco de trabalho:\n• Arraste nos da paleta para posiciona-los\n• Arraste de portas de saida para portas de entrada para criar conexoes\n• Clique com o botao direito para menu de contexto (copiar, colar, excluir)\n• Role para zoom e arraste o fundo para mover\n• Atalhos: Ctrl+Z desfazer, Ctrl+C/V copiar-colar, Delete para remover"
+        "desc": "O canvas e seu espaco de trabalho:\n• Arraste nos para posiciona-los\n• Arraste de portas de saida para portas de entrada para criar conexoes\n• Clique em um no para seleciona-lo — os parametros se expandem dentro do no para edicao\n• Clique com o botao direito para menu de contexto (copiar, colar, excluir)\n• Role para zoom e arraste o fundo para mover\n• Atalhos: Ctrl+Z desfazer, Ctrl+C/V copiar-colar, Delete para remover"
       },
       "canvasTools": {
         "title": "Ferramentas do canvas",
-        "desc": "Tres ferramentas uteis para navegar e organizar o canvas:\n• Modo Selecionar / Mao — alterne entre selecionar nos (V) e mover o canvas (H)\n• Ajustar visualizacao — zoom automatico para encaixar todos os nos na tela\n• Layout automatico — organiza os nos automaticamente em um layout limpo e legivel"
-      },
-      "config": {
-        "title": "Configurar e ver resultados",
-        "desc": "Clique em qualquer no para seleciona-lo. O painel direito mostra duas abas:\n• Configuracao — Defina parametros do modelo, envie arquivos, insira prompts\n• Resultados — Veja saidas da execucao (imagens, videos, modelos 3D)\n\nOs parametros sao atualizados dinamicamente com base no tipo de no e no modelo selecionado. Os resultados suportam visualizacao em tela cheia e download."
+        "desc": "Barra de ferramentas a direita do canvas:\n• Grade — Mostrar/ocultar a grade de fundo\n• Selecionar / Mao — alterne entre selecionar nos e mover o canvas\n• Aumentar / Diminuir zoom\n• Ajustar visualizacao — zoom automatico para encaixar todos os nos\n• Layout automatico — organiza os nos automaticamente de forma limpa e legivel"
       },
       "run": {
         "title": "Execute seu workflow",
-        "desc": "Clique em \"Executar workflow\" para executar todo o pipeline:\n• Defina a quantidade de execucoes (×1 a ×99) para processamento em lote\n• Cancele a qualquer momento com o botao de parar\n• Monitore o progresso em tempo real no Monitor de execucao\n• Cada no mostra seu status: queued → running → done"
+        "desc": "Clique em \"Run\" para executar todo o pipeline:\n• Defina a quantidade de execucoes (×1 a ×99) para processamento em lote\n• Cancele a qualquer momento com o botao de parar\n• Clique no icone de relogio para abrir o Monitor de execucao e acompanhar o progresso em tempo real\n• Cada no mostra seu status: na fila → executando → concluido"
       },
-      "templates": {
-        "title": "Modelos, importacao e exportacao",
-        "desc": "Clique no menu ⋮ para recursos avancados:\n• Salve seu workflow como modelo reutilizavel\n• Importe/Exporte workflows em JSON para compartilhar\n• Abra varios workflows em abas (como no navegador)\n• Navegue por modelos prontos na barra de ferramentas"
+      "moreMenu": {
+        "title": "Salvar, importar e exportar",
+        "desc": "Clique no menu ⋮:\n• Salvar — Salvar o workflow atual\n• Salvar como modelo — Salvar o workflow como modelo reutilizavel\n• Importar / Exportar — Compartilhar workflows via arquivos JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 90da201f..2fe8d917 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Палитра узлов",
-        "desc": "Нажмите эту кнопку, чтобы открыть Палитру узлов — ваш набор инструментов со всеми доступными узлами. Вы также можете искать, перетаскивать или нажимать, чтобы добавить узлы на холст."
+        "desc": "Нажмите эту кнопку, чтобы открыть Палитру узлов — ваш набор инструментов со всеми доступными узлами."
       },
       "nodePalette": {
         "title": "Категории узлов",
-        "desc": "Узлы организованы по категориям:\n• Вход — загружайте файлы или вводите текст как исходные данные\n• AI-задача — запускайте любую модель WaveSpeed AI (см. следующий шаг)\n• Бесплатные инструменты — 12 встроенных инструментов, например удаление фона, улучшение лица, конвертация форматов\n• Выход — предпросмотр результатов или экспорт файлов на диск\n\nПеретащите узел на холст или нажмите, чтобы добавить его."
+        "desc": "Узлы организованы в 5 категорий:\n• AI-модель — запускайте любую модель WaveSpeed AI\n• Вход — загружайте медиафайлы или вводите текст\n• Выход — экспортируйте файлы или просматривайте результаты\n• Обработка — объединяйте или выбирайте результаты\n• Бесплатные инструменты — 12 встроенных инструментов (удаление фона, улучшение лица, конвертация форматов и др.)\n\nПеретащите узел на холст или нажмите, чтобы добавить его."
       },
       "aiTask": {
-        "title": "Узел AI-задачи — основа",
-        "desc": "Узел AI-задачи — самый мощный узел в Workflow. Он может запускать любую модель WaveSpeed AI для генерации изображений, создания видео, переноса стиля и многого другого.",
+        "title": "Узел WaveSpeed API",
+        "desc": "Узел WaveSpeed API — основа Workflow. Он может запускать любую AI-модель платформы. При выборе модели карточка узла раскрывается, показывая все настраиваемые параметры прямо в узле. После выполнения результаты также отображаются непосредственно внутри узла.",
         "features": {
-          "modelSwitch": "Выбирайте из сотен AI-моделей — панель параметров динамически обновляется в зависимости от выбранной модели",
-          "dynamicParams": "У каждой модели свои параметры (prompt, размер изображения, seed и т.д.), которые автоматически появляются при выборе",
+          "modelSwitch": "Выбирайте из сотен AI-моделей — параметры динамически обновляются в зависимости от выбранной модели",
+          "dynamicParams": "У каждой модели свои параметры (prompt, размер изображения, seed и т.д.), которые автоматически появляются внутри узла при выборе",
           "costEstimate": "Оценка стоимости в реальном времени для каждого запуска, чтобы вы всегда знали цену до выполнения",
           "upstream": "Подключайте выходы предыдущих узлов (изображения, текст) как входы — стройте многошаговые AI-пайплайны"
         }
       },
       "canvas": {
         "title": "Взаимодействие с холстом",
-        "desc": "Центральный холст — ваше рабочее пространство:\n• Перетаскивайте узлы из палитры, чтобы размещать их\n• Тяните от выходных портов к входным, чтобы создать связи\n• Щелкните правой кнопкой для контекстного меню (копировать, вставить, удалить)\n• Прокрутка — масштаб, перетаскивание фона — панорамирование\n• Горячие клавиши: Ctrl+Z отмена, Ctrl+C/V копировать-вставить, Delete удалить"
+        "desc": "Холст — ваше рабочее пространство:\n• Перетаскивайте узлы, чтобы размещать их\n• Тяните от выходных портов к входным, чтобы создать связи\n• Нажмите на узел, чтобы выбрать его — параметры раскрываются внутри узла для редактирования\n• Щелкните правой кнопкой для контекстного меню (копировать, вставить, удалить)\n• Прокрутка — масштаб, перетаскивание фона — панорамирование\n• Горячие клавиши: Ctrl+Z отмена, Ctrl+C/V копировать-вставить, Delete удалить"
       },
       "canvasTools": {
         "title": "Инструменты холста",
-        "desc": "Три полезных инструмента для навигации и организации холста:\n• Режим Выбор / Рука — переключение между выбором узлов (V) и перемещением холста (H)\n• Подогнать вид — авто-масштаб, чтобы все узлы поместились в области просмотра\n• Авто-раскладка — автоматически упорядочивает узлы в аккуратный и читаемый вид"
-      },
-      "config": {
-        "title": "Настройка и просмотр результатов",
-        "desc": "Нажмите на любой узел, чтобы выбрать его. Правая панель показывает две вкладки:\n• Конфигурация — задайте параметры модели, загрузите файлы, введите промпты\n• Результаты — смотрите результаты выполнения (изображения, видео, 3D-модели)\n\nПараметры обновляются динамически в зависимости от типа узла и выбранной модели. Результаты поддерживают полноэкранный просмотр и скачивание."
+        "desc": "Панель инструментов справа от холста:\n• Сетка — показать/скрыть фоновую сетку\n• Выбор / Рука — переключение между выбором узлов и перемещением холста\n• Увеличить / Уменьшить\n• Подогнать вид — авто-масштаб, чтобы все узлы поместились\n• Авто-раскладка — автоматически упорядочивает узлы в аккуратный и читаемый вид"
       },
       "run": {
         "title": "Запуск workflow",
-        "desc": "Нажмите \"Запустить workflow\", чтобы выполнить весь пайплайн:\n• Установите число запусков (×1 до ×99) для пакетной обработки\n• Останавливайте выполнение в любой момент кнопкой стоп\n• Следите за прогрессом в реальном времени в мониторе выполнения\n• Каждый узел показывает статус: queued → running → done"
+        "desc": "Нажмите \"Run\", чтобы выполнить весь пайплайн:\n• Установите число запусков (×1 до ×99) для пакетной обработки\n• Останавливайте выполнение в любой момент кнопкой стоп\n• Нажмите на значок часов, чтобы открыть монитор выполнения и следить за прогрессом в реальном времени\n• Каждый узел показывает статус: в очереди → выполняется → завершён"
       },
-      "templates": {
-        "title": "Шаблоны, импорт и экспорт",
-        "desc": "Нажмите меню ⋮ для расширенных возможностей:\n• Сохраняйте workflow как повторно используемый шаблон\n• Импортируйте/экспортируйте workflow в JSON для обмена\n• Открывайте несколько workflow во вкладках (как в браузере)\n• Просматривайте готовые шаблоны на панели инструментов"
+      "moreMenu": {
+        "title": "Сохранение, импорт и экспорт",
+        "desc": "Нажмите меню ⋮:\n• Сохранить — сохранить текущий workflow\n• Сохранить как шаблон — сохранить workflow как повторно используемый шаблон\n• Импорт / Экспорт — обмен workflow через JSON-файлы"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/th.json b/src/i18n/locales/th.json
index 9a14475f..323d7179 100644
--- a/src/i18n/locales/th.json
+++ b/src/i18n/locales/th.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "พาเลตโหนด",
-        "desc": "คลิกปุ่มนี้เพื่อเปิดพาเลตโหนด ซึ่งเป็นชุดเครื่องมือรวมโหนดทั้งหมดที่มีให้ใช้ คุณสามารถค้นหา ลาก หรือคลิกเพื่อเพิ่มโหนดลงบนแคนวาสได้"
+        "desc": "คลิกปุ่มนี้เพื่อเปิดพาเลตโหนด ซึ่งเป็นชุดเครื่องมือรวมโหนดทั้งหมดที่มีให้ใช้"
       },
       "nodePalette": {
         "title": "หมวดหมู่โหนด",
-        "desc": "โหนดถูกจัดตามหมวดหมู่:\n• อินพุต — อัปโหลดไฟล์หรือป้อนข้อความเป็นข้อมูลตั้งต้น\n• งาน AI — รันโมเดล WaveSpeed AI ใดก็ได้ (ดูขั้นตอนถัดไป)\n• เครื่องมือฟรี — เครื่องมือในตัว 12 รายการ เช่น ลบพื้นหลัง ปรับใบหน้า แปลงฟอร์แมต\n• เอาต์พุต — ดูตัวอย่างผลลัพธ์หรือส่งออกไฟล์ลงดิสก์\n\nลากโหนดไปยังแคนวาสหรือคลิกเพื่อเพิ่มได้"
+        "desc": "โหนดถูกจัดเป็น 5 หมวดหมู่:\n• โมเดล AI — รันโมเดล WaveSpeed AI ใดก็ได้\n• อินพุต — อัปโหลดไฟล์มีเดียหรือป้อนข้อความ\n• เอาต์พุต — ส่งออกไฟล์หรือดูตัวอย่างผลลัพธ์\n• การประมวลผล — รวมหรือเลือกผลลัพธ์\n• เครื่องมือฟรี — เครื่องมือในตัว 12 รายการ (ลบพื้นหลัง ปรับใบหน้า แปลงฟอร์แมต ฯลฯ)\n\nลากโหนดไปยังแคนวาสหรือคลิกเพื่อเพิ่มได้"
       },
       "aiTask": {
-        "title": "โหนดงาน AI — แกนหลัก",
-        "desc": "โหนดงาน AI คือโหนดที่ทรงพลังที่สุดใน Workflow สามารถรันโมเดล WaveSpeed AI ใดก็ได้สำหรับการสร้างภาพ สร้างวิดีโอ ถ่ายโอนสไตล์ และอื่นๆ",
+        "title": "โหนด WaveSpeed API",
+        "desc": "โหนด WaveSpeed API คือแกนหลักของ Workflow — สามารถรันโมเดล AI ใดก็ได้บนแพลตฟอร์ม เมื่อเลือกโมเดล การ์ดโหนดจะขยายแสดงพารามิเตอร์ที่กำหนดค่าได้ทั้งหมดแบบอินไลน์ หลังรัน ผลลัพธ์จะแสดงภายในโหนดโดยตรง",
         "features": {
-          "modelSwitch": "เลือกจากโมเดล AI หลายร้อยตัว โดยพาเนลพารามิเตอร์จะอัปเดตแบบไดนามิกตามโมเดลที่เลือก",
-          "dynamicParams": "แต่ละโมเดลมีพารามิเตอร์ของตัวเอง (พรอมต์ ขนาดภาพ seed ฯลฯ) ที่จะแสดงอัตโนมัติเมื่อเลือก",
+          "modelSwitch": "เลือกจากโมเดล AI หลายร้อยตัว โดยพารามิเตอร์จะอัปเดตแบบไดนามิกตามโมเดลที่เลือก",
+          "dynamicParams": "แต่ละโมเดลมีพารามิเตอร์ของตัวเอง (พรอมต์ ขนาดภาพ seed ฯลฯ) ที่จะแสดงอัตโนมัติภายในโหนดเมื่อเลือก",
           "costEstimate": "ประเมินค่าใช้จ่ายแบบเรียลไทม์ต่อการรัน เพื่อให้ทราบราคาก่อนเริ่มเสมอ",
           "upstream": "เชื่อมเอาต์พุตจากโหนดก่อนหน้า (ภาพ ข้อความ) เป็นอินพุต เพื่อสร้างไปป์ไลน์ AI หลายขั้นตอน"
         }
       },
       "canvas": {
         "title": "การโต้ตอบบนแคนวาส",
-        "desc": "แคนวาสตรงกลางคือพื้นที่ทำงานของคุณ:\n• ลากโหนดจากพาเลตเพื่อวางตำแหน่ง\n• ลากจากพอร์ตเอาต์พุตไปยังพอร์ตอินพุตเพื่อเชื่อมต่อ\n• คลิกขวาเพื่อเปิดเมนูบริบท (คัดลอก วาง ลบ)\n• เลื่อนเพื่อซูม ลากพื้นหลังเพื่อแพน\n• คีย์ลัด: Ctrl+Z ย้อนกลับ, Ctrl+C/V คัดลอก-วาง, Delete เพื่อลบ"
+        "desc": "แคนวาสคือพื้นที่ทำงานของคุณ:\n• ลากโหนดเพื่อวางตำแหน่ง\n• ลากจากพอร์ตเอาต์พุตไปยังพอร์ตอินพุตเพื่อเชื่อมต่อ\n• คลิกโหนดเพื่อเลือก — พารามิเตอร์จะขยายภายในโหนดเพื่อแก้ไข\n• คลิกขวาเพื่อเปิดเมนูบริบท (คัดลอก วาง ลบ)\n• เลื่อนเพื่อซูม ลากพื้นหลังเพื่อแพน\n• คีย์ลัด: Ctrl+Z ย้อนกลับ, Ctrl+C/V คัดลอก-วาง, Delete เพื่อลบ"
       },
       "canvasTools": {
         "title": "เครื่องมือแคนวาส",
-        "desc": "3 เครื่องมือที่ช่วยนำทางและจัดระเบียบแคนวาส:\n• โหมดเลือก / มือ — สลับระหว่างเลือกโหนด (V) และเลื่อนแคนวาส (H)\n• พอดีหน้าจอ — ซูมอัตโนมัติให้เห็นทุกโหนดในมุมมอง\n• จัดวางอัตโนมัติ — จัดเรียงโหนดให้อ่านง่ายและเป็นระเบียบโดยอัตโนมัติ"
-      },
-      "config": {
-        "title": "ตั้งค่าและดูผลลัพธ์",
-        "desc": "คลิกโหนดใดก็ได้เพื่อเลือก ด้านขวาจะแสดง 2 แท็บ:\n• การตั้งค่า — ตั้งค่าพารามิเตอร์โมเดล อัปโหลดไฟล์ ป้อนพรอมต์\n• ผลลัพธ์ — ดูผลการรัน (ภาพ วิดีโอ โมเดล 3 มิติ)\n\nพารามิเตอร์จะอัปเดตแบบไดนามิกตามประเภทโหนดและโมเดลที่เลือก ผลลัพธ์รองรับการดูเต็มหน้าจอและดาวน์โหลด"
+        "desc": "แถบเครื่องมือด้านขวาของแคนวาส:\n• กริด — แสดง/ซ่อนกริดพื้นหลัง\n• เลือก / มือ — สลับระหว่างเลือกโหนดและเลื่อนแคนวาส\n• ซูมเข้า / ซูมออก\n• พอดีหน้าจอ — ซูมอัตโนมัติให้เห็นทุกโหนด\n• จัดวางอัตโนมัติ — จัดเรียงโหนดให้อ่านง่ายและเป็นระเบียบโดยอัตโนมัติ"
       },
       "run": {
         "title": "รัน Workflow ของคุณ",
-        "desc": "คลิก \"รัน Workflow\" เพื่อรันทั้งไปป์ไลน์:\n• ตั้งจำนวนรัน (×1 ถึง ×99) สำหรับการประมวลผลแบบแบตช์\n• ยกเลิกได้ทุกเมื่อด้วยปุ่มหยุด\n• ติดตามความคืบหน้าแบบเรียลไทม์ใน Execution Monitor\n• แต่ละโหนดจะแสดงสถานะ: queued → running → done"
+        "desc": "คลิก \"Run\" เพื่อรันทั้งไปป์ไลน์:\n• ตั้งจำนวนรัน (×1 ถึง ×99) สำหรับการประมวลผลแบบแบตช์\n• ยกเลิกได้ทุกเมื่อด้วยปุ่มหยุด\n• คลิกไอคอนนาฬิกาเพื่อเปิด Execution Monitor และติดตามความคืบหน้าแบบเรียลไทม์\n• แต่ละโหนดจะแสดงสถานะ: รอคิว → กำลังรัน → เสร็จสิ้น"
       },
-      "templates": {
-        "title": "เทมเพลต การนำเข้า และการส่งออก",
-        "desc": "คลิกเมนู ⋮ เพื่อใช้ความสามารถขั้นสูง:\n• บันทึก workflow เป็นเทมเพลตที่นำกลับมาใช้ซ้ำได้\n• นำเข้า/ส่งออก workflow เป็น JSON เพื่อแชร์\n• เปิดหลาย workflow พร้อมกันในแท็บ (เหมือนเบราว์เซอร์)\n• เรียกดูเทมเพลตที่มีให้จากแถบเครื่องมือ"
+      "moreMenu": {
+        "title": "บันทึก นำเข้า และส่งออก",
+        "desc": "คลิกเมนู ⋮:\n• บันทึก — บันทึก workflow ปัจจุบัน\n• บันทึกเป็นเทมเพลต — บันทึก workflow เป็นเทมเพลตที่นำกลับมาใช้ซ้ำได้\n• นำเข้า / ส่งออก — แชร์ workflow ผ่านไฟล์ JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
index bc8dfbca..e856cc1b 100644
--- a/src/i18n/locales/tr.json
+++ b/src/i18n/locales/tr.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Dugum Paleti",
-        "desc": "Bu dugmeye tiklayarak Dugum Paletini acin — tum mevcut dugumlerin oldugu arac kutunuz. Arama yapabilir, surukleyebilir veya tiklayarak dugum ekleyebilirsiniz."
+        "desc": "Bu dugmeye tiklayarak Dugum Paletini acin — tum mevcut dugumlerin oldugu arac kutunuz."
       },
       "nodePalette": {
         "title": "Dugum Kategorileri",
-        "desc": "Dugumler kategoriye gore duzenlenir:\n• Giris — Baslangic verisi olarak dosya yukleyin veya metin girin\n• AI Gorevi — Herhangi bir WaveSpeed AI modelini calistirin (sonraki adıma bakin)\n• Ucretsiz Araclar — Arka plan kaldirma, yuz iyilestirme, format donusumu gibi 12 dahili arac\n• Cikis — Sonuclari onizleyin veya dosyalari diske aktarin\n\nBir dugumu tuvale surukleyin veya tiklayarak ekleyin."
+        "desc": "Dugumler 5 kategoriye gore duzenlenir:\n• AI Modeli — Herhangi bir WaveSpeed AI modelini calistirin\n• Giris — Medya dosyasi yukleyin veya metin girin\n• Cikis — Dosyalari disa aktarin veya sonuclari onizleyin\n• Isleme — Ciktilari birlestirin veya secin\n• Ucretsiz Araclar — Arka plan kaldirma, yuz iyilestirme, format donusumu gibi 12 dahili arac\n\nBir dugumu tuvale surukleyin veya tiklayarak ekleyin."
       },
       "aiTask": {
-        "title": "AI Gorev Dugumu — Cekirdek",
-        "desc": "AI Gorev dugumu, Workflow'daki en guclu dugumdur. Goruntu uretimi, video olusturma, stil transferi ve daha fazlasi icin herhangi bir WaveSpeed AI modelini calistirabilir.",
+        "title": "WaveSpeed API Dugumu",
+        "desc": "WaveSpeed API dugumu Workflow'un cekirdegi — platformdaki herhangi bir AI modelini calistirabilir. Bir model secildiginde, dugum karti genisleyerek tum yapilandirma parametrelerini satirici olarak gosterir. Calistirmadan sonra sonuclar da dogrudan dugum icinde goruntulenir.",
         "features": {
-          "modelSwitch": "Yuzlerce AI modeli arasindan secin — parametre paneli secilen modele gore dinamik olarak guncellenir",
-          "dynamicParams": "Her modelin kendi parametreleri (istem, goruntu boyutu, seed vb.) vardir ve secildiginde otomatik gorunur",
+          "modelSwitch": "Yuzlerce AI modeli arasindan secin — parametreler secilen modele gore dinamik olarak guncellenir",
+          "dynamicParams": "Her modelin kendi parametreleri (istem, goruntu boyutu, seed vb.) vardir ve secildiginde dugum icinde otomatik gorunur",
           "costEstimate": "Her calistirma icin gercek zamanli maliyet tahmini ile calistirmadan once fiyati gorun",
           "upstream": "Yukari akistaki dugum ciktilarini (goruntu, metin) girdi olarak baglayin — cok adimli AI pipeline'lari kurun"
         }
       },
       "canvas": {
         "title": "Tuval Etkilesimleri",
-        "desc": "Merkezi tuval calisma alaninizdir:\n• Dugumleri paletten surukleyip konumlandirin\n• Baglanti olusturmak icin cikis portundan giris portuna surukleyin\n• Baglam menusu icin sag tiklayin (kopyala, yapistir, sil)\n• Zum icin kaydirin, kaydirmak icin arka plani surukleyin\n• Kisayollar: Ctrl+Z geri al, Ctrl+C/V kopyala-yapistir, Delete kaldir"
+        "desc": "Tuval calisma alaninizdir:\n• Dugumleri surukleyip konumlandirin\n• Baglanti olusturmak icin cikis portundan giris portuna surukleyin\n• Bir dugume tiklayarak secin — parametreler dugum icinde genisleyerek duzenleme yapilabilir\n• Baglam menusu icin sag tiklayin (kopyala, yapistir, sil)\n• Zum icin kaydirin, kaydirmak icin arka plani surukleyin\n• Kisayollar: Ctrl+Z geri al, Ctrl+C/V kopyala-yapistir, Delete kaldir"
       },
       "canvasTools": {
         "title": "Tuval Araclari",
-        "desc": "Tuvali gezmek ve duzenlemek icin 3 pratik arac:\n• Sec / El modu — dugum secme (V) ve tuvali kaydirma (H) arasinda gecis yapin\n• Gorunume Sigdir — tum dugumleri gorunur alana sigdiracak otomatik zum\n• Otomatik Duzen — dugumleri temiz ve okunabilir bir duzende otomatik yerlestirir"
-      },
-      "config": {
-        "title": "Yapilandir ve Sonuclari Gor",
-        "desc": "Secmek icin herhangi bir dugume tiklayin. Sag panelde iki sekme gorunur:\n• Yapilandirma — model parametrelerini ayarlayin, dosya yukleyin, istem girin\n• Sonuclar — calistirma ciktilarini goruntuleyin (gorsel, video, 3D modeller)\n\nParametreler, dugum tipine ve secilen modele gore dinamik guncellenir. Sonuclar tam ekran onizleme ve indirme destekler."
+        "desc": "Tuvalin sag tarafindaki arac cubugu:\n• Izgara — Arka plan izgarasini goster/gizle\n• Sec / El — dugum secme ve tuvali kaydirma arasinda gecis yapin\n• Yakinlastir / Uzaklastir\n• Gorunume Sigdir — tum dugumleri gorunur alana sigdiracak otomatik zum\n• Otomatik Duzen — dugumleri temiz ve okunabilir bir duzende otomatik yerlestirir"
       },
       "run": {
         "title": "Workflow'unuzu Calistirin",
-        "desc": "Tum pipeline'i calistirmak icin \"Workflow'u Calistir\"a tiklayin:\n• Toplu isleme icin calistirma sayisi ayarlayin (×1 - ×99)\n• Durdur dugmesiyle istediginiz an iptal edin\n• Gercek zamanli ilerlemeyi Execution Monitor'de izleyin\n• Her dugum su durumu gosterir: queued → running → done"
+        "desc": "Tum pipeline'i calistirmak icin \"Run\"a tiklayin:\n• Toplu isleme icin calistirma sayisi ayarlayin (×1 - ×99)\n• Durdur dugmesiyle istediginiz an iptal edin\n• Saat simgesine tiklayarak Execution Monitor'u acin ve gercek zamanli ilerlemeyi izleyin\n• Her dugum su durumu gosterir: kuyrukta → calisiyor → tamamlandi"
       },
-      "templates": {
-        "title": "Sablonlar, Ice Aktarma ve Disa Aktarma",
-        "desc": "Gelismis ozellikler icin ⋮ menusune tiklayin:\n• Workflow'unuzu yeniden kullanilabilir sablon olarak kaydedin\n• Paylasmak icin workflow'lari JSON olarak ice/disa aktarin\n• Birden fazla workflow'u sekmelerde acin (tarayici gibi)\n• Arac cubugundan hazir sablonlara goz atin"
+      "moreMenu": {
+        "title": "Kaydet, Ice Aktar ve Disa Aktar",
+        "desc": "⋮ menusune tiklayin:\n• Kaydet — Mevcut workflow'u kaydedin\n• Sablon olarak kaydet — Workflow'u yeniden kullanilabilir sablon olarak kaydedin\n• Ice Aktar / Disa Aktar — JSON dosyalari ile workflow paylasimi"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/vi.json b/src/i18n/locales/vi.json
index 6047b972..84af4bfe 100644
--- a/src/i18n/locales/vi.json
+++ b/src/i18n/locales/vi.json
@@ -1377,41 +1377,37 @@
       },
       "nodePaletteBtn": {
         "title": "Bang Node",
-        "desc": "Nhan nut nay de mo Bang Node — hop cong cu chua tat ca node co san. Ban cung co the tim kiem, keo tha, hoac nhan de them node vao canvas."
+        "desc": "Nhan nut nay de mo Bang Node — hop cong cu chua tat ca node co san."
       },
       "nodePalette": {
         "title": "Danh muc Node",
-        "desc": "Node duoc sap xep theo danh muc:\n• Dau vao — Tai tep len hoac nhap van ban lam du lieu bat dau\n• Tac vu AI — Chay bat ky mo hinh WaveSpeed AI nao (xem buoc tiep theo)\n• Cong cu mien phi — 12 cong cu tich hop nhu xoa nen, tang cuong khuon mat, chuyen doi dinh dang\n• Dau ra — Xem truoc ket qua hoac xuat tep ra dia\n\nKeo node vao canvas hoac nhan de them."
+        "desc": "Node duoc sap xep thanh 5 danh muc:\n• Mo hinh AI — Chay bat ky mo hinh WaveSpeed AI nao\n• Dau vao — Tai tep media len hoac nhap van ban\n• Dau ra — Xuat tep hoac xem truoc ket qua\n• Xu ly — Ket hop hoac chon ket qua\n• Cong cu mien phi — 12 cong cu tich hop (xoa nen, tang cuong khuon mat, chuyen doi dinh dang, v.v.)\n\nKeo node vao canvas hoac nhan de them."
       },
       "aiTask": {
-        "title": "Node Tac vu AI — Cot loi",
-        "desc": "Node Tac vu AI la node manh nhat trong Workflow. Node nay co the chay bat ky mo hinh WaveSpeed AI nao cho tao anh, tao video, chuyen phong cach va nhieu hon nua.",
+        "title": "Node WaveSpeed API",
+        "desc": "Node WaveSpeed API la cot loi cua Workflow — co the chay bat ky mo hinh AI nao tren nen tang. Khi chon mo hinh, the node se mo rong hien thi tat ca tham so cau hinh truc tiep. Sau khi chay, ket qua cung hien thi ngay trong node.",
         "features": {
-          "modelSwitch": "Chon trong hang tram mo hinh AI — bang tham so cap nhat dong theo mo hinh da chon",
-          "dynamicParams": "Moi mo hinh co tham so rieng (prompt, kich thuoc anh, seed, v.v.) va se tu dong hien khi duoc chon",
+          "modelSwitch": "Chon trong hang tram mo hinh AI — tham so cap nhat dong theo mo hinh da chon",
+          "dynamicParams": "Moi mo hinh co tham so rieng (prompt, kich thuoc anh, seed, v.v.) va se tu dong hien trong node khi duoc chon",
           "costEstimate": "Uoc tinh chi phi theo thoi gian thuc moi lan chay de ban biet gia truoc khi thuc thi",
           "upstream": "Ket noi dau ra tu node truoc (anh, van ban) lam dau vao — xay dung pipeline AI nhieu buoc"
         }
       },
       "canvas": {
         "title": "Tuong tac Canvas",
-        "desc": "Canvas trung tam la khong gian lam viec cua ban:\n• Keo node tu bang de dat vi tri\n• Keo tu cong dau ra sang cong dau vao de tao ket noi\n• Nhap chuot phai de mo menu ngu canh (sao chep, dan, xoa)\n• Cuon de zoom, keo nen de pan\n• Phim tat: Ctrl+Z hoan tac, Ctrl+C/V sao chep-dan, Delete de xoa"
+        "desc": "Canvas la khong gian lam viec cua ban:\n• Keo node de dat vi tri\n• Keo tu cong dau ra sang cong dau vao de tao ket noi\n• Nhan vao node de chon — tham so se mo rong trong node de chinh sua\n• Nhap chuot phai de mo menu ngu canh (sao chep, dan, xoa)\n• Cuon de zoom, keo nen de pan\n• Phim tat: Ctrl+Z hoan tac, Ctrl+C/V sao chep-dan, Delete de xoa"
       },
       "canvasTools": {
         "title": "Cong cu Canvas",
-        "desc": "Ba cong cu huu ich de dieu huong va sap xep canvas:\n• Che do Chon / Ban tay — chuyen giua chon node (V) va pan canvas (H)\n• Vua khung nhin — tu dong zoom de vua tat ca node trong vung nhin\n• Tu dong bo cuc — tu dong sap xep node gon gang, de doc"
-      },
-      "config": {
-        "title": "Cau hinh & Xem ket qua",
-        "desc": "Nhan vao bat ky node nao de chon. Bang ben phai hien thi 2 tab:\n• Cau hinh — Dat tham so mo hinh, tai tep len, nhap prompt\n• Ket qua — Xem dau ra thuc thi (anh, video, mo hinh 3D)\n\nTham so cap nhat dong theo loai node va mo hinh da chon. Ket qua ho tro xem toan man hinh va tai xuong."
+        "desc": "Thanh cong cu ben phai canvas:\n• Luoi — Hien/an luoi nen\n• Chon / Ban tay — chuyen giua chon node va pan canvas\n• Phong to / Thu nho\n• Vua khung nhin — tu dong zoom de vua tat ca node\n• Tu dong bo cuc — tu dong sap xep node gon gang, de doc"
       },
       "run": {
         "title": "Chay Workflow cua ban",
-        "desc": "Nhan \"Chay Workflow\" de thuc thi toan bo pipeline:\n• Dat so lan chay (×1 den ×99) cho xu ly hang loat\n• Huy bat cu luc nao bang nut dung\n• Theo doi tien do thoi gian thuc trong Execution Monitor\n• Moi node hien trang thai: queued → running → done"
+        "desc": "Nhan \"Run\" de thuc thi toan bo pipeline:\n• Dat so lan chay (×1 den ×99) cho xu ly hang loat\n• Huy bat cu luc nao bang nut dung\n• Nhan bieu tuong dong ho de mo Execution Monitor va theo doi tien do thoi gian thuc\n• Moi node hien trang thai: cho → dang chay → hoan thanh"
       },
-      "templates": {
-        "title": "Template, Nhap & Xuat",
-        "desc": "Nhan menu ⋮ de dung tinh nang nang cao:\n• Luu workflow thanh template co the tai su dung\n• Nhap/Xuat workflow dang JSON de chia se\n• Mo nhieu workflow theo tab (giong trinh duyet)\n• Duyet cac template co san tu thanh cong cu"
+      "moreMenu": {
+        "title": "Luu, Nhap va Xuat",
+        "desc": "Nhan menu ⋮:\n• Luu — Luu workflow hien tai\n• Luu lam template — Luu workflow thanh template co the tai su dung\n• Nhap / Xuat — Chia se workflow qua tep JSON"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index d221762b..8f64adf3 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -124,6 +124,8 @@
     "title": "演练场",
     "selectModel": "选择模型",
     "searchModels": "搜索模型...",
+    "modelSelector": "模型选择器",
+    "specificFunction": "模型功能",
     "noModelSelected": "未选择模型",
     "selectModelPrompt": "选择一个模型以配置参数",
     "run": "运行",
@@ -146,6 +148,8 @@
     "webPage": "网页",
     "docs": "文档",
     "noTabs": "没有打开的演练场标签页",
+    "openSessions": "打开的会话",
+    "workspace": "工作区",
     "tabs": {
       "newTab": "新标签页",
       "closeTab": "关闭标签页",
@@ -195,6 +199,7 @@
       "micInUse": "麦克风正被其他应用使用",
       "tapToRecord": "点击开始录制"
     },
+    "generationComplete": "生成完成",
     "autoSaved": "已自动保存到资产",
     "autoSavedDesc": "已保存 {{count}} 个输出到我的资产",
     "savedToAssets": "已保存到资产",
@@ -263,6 +268,22 @@
     },
     "history": {
       "title": "历史记录"
+    },
+    "rightPanel": {
+      "explore": "探索",
+      "allModels": "所有模型",
+      "models": "模型",
+      "featuredModels": "精选模型",
+      "templates": "模板",
+      "result": "结果"
+    },
+    "explore": {
+      "searchPlaceholder": "搜索模型、LoRA 和风格...",
+      "all": "全部",
+      "allModels": "所有模型",
+      "favorites": "收藏",
+      "noFavorites": "暂无收藏 — 点击星标收藏模型",
+      "searchResults": "{{count}} 个结果"
     }
   },
   "history": {
@@ -1371,41 +1392,37 @@
       },
       "nodePaletteBtn": {
         "title": "节点面板",
-        "desc": "点击此按钮打开节点面板——你的节点工具箱。可以搜索、拖拽或点击将节点添加到画布。"
+        "desc": "点击此按钮打开节点面板——你的节点工具箱。"
       },
       "nodePalette": {
         "title": "节点分类",
-        "desc": "节点按分类组织：\n• 输入 — 上传文件或输入文本作为起始数据\n• AI 任务 — 运行任意 WaveSpeed AI 模型（详见下一步）\n• 免费工具 — 12 个内置工具，如背景移除、人脸增强、格式转换\n• 输出 — 预览结果或导出文件到磁盘\n\n拖拽节点到画布或点击即可添加。"
+        "desc": "节点分为 5 个类别：\n• AI 模型 — 运行任意 WaveSpeed AI 模型\n• 输入 — 上传媒体文件或输入文本\n• 输出 — 导出文件或预览结果\n• 处理 — 拼接或选择输出结果\n• 免费工具 — 12 个内置工具（背景移除、人脸增强、格式转换等）\n\n拖拽节点到画布或点击即可添加。"
       },
       "aiTask": {
-        "title": "AI 任务节点 — 核心能力",
-        "desc": "AI 任务节点是工作流中最强大的节点。它可以运行任意 WaveSpeed AI 模型，用于图像生成、视频创作、风格迁移等。",
+        "title": "WaveSpeed API 节点",
+        "desc": "WaveSpeed API 节点是工作流的核心——可以运行平台上的任意 AI 模型。选择模型后，节点卡片会展开显示所有可配置参数。执行完成后，结果也会直接显示在节点内。",
         "features": {
-          "modelSwitch": "从数百个 AI 模型中选择——参数面板会根据所选模型动态更新",
-          "dynamicParams": "每个模型有独立的参数（提示词、图片尺寸、种子等），选择后自动显示",
+          "modelSwitch": "从数百个 AI 模型中选择——参数会根据所选模型动态更新",
+          "dynamicParams": "每个模型有独立的参数（提示词、图片尺寸、种子等），选择后自动显示在节点内",
           "costEstimate": "实时显示每次执行的费用估算，运行前即可了解价格",
           "upstream": "连接上游节点的输出（图片、文本）作为输入——构建多步骤 AI 流水线"
         }
       },
       "canvas": {
         "title": "画布操作",
-        "desc": "中央画布是你的工作区：\n• 从节点面板拖拽节点到画布上定位\n• 从输出端口拖拽到输入端口创建连接\n• 右键打开上下文菜单（复制、粘贴、删除）\n• 滚轮缩放，拖拽背景平移\n• 快捷键：Ctrl+Z 撤销、Ctrl+C/V 复制粘贴、Delete 删除"
+        "desc": "画布是你的工作区：\n• 拖拽节点到画布上定位\n• 从输出端口拖拽到输入端口创建连接\n• 点击节点选中——参数会在节点内展开供编辑\n• 右键打开上下文菜单（复制、粘贴、删除）\n• 滚轮缩放，拖拽背景平移\n• 快捷键：Ctrl+Z 撤销、Ctrl+C/V 复制粘贴、Delete 删除"
       },
       "canvasTools": {
         "title": "画布工具",
-        "desc": "三个实用的画布导航与整理工具：\n• 选择 / 手型模式 — 在选择节点（V）和平移画布（H）之间切换\n• 适应视图 — 自动缩放以将所有节点显示在视口中\n• 自动布局 — 自动将节点排列为整洁、易读的布局"
-      },
-      "config": {
-        "title": "配置与查看结果",
-        "desc": "点击任意节点选中它。右侧面板显示两个标签页：\n• 配置 — 设置模型参数、上传文件、输入提示词\n• 结果 — 查看执行输出（图片、视频、3D 模型）\n\n参数会根据节点类型和所选模型动态更新。结果支持全屏预览和下载。"
+        "desc": "画布右侧的工具栏：\n• 网格 — 切换背景网格显示\n• 选择 / 手型 — 在选择节点和平移画布之间切换\n• 放大 / 缩小\n• 适应视图 — 自动缩放以显示所有节点\n• 自动布局 — 自动将节点排列为整洁的布局"
       },
       "run": {
         "title": "运行工作流",
-        "desc": "点击「运行工作流」执行整个流水线：\n• 设置运行次数（×1 到 ×99）进行批量处理\n• 随时点击停止按钮取消执行\n• 在执行监视器中实时查看进度\n• 每个节点显示状态：排队 → 运行中 → 完成"
+        "desc": "点击「Run」执行整个流水线：\n• 设置运行次数（×1 到 ×99）进行批量处理\n• 随时点击停止按钮取消执行\n• 点击时钟图标打开执行监视器查看实时进度\n• 每个节点显示状态：排队 → 运行中 → 完成"
       },
-      "templates": {
-        "title": "模板、导入与导出",
-        "desc": "点击 ⋮ 菜单使用高级功能：\n• 将工作流保存为可复用模板\n• 导入/导出工作流 JSON 文件进行分享\n• 在多个标签页中同时打开工作流（类似浏览器）\n• 从工具栏浏览预置模板"
+      "moreMenu": {
+        "title": "保存、导入与导出",
+        "desc": "点击 ⋮ 菜单：\n• 保存 — 保存当前工作流\n• 保存为模板 — 将工作流保存为可复用模板\n• 导入 / 导出 — 通过 JSON 文件分享工作流"
       }
     },
     "promptOptimizer": {
@@ -1440,4 +1457,4 @@
     },
     "modelSyncDesktopOnly": "Model sync is available in the WaveSpeed Desktop app."
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh-TW.json b/src/i18n/locales/zh-TW.json
index af82c7ec..5bca131b 100644
--- a/src/i18n/locales/zh-TW.json
+++ b/src/i18n/locales/zh-TW.json
@@ -1379,41 +1379,37 @@
       },
       "nodePaletteBtn": {
         "title": "節點面板",
-        "desc": "點擊此按鈕可開啟節點面板——你的節點工具箱。你也可以搜尋、拖曳或點擊以將節點加入畫布。"
+        "desc": "點擊此按鈕可開啟節點面板——你的節點工具箱。"
       },
       "nodePalette": {
         "title": "節點分類",
-        "desc": "節點依分類組織：\n• 輸入 — 上傳檔案或輸入文字作為起始資料\n• AI 任務 — 執行任意 WaveSpeed AI 模型（見下一步）\n• 免費工具 — 12 個內建工具，如背景移除、人臉增強、格式轉換\n• 輸出 — 預覽結果或匯出檔案到磁碟\n\n將節點拖曳到畫布，或點擊即可新增。"
+        "desc": "節點分為 5 個類別：\n• AI 模型 — 執行任意 WaveSpeed AI 模型\n• 輸入 — 上傳媒體檔案或輸入文字\n• 輸出 — 匯出檔案或預覽結果\n• 處理 — 拼接或選擇輸出結果\n• 免費工具 — 12 個內建工具（背景移除、人臉增強、格式轉換等）\n\n將節點拖曳到畫布，或點擊即可新增。"
       },
       "aiTask": {
-        "title": "AI 任務節點 — 核心能力",
-        "desc": "AI 任務節點是工作流中最強大的節點。它可執行任意 WaveSpeed AI 模型，用於圖像生成、影片創作、風格轉換等。",
+        "title": "WaveSpeed API 節點",
+        "desc": "WaveSpeed API 節點是工作流的核心——可以執行平台上的任意 AI 模型。選擇模型後，節點卡片會展開顯示所有可設定參數。執行完成後，結果也會直接顯示在節點內。",
         "features": {
-          "modelSwitch": "從數百個 AI 模型中選擇——參數面板會依所選模型動態更新",
-          "dynamicParams": "每個模型都有自己的參數（提示詞、圖像尺寸、種子等），選擇後會自動顯示",
+          "modelSwitch": "從數百個 AI 模型中選擇——參數會依所選模型動態更新",
+          "dynamicParams": "每個模型都有自己的參數（提示詞、圖像尺寸、種子等），選擇後會自動顯示在節點內",
           "costEstimate": "每次執行即時成本估算，執行前就能掌握價格",
           "upstream": "將上游節點輸出（圖像、文字）連接為輸入——建立多步驟 AI 流水線"
         }
       },
       "canvas": {
         "title": "畫布操作",
-        "desc": "中央畫布是你的工作區：\n• 從節點面板拖曳節點到畫布定位\n• 從輸出埠拖曳到輸入埠建立連線\n• 右鍵開啟內容選單（複製、貼上、刪除）\n• 滾輪縮放，拖曳背景平移\n• 快捷鍵：Ctrl+Z 復原、Ctrl+C/V 複製貼上、Delete 刪除"
+        "desc": "畫布是你的工作區：\n• 拖曳節點到畫布上定位\n• 從輸出埠拖曳到輸入埠建立連線\n• 點擊節點選取——參數會在節點內展開供編輯\n• 右鍵開啟內容選單（複製、貼上、刪除）\n• 滾輪縮放，拖曳背景平移\n• 快捷鍵：Ctrl+Z 復原、Ctrl+C/V 複製貼上、Delete 刪除"
       },
       "canvasTools": {
         "title": "畫布工具",
-        "desc": "三個實用的畫布導覽與整理工具：\n• 選取 / 手形模式 — 在選取節點（V）與平移畫布（H）之間切換\n• 適應視圖 — 自動縮放讓所有節點顯示在視窗中\n• 自動布局 — 自動將節點排列成整潔易讀的版面"
-      },
-      "config": {
-        "title": "設定與查看結果",
-        "desc": "點擊任意節點即可選取。右側面板有兩個分頁：\n• 設定 — 設定模型參數、上傳檔案、輸入提示詞\n• 結果 — 查看執行輸出（圖像、影片、3D 模型）\n\n參數會依節點類型與所選模型動態更新。結果支援全螢幕預覽與下載。"
+        "desc": "畫布右側的工具列：\n• 網格 — 切換背景網格顯示\n• 選取 / 手形 — 在選取節點和平移畫布之間切換\n• 放大 / 縮小\n• 適應視圖 — 自動縮放以顯示所有節點\n• 自動布局 — 自動將節點排列為整潔的版面"
       },
       "run": {
         "title": "執行你的工作流",
-        "desc": "點擊「執行工作流」以執行整個流水線：\n• 設定執行次數（×1 到 ×99）進行批次處理\n• 可隨時按停止按鈕取消\n• 在執行監視器中即時查看進度\n• 每個節點都會顯示狀態：排隊 → 執行中 → 完成"
+        "desc": "點擊「Run」執行整個流水線：\n• 設定執行次數（×1 到 ×99）進行批次處理\n• 可隨時按停止按鈕取消\n• 點擊時鐘圖示開啟執行監視器查看即時進度\n• 每個節點都會顯示狀態：排隊 → 執行中 → 完成"
       },
-      "templates": {
-        "title": "範本、匯入與匯出",
-        "desc": "點擊 ⋮ 選單可使用進階功能：\n• 將工作流儲存為可重複使用範本\n• 以 JSON 匯入/匯出工作流以便分享\n• 在分頁中同時開啟多個工作流（如瀏覽器）\n• 從工具列瀏覽預設範本"
+      "moreMenu": {
+        "title": "儲存、匯入與匯出",
+        "desc": "點擊 ⋮ 選單：\n• 儲存 — 儲存目前工作流\n• 儲存為範本 — 將工作流儲存為可重複使用範本\n• 匯入 / 匯出 — 透過 JSON 檔案分享工作流"
       }
     },
     "selectNodeHint": "Select a node to configure its parameters",
diff --git a/src/index.css b/src/index.css
index 7f9606a9..089a8e2c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -83,7 +83,9 @@
   }
   body {
     @apply bg-background text-foreground;
-    font-feature-settings: "rlig" 1, "calt" 1;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 }
 
@@ -187,7 +189,7 @@
   }
 
   .gradient-border::before {
-    content: '';
+    content: "";
     position: absolute;
     inset: 0;
     padding: 1px;
@@ -198,8 +200,12 @@
       hsl(var(--gradient-mid)) 50%,
       hsl(var(--gradient-end)) 100%
     );
-    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
+    mask:
+      linear-gradient(#fff 0 0) content-box,
+      linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
@@ -211,8 +217,9 @@
   }
 
   .glow {
-    box-shadow: 0 0 20px hsl(var(--primary) / 0.3),
-                0 0 40px hsl(var(--primary) / 0.1);
+    box-shadow:
+      0 0 20px hsl(var(--primary) / 0.3),
+      0 0 40px hsl(var(--primary) / 0.1);
   }
 
   .glow-sm {
@@ -222,7 +229,8 @@
 
 /* Animated gradient background */
 @keyframes gradient-shift {
-  0%, 100% {
+  0%,
+  100% {
     background-position: 0% 50%;
   }
   50% {
@@ -245,47 +253,49 @@
 }
 
 .dark .sidebar-bg {
-  background: linear-gradient(
-    180deg,
-    hsl(222 45% 8%) 0%,
-    hsl(222 45% 6%) 100%
-  );
+  background: linear-gradient(180deg, hsl(222 45% 8%) 0%, hsl(222 45% 6%) 100%);
 }
 
 /* Content panel with elevation */
 .content-panel {
   background: hsl(var(--panel-bg));
   border-radius: var(--radius);
-  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05),
-              0 1px 2px hsl(var(--foreground) / 0.03);
+  box-shadow:
+    0 1px 3px hsl(var(--foreground) / 0.05),
+    0 1px 2px hsl(var(--foreground) / 0.03);
 }
 
 .dark .content-panel {
-  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.3),
-              0 1px 2px hsl(0 0% 0% / 0.2);
+  box-shadow:
+    0 1px 3px hsl(0 0% 0% / 0.3),
+    0 1px 2px hsl(0 0% 0% / 0.2);
 }
 
 /* Elevated card with better shadow */
 .card-elevated {
-  box-shadow: 0 1px 3px hsl(var(--foreground) / 0.06),
-              0 4px 6px hsl(var(--foreground) / 0.04);
+  box-shadow:
+    0 1px 3px hsl(var(--foreground) / 0.06),
+    0 4px 6px hsl(var(--foreground) / 0.04);
   transition: all 0.2s ease;
 }
 
 .card-elevated:hover {
-  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08),
-              0 8px 16px hsl(var(--foreground) / 0.06);
+  box-shadow:
+    0 4px 12px hsl(var(--foreground) / 0.08),
+    0 8px 16px hsl(var(--foreground) / 0.06);
   transform: translateY(-2px);
 }
 
 .dark .card-elevated {
-  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.4),
-              0 4px 6px hsl(0 0% 0% / 0.3);
+  box-shadow:
+    0 1px 3px hsl(0 0% 0% / 0.4),
+    0 4px 6px hsl(0 0% 0% / 0.3);
 }
 
 .dark .card-elevated:hover {
-  box-shadow: 0 4px 12px hsl(0 0% 0% / 0.5),
-              0 8px 16px hsl(0 0% 0% / 0.4);
+  box-shadow:
+    0 4px 12px hsl(0 0% 0% / 0.5),
+    0 8px 16px hsl(0 0% 0% / 0.4);
 }
 
 /* Page header with background */
@@ -296,7 +306,8 @@
 
 /* Abstract art animations */
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0) scale(1);
   }
   50% {
@@ -323,7 +334,8 @@
 }
 
 @keyframes particle {
-  0%, 100% {
+  0%,
+  100% {
     transform: translate(0, 0) scale(1);
     opacity: 0.2;
   }
@@ -401,8 +413,15 @@
 
 /* Workflow node running pulse — visible glow breathe */
 @keyframes pulse-subtle {
-  0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,.2); }
-  50% { box-shadow: 0 0 25px rgba(59,130,246,.5), 0 0 50px rgba(59,130,246,.15); }
+  0%,
+  100% {
+    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
+  }
+  50% {
+    box-shadow:
+      0 0 25px rgba(59, 130, 246, 0.5),
+      0 0 50px rgba(59, 130, 246, 0.15);
+  }
 }
 .animate-pulse-subtle {
   animation: pulse-subtle 1.8s ease-in-out infinite;
@@ -463,15 +482,19 @@
 
 /* Shimmer sweep on hover */
 @keyframes shimmer-sweep {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }
 .btn-shimmer {
   position: relative;
   overflow: hidden;
 }
 .btn-shimmer::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(
@@ -490,9 +513,13 @@
   animation: shimmer-sweep 1.2s ease-in-out;
 }
 
+/* Page enter transition — disabled for instant switching */
+
 /* Form field hover lift */
 .field-hover {
-  transition: background-color 0.2s, box-shadow 0.2s;
+  transition:
+    background-color 0.2s,
+    box-shadow 0.2s;
   border-radius: 0.5rem;
   padding: 0.5rem;
   margin: -0.5rem;
diff --git a/src/lib/chunkedDownloader.ts b/src/lib/chunkedDownloader.ts
index fde27f7e..ae212cbf 100644
--- a/src/lib/chunkedDownloader.ts
+++ b/src/lib/chunkedDownloader.ts
@@ -11,49 +11,51 @@
  */
 
 export interface ChunkedDownloadOptions {
-  url: string
-  destPath: string
-  onProgress?: (progress: DownloadProgress) => void
-  chunkSize?: number // Bytes to accumulate before IPC transfer (default: 5MB)
-  timeout?: number // Connection timeout in ms (default: 30000)
-  maxRetries?: number // Maximum retry attempts (default: 3)
-  minValidSize?: number // Minimum valid file size in bytes (0 = no validation)
+  url: string;
+  destPath: string;
+  onProgress?: (progress: DownloadProgress) => void;
+  chunkSize?: number; // Bytes to accumulate before IPC transfer (default: 5MB)
+  timeout?: number; // Connection timeout in ms (default: 30000)
+  maxRetries?: number; // Maximum retry attempts (default: 3)
+  minValidSize?: number; // Minimum valid file size in bytes (0 = no validation)
 }
 
 export interface DownloadProgress {
-  receivedBytes: number
-  totalBytes: number
-  progress: number // 0-100
-  phase: 'download'
+  receivedBytes: number;
+  totalBytes: number;
+  progress: number; // 0-100
+  phase: "download";
   detail: {
-    current: number // bytes
-    total: number // bytes
-    unit: 'bytes'
-  }
+    current: number; // bytes
+    total: number; // bytes
+    unit: "bytes";
+  };
 }
 
 export interface ChunkedDownloadResult {
-  success: boolean
-  filePath?: string
-  error?: string
+  success: boolean;
+  filePath?: string;
+  error?: string;
 }
 
 /**
  * Chunked downloader using fetch + IPC file operations
  */
 export class ChunkedDownloader {
-  private abortController: AbortController | null = null
-  private chunkSize: number
+  private abortController: AbortController | null = null;
+  private chunkSize: number;
 
   constructor(chunkSize = 5 * 1024 * 1024) {
     // Default 5MB chunks
-    this.chunkSize = chunkSize
+    this.chunkSize = chunkSize;
   }
 
   /**
    * Download a file with resume support
    */
-  async download(options: ChunkedDownloadOptions): Promise<ChunkedDownloadResult> {
+  async download(
+    options: ChunkedDownloadOptions,
+  ): Promise<ChunkedDownloadResult> {
     const {
       url,
       destPath,
@@ -61,44 +63,53 @@ export class ChunkedDownloader {
       chunkSize = this.chunkSize,
       timeout = 30000,
       maxRetries = 3,
-      minValidSize = 0
-    } = options
+      minValidSize = 0,
+    } = options;
 
-    const partPath = destPath + '.part'
+    const partPath = destPath + ".part";
 
     // Check if final file already exists and is valid
-    const finalFileCheck = await window.electronAPI?.fileGetSize(destPath)
-    if (finalFileCheck?.success && finalFileCheck.size && finalFileCheck.size > 0) {
-      const fileSizeMB = Math.round(finalFileCheck.size / 1024 / 1024)
-      console.log(`[ChunkedDownloader] Found existing file: ${fileSizeMB}MB`)
+    const finalFileCheck = await window.electronAPI?.fileGetSize(destPath);
+    if (
+      finalFileCheck?.success &&
+      finalFileCheck.size &&
+      finalFileCheck.size > 0
+    ) {
+      const fileSizeMB = Math.round(finalFileCheck.size / 1024 / 1024);
+      console.log(`[ChunkedDownloader] Found existing file: ${fileSizeMB}MB`);
 
       // Validate file size if minValidSize is specified
       if (minValidSize > 0 && finalFileCheck.size < minValidSize) {
         console.warn(
-          `[ChunkedDownloader] File is too small (${fileSizeMB}MB < ${Math.round(minValidSize / 1024 / 1024)}MB), likely incomplete`
-        )
-        console.warn(`[ChunkedDownloader] Deleting incomplete file and restarting download...`)
-        await window.electronAPI?.fileDelete(destPath)
+          `[ChunkedDownloader] File is too small (${fileSizeMB}MB < ${Math.round(minValidSize / 1024 / 1024)}MB), likely incomplete`,
+        );
+        console.warn(
+          `[ChunkedDownloader] Deleting incomplete file and restarting download...`,
+        );
+        await window.electronAPI?.fileDelete(destPath);
       } else {
-        console.log(`[ChunkedDownloader] File size looks valid, skipping download`)
+        console.log(
+          `[ChunkedDownloader] File size looks valid, skipping download`,
+        );
         return {
           success: true,
-          filePath: destPath
-        }
+          filePath: destPath,
+        };
       }
     }
 
     // Attempt download with retries
-    let lastError = ''
+    let lastError = "";
     for (let attempt = 1; attempt <= maxRetries; attempt++) {
       // Check for partial download
-      const partFileCheck = await window.electronAPI?.fileGetSize(partPath)
-      const startByte = partFileCheck?.success && partFileCheck.size ? partFileCheck.size : 0
+      const partFileCheck = await window.electronAPI?.fileGetSize(partPath);
+      const startByte =
+        partFileCheck?.success && partFileCheck.size ? partFileCheck.size : 0;
 
       if (startByte > 0) {
         console.log(
-          `[ChunkedDownloader] Found partial download: ${Math.round(startByte / 1024 / 1024)}MB`
-        )
+          `[ChunkedDownloader] Found partial download: ${Math.round(startByte / 1024 / 1024)}MB`,
+        );
       }
 
       try {
@@ -110,35 +121,44 @@ export class ChunkedDownloader {
           attempt,
           timeout,
           chunkSize,
-          onProgress
-        })
+          onProgress,
+        });
 
         if (result.success) {
-          return result
+          return result;
         }
 
-        lastError = result.error || 'Unknown error'
+        lastError = result.error || "Unknown error";
 
         // If user cancelled, don't retry
-        if (lastError.includes('cancelled') || lastError.includes('aborted')) {
-          console.log('[ChunkedDownloader] User cancelled download, stopping retry attempts')
-          return { success: false, error: lastError }
+        if (lastError.includes("cancelled") || lastError.includes("aborted")) {
+          console.log(
+            "[ChunkedDownloader] User cancelled download, stopping retry attempts",
+          );
+          return { success: false, error: lastError };
         }
 
         // If not the last attempt, wait before retrying
         if (attempt < maxRetries) {
-          const waitTime = attempt * 2000 // 2s, 4s, 6s
-          console.log(`[ChunkedDownloader] Retry ${attempt + 1}/${maxRetries} in ${waitTime / 1000}s...`)
-          await new Promise((resolve) => setTimeout(resolve, waitTime))
+          const waitTime = attempt * 2000; // 2s, 4s, 6s
+          console.log(
+            `[ChunkedDownloader] Retry ${attempt + 1}/${maxRetries} in ${waitTime / 1000}s...`,
+          );
+          await new Promise((resolve) => setTimeout(resolve, waitTime));
         }
       } catch (error) {
-        lastError = (error as Error).message
-        console.error(`[ChunkedDownloader] Attempt ${attempt} failed:`, lastError)
+        lastError = (error as Error).message;
+        console.error(
+          `[ChunkedDownloader] Attempt ${attempt} failed:`,
+          lastError,
+        );
 
         // If user cancelled, don't retry
-        if (lastError.includes('cancelled') || lastError.includes('aborted')) {
-          console.log('[ChunkedDownloader] User cancelled download, stopping retry attempts')
-          return { success: false, error: lastError }
+        if (lastError.includes("cancelled") || lastError.includes("aborted")) {
+          console.log(
+            "[ChunkedDownloader] User cancelled download, stopping retry attempts",
+          );
+          return { success: false, error: lastError };
         }
       }
     }
@@ -146,176 +166,218 @@ export class ChunkedDownloader {
     // All retries failed
     return {
       success: false,
-      error: `Download failed after ${maxRetries} attempts: ${lastError}`
-    }
+      error: `Download failed after ${maxRetries} attempts: ${lastError}`,
+    };
   }
 
   /**
    * Attempt a single download with resume support
    */
   private async attemptDownload(params: {
-    url: string
-    destPath: string
-    partPath: string
-    startByte: number
-    attempt: number
-    timeout: number
-    chunkSize: number
-    onProgress?: (progress: DownloadProgress) => void
+    url: string;
+    destPath: string;
+    partPath: string;
+    startByte: number;
+    attempt: number;
+    timeout: number;
+    chunkSize: number;
+    onProgress?: (progress: DownloadProgress) => void;
   }): Promise<ChunkedDownloadResult> {
     // Create new abort controller for this attempt
-    this.abortController = new AbortController()
+    this.abortController = new AbortController();
 
     const headers: HeadersInit = {
-      'User-Agent': 'Mozilla/5.0'
-    }
+      "User-Agent": "Mozilla/5.0",
+    };
 
     // Add Range header for resume support
     if (params.startByte > 0) {
-      headers['Range'] = `bytes=${params.startByte}-`
+      headers["Range"] = `bytes=${params.startByte}-`;
       console.log(
-        `[ChunkedDownloader] Requesting resume from byte ${params.startByte} (${Math.round(params.startByte / 1024 / 1024)}MB)`
-      )
+        `[ChunkedDownloader] Requesting resume from byte ${params.startByte} (${Math.round(params.startByte / 1024 / 1024)}MB)`,
+      );
     }
 
-    console.log(`[ChunkedDownloader] Attempt ${params.attempt}: Starting download from:`, params.url)
+    console.log(
+      `[ChunkedDownloader] Attempt ${params.attempt}: Starting download from:`,
+      params.url,
+    );
 
     try {
       // Create timeout promise
       const timeoutPromise = new Promise<never>((_, reject) => {
-        setTimeout(() => reject(new Error('Connection timeout')), params.timeout)
-      })
+        setTimeout(
+          () => reject(new Error("Connection timeout")),
+          params.timeout,
+        );
+      });
 
       // Race between fetch and timeout
       const response = await Promise.race([
         fetch(params.url, {
           headers,
-          signal: this.abortController.signal
+          signal: this.abortController.signal,
         }),
-        timeoutPromise
-      ])
+        timeoutPromise,
+      ]);
 
-      console.log(`[ChunkedDownloader] Connected! Response status: ${response.status}`)
+      console.log(
+        `[ChunkedDownloader] Connected! Response status: ${response.status}`,
+      );
 
       // Check for valid response (200 for new download, 206 for resumed download)
       if (response.status !== 200 && response.status !== 206) {
         return {
           success: false,
-          error: `Server responded with status ${response.status}`
-        }
+          error: `Server responded with status ${response.status}`,
+        };
       }
 
       // Check if server supports resume
       if (params.startByte > 0 && response.status === 200) {
-        console.warn('[ChunkedDownloader] WARNING: Server does NOT support Range requests!')
-        console.warn('[ChunkedDownloader] Server returned 200 instead of 206, will restart download from 0')
-        console.warn('[ChunkedDownloader] Deleting .part file and restarting...')
-        await window.electronAPI?.fileDelete(params.partPath)
-        params.startByte = 0
+        console.warn(
+          "[ChunkedDownloader] WARNING: Server does NOT support Range requests!",
+        );
+        console.warn(
+          "[ChunkedDownloader] Server returned 200 instead of 206, will restart download from 0",
+        );
+        console.warn(
+          "[ChunkedDownloader] Deleting .part file and restarting...",
+        );
+        await window.electronAPI?.fileDelete(params.partPath);
+        params.startByte = 0;
       }
 
       // Get total size from headers
-      let totalBytes = 0
-      if (response.status === 206 && response.headers.get('content-range')) {
-        const contentRange = response.headers.get('content-range')!
-        const match = contentRange.match(/bytes \d+-\d+\/(\d+)/)
+      let totalBytes = 0;
+      if (response.status === 206 && response.headers.get("content-range")) {
+        const contentRange = response.headers.get("content-range")!;
+        const match = contentRange.match(/bytes \d+-\d+\/(\d+)/);
         if (match) {
-          totalBytes = parseInt(match[1], 10)
+          totalBytes = parseInt(match[1], 10);
         }
-        console.log(`[ChunkedDownloader] ✓ Server supports resume! Content-Range: ${contentRange}`)
+        console.log(
+          `[ChunkedDownloader] ✓ Server supports resume! Content-Range: ${contentRange}`,
+        );
       } else {
-        const contentLength = response.headers.get('content-length')
+        const contentLength = response.headers.get("content-length");
         if (contentLength) {
-          const length = parseInt(contentLength, 10)
-          totalBytes = params.startByte > 0 ? params.startByte + length : length
+          const length = parseInt(contentLength, 10);
+          totalBytes =
+            params.startByte > 0 ? params.startByte + length : length;
         }
       }
 
-      console.log(`[ChunkedDownloader] Total size: ${Math.round(totalBytes / 1024 / 1024)}MB`)
       console.log(
-        `[ChunkedDownloader] Starting from: ${Math.round(params.startByte / 1024 / 1024)}MB (${params.startByte > 0 ? 'RESUME' : 'NEW'})`
-      )
+        `[ChunkedDownloader] Total size: ${Math.round(totalBytes / 1024 / 1024)}MB`,
+      );
+      console.log(
+        `[ChunkedDownloader] Starting from: ${Math.round(params.startByte / 1024 / 1024)}MB (${params.startByte > 0 ? "RESUME" : "NEW"})`,
+      );
 
       // Read response body as stream
-      const reader = response.body?.getReader()
+      const reader = response.body?.getReader();
       if (!reader) {
-        return { success: false, error: 'Response body is not readable' }
+        return { success: false, error: "Response body is not readable" };
       }
 
-      let receivedBytes = params.startByte
-      let buffer: Uint8Array[] = []
-      let bufferSize = 0
-      let lastProgressUpdate = Date.now()
+      let receivedBytes = params.startByte;
+      let buffer: Uint8Array[] = [];
+      let bufferSize = 0;
+      let lastProgressUpdate = Date.now();
 
       while (true) {
-        const { done, value } = await reader.read()
+        const { done, value } = await reader.read();
 
         if (done) {
           // Flush remaining buffer
           if (bufferSize > 0) {
-            const chunk = this.mergeBuffers(buffer, bufferSize)
-            const appendResult = await window.electronAPI?.fileAppendChunk(params.partPath, chunk.buffer as ArrayBuffer)
+            const chunk = this.mergeBuffers(buffer, bufferSize);
+            const appendResult = await window.electronAPI?.fileAppendChunk(
+              params.partPath,
+              chunk.buffer as ArrayBuffer,
+            );
             if (!appendResult?.success) {
-              return { success: false, error: `Failed to write chunk: ${appendResult?.error}` }
+              return {
+                success: false,
+                error: `Failed to write chunk: ${appendResult?.error}`,
+              };
             }
           }
-          break
+          break;
         }
 
         // Accumulate into buffer
-        buffer.push(value)
-        bufferSize += value.length
-        receivedBytes += value.length
+        buffer.push(value);
+        bufferSize += value.length;
+        receivedBytes += value.length;
 
         // Throttle progress updates to every 500ms
-        const now = Date.now()
+        const now = Date.now();
         if (now - lastProgressUpdate > 500 || receivedBytes === totalBytes) {
-          const progress = totalBytes > 0 ? Math.round((receivedBytes / totalBytes) * 100) : 0
+          const progress =
+            totalBytes > 0 ? Math.round((receivedBytes / totalBytes) * 100) : 0;
 
           if (params.onProgress) {
             params.onProgress({
               receivedBytes,
               totalBytes,
               progress,
-              phase: 'download',
+              phase: "download",
               detail: {
                 current: receivedBytes,
                 total: totalBytes,
-                unit: 'bytes'
-              }
-            })
+                unit: "bytes",
+              },
+            });
           }
-          lastProgressUpdate = now
+          lastProgressUpdate = now;
         }
 
         // Write to file when buffer reaches chunk size
         if (bufferSize >= params.chunkSize) {
-          const chunk = this.mergeBuffers(buffer, bufferSize)
-          const appendResult = await window.electronAPI?.fileAppendChunk(params.partPath, chunk.buffer as ArrayBuffer)
+          const chunk = this.mergeBuffers(buffer, bufferSize);
+          const appendResult = await window.electronAPI?.fileAppendChunk(
+            params.partPath,
+            chunk.buffer as ArrayBuffer,
+          );
 
           if (!appendResult?.success) {
-            return { success: false, error: `Failed to write chunk: ${appendResult?.error}` }
+            return {
+              success: false,
+              error: `Failed to write chunk: ${appendResult?.error}`,
+            };
           }
 
           // Reset buffer
-          buffer = []
-          bufferSize = 0
+          buffer = [];
+          bufferSize = 0;
         }
       }
 
       console.log(
-        `[ChunkedDownloader] Download completed, received ${Math.round(receivedBytes / 1024 / 1024)}MB`
-      )
+        `[ChunkedDownloader] Download completed, received ${Math.round(receivedBytes / 1024 / 1024)}MB`,
+      );
 
       // Rename .part file to final filename
-      console.log(`[ChunkedDownloader] Renaming ${params.partPath} -> ${params.destPath}`)
-      const renameResult = await window.electronAPI?.fileRename(params.partPath, params.destPath)
+      console.log(
+        `[ChunkedDownloader] Renaming ${params.partPath} -> ${params.destPath}`,
+      );
+      const renameResult = await window.electronAPI?.fileRename(
+        params.partPath,
+        params.destPath,
+      );
 
       if (!renameResult?.success) {
-        return { success: false, error: `Failed to rename file: ${renameResult?.error}` }
+        return {
+          success: false,
+          error: `Failed to rename file: ${renameResult?.error}`,
+        };
       }
 
-      console.log(`[ChunkedDownloader] File successfully saved to ${params.destPath}`)
+      console.log(
+        `[ChunkedDownloader] File successfully saved to ${params.destPath}`,
+      );
 
       // Send 100% progress
       if (params.onProgress) {
@@ -323,27 +385,27 @@ export class ChunkedDownloader {
           receivedBytes: totalBytes,
           totalBytes,
           progress: 100,
-          phase: 'download',
+          phase: "download",
           detail: {
             current: totalBytes,
             total: totalBytes,
-            unit: 'bytes'
-          }
-        })
+            unit: "bytes",
+          },
+        });
       }
 
       return {
         success: true,
-        filePath: params.destPath
-      }
+        filePath: params.destPath,
+      };
     } catch (error) {
       if (error instanceof Error) {
-        if (error.name === 'AbortError') {
-          return { success: false, error: 'Download cancelled by user' }
+        if (error.name === "AbortError") {
+          return { success: false, error: "Download cancelled by user" };
         }
-        return { success: false, error: error.message }
+        return { success: false, error: error.message };
       }
-      return { success: false, error: 'Unknown error' }
+      return { success: false, error: "Unknown error" };
     }
   }
 
@@ -351,13 +413,13 @@ export class ChunkedDownloader {
    * Merge multiple Uint8Array buffers into a single Uint8Array
    */
   private mergeBuffers(buffers: Uint8Array[], totalLength: number): Uint8Array {
-    const result = new Uint8Array(totalLength)
-    let offset = 0
+    const result = new Uint8Array(totalLength);
+    let offset = 0;
     for (const buffer of buffers) {
-      result.set(buffer, offset)
-      offset += buffer.length
+      result.set(buffer, offset);
+      offset += buffer.length;
     }
-    return result
+    return result;
   }
 
   /**
@@ -365,9 +427,9 @@ export class ChunkedDownloader {
    */
   cancel(): void {
     if (this.abortController) {
-      console.log('[ChunkedDownloader] Cancelling download')
-      this.abortController.abort()
-      this.abortController = null
+      console.log("[ChunkedDownloader] Cancelling download");
+      this.abortController.abort();
+      this.abortController = null;
     }
   }
 }
diff --git a/src/lib/electronAPI.web.ts b/src/lib/electronAPI.web.ts
index d58c8974..05199638 100644
--- a/src/lib/electronAPI.web.ts
+++ b/src/lib/electronAPI.web.ts
@@ -1,121 +1,130 @@
 // Web mock implementation of electronAPI.
 // Provides Electron API-compatible interfaces in browser environments.
 
-import type { ElectronAPI } from '@/types/electron'
+import type { ElectronAPI } from "@/types/electron";
 
 // Check whether we are running in a browser environment.
-const isBrowser = typeof window !== 'undefined' && !window.electronAPI
+const isBrowser = typeof window !== "undefined" && !window.electronAPI;
 
 // Use localStorage for API key persistence.
-const API_KEY_STORAGE_KEY = 'wavespeed_api_key'
-const SETTINGS_STORAGE_KEY = 'wavespeed_settings'
-const ASSETS_METADATA_STORAGE_KEY = 'wavespeed_assets_metadata'
-const ASSETS_SETTINGS_STORAGE_KEY = 'wavespeed_assets_settings'
+const API_KEY_STORAGE_KEY = "wavespeed_api_key";
+const SETTINGS_STORAGE_KEY = "wavespeed_settings";
+const ASSETS_METADATA_STORAGE_KEY = "wavespeed_assets_metadata";
+const ASSETS_SETTINGS_STORAGE_KEY = "wavespeed_assets_settings";
 
 // Default settings.
 const DEFAULT_SETTINGS = {
-  theme: 'system' as const,
+  theme: "system" as const,
   defaultPollInterval: 2000,
   defaultTimeout: 30000,
-  updateChannel: 'stable' as const,
+  updateChannel: "stable" as const,
   autoCheckUpdate: false,
-  language: 'auto',
-}
+  language: "auto",
+};
 
 // Web implementation of electronAPI.
 export const electronAPIWeb: ElectronAPI = {
   // API key management
   getApiKey: async (): Promise<string> => {
-    return localStorage.getItem(API_KEY_STORAGE_KEY) || ''
+    return localStorage.getItem(API_KEY_STORAGE_KEY) || "";
   },
 
   setApiKey: async (apiKey: string): Promise<boolean> => {
     try {
-      localStorage.setItem(API_KEY_STORAGE_KEY, apiKey)
-      return true
+      localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
+      return true;
     } catch {
-      return false
+      return false;
     }
   },
 
   // Settings management
   getSettings: async () => {
     try {
-      const stored = localStorage.getItem(SETTINGS_STORAGE_KEY)
+      const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
       if (stored) {
-        return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) }
+        return { ...DEFAULT_SETTINGS, ...JSON.parse(stored) };
       }
     } catch {
       // ignore
     }
-    return DEFAULT_SETTINGS
+    return DEFAULT_SETTINGS;
   },
 
   setSettings: async (settings: Record<string, unknown>): Promise<boolean> => {
     try {
-      const current = await electronAPIWeb.getSettings()
-      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify({ ...current, ...settings }))
-      return true
+      const current = await electronAPIWeb.getSettings();
+      localStorage.setItem(
+        SETTINGS_STORAGE_KEY,
+        JSON.stringify({ ...current, ...settings }),
+      );
+      return true;
     } catch {
-      return false
+      return false;
     }
   },
 
   clearAllData: async (): Promise<boolean> => {
     try {
-      localStorage.removeItem(API_KEY_STORAGE_KEY)
-      localStorage.removeItem(SETTINGS_STORAGE_KEY)
-      localStorage.removeItem(ASSETS_METADATA_STORAGE_KEY)
-      localStorage.removeItem(ASSETS_SETTINGS_STORAGE_KEY)
-      return true
+      localStorage.removeItem(API_KEY_STORAGE_KEY);
+      localStorage.removeItem(SETTINGS_STORAGE_KEY);
+      localStorage.removeItem(ASSETS_METADATA_STORAGE_KEY);
+      localStorage.removeItem(ASSETS_SETTINGS_STORAGE_KEY);
+      return true;
     } catch {
-      return false
+      return false;
     }
   },
 
   // File download (browser-based)
   downloadFile: async (url: string, defaultFilename: string) => {
     try {
-      const response = await fetch(url)
-      const blob = await response.blob()
-      const downloadUrl = window.URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = downloadUrl
-      a.download = defaultFilename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
-      window.URL.revokeObjectURL(downloadUrl)
-      return { success: true }
+      const response = await fetch(url);
+      const blob = await response.blob();
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = downloadUrl;
+      a.download = defaultFilename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(downloadUrl);
+      return { success: true };
     } catch (error) {
-      return { success: false, error: String(error) }
+      return { success: false, error: String(error) };
     }
   },
 
   openExternal: async (url: string): Promise<void> => {
-    window.open(url, '_blank', 'noopener,noreferrer')
+    window.open(url, "_blank", "noopener,noreferrer");
   },
 
   // App information
   getAppVersion: async (): Promise<string> => {
-    return '1.0.0-web'
+    return "1.0.0-web";
   },
 
   getLogFilePath: async (): Promise<string> => {
-    return ''
+    return "";
   },
 
   openLogDirectory: async () => {
-    return { success: false, path: '' }
+    return { success: false, path: "" };
   },
 
   // Update-related APIs (not supported in web version)
   checkForUpdates: async () => {
-    return { status: 'not-available', message: 'Updates are not available in web version' }
+    return {
+      status: "not-available",
+      message: "Updates are not available in web version",
+    };
   },
 
   downloadUpdate: async () => {
-    return { status: 'not-available', message: 'Updates are not available in web version' }
+    return {
+      status: "not-available",
+      message: "Updates are not available in web version",
+    };
   },
 
   installUpdate: (): void => {
@@ -123,259 +132,312 @@ export const electronAPIWeb: ElectronAPI = {
   },
 
   setUpdateChannel: async (): Promise<boolean> => {
-    return false
+    return false;
   },
 
   onUpdateStatus: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   // Asset management (using IndexedDB or localStorage)
   getAssetsSettings: async () => {
     try {
-      const stored = localStorage.getItem(ASSETS_SETTINGS_STORAGE_KEY)
+      const stored = localStorage.getItem(ASSETS_SETTINGS_STORAGE_KEY);
       if (stored) {
-        return JSON.parse(stored)
+        return JSON.parse(stored);
       }
     } catch {
       // ignore
     }
     return {
       autoSaveAssets: false,
-      assetsDirectory: '',
-    }
+      assetsDirectory: "",
+    };
   },
 
-  setAssetsSettings: async (settings: Partial<{ autoSaveAssets: boolean; assetsDirectory: string }>): Promise<boolean> => {
+  setAssetsSettings: async (
+    settings: Partial<{ autoSaveAssets: boolean; assetsDirectory: string }>,
+  ): Promise<boolean> => {
     try {
-      const current = await electronAPIWeb.getAssetsSettings()
-      localStorage.setItem(ASSETS_SETTINGS_STORAGE_KEY, JSON.stringify({ ...current, ...settings }))
-      return true
+      const current = await electronAPIWeb.getAssetsSettings();
+      localStorage.setItem(
+        ASSETS_SETTINGS_STORAGE_KEY,
+        JSON.stringify({ ...current, ...settings }),
+      );
+      return true;
     } catch {
-      return false
+      return false;
     }
   },
 
   getDefaultAssetsDirectory: async (): Promise<string> => {
-    return ''
+    return "";
   },
 
   getZImageOutputPath: async (): Promise<string> => {
-    return ''
+    return "";
   },
 
   selectDirectory: async () => {
-    return { success: false, canceled: true, error: 'Directory selection not available in web version' }
+    return {
+      success: false,
+      canceled: true,
+      error: "Directory selection not available in web version",
+    };
   },
 
   saveAsset: async () => {
-    return { success: false, error: 'Asset saving not available in web version' }
+    return {
+      success: false,
+      error: "Asset saving not available in web version",
+    };
   },
 
   deleteAsset: async () => {
-    return { success: false, error: 'Asset deletion not available in web version' }
+    return {
+      success: false,
+      error: "Asset deletion not available in web version",
+    };
   },
 
   deleteAssetsBulk: async () => {
-    return { success: false, deleted: 0 }
+    return { success: false, deleted: 0 };
   },
 
   getAssetsMetadata: async () => {
     try {
-      const stored = localStorage.getItem(ASSETS_METADATA_STORAGE_KEY)
+      const stored = localStorage.getItem(ASSETS_METADATA_STORAGE_KEY);
       if (stored) {
-        return JSON.parse(stored)
+        return JSON.parse(stored);
       }
     } catch {
       // ignore
     }
-    return []
+    return [];
   },
 
   saveAssetsMetadata: async (metadata: unknown[]): Promise<boolean> => {
     try {
-      localStorage.setItem(ASSETS_METADATA_STORAGE_KEY, JSON.stringify(metadata))
-      return true
+      localStorage.setItem(
+        ASSETS_METADATA_STORAGE_KEY,
+        JSON.stringify(metadata),
+      );
+      return true;
     } catch {
-      return false
+      return false;
     }
   },
 
   openFileLocation: async () => {
-    return { success: false, error: 'File location not available in web version' }
+    return {
+      success: false,
+      error: "File location not available in web version",
+    };
   },
 
   checkFileExists: async (): Promise<boolean> => {
-    return false
+    return false;
   },
 
   openAssetsFolder: async () => {
-    return { success: false, error: 'Assets folder not available in web version' }
+    return {
+      success: false,
+      error: "Assets folder not available in web version",
+    };
   },
 
   scanAssetsDirectory: async () => {
-    return []
+    return [];
   },
 
   // Stable Diffusion APIs (not supported in web version)
   sdGetBinaryPath: async () => {
-    return { success: false, error: 'Stable Diffusion not available in web version' }
+    return {
+      success: false,
+      error: "Stable Diffusion not available in web version",
+    };
   },
 
   sdCheckAuxiliaryModels: async () => {
-    return { success: false, llmExists: false, vaeExists: false, llmPath: '', vaePath: '', error: 'Not available in web version' }
+    return {
+      success: false,
+      llmExists: false,
+      vaeExists: false,
+      llmPath: "",
+      vaePath: "",
+      error: "Not available in web version",
+    };
   },
 
   sdListAuxiliaryModels: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdDeleteAuxiliaryModel: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdGenerateImage: async () => {
-    return { success: false, error: 'Stable Diffusion not available in web version' }
+    return {
+      success: false,
+      error: "Stable Diffusion not available in web version",
+    };
   },
 
   sdCancelGeneration: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdSaveModelFromCache: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdListModels: async () => {
-    return { success: false, error: 'Stable Diffusion not available in web version' }
+    return {
+      success: false,
+      error: "Stable Diffusion not available in web version",
+    };
   },
 
   sdDeleteModel: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdDeleteBinary: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   getFileSize: async (): Promise<number> => {
-    return 0
+    return 0;
   },
 
   sdGetSystemInfo: async () => {
     return {
-      platform: 'web',
-      arch: 'unknown',
-      acceleration: 'webgpu',
+      platform: "web",
+      arch: "unknown",
+      acceleration: "webgpu",
       supported: false,
-    }
+    };
   },
 
   sdGetGpuVramMb: async () => {
-    return { success: false, vramMb: null, error: 'Not available in web version' }
+    return {
+      success: false,
+      vramMb: null,
+      error: "Not available in web version",
+    };
   },
 
   onSdProgress: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   onSdLog: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   onSdDownloadProgress: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   onSdBinaryDownloadProgress: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   onSdLlmDownloadProgress: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   onSdVaeDownloadProgress: () => {
     return () => {
       // no-op
-    }
+    };
   },
 
   // File operations (not supported in web version)
   fileGetSize: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   fileAppendChunk: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   fileRename: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   fileDelete: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   // Stable Diffusion download path helpers
   sdGetBinaryDownloadPath: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdGetAuxiliaryModelDownloadPath: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdGetModelsDir: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   sdExtractBinary: async () => {
-    return { success: false, error: 'Not available in web version' }
+    return { success: false, error: "Not available in web version" };
   },
 
   // Persistent key-value state (localStorage in web — same keys as persistentStorage)
   getState: async (key: string): Promise<unknown> => {
     try {
-      const raw = localStorage.getItem(key)
-      return raw ? JSON.parse(raw) : null
-    } catch { return null }
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
+    } catch {
+      return null;
+    }
   },
   setState: async (key: string, value: unknown): Promise<boolean> => {
     try {
-      localStorage.setItem(key, JSON.stringify(value))
-      return true
-    } catch { return false }
+      localStorage.setItem(key, JSON.stringify(value));
+      return true;
+    } catch {
+      return false;
+    }
   },
   removeState: async (key: string): Promise<boolean> => {
     try {
-      localStorage.removeItem(key)
-      return true
-    } catch { return false }
+      localStorage.removeItem(key);
+      return true;
+    } catch {
+      return false;
+    }
   },
 
   // Assets event listener (no-op in web — browser-side saves directly to store)
   onAssetsNewAsset: () => {
-    return () => { /* no-op */ }
+    return () => {
+      /* no-op */
+    };
   },
-}
+};
 
 // Inject electronAPI when running in a browser environment.
 if (isBrowser) {
-  ;(window as Window & { electronAPI: ElectronAPI }).electronAPI = electronAPIWeb
+  (window as Window & { electronAPI: ElectronAPI }).electronAPI =
+    electronAPIWeb;
   // Set document title for web version (Desktop keeps "WaveSpeed Desktop" from index.html)
-  document.title = 'WaveSpeedAI Studio'
+  document.title = "WaveSpeedAI Studio";
 }
diff --git a/src/lib/faceParsingUtils.ts b/src/lib/faceParsingUtils.ts
index 13f28a10..1625aad0 100644
--- a/src/lib/faceParsingUtils.ts
+++ b/src/lib/faceParsingUtils.ts
@@ -4,40 +4,53 @@
 
 // Face region labels to include in mask (excludes background, hair, hat, ears, neck, cloth, accessories)
 export const FACE_LABELS = new Set([
-  'skin', 'nose', 'eye_g', 'l_eye', 'r_eye', 'l_brow', 'r_brow', 'mouth', 'u_lip', 'l_lip'
-])
+  "skin",
+  "nose",
+  "eye_g",
+  "l_eye",
+  "r_eye",
+  "l_brow",
+  "r_brow",
+  "mouth",
+  "u_lip",
+  "l_lip",
+]);
 
 /**
  * Apply feathering to mask edges for smoother blending
  */
-export function featherMask(mask: Uint8Array, size: number, radius: number): Uint8Array {
-  const result = new Uint8Array(mask)
+export function featherMask(
+  mask: Uint8Array,
+  size: number,
+  radius: number,
+): Uint8Array {
+  const result = new Uint8Array(mask);
 
   // Simple box blur for feathering
   for (let pass = 0; pass < 2; pass++) {
-    const temp = new Uint8Array(result)
+    const temp = new Uint8Array(result);
 
     for (let y = 0; y < size; y++) {
       for (let x = 0; x < size; x++) {
-        let sum = 0
-        let count = 0
+        let sum = 0;
+        let count = 0;
 
         for (let dy = -radius; dy <= radius; dy++) {
           for (let dx = -radius; dx <= radius; dx++) {
-            const nx = x + dx
-            const ny = y + dy
+            const nx = x + dx;
+            const ny = y + dy;
 
             if (nx >= 0 && nx < size && ny >= 0 && ny < size) {
-              sum += temp[ny * size + nx]
-              count++
+              sum += temp[ny * size + nx];
+              count++;
             }
           }
         }
 
-        result[y * size + x] = Math.round(sum / count)
+        result[y * size + x] = Math.round(sum / count);
       }
     }
   }
 
-  return result
+  return result;
 }
diff --git a/src/lib/ffmpegFormats.ts b/src/lib/ffmpegFormats.ts
index 88467b8f..bb7c0951 100644
--- a/src/lib/ffmpegFormats.ts
+++ b/src/lib/ffmpegFormats.ts
@@ -1,145 +1,255 @@
 export interface VideoFormat {
-  id: string
-  ext: string
-  label: string
-  codec: string
-  mimeType: string
+  id: string;
+  ext: string;
+  label: string;
+  codec: string;
+  mimeType: string;
 }
 
 export interface AudioFormat {
-  id: string
-  ext: string
-  label: string
-  codec: string
-  mimeType: string
+  id: string;
+  ext: string;
+  label: string;
+  codec: string;
+  mimeType: string;
 }
 
 export interface ImageFormat {
-  id: string
-  ext: string
-  label: string
-  mimeType: string
-  supportsQuality: boolean
+  id: string;
+  ext: string;
+  label: string;
+  mimeType: string;
+  supportsQuality: boolean;
 }
 
 export interface QualityPreset {
-  id: string
-  label: string
-  videoBitrate: string
-  audioBitrate: string
+  id: string;
+  label: string;
+  videoBitrate: string;
+  audioBitrate: string;
 }
 
 export interface ResolutionPreset {
-  id: string
-  label: string
-  value: string // 'original' or 'WxH'
+  id: string;
+  label: string;
+  value: string; // 'original' or 'WxH'
 }
 
 export const VIDEO_FORMATS: VideoFormat[] = [
-  { id: 'mp4-h264', ext: 'mp4', label: 'MP4 (H.264)', codec: 'libx264', mimeType: 'video/mp4' },
-  { id: 'mp4-h265', ext: 'mp4', label: 'MP4 (H.265/HEVC)', codec: 'libx265', mimeType: 'video/mp4' },
-  { id: 'webm-vp9', ext: 'webm', label: 'WebM (VP9)', codec: 'libvpx-vp9', mimeType: 'video/webm' },
-  { id: 'webm-vp8', ext: 'webm', label: 'WebM (VP8)', codec: 'libvpx', mimeType: 'video/webm' },
-  { id: 'mov', ext: 'mov', label: 'MOV', codec: 'libx264', mimeType: 'video/quicktime' },
-  { id: 'avi', ext: 'avi', label: 'AVI', codec: 'libx264', mimeType: 'video/x-msvideo' },
-  { id: 'mkv', ext: 'mkv', label: 'MKV', codec: 'libx264', mimeType: 'video/x-matroska' },
-]
+  {
+    id: "mp4-h264",
+    ext: "mp4",
+    label: "MP4 (H.264)",
+    codec: "libx264",
+    mimeType: "video/mp4",
+  },
+  {
+    id: "mp4-h265",
+    ext: "mp4",
+    label: "MP4 (H.265/HEVC)",
+    codec: "libx265",
+    mimeType: "video/mp4",
+  },
+  {
+    id: "webm-vp9",
+    ext: "webm",
+    label: "WebM (VP9)",
+    codec: "libvpx-vp9",
+    mimeType: "video/webm",
+  },
+  {
+    id: "webm-vp8",
+    ext: "webm",
+    label: "WebM (VP8)",
+    codec: "libvpx",
+    mimeType: "video/webm",
+  },
+  {
+    id: "mov",
+    ext: "mov",
+    label: "MOV",
+    codec: "libx264",
+    mimeType: "video/quicktime",
+  },
+  {
+    id: "avi",
+    ext: "avi",
+    label: "AVI",
+    codec: "libx264",
+    mimeType: "video/x-msvideo",
+  },
+  {
+    id: "mkv",
+    ext: "mkv",
+    label: "MKV",
+    codec: "libx264",
+    mimeType: "video/x-matroska",
+  },
+];
 
 export const AUDIO_FORMATS: AudioFormat[] = [
-  { id: 'mp3', ext: 'mp3', label: 'MP3', codec: 'libmp3lame', mimeType: 'audio/mpeg' },
-  { id: 'aac', ext: 'm4a', label: 'AAC (M4A)', codec: 'aac', mimeType: 'audio/mp4' },
-  { id: 'opus', ext: 'ogg', label: 'Opus (OGG)', codec: 'libopus', mimeType: 'audio/ogg' },
-  { id: 'vorbis', ext: 'ogg', label: 'Vorbis (OGG)', codec: 'libvorbis', mimeType: 'audio/ogg' },
-  { id: 'flac', ext: 'flac', label: 'FLAC (Lossless)', codec: 'flac', mimeType: 'audio/flac' },
-  { id: 'wav', ext: 'wav', label: 'WAV (Uncompressed)', codec: 'pcm_s16le', mimeType: 'audio/wav' },
-]
+  {
+    id: "mp3",
+    ext: "mp3",
+    label: "MP3",
+    codec: "libmp3lame",
+    mimeType: "audio/mpeg",
+  },
+  {
+    id: "aac",
+    ext: "m4a",
+    label: "AAC (M4A)",
+    codec: "aac",
+    mimeType: "audio/mp4",
+  },
+  {
+    id: "opus",
+    ext: "ogg",
+    label: "Opus (OGG)",
+    codec: "libopus",
+    mimeType: "audio/ogg",
+  },
+  {
+    id: "vorbis",
+    ext: "ogg",
+    label: "Vorbis (OGG)",
+    codec: "libvorbis",
+    mimeType: "audio/ogg",
+  },
+  {
+    id: "flac",
+    ext: "flac",
+    label: "FLAC (Lossless)",
+    codec: "flac",
+    mimeType: "audio/flac",
+  },
+  {
+    id: "wav",
+    ext: "wav",
+    label: "WAV (Uncompressed)",
+    codec: "pcm_s16le",
+    mimeType: "audio/wav",
+  },
+];
 
 export const IMAGE_FORMATS: ImageFormat[] = [
-  { id: 'jpg', ext: 'jpg', label: 'JPEG', mimeType: 'image/jpeg', supportsQuality: true },
-  { id: 'png', ext: 'png', label: 'PNG', mimeType: 'image/png', supportsQuality: false },
-  { id: 'webp', ext: 'webp', label: 'WebP', mimeType: 'image/webp', supportsQuality: true },
-  { id: 'gif', ext: 'gif', label: 'GIF', mimeType: 'image/gif', supportsQuality: false },
-  { id: 'bmp', ext: 'bmp', label: 'BMP', mimeType: 'image/bmp', supportsQuality: false },
-]
+  {
+    id: "jpg",
+    ext: "jpg",
+    label: "JPEG",
+    mimeType: "image/jpeg",
+    supportsQuality: true,
+  },
+  {
+    id: "png",
+    ext: "png",
+    label: "PNG",
+    mimeType: "image/png",
+    supportsQuality: false,
+  },
+  {
+    id: "webp",
+    ext: "webp",
+    label: "WebP",
+    mimeType: "image/webp",
+    supportsQuality: true,
+  },
+  {
+    id: "gif",
+    ext: "gif",
+    label: "GIF",
+    mimeType: "image/gif",
+    supportsQuality: false,
+  },
+  {
+    id: "bmp",
+    ext: "bmp",
+    label: "BMP",
+    mimeType: "image/bmp",
+    supportsQuality: false,
+  },
+];
 
 export const QUALITY_PRESETS: QualityPreset[] = [
-  { id: 'low', label: 'Low (Fast)', videoBitrate: '1M', audioBitrate: '96k' },
-  { id: 'medium', label: 'Medium', videoBitrate: '5M', audioBitrate: '128k' },
-  { id: 'high', label: 'High', videoBitrate: '10M', audioBitrate: '192k' },
-  { id: 'ultra', label: 'Ultra', videoBitrate: '20M', audioBitrate: '320k' },
-]
+  { id: "low", label: "Low (Fast)", videoBitrate: "1M", audioBitrate: "96k" },
+  { id: "medium", label: "Medium", videoBitrate: "5M", audioBitrate: "128k" },
+  { id: "high", label: "High", videoBitrate: "10M", audioBitrate: "192k" },
+  { id: "ultra", label: "Ultra", videoBitrate: "20M", audioBitrate: "320k" },
+];
 
 export const RESOLUTION_PRESETS: ResolutionPreset[] = [
-  { id: 'original', label: 'Original', value: 'original' },
-  { id: '4k', label: '4K (3840x2160)', value: '3840x2160' },
-  { id: '1080p', label: '1080p (1920x1080)', value: '1920x1080' },
-  { id: '720p', label: '720p (1280x720)', value: '1280x720' },
-  { id: '480p', label: '480p (854x480)', value: '854x480' },
-  { id: '360p', label: '360p (640x360)', value: '640x360' },
-]
+  { id: "original", label: "Original", value: "original" },
+  { id: "4k", label: "4K (3840x2160)", value: "3840x2160" },
+  { id: "1080p", label: "1080p (1920x1080)", value: "1920x1080" },
+  { id: "720p", label: "720p (1280x720)", value: "1280x720" },
+  { id: "480p", label: "480p (854x480)", value: "854x480" },
+  { id: "360p", label: "360p (640x360)", value: "640x360" },
+];
 
 export const AUDIO_BITRATES = [
-  { id: '64k', label: '64 kbps', value: '64k' },
-  { id: '96k', label: '96 kbps', value: '96k' },
-  { id: '128k', label: '128 kbps', value: '128k' },
-  { id: '192k', label: '192 kbps', value: '192k' },
-  { id: '256k', label: '256 kbps', value: '256k' },
-  { id: '320k', label: '320 kbps', value: '320k' },
-]
+  { id: "64k", label: "64 kbps", value: "64k" },
+  { id: "96k", label: "96 kbps", value: "96k" },
+  { id: "128k", label: "128 kbps", value: "128k" },
+  { id: "192k", label: "192 kbps", value: "192k" },
+  { id: "256k", label: "256 kbps", value: "256k" },
+  { id: "320k", label: "320 kbps", value: "320k" },
+];
 
 // Helper to get format by ID
 export function getVideoFormat(id: string): VideoFormat | undefined {
-  return VIDEO_FORMATS.find(f => f.id === id)
+  return VIDEO_FORMATS.find((f) => f.id === id);
 }
 
 export function getAudioFormat(id: string): AudioFormat | undefined {
-  return AUDIO_FORMATS.find(f => f.id === id)
+  return AUDIO_FORMATS.find((f) => f.id === id);
 }
 
 export function getImageFormat(id: string): ImageFormat | undefined {
-  return IMAGE_FORMATS.find(f => f.id === id)
+  return IMAGE_FORMATS.find((f) => f.id === id);
 }
 
 // Detect media type from file
-export function getMediaType(file: File): 'video' | 'audio' | 'image' | 'unknown' {
-  if (file.type.startsWith('video/')) return 'video'
-  if (file.type.startsWith('audio/')) return 'audio'
-  if (file.type.startsWith('image/')) return 'image'
+export function getMediaType(
+  file: File,
+): "video" | "audio" | "image" | "unknown" {
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.startsWith("audio/")) return "audio";
+  if (file.type.startsWith("image/")) return "image";
 
   // Fallback to extension
-  const ext = file.name.split('.').pop()?.toLowerCase()
-  const videoExts = ['mp4', 'webm', 'mov', 'avi', 'mkv', 'm4v', 'wmv', 'flv']
-  const audioExts = ['mp3', 'm4a', 'ogg', 'wav', 'flac', 'aac', 'wma']
-  const imageExts = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp', 'tiff']
+  const ext = file.name.split(".").pop()?.toLowerCase();
+  const videoExts = ["mp4", "webm", "mov", "avi", "mkv", "m4v", "wmv", "flv"];
+  const audioExts = ["mp3", "m4a", "ogg", "wav", "flac", "aac", "wma"];
+  const imageExts = ["jpg", "jpeg", "png", "webp", "gif", "bmp", "tiff"];
 
-  if (ext && videoExts.includes(ext)) return 'video'
-  if (ext && audioExts.includes(ext)) return 'audio'
-  if (ext && imageExts.includes(ext)) return 'image'
+  if (ext && videoExts.includes(ext)) return "video";
+  if (ext && audioExts.includes(ext)) return "audio";
+  if (ext && imageExts.includes(ext)) return "image";
 
-  return 'unknown'
+  return "unknown";
 }
 
 // Format duration as HH:MM:SS
 export function formatDuration(seconds: number): string {
-  const h = Math.floor(seconds / 3600)
-  const m = Math.floor((seconds % 3600) / 60)
-  const s = Math.floor(seconds % 60)
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
 
   if (h > 0) {
-    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+    return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
   }
-  return `${m}:${s.toString().padStart(2, '0')}`
+  return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
 // Parse duration string to seconds
 export function parseDurationString(str: string): number {
-  const parts = str.split(':').map(Number)
+  const parts = str.split(":").map(Number);
   if (parts.length === 3) {
-    return parts[0] * 3600 + parts[1] * 60 + parts[2]
+    return parts[0] * 3600 + parts[1] * 60 + parts[2];
   } else if (parts.length === 2) {
-    return parts[0] * 60 + parts[1]
+    return parts[0] * 60 + parts[1];
   }
-  return parts[0] || 0
+  return parts[0] || 0;
 }
 
 // Note: formatFileSize has been moved to @/types/progress as formatBytes()
diff --git a/src/lib/fuzzySearch.ts b/src/lib/fuzzySearch.ts
index 92d043c5..8d7cc4be 100644
--- a/src/lib/fuzzySearch.ts
+++ b/src/lib/fuzzySearch.ts
@@ -7,14 +7,14 @@
  */
 
 export interface FuzzyResult<T> {
-  item: T
-  score: number
-  matches?: Array<[number, number]> // Start and end indices of matches
+  item: T;
+  score: number;
+  matches?: Array<[number, number]>; // Start and end indices of matches
 }
 
 interface MatchResult {
-  score: number
-  matches: Array<[number, number]>
+  score: number;
+  matches: Array<[number, number]>;
 }
 
 /**
@@ -22,7 +22,7 @@ interface MatchResult {
  */
 function isCaseSensitive(_query: string): boolean {
   // Always case-insensitive so uppercase letters also match
-  return false
+  return false;
 }
 
 /**
@@ -30,145 +30,158 @@ function isCaseSensitive(_query: string): boolean {
  * Higher scores are better, -1 means no match
  */
 function fzfMatch(query: string, text: string): MatchResult | null {
-  if (!query) return { score: 0, matches: [] }
-  if (!text) return null
+  if (!query) return { score: 0, matches: [] };
+  if (!text) return null;
 
-  const caseSensitive = isCaseSensitive(query)
-  const q = caseSensitive ? query : query.toLowerCase()
-  const t = caseSensitive ? text : text.toLowerCase()
-  const originalText = text
+  const caseSensitive = isCaseSensitive(query);
+  const q = caseSensitive ? query : query.toLowerCase();
+  const t = caseSensitive ? text : text.toLowerCase();
+  const originalText = text;
 
   // Exact match gets highest score
   if (t === q) {
-    return { score: 10000, matches: [[0, text.length]] }
+    return { score: 10000, matches: [[0, text.length]] };
   }
 
   // Check for exact substring match (high score)
-  const exactIdx = t.indexOf(q)
+  const exactIdx = t.indexOf(q);
   if (exactIdx !== -1) {
-    let score = 5000
+    let score = 5000;
     // Bonus for match at start
-    if (exactIdx === 0) score += 1000
+    if (exactIdx === 0) score += 1000;
     // Bonus for match at word boundary
     if (exactIdx === 0 || /[\s\-_\/.]/.test(originalText[exactIdx - 1])) {
-      score += 500
+      score += 500;
     }
     // Penalty for longer strings
-    score -= (text.length - query.length) * 2
-    return { score, matches: [[exactIdx, exactIdx + query.length]] }
+    score -= (text.length - query.length) * 2;
+    return { score, matches: [[exactIdx, exactIdx + query.length]] };
   }
 
   // Fuzzy match - find best path through characters
-  const result = findBestMatch(q, t, originalText)
-  return result
+  const result = findBestMatch(q, t, originalText);
+  return result;
 }
 
 /**
  * Find the best fuzzy match path using dynamic programming
  * Uses O(N*M) algorithm instead of exponential recursive backtracking
  */
-function findBestMatch(query: string, text: string, originalText: string): MatchResult | null {
-  const n = query.length
-  const m = text.length
+function findBestMatch(
+  query: string,
+  text: string,
+  originalText: string,
+): MatchResult | null {
+  const n = query.length;
+  const m = text.length;
 
-  if (n > m) return null
+  if (n > m) return null;
 
   // Quick check: all query chars must exist in text
   for (let i = 0; i < n; i++) {
-    if (text.indexOf(query[i]) === -1) return null
+    if (text.indexOf(query[i]) === -1) return null;
   }
 
   // DP table: dp[i][j] = best score matching query[0..i-1] ending at text[j-1]
   // prev[i][j] = previous text position for backtracking
-  const dp: number[][] = Array(n + 1).fill(null).map(() => Array(m + 1).fill(-Infinity))
-  const prev: number[][] = Array(n + 1).fill(null).map(() => Array(m + 1).fill(-1))
+  const dp: number[][] = Array(n + 1)
+    .fill(null)
+    .map(() => Array(m + 1).fill(-Infinity));
+  const prev: number[][] = Array(n + 1)
+    .fill(null)
+    .map(() => Array(m + 1).fill(-1));
 
-  dp[0].fill(0) // Empty query matches with score 0
+  dp[0].fill(0); // Empty query matches with score 0
 
   for (let i = 1; i <= n; i++) {
     for (let j = i; j <= m; j++) {
-      if (text[j - 1] !== query[i - 1]) continue
+      if (text[j - 1] !== query[i - 1]) continue;
 
-      let bestPrevScore = -Infinity
-      let bestPrevPos = -1
+      let bestPrevScore = -Infinity;
+      let bestPrevPos = -1;
 
       // Find best previous state
       for (let k = i - 1; k < j; k++) {
-        if (dp[i - 1][k] === -Infinity) continue
+        if (dp[i - 1][k] === -Infinity) continue;
 
-        let score = dp[i - 1][k] + 10 // Base score
+        let score = dp[i - 1][k] + 10; // Base score
 
         // Consecutive match bonus
-        if (k === j - 1) score += 40
+        if (k === j - 1) score += 40;
 
         // Word boundary bonus
-        if (j === 1 || /[\s\-_\/.]/.test(originalText[j - 2])) score += 30
+        if (j === 1 || /[\s\-_\/.]/.test(originalText[j - 2])) score += 30;
 
         // CamelCase bonus
-        if (j > 1 && /[a-z]/.test(originalText[j - 2]) && /[A-Z]/.test(originalText[j - 1])) score += 25
+        if (
+          j > 1 &&
+          /[a-z]/.test(originalText[j - 2]) &&
+          /[A-Z]/.test(originalText[j - 1])
+        )
+          score += 25;
 
         // First char bonus
-        if (j === 1) score += 20
+        if (j === 1) score += 20;
 
         // Gap penalty
-        if (k > 0) score -= (j - k - 1) * 2
+        if (k > 0) score -= (j - k - 1) * 2;
 
         // Start position penalty (for first char only)
-        if (i === 1) score -= (j - 1) * 0.5
+        if (i === 1) score -= (j - 1) * 0.5;
 
         if (score > bestPrevScore) {
-          bestPrevScore = score
-          bestPrevPos = k
+          bestPrevScore = score;
+          bestPrevPos = k;
         }
       }
 
       if (bestPrevScore > dp[i][j]) {
-        dp[i][j] = bestPrevScore
-        prev[i][j] = bestPrevPos
+        dp[i][j] = bestPrevScore;
+        prev[i][j] = bestPrevPos;
       }
     }
   }
 
   // Find best ending position
-  let bestScore = -Infinity
-  let bestEnd = -1
+  let bestScore = -Infinity;
+  let bestEnd = -1;
   for (let j = n; j <= m; j++) {
     if (dp[n][j] > bestScore) {
-      bestScore = dp[n][j]
-      bestEnd = j
+      bestScore = dp[n][j];
+      bestEnd = j;
     }
   }
 
-  if (bestEnd === -1) return null
+  if (bestEnd === -1) return null;
 
   // Backtrack to get path
-  const path: number[] = []
-  let j = bestEnd
+  const path: number[] = [];
+  let j = bestEnd;
   for (let i = n; i > 0; i--) {
-    path.unshift(j - 1)
-    j = prev[i][j]
+    path.unshift(j - 1);
+    j = prev[i][j];
   }
 
   // Convert path to match ranges (merge consecutive)
-  const matches: Array<[number, number]> = []
-  let start = path[0]
-  let end = path[0] + 1
+  const matches: Array<[number, number]> = [];
+  let start = path[0];
+  let end = path[0] + 1;
 
   for (let i = 1; i < path.length; i++) {
     if (path[i] === end) {
-      end++
+      end++;
     } else {
-      matches.push([start, end])
-      start = path[i]
-      end = path[i] + 1
+      matches.push([start, end]);
+      start = path[i];
+      end = path[i] + 1;
     }
   }
-  matches.push([start, end])
+  matches.push([start, end]);
 
   // Apply length penalty
-  bestScore -= (m - n) * 0.5
+  bestScore -= (m - n) * 0.5;
 
-  return { score: bestScore, matches }
+  return { score: bestScore, matches };
 }
 
 /**
@@ -176,40 +189,42 @@ function findBestMatch(query: string, text: string, originalText: string): Match
  * Supports: space-separated AND terms, ^prefix, suffix$, 'exact, !negation
  */
 function parseQuery(query: string): Array<{
-  term: string
-  type: 'fuzzy' | 'exact' | 'prefix' | 'suffix'
-  negate: boolean
+  term: string;
+  type: "fuzzy" | "exact" | "prefix" | "suffix";
+  negate: boolean;
 }> {
-  const terms = query.trim().split(/\s+/).filter(Boolean)
-  return terms.map(term => {
-    let negate = false
-    let type: 'fuzzy' | 'exact' | 'prefix' | 'suffix' = 'fuzzy'
-    let cleanTerm = term
-
-    // Check for negation
-    if (cleanTerm.startsWith('!')) {
-      negate = true
-      cleanTerm = cleanTerm.slice(1)
-    }
+  const terms = query.trim().split(/\s+/).filter(Boolean);
+  return terms
+    .map((term) => {
+      let negate = false;
+      let type: "fuzzy" | "exact" | "prefix" | "suffix" = "fuzzy";
+      let cleanTerm = term;
+
+      // Check for negation
+      if (cleanTerm.startsWith("!")) {
+        negate = true;
+        cleanTerm = cleanTerm.slice(1);
+      }
 
-    // Check for exact match
-    if (cleanTerm.startsWith("'")) {
-      type = 'exact'
-      cleanTerm = cleanTerm.slice(1)
-    }
-    // Check for prefix match
-    else if (cleanTerm.startsWith('^')) {
-      type = 'prefix'
-      cleanTerm = cleanTerm.slice(1)
-    }
-    // Check for suffix match
-    else if (cleanTerm.endsWith('$')) {
-      type = 'suffix'
-      cleanTerm = cleanTerm.slice(0, -1)
-    }
+      // Check for exact match
+      if (cleanTerm.startsWith("'")) {
+        type = "exact";
+        cleanTerm = cleanTerm.slice(1);
+      }
+      // Check for prefix match
+      else if (cleanTerm.startsWith("^")) {
+        type = "prefix";
+        cleanTerm = cleanTerm.slice(1);
+      }
+      // Check for suffix match
+      else if (cleanTerm.endsWith("$")) {
+        type = "suffix";
+        cleanTerm = cleanTerm.slice(0, -1);
+      }
 
-    return { term: cleanTerm, type, negate }
-  }).filter(t => t.term.length > 0)
+      return { term: cleanTerm, type, negate };
+    })
+    .filter((t) => t.term.length > 0);
 }
 
 /**
@@ -217,45 +232,45 @@ function parseQuery(query: string): Array<{
  */
 function matchTerm(
   term: string,
-  type: 'fuzzy' | 'exact' | 'prefix' | 'suffix',
-  text: string
+  type: "fuzzy" | "exact" | "prefix" | "suffix",
+  text: string,
 ): MatchResult | null {
-  const caseSensitive = isCaseSensitive(term)
-  const t = caseSensitive ? text : text.toLowerCase()
-  const q = caseSensitive ? term : term.toLowerCase()
+  const caseSensitive = isCaseSensitive(term);
+  const t = caseSensitive ? text : text.toLowerCase();
+  const q = caseSensitive ? term : term.toLowerCase();
 
   switch (type) {
-    case 'exact': {
-      const idx = t.indexOf(q)
-      if (idx === -1) return null
-      return { score: 5000, matches: [[idx, idx + q.length]] }
+    case "exact": {
+      const idx = t.indexOf(q);
+      if (idx === -1) return null;
+      return { score: 5000, matches: [[idx, idx + q.length]] };
     }
-    case 'prefix': {
+    case "prefix": {
       // Check if any word starts with the term
-      const words = t.split(/[\s\-_\/.]+/)
-      let pos = 0
+      const words = t.split(/[\s\-_\/.]+/);
+      let pos = 0;
       for (const word of words) {
         if (word.startsWith(q)) {
-          return { score: 6000, matches: [[pos, pos + q.length]] }
+          return { score: 6000, matches: [[pos, pos + q.length]] };
         }
-        pos += word.length + 1
+        pos += word.length + 1;
       }
       // Also check if whole string starts with it
       if (t.startsWith(q)) {
-        return { score: 6000, matches: [[0, q.length]] }
+        return { score: 6000, matches: [[0, q.length]] };
       }
-      return null
+      return null;
     }
-    case 'suffix': {
+    case "suffix": {
       if (t.endsWith(q)) {
-        const start = t.length - q.length
-        return { score: 6000, matches: [[start, t.length]] }
+        const start = t.length - q.length;
+        return { score: 6000, matches: [[start, t.length]] };
       }
-      return null
+      return null;
     }
-    case 'fuzzy':
+    case "fuzzy":
     default:
-      return fzfMatch(term, text)
+      return fzfMatch(term, text);
   }
 }
 
@@ -264,8 +279,8 @@ function matchTerm(
  * Returns score > 0 for match, -1 for no match
  */
 export function fuzzyScore(query: string, text: string): number {
-  const result = fzfMatch(query, text)
-  return result ? result.score : -1
+  const result = fzfMatch(query, text);
+  return result ? result.score : -1;
 }
 
 /**
@@ -274,46 +289,46 @@ export function fuzzyScore(query: string, text: string): number {
 export function fuzzySearch<T>(
   items: T[],
   query: string,
-  getSearchableText: (item: T) => string[]
+  getSearchableText: (item: T) => string[],
 ): FuzzyResult<T>[] {
-  const trimmedQuery = query.trim()
+  const trimmedQuery = query.trim();
   if (!trimmedQuery) {
-    return items.map(item => ({ item, score: 0 }))
+    return items.map((item) => ({ item, score: 0 }));
   }
 
-  const parsedTerms = parseQuery(trimmedQuery)
+  const parsedTerms = parseQuery(trimmedQuery);
   if (parsedTerms.length === 0) {
-    return items.map(item => ({ item, score: 0 }))
+    return items.map((item) => ({ item, score: 0 }));
   }
 
-  const results: FuzzyResult<T>[] = []
+  const results: FuzzyResult<T>[] = [];
 
   for (const item of items) {
-    const texts = getSearchableText(item)
-    let totalScore = 0
-    let allTermsMatch = true
-    const allMatches: Array<[number, number]> = []
+    const texts = getSearchableText(item);
+    let totalScore = 0;
+    let allTermsMatch = true;
+    const allMatches: Array<[number, number]> = [];
 
     // All terms must match (AND logic like fzf)
     for (const { term, type, negate } of parsedTerms) {
-      let termMatched = false
-      let bestTermScore = -Infinity
+      let termMatched = false;
+      let bestTermScore = -Infinity;
 
       for (const text of texts) {
-        if (!text) continue
-        const result = matchTerm(term, type, text)
+        if (!text) continue;
+        const result = matchTerm(term, type, text);
 
         if (negate) {
           // For negated terms, if it matches any text, exclude the item
           if (result) {
-            termMatched = true
-            break
+            termMatched = true;
+            break;
           }
         } else {
           if (result && result.score > bestTermScore) {
-            bestTermScore = result.score
-            termMatched = true
-            allMatches.push(...result.matches)
+            bestTermScore = result.score;
+            termMatched = true;
+            allMatches.push(...result.matches);
           }
         }
       }
@@ -321,33 +336,33 @@ export function fuzzySearch<T>(
       if (negate) {
         // Negated term: item should NOT match
         if (termMatched) {
-          allTermsMatch = false
-          break
+          allTermsMatch = false;
+          break;
         }
       } else {
         // Normal term: item MUST match
         if (!termMatched) {
-          allTermsMatch = false
-          break
+          allTermsMatch = false;
+          break;
         }
-        totalScore += bestTermScore
+        totalScore += bestTermScore;
       }
     }
 
     if (allTermsMatch) {
-      results.push({ item, score: totalScore, matches: allMatches })
+      results.push({ item, score: totalScore, matches: allMatches });
     }
   }
 
   // Sort by score (highest first)
-  return results.sort((a, b) => b.score - a.score)
+  return results.sort((a, b) => b.score - a.score);
 }
 
 /**
  * Simple check if query fuzzy-matches text
  */
 export function fuzzyMatch(query: string, text: string): boolean {
-  return fuzzyScore(query, text) > 0
+  return fuzzyScore(query, text) > 0;
 }
 
 /**
@@ -356,37 +371,40 @@ export function fuzzyMatch(query: string, text: string): boolean {
  */
 export function highlightMatches(
   text: string,
-  matches: Array<[number, number]>
+  matches: Array<[number, number]>,
 ): Array<{ text: string; highlight: boolean }> {
   if (!matches || matches.length === 0) {
-    return [{ text, highlight: false }]
+    return [{ text, highlight: false }];
   }
 
   // Sort and merge overlapping matches
-  const sorted = [...matches].sort((a, b) => a[0] - b[0])
-  const merged: Array<[number, number]> = []
+  const sorted = [...matches].sort((a, b) => a[0] - b[0]);
+  const merged: Array<[number, number]> = [];
   for (const [start, end] of sorted) {
     if (merged.length === 0 || start > merged[merged.length - 1][1]) {
-      merged.push([start, end])
+      merged.push([start, end]);
     } else {
-      merged[merged.length - 1][1] = Math.max(merged[merged.length - 1][1], end)
+      merged[merged.length - 1][1] = Math.max(
+        merged[merged.length - 1][1],
+        end,
+      );
     }
   }
 
-  const segments: Array<{ text: string; highlight: boolean }> = []
-  let pos = 0
+  const segments: Array<{ text: string; highlight: boolean }> = [];
+  let pos = 0;
 
   for (const [start, end] of merged) {
     if (pos < start) {
-      segments.push({ text: text.slice(pos, start), highlight: false })
+      segments.push({ text: text.slice(pos, start), highlight: false });
     }
-    segments.push({ text: text.slice(start, end), highlight: true })
-    pos = end
+    segments.push({ text: text.slice(start, end), highlight: true });
+    pos = end;
   }
 
   if (pos < text.length) {
-    segments.push({ text: text.slice(pos), highlight: false })
+    segments.push({ text: text.slice(pos), highlight: false });
   }
 
-  return segments
+  return segments;
 }
diff --git a/src/lib/lamaUtils.ts b/src/lib/lamaUtils.ts
index 7dde8d17..59d63bd9 100644
--- a/src/lib/lamaUtils.ts
+++ b/src/lib/lamaUtils.ts
@@ -4,7 +4,7 @@
  */
 
 // LaMa model requires fixed 512x512 input
-export const LAMA_INPUT_SIZE = 512
+export const LAMA_INPUT_SIZE = 512;
 
 /**
  * Add reflect padding to a canvas on specified edges
@@ -12,59 +12,79 @@ export const LAMA_INPUT_SIZE = 512
  */
 export function addReflectPadding(
   canvas: HTMLCanvasElement,
-  padding: { top: number; right: number; bottom: number; left: number }
+  padding: { top: number; right: number; bottom: number; left: number },
 ): HTMLCanvasElement {
-  const { top, right, bottom, left } = padding
-  const newWidth = canvas.width + left + right
-  const newHeight = canvas.height + top + bottom
+  const { top, right, bottom, left } = padding;
+  const newWidth = canvas.width + left + right;
+  const newHeight = canvas.height + top + bottom;
 
-  const padded = document.createElement('canvas')
-  padded.width = newWidth
-  padded.height = newHeight
-  const ctx = padded.getContext('2d', { willReadFrequently: true })
-  if (!ctx) throw new Error('Failed to get canvas context')
+  const padded = document.createElement("canvas");
+  padded.width = newWidth;
+  padded.height = newHeight;
+  const ctx = padded.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Failed to get canvas context");
 
   // Draw original image in center
-  ctx.drawImage(canvas, left, top)
+  ctx.drawImage(canvas, left, top);
 
   // Reflect padding on each edge
   if (top > 0) {
     // Top edge: flip vertically
-    ctx.save()
-    ctx.translate(left, top)
-    ctx.scale(1, -1)
-    ctx.drawImage(canvas, 0, 0, canvas.width, top, 0, 0, canvas.width, top)
-    ctx.restore()
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.scale(1, -1);
+    ctx.drawImage(canvas, 0, 0, canvas.width, top, 0, 0, canvas.width, top);
+    ctx.restore();
   }
 
   if (bottom > 0) {
     // Bottom edge: flip vertically
-    ctx.save()
-    ctx.translate(left, newHeight)
-    ctx.scale(1, -1)
-    ctx.drawImage(canvas, 0, canvas.height - bottom, canvas.width, bottom, 0, 0, canvas.width, bottom)
-    ctx.restore()
+    ctx.save();
+    ctx.translate(left, newHeight);
+    ctx.scale(1, -1);
+    ctx.drawImage(
+      canvas,
+      0,
+      canvas.height - bottom,
+      canvas.width,
+      bottom,
+      0,
+      0,
+      canvas.width,
+      bottom,
+    );
+    ctx.restore();
   }
 
   if (left > 0) {
     // Left edge: flip horizontally
-    ctx.save()
-    ctx.translate(left, top)
-    ctx.scale(-1, 1)
-    ctx.drawImage(canvas, 0, 0, left, canvas.height, 0, 0, left, canvas.height)
-    ctx.restore()
+    ctx.save();
+    ctx.translate(left, top);
+    ctx.scale(-1, 1);
+    ctx.drawImage(canvas, 0, 0, left, canvas.height, 0, 0, left, canvas.height);
+    ctx.restore();
   }
 
   if (right > 0) {
     // Right edge: flip horizontally
-    ctx.save()
-    ctx.translate(newWidth, top)
-    ctx.scale(-1, 1)
-    ctx.drawImage(canvas, canvas.width - right, 0, right, canvas.height, 0, 0, right, canvas.height)
-    ctx.restore()
+    ctx.save();
+    ctx.translate(newWidth, top);
+    ctx.scale(-1, 1);
+    ctx.drawImage(
+      canvas,
+      canvas.width - right,
+      0,
+      right,
+      canvas.height,
+      0,
+      0,
+      right,
+      canvas.height,
+    );
+    ctx.restore();
   }
 
-  return padded
+  return padded;
 }
 
 /**
@@ -72,37 +92,40 @@ export function addReflectPadding(
  */
 export function addMaskReflectPadding(
   canvas: HTMLCanvasElement,
-  padding: { top: number; right: number; bottom: number; left: number }
+  padding: { top: number; right: number; bottom: number; left: number },
 ): HTMLCanvasElement {
-  const { top, right, bottom, left } = padding
-  const newWidth = canvas.width + left + right
-  const newHeight = canvas.height + top + bottom
+  const { top, right, bottom, left } = padding;
+  const newWidth = canvas.width + left + right;
+  const newHeight = canvas.height + top + bottom;
 
-  const padded = document.createElement('canvas')
-  padded.width = newWidth
-  padded.height = newHeight
-  const ctx = padded.getContext('2d', { willReadFrequently: true })
-  if (!ctx) throw new Error('Failed to get canvas context')
+  const padded = document.createElement("canvas");
+  padded.width = newWidth;
+  padded.height = newHeight;
+  const ctx = padded.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Failed to get canvas context");
 
   // Draw original mask in center
-  ctx.drawImage(canvas, left, top)
+  ctx.drawImage(canvas, left, top);
 
   // For mask, extend the mask to cover padded edges (don't reflect)
   // This ensures the model inpaints the padded area too
-  ctx.fillStyle = 'rgba(255, 80, 80, 1)'
+  ctx.fillStyle = "rgba(255, 80, 80, 1)";
 
   // Get mask bounds to know where to extend from
-  const maskCtx = canvas.getContext('2d', { willReadFrequently: true })
+  const maskCtx = canvas.getContext("2d", { willReadFrequently: true });
   if (maskCtx) {
-    const imgData = maskCtx.getImageData(0, 0, canvas.width, canvas.height)
-    let minX = canvas.width, minY = canvas.height, maxX = -1, maxY = -1
+    const imgData = maskCtx.getImageData(0, 0, canvas.width, canvas.height);
+    let minX = canvas.width,
+      minY = canvas.height,
+      maxX = -1,
+      maxY = -1;
     for (let y = 0; y < canvas.height; y++) {
       for (let x = 0; x < canvas.width; x++) {
         if (imgData.data[(y * canvas.width + x) * 4 + 3] > 0) {
-          minX = Math.min(minX, x)
-          minY = Math.min(minY, y)
-          maxX = Math.max(maxX, x)
-          maxY = Math.max(maxY, y)
+          minX = Math.min(minX, x);
+          minY = Math.min(minY, y);
+          maxX = Math.max(maxX, x);
+          maxY = Math.max(maxY, y);
         }
       }
     }
@@ -110,21 +133,31 @@ export function addMaskReflectPadding(
     if (maxX >= 0) {
       // Extend mask into padded regions
       if (top > 0) {
-        ctx.fillRect(left + minX, 0, maxX - minX + 1, top + minY)
+        ctx.fillRect(left + minX, 0, maxX - minX + 1, top + minY);
       }
       if (bottom > 0) {
-        ctx.fillRect(left + minX, top + maxY + 1, maxX - minX + 1, bottom + (canvas.height - maxY - 1))
+        ctx.fillRect(
+          left + minX,
+          top + maxY + 1,
+          maxX - minX + 1,
+          bottom + (canvas.height - maxY - 1),
+        );
       }
       if (left > 0) {
-        ctx.fillRect(0, top + minY, left + minX, maxY - minY + 1)
+        ctx.fillRect(0, top + minY, left + minX, maxY - minY + 1);
       }
       if (right > 0) {
-        ctx.fillRect(left + maxX + 1, top + minY, right + (canvas.width - maxX - 1), maxY - minY + 1)
+        ctx.fillRect(
+          left + maxX + 1,
+          top + minY,
+          right + (canvas.width - maxX - 1),
+          maxY - minY + 1,
+        );
       }
     }
   }
 
-  return padded
+  return padded;
 }
 
 /**
@@ -134,68 +167,76 @@ export function addMaskReflectPadding(
  */
 export function getMaskBoundingBox(
   canvas: HTMLCanvasElement,
-  minSize = LAMA_INPUT_SIZE
+  minSize = LAMA_INPUT_SIZE,
 ): { x: number; y: number; width: number; height: number } | null {
-  const ctx = canvas.getContext('2d', { willReadFrequently: true })
-  if (!ctx) return null
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) return null;
 
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-  const { data, width: canvasWidth, height: canvasHeight } = imageData
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const { data, width: canvasWidth, height: canvasHeight } = imageData;
 
-  let minX = canvasWidth
-  let minY = canvasHeight
-  let maxX = 0
-  let maxY = 0
-  let hasMask = false
+  let minX = canvasWidth;
+  let minY = canvasHeight;
+  let maxX = 0;
+  let maxY = 0;
+  let hasMask = false;
 
   for (let y = 0; y < canvasHeight; y++) {
     for (let x = 0; x < canvasWidth; x++) {
-      const alpha = data[(y * canvasWidth + x) * 4 + 3]
+      const alpha = data[(y * canvasWidth + x) * 4 + 3];
       if (alpha > 0) {
-        hasMask = true
-        minX = Math.min(minX, x)
-        minY = Math.min(minY, y)
-        maxX = Math.max(maxX, x)
-        maxY = Math.max(maxY, y)
+        hasMask = true;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
       }
     }
   }
 
-  if (!hasMask) return null
+  if (!hasMask) return null;
 
   // Calculate mask dimensions
-  const maskWidth = maxX - minX + 1
-  const maskHeight = maxY - minY + 1
+  const maskWidth = maxX - minX + 1;
+  const maskHeight = maxY - minY + 1;
 
   // Desired crop should be at least 2x mask size and at least minSize (512)
-  const desiredSize = Math.max(minSize, maskWidth * 2, maskHeight * 2)
+  const desiredSize = Math.max(minSize, maskWidth * 2, maskHeight * 2);
 
   // Limit crop size to canvas dimensions
-  const cropSize = Math.min(desiredSize, canvasWidth, canvasHeight)
+  const cropSize = Math.min(desiredSize, canvasWidth, canvasHeight);
 
   // Center the crop around the mask
-  const maskCenterX = minX + maskWidth / 2
-  const maskCenterY = minY + maskHeight / 2
+  const maskCenterX = minX + maskWidth / 2;
+  const maskCenterY = minY + maskHeight / 2;
 
-  let x = Math.round(maskCenterX - cropSize / 2)
-  let y = Math.round(maskCenterY - cropSize / 2)
+  let x = Math.round(maskCenterX - cropSize / 2);
+  let y = Math.round(maskCenterY - cropSize / 2);
 
   // Ensure crop contains the entire mask (priority over centering)
   // Shift crop if mask would be cut off
-  if (x > minX) x = Math.max(0, minX - Math.floor((cropSize - maskWidth) / 2))
-  if (y > minY) y = Math.max(0, minY - Math.floor((cropSize - maskHeight) / 2))
-  if (x + cropSize < maxX + 1) x = Math.min(canvasWidth - cropSize, maxX + 1 - cropSize + Math.floor((cropSize - maskWidth) / 2))
-  if (y + cropSize < maxY + 1) y = Math.min(canvasHeight - cropSize, maxY + 1 - cropSize + Math.floor((cropSize - maskHeight) / 2))
+  if (x > minX) x = Math.max(0, minX - Math.floor((cropSize - maskWidth) / 2));
+  if (y > minY) y = Math.max(0, minY - Math.floor((cropSize - maskHeight) / 2));
+  if (x + cropSize < maxX + 1)
+    x = Math.min(
+      canvasWidth - cropSize,
+      maxX + 1 - cropSize + Math.floor((cropSize - maskWidth) / 2),
+    );
+  if (y + cropSize < maxY + 1)
+    y = Math.min(
+      canvasHeight - cropSize,
+      maxY + 1 - cropSize + Math.floor((cropSize - maskHeight) / 2),
+    );
 
   // Final clamp to canvas bounds
-  x = Math.max(0, Math.min(x, canvasWidth - cropSize))
-  y = Math.max(0, Math.min(y, canvasHeight - cropSize))
+  x = Math.max(0, Math.min(x, canvasWidth - cropSize));
+  y = Math.max(0, Math.min(y, canvasHeight - cropSize));
 
   // Verify mask fits in crop (if not, mask is larger than canvas - rare edge case)
-  const finalWidth = Math.min(cropSize, canvasWidth)
-  const finalHeight = Math.min(cropSize, canvasHeight)
+  const finalWidth = Math.min(cropSize, canvasWidth);
+  const finalHeight = Math.min(cropSize, canvasHeight);
 
-  return { x, y, width: finalWidth, height: finalHeight }
+  return { x, y, width: finalWidth, height: finalHeight };
 }
 
 /**
@@ -206,16 +247,16 @@ export function cropCanvas(
   x: number,
   y: number,
   width: number,
-  height: number
+  height: number,
 ): HTMLCanvasElement {
-  const cropped = document.createElement('canvas')
-  cropped.width = width
-  cropped.height = height
-  const ctx = cropped.getContext('2d', { willReadFrequently: true })
-  if (!ctx) throw new Error('Failed to get canvas context')
-
-  ctx.drawImage(canvas, x, y, width, height, 0, 0, width, height)
-  return cropped
+  const cropped = document.createElement("canvas");
+  cropped.width = width;
+  cropped.height = height;
+  const ctx = cropped.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Failed to get canvas context");
+
+  ctx.drawImage(canvas, x, y, width, height, 0, 0, width, height);
+  return cropped;
 }
 
 /**
@@ -227,64 +268,67 @@ export function pasteWithBlending(
   maskCanvas: HTMLCanvasElement,
   x: number,
   y: number,
-  blendEdge = 8
+  blendEdge = 8,
 ): void {
-  const targetCtx = targetCanvas.getContext('2d', { willReadFrequently: true })
-  const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true })
-  const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
-  if (!targetCtx || !sourceCtx || !maskCtx) return
+  const targetCtx = targetCanvas.getContext("2d", { willReadFrequently: true });
+  const sourceCtx = sourceCanvas.getContext("2d", { willReadFrequently: true });
+  const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
+  if (!targetCtx || !sourceCtx || !maskCtx) return;
 
-  const width = sourceCanvas.width
-  const height = sourceCanvas.height
+  const width = sourceCanvas.width;
+  const height = sourceCanvas.height;
 
-  const targetData = targetCtx.getImageData(x, y, width, height)
-  const sourceData = sourceCtx.getImageData(0, 0, width, height)
-  const maskData = maskCtx.getImageData(0, 0, width, height)
+  const targetData = targetCtx.getImageData(x, y, width, height);
+  const sourceData = sourceCtx.getImageData(0, 0, width, height);
+  const maskData = maskCtx.getImageData(0, 0, width, height);
 
   for (let py = 0; py < height; py++) {
     for (let px = 0; px < width; px++) {
-      const i = (py * width + px) * 4
-      const maskAlpha = maskData.data[i + 3]
+      const i = (py * width + px) * 4;
+      const maskAlpha = maskData.data[i + 3];
 
       if (maskAlpha > 0) {
         // Calculate distance from mask edge for blending
-        let blendFactor = 1.0
+        let blendFactor = 1.0;
 
         // Check distance to transparent pixels for edge blending
-        let minDist = blendEdge
+        let minDist = blendEdge;
         for (let dy = -blendEdge; dy <= blendEdge && minDist > 0; dy++) {
           for (let dx = -blendEdge; dx <= blendEdge && minDist > 0; dx++) {
-            const nx = px + dx
-            const ny = py + dy
+            const nx = px + dx;
+            const ny = py + dy;
             if (nx >= 0 && nx < width && ny >= 0 && ny < height) {
-              const ni = (ny * width + nx) * 4
+              const ni = (ny * width + nx) * 4;
               if (maskData.data[ni + 3] === 0) {
-                const dist = Math.sqrt(dx * dx + dy * dy)
-                minDist = Math.min(minDist, dist)
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                minDist = Math.min(minDist, dist);
               }
             }
           }
         }
 
         if (minDist < blendEdge) {
-          blendFactor = minDist / blendEdge
+          blendFactor = minDist / blendEdge;
         }
 
         // Blend source and target
         targetData.data[i] = Math.round(
-          targetData.data[i] * (1 - blendFactor) + sourceData.data[i] * blendFactor
-        )
+          targetData.data[i] * (1 - blendFactor) +
+            sourceData.data[i] * blendFactor,
+        );
         targetData.data[i + 1] = Math.round(
-          targetData.data[i + 1] * (1 - blendFactor) + sourceData.data[i + 1] * blendFactor
-        )
+          targetData.data[i + 1] * (1 - blendFactor) +
+            sourceData.data[i + 1] * blendFactor,
+        );
         targetData.data[i + 2] = Math.round(
-          targetData.data[i + 2] * (1 - blendFactor) + sourceData.data[i + 2] * blendFactor
-        )
+          targetData.data[i + 2] * (1 - blendFactor) +
+            sourceData.data[i + 2] * blendFactor,
+        );
       }
     }
   }
 
-  targetCtx.putImageData(targetData, x, y)
+  targetCtx.putImageData(targetData, x, y);
 }
 
 /**
@@ -292,20 +336,20 @@ export function pasteWithBlending(
  * Output shape: [1, 3, height, width] normalized to 0-1
  */
 export function canvasToFloat32Array(canvas: HTMLCanvasElement): Float32Array {
-  const ctx = canvas.getContext('2d', { willReadFrequently: true })
-  if (!ctx) throw new Error('Failed to get canvas context')
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Failed to get canvas context");
 
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-  const { data, width, height } = imageData
-  const float32 = new Float32Array(3 * width * height)
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const { data, width, height } = imageData;
+  const float32 = new Float32Array(3 * width * height);
 
   for (let i = 0; i < width * height; i++) {
-    float32[i] = data[i * 4] / 255                        // R -> channel 0
-    float32[width * height + i] = data[i * 4 + 1] / 255   // G -> channel 1
-    float32[2 * width * height + i] = data[i * 4 + 2] / 255 // B -> channel 2
+    float32[i] = data[i * 4] / 255; // R -> channel 0
+    float32[width * height + i] = data[i * 4 + 1] / 255; // G -> channel 1
+    float32[2 * width * height + i] = data[i * 4 + 2] / 255; // B -> channel 2
   }
 
-  return float32
+  return float32;
 }
 
 /**
@@ -313,20 +357,22 @@ export function canvasToFloat32Array(canvas: HTMLCanvasElement): Float32Array {
  * Output shape: [1, 1, height, width] binary 0 or 1
  * Non-transparent pixels (alpha > 0) become 1 (area to inpaint), transparent become 0
  */
-export function maskCanvasToFloat32Array(canvas: HTMLCanvasElement): Float32Array {
-  const ctx = canvas.getContext('2d', { willReadFrequently: true })
-  if (!ctx) throw new Error('Failed to get canvas context')
+export function maskCanvasToFloat32Array(
+  canvas: HTMLCanvasElement,
+): Float32Array {
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) throw new Error("Failed to get canvas context");
 
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-  const { data, width, height } = imageData
-  const float32 = new Float32Array(width * height)
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const { data, width, height } = imageData;
+  const float32 = new Float32Array(width * height);
 
   for (let i = 0; i < width * height; i++) {
     // Check alpha channel - any non-transparent pixel is part of the mask
-    float32[i] = data[i * 4 + 3] > 0 ? 1 : 0
+    float32[i] = data[i * 4 + 3] > 0 ? 1 : 0;
   }
 
-  return float32
+  return float32;
 }
 
 /**
@@ -338,35 +384,43 @@ export function tensorToCanvas(
   tensor: Float32Array,
   width: number,
   height: number,
-  normalized = true
+  normalized = true,
 ): HTMLCanvasElement {
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d')
-  if (!ctx) throw new Error('Failed to get canvas context')
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
 
-  const imageData = ctx.createImageData(width, height)
-  const { data } = imageData
+  const imageData = ctx.createImageData(width, height);
+  const { data } = imageData;
 
   for (let i = 0; i < width * height; i++) {
     // Convert from CHW back to HWC (RGBA)
     if (normalized) {
       // 0-1 range -> multiply by 255
-      data[i * 4] = Math.round(Math.max(0, Math.min(1, tensor[i])) * 255)                        // R
-      data[i * 4 + 1] = Math.round(Math.max(0, Math.min(1, tensor[width * height + i])) * 255)   // G
-      data[i * 4 + 2] = Math.round(Math.max(0, Math.min(1, tensor[2 * width * height + i])) * 255) // B
+      data[i * 4] = Math.round(Math.max(0, Math.min(1, tensor[i])) * 255); // R
+      data[i * 4 + 1] = Math.round(
+        Math.max(0, Math.min(1, tensor[width * height + i])) * 255,
+      ); // G
+      data[i * 4 + 2] = Math.round(
+        Math.max(0, Math.min(1, tensor[2 * width * height + i])) * 255,
+      ); // B
     } else {
       // 0-255 range -> clamp directly
-      data[i * 4] = Math.round(Math.max(0, Math.min(255, tensor[i])))                        // R
-      data[i * 4 + 1] = Math.round(Math.max(0, Math.min(255, tensor[width * height + i])))   // G
-      data[i * 4 + 2] = Math.round(Math.max(0, Math.min(255, tensor[2 * width * height + i]))) // B
+      data[i * 4] = Math.round(Math.max(0, Math.min(255, tensor[i]))); // R
+      data[i * 4 + 1] = Math.round(
+        Math.max(0, Math.min(255, tensor[width * height + i])),
+      ); // G
+      data[i * 4 + 2] = Math.round(
+        Math.max(0, Math.min(255, tensor[2 * width * height + i])),
+      ); // B
     }
-    data[i * 4 + 3] = 255 // A
+    data[i * 4 + 3] = 255; // A
   }
 
-  ctx.putImageData(imageData, 0, 0)
-  return canvas
+  ctx.putImageData(imageData, 0, 0);
+  return canvas;
 }
 
 /**
@@ -375,23 +429,25 @@ export function tensorToCanvas(
 export function resizeCanvas(
   sourceCanvas: HTMLCanvasElement,
   targetWidth: number,
-  targetHeight: number
+  targetHeight: number,
 ): HTMLCanvasElement {
-  const canvas = document.createElement('canvas')
-  canvas.width = targetWidth
-  canvas.height = targetHeight
-  const ctx = canvas.getContext('2d')
-  if (!ctx) throw new Error('Failed to get canvas context')
-
-  ctx.drawImage(sourceCanvas, 0, 0, targetWidth, targetHeight)
-  return canvas
+  const canvas = document.createElement("canvas");
+  canvas.width = targetWidth;
+  canvas.height = targetHeight;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
+
+  ctx.drawImage(sourceCanvas, 0, 0, targetWidth, targetHeight);
+  return canvas;
 }
 
 /**
  * Resize canvas to LaMa model input size (512x512)
  */
-export function resizeToModelInput(sourceCanvas: HTMLCanvasElement): HTMLCanvasElement {
-  return resizeCanvas(sourceCanvas, LAMA_INPUT_SIZE, LAMA_INPUT_SIZE)
+export function resizeToModelInput(
+  sourceCanvas: HTMLCanvasElement,
+): HTMLCanvasElement {
+  return resizeCanvas(sourceCanvas, LAMA_INPUT_SIZE, LAMA_INPUT_SIZE);
 }
 
 /**
@@ -400,9 +456,9 @@ export function resizeToModelInput(sourceCanvas: HTMLCanvasElement): HTMLCanvasE
 export function resizeFromModelOutput(
   resultCanvas: HTMLCanvasElement,
   originalWidth: number,
-  originalHeight: number
+  originalHeight: number,
 ): HTMLCanvasElement {
-  return resizeCanvas(resultCanvas, originalWidth, originalHeight)
+  return resizeCanvas(resultCanvas, originalWidth, originalHeight);
 }
 
 /**
@@ -410,45 +466,49 @@ export function resizeFromModelOutput(
  */
 export async function blobToCanvas(blob: Blob): Promise<HTMLCanvasElement> {
   return new Promise((resolve, reject) => {
-    const img = new Image()
+    const img = new Image();
     img.onload = () => {
-      const canvas = document.createElement('canvas')
-      canvas.width = img.width
-      canvas.height = img.height
-      const ctx = canvas.getContext('2d')
+      const canvas = document.createElement("canvas");
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d");
       if (!ctx) {
-        reject(new Error('Failed to get canvas context'))
-        return
+        reject(new Error("Failed to get canvas context"));
+        return;
       }
-      ctx.drawImage(img, 0, 0)
-      URL.revokeObjectURL(img.src)
-      resolve(canvas)
-    }
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(img.src);
+      resolve(canvas);
+    };
     img.onerror = () => {
-      URL.revokeObjectURL(img.src)
-      reject(new Error('Failed to load image'))
-    }
-    img.src = URL.createObjectURL(blob)
-  })
+      URL.revokeObjectURL(img.src);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = URL.createObjectURL(blob);
+  });
 }
 
 /**
  * Convert canvas to blob
  */
-export function canvasToBlob(canvas: HTMLCanvasElement, type = 'image/png', quality = 1): Promise<Blob> {
+export function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  type = "image/png",
+  quality = 1,
+): Promise<Blob> {
   return new Promise((resolve, reject) => {
     canvas.toBlob(
       (blob) => {
         if (blob) {
-          resolve(blob)
+          resolve(blob);
         } else {
-          reject(new Error('Failed to convert canvas to blob'))
+          reject(new Error("Failed to convert canvas to blob"));
         }
       },
       type,
-      quality
-    )
-  })
+      quality,
+    );
+  });
 }
 
 /**
@@ -458,43 +518,47 @@ export function canvasToBlob(canvas: HTMLCanvasElement, type = 'image/png', qual
 export function applyMaskedResult(
   originalCanvas: HTMLCanvasElement,
   resultCanvas: HTMLCanvasElement,
-  maskCanvas: HTMLCanvasElement
+  maskCanvas: HTMLCanvasElement,
 ): HTMLCanvasElement {
-  const width = originalCanvas.width
-  const height = originalCanvas.height
-
-  const outputCanvas = document.createElement('canvas')
-  outputCanvas.width = width
-  outputCanvas.height = height
-  const outputCtx = outputCanvas.getContext('2d')
-  if (!outputCtx) throw new Error('Failed to get canvas context')
-
-  const originalCtx = originalCanvas.getContext('2d')
-  const resultCtx = resultCanvas.getContext('2d')
-  const maskCtx = maskCanvas.getContext('2d')
-  if (!originalCtx || !resultCtx || !maskCtx) throw new Error('Failed to get canvas context')
-
-  const originalData = originalCtx.getImageData(0, 0, width, height)
-  const resultData = resultCtx.getImageData(0, 0, width, height)
-  const maskData = maskCtx.getImageData(0, 0, width, height)
-  const outputData = outputCtx.createImageData(width, height)
+  const width = originalCanvas.width;
+  const height = originalCanvas.height;
+
+  const outputCanvas = document.createElement("canvas");
+  outputCanvas.width = width;
+  outputCanvas.height = height;
+  const outputCtx = outputCanvas.getContext("2d");
+  if (!outputCtx) throw new Error("Failed to get canvas context");
+
+  const originalCtx = originalCanvas.getContext("2d");
+  const resultCtx = resultCanvas.getContext("2d");
+  const maskCtx = maskCanvas.getContext("2d");
+  if (!originalCtx || !resultCtx || !maskCtx)
+    throw new Error("Failed to get canvas context");
+
+  const originalData = originalCtx.getImageData(0, 0, width, height);
+  const resultData = resultCtx.getImageData(0, 0, width, height);
+  const maskData = maskCtx.getImageData(0, 0, width, height);
+  const outputData = outputCtx.createImageData(width, height);
 
   for (let i = 0; i < width * height; i++) {
-    const maskValue = maskData.data[i * 4] / 255 // 0-1 for blending
+    const maskValue = maskData.data[i * 4] / 255; // 0-1 for blending
 
     // Blend based on mask value
     outputData.data[i * 4] = Math.round(
-      originalData.data[i * 4] * (1 - maskValue) + resultData.data[i * 4] * maskValue
-    )
+      originalData.data[i * 4] * (1 - maskValue) +
+        resultData.data[i * 4] * maskValue,
+    );
     outputData.data[i * 4 + 1] = Math.round(
-      originalData.data[i * 4 + 1] * (1 - maskValue) + resultData.data[i * 4 + 1] * maskValue
-    )
+      originalData.data[i * 4 + 1] * (1 - maskValue) +
+        resultData.data[i * 4 + 1] * maskValue,
+    );
     outputData.data[i * 4 + 2] = Math.round(
-      originalData.data[i * 4 + 2] * (1 - maskValue) + resultData.data[i * 4 + 2] * maskValue
-    )
-    outputData.data[i * 4 + 3] = 255
+      originalData.data[i * 4 + 2] * (1 - maskValue) +
+        resultData.data[i * 4 + 2] * maskValue,
+    );
+    outputData.data[i * 4 + 3] = 255;
   }
 
-  outputCtx.putImageData(outputData, 0, 0)
-  return outputCanvas
+  outputCtx.putImageData(outputData, 0, 0);
+  return outputCanvas;
 }
diff --git a/src/lib/maskUtils.ts b/src/lib/maskUtils.ts
index 8e022255..92fa0444 100644
--- a/src/lib/maskUtils.ts
+++ b/src/lib/maskUtils.ts
@@ -6,20 +6,20 @@ export function floodFill(
   ctx: CanvasRenderingContext2D,
   startX: number,
   startY: number,
-  fillColor: [number, number, number, number]
+  fillColor: [number, number, number, number],
 ): void {
-  const canvas = ctx.canvas
-  const width = canvas.width
-  const height = canvas.height
-  const imageData = ctx.getImageData(0, 0, width, height)
-  const data = imageData.data
+  const canvas = ctx.canvas;
+  const width = canvas.width;
+  const height = canvas.height;
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const data = imageData.data;
 
   // Get starting pixel color
-  const startIdx = (Math.floor(startY) * width + Math.floor(startX)) * 4
-  const startR = data[startIdx]
-  const startG = data[startIdx + 1]
-  const startB = data[startIdx + 2]
-  const startA = data[startIdx + 3]
+  const startIdx = (Math.floor(startY) * width + Math.floor(startX)) * 4;
+  const startR = data[startIdx];
+  const startG = data[startIdx + 1];
+  const startB = data[startIdx + 2];
+  const startA = data[startIdx + 3];
 
   // If clicking on same color, do nothing
   if (
@@ -28,7 +28,7 @@ export function floodFill(
     startB === fillColor[2] &&
     startA === fillColor[3]
   ) {
-    return
+    return;
   }
 
   // Check if a pixel matches the starting color
@@ -38,114 +38,116 @@ export function floodFill(
       data[idx + 1] === startG &&
       data[idx + 2] === startB &&
       data[idx + 3] === startA
-    )
-  }
+    );
+  };
 
   // Fill a pixel with the target color
   const fillPixel = (idx: number): void => {
-    data[idx] = fillColor[0]
-    data[idx + 1] = fillColor[1]
-    data[idx + 2] = fillColor[2]
-    data[idx + 3] = fillColor[3]
-  }
+    data[idx] = fillColor[0];
+    data[idx + 1] = fillColor[1];
+    data[idx + 2] = fillColor[2];
+    data[idx + 3] = fillColor[3];
+  };
 
   // Scan-line flood fill
-  const stack: [number, number][] = [[Math.floor(startX), Math.floor(startY)]]
-  const visited = new Set<number>()
+  const stack: [number, number][] = [[Math.floor(startX), Math.floor(startY)]];
+  const visited = new Set<number>();
 
   while (stack.length > 0) {
-    const [x, y] = stack.pop()!
+    const [x, y] = stack.pop()!;
 
-    if (x < 0 || x >= width || y < 0 || y >= height) continue
+    if (x < 0 || x >= width || y < 0 || y >= height) continue;
 
-    const idx = (y * width + x) * 4
-    if (visited.has(idx)) continue
-    if (!matchesStart(idx)) continue
+    const idx = (y * width + x) * 4;
+    if (visited.has(idx)) continue;
+    if (!matchesStart(idx)) continue;
 
-    visited.add(idx)
-    fillPixel(idx)
+    visited.add(idx);
+    fillPixel(idx);
 
     // Add neighboring pixels
-    stack.push([x + 1, y])
-    stack.push([x - 1, y])
-    stack.push([x, y + 1])
-    stack.push([x, y - 1])
+    stack.push([x + 1, y]);
+    stack.push([x - 1, y]);
+    stack.push([x, y + 1]);
+    stack.push([x, y - 1]);
   }
 
-  ctx.putImageData(imageData, 0, 0)
+  ctx.putImageData(imageData, 0, 0);
 }
 
 /**
  * Invert mask colors (black <-> white)
  */
 export function invertMask(ctx: CanvasRenderingContext2D): void {
-  const canvas = ctx.canvas
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-  const data = imageData.data
+  const canvas = ctx.canvas;
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
 
   for (let i = 0; i < data.length; i += 4) {
-    data[i] = 255 - data[i]         // R
-    data[i + 1] = 255 - data[i + 1] // G
-    data[i + 2] = 255 - data[i + 2] // B
+    data[i] = 255 - data[i]; // R
+    data[i + 1] = 255 - data[i + 1]; // G
+    data[i + 2] = 255 - data[i + 2]; // B
     // Keep alpha unchanged
   }
 
-  ctx.putImageData(imageData, 0, 0)
+  ctx.putImageData(imageData, 0, 0);
 }
 
 /**
  * Extract first frame from a video URL as a data URL
  */
-export async function extractVideoFrame(videoUrl: string): Promise<string | null> {
+export async function extractVideoFrame(
+  videoUrl: string,
+): Promise<string | null> {
   return new Promise((resolve) => {
-    const video = document.createElement('video')
-    video.crossOrigin = 'anonymous'
-    video.src = videoUrl
-    video.muted = true
-    video.preload = 'metadata'
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.src = videoUrl;
+    video.muted = true;
+    video.preload = "metadata";
 
     const cleanup = () => {
-      video.remove()
-    }
+      video.remove();
+    };
 
     video.onloadeddata = () => {
-      video.currentTime = 0
-    }
+      video.currentTime = 0;
+    };
 
     video.onseeked = () => {
       try {
-        const canvas = document.createElement('canvas')
-        canvas.width = video.videoWidth
-        canvas.height = video.videoHeight
-        const ctx = canvas.getContext('2d')
+        const canvas = document.createElement("canvas");
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext("2d");
         if (!ctx) {
-          cleanup()
-          resolve(null)
-          return
+          cleanup();
+          resolve(null);
+          return;
         }
-        ctx.drawImage(video, 0, 0)
-        const dataUrl = canvas.toDataURL('image/png')
-        cleanup()
-        resolve(dataUrl)
+        ctx.drawImage(video, 0, 0);
+        const dataUrl = canvas.toDataURL("image/png");
+        cleanup();
+        resolve(dataUrl);
       } catch {
-        cleanup()
-        resolve(null)
+        cleanup();
+        resolve(null);
       }
-    }
+    };
 
     video.onerror = () => {
-      cleanup()
-      resolve(null)
-    }
+      cleanup();
+      resolve(null);
+    };
 
     // Timeout after 10 seconds
     setTimeout(() => {
-      cleanup()
-      resolve(null)
-    }, 10000)
+      cleanup();
+      resolve(null);
+    }, 10000);
 
-    video.load()
-  })
+    video.load();
+  });
 }
 
 /**
@@ -156,31 +158,31 @@ export function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
     canvas.toBlob(
       (blob) => {
         if (blob) {
-          resolve(blob)
+          resolve(blob);
         } else {
-          reject(new Error('Failed to create blob from canvas'))
+          reject(new Error("Failed to create blob from canvas"));
         }
       },
-      'image/png',
-      1.0
-    )
-  })
+      "image/png",
+      1.0,
+    );
+  });
 }
 
 /**
  * Clear canvas to black (mask hidden)
  */
 export function clearCanvas(ctx: CanvasRenderingContext2D): void {
-  ctx.fillStyle = '#000000'
-  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 }
 
 /**
  * Fill canvas to white (mask revealed)
  */
 export function fillCanvasWhite(ctx: CanvasRenderingContext2D): void {
-  ctx.fillStyle = '#FFFFFF'
-  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 }
 
 /**
@@ -191,42 +193,42 @@ function computeDistanceToEdge(
   binary: Uint8Array,
   width: number,
   height: number,
-  searchRadius: number
+  searchRadius: number,
 ): Float32Array {
-  const dist = new Float32Array(width * height)
+  const dist = new Float32Array(width * height);
 
   // For each inside pixel, find distance to nearest outside pixel
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const idx = y * width + x
+      const idx = y * width + x;
       if (binary[idx] === 0) {
-        dist[idx] = 0
-        continue
+        dist[idx] = 0;
+        continue;
       }
 
       // Check if this is an edge pixel (adjacent to outside)
-      let minDist = searchRadius + 1 // Default to max if no edge found
+      let minDist = searchRadius + 1; // Default to max if no edge found
 
       for (let dy = -searchRadius; dy <= searchRadius; dy++) {
         for (let dx = -searchRadius; dx <= searchRadius; dx++) {
-          const nx = x + dx
-          const ny = y + dy
+          const nx = x + dx;
+          const ny = y + dy;
           if (nx < 0 || nx >= width || ny < 0 || ny >= height) {
             // Treat out-of-bounds as outside
-            const d = Math.sqrt(dx * dx + dy * dy)
-            if (d < minDist) minDist = d
+            const d = Math.sqrt(dx * dx + dy * dy);
+            if (d < minDist) minDist = d;
           } else if (binary[ny * width + nx] === 0) {
-            const d = Math.sqrt(dx * dx + dy * dy)
-            if (d < minDist) minDist = d
+            const d = Math.sqrt(dx * dx + dy * dy);
+            if (d < minDist) minDist = d;
           }
         }
       }
 
-      dist[idx] = minDist
+      dist[idx] = minDist;
     }
   }
 
-  return dist
+  return dist;
 }
 
 /**
@@ -239,50 +241,50 @@ function computeDistanceToEdge(
  */
 export function featherMask(
   maskCanvas: HTMLCanvasElement,
-  featherRadius: number = 4
+  featherRadius: number = 4,
 ): HTMLCanvasElement {
-  const width = maskCanvas.width
-  const height = maskCanvas.height
+  const width = maskCanvas.width;
+  const height = maskCanvas.height;
 
-  const ctx = maskCanvas.getContext('2d')
-  if (!ctx) return maskCanvas
+  const ctx = maskCanvas.getContext("2d");
+  if (!ctx) return maskCanvas;
 
-  const imageData = ctx.getImageData(0, 0, width, height)
-  const data = imageData.data
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const data = imageData.data;
 
   // Step 1: Create binary mask array (1 = inside, 0 = outside)
-  const binary = new Uint8Array(width * height)
+  const binary = new Uint8Array(width * height);
   for (let i = 0; i < binary.length; i++) {
-    binary[i] = data[i * 4 + 3] > 0 ? 1 : 0
+    binary[i] = data[i * 4 + 3] > 0 ? 1 : 0;
   }
 
   // Step 2: Calculate distance to nearest edge for each pixel
-  const searchRadius = Math.max(featherRadius, 8)
-  const distances = computeDistanceToEdge(binary, width, height, searchRadius)
+  const searchRadius = Math.max(featherRadius, 8);
+  const distances = computeDistanceToEdge(binary, width, height, searchRadius);
 
   // Step 3: Apply feathering - pixels within featherRadius get soft alpha
   for (let i = 0; i < binary.length; i++) {
     if (binary[i] === 1) {
-      const dist = distances[i]
+      const dist = distances[i];
       if (dist < featherRadius) {
         // Smooth falloff from edge using ease-in-out curve
-        const t = dist / featherRadius
-        const smoothT = t * t * (3 - 2 * t) // Smoothstep function
-        data[i * 4 + 3] = Math.round(smoothT * 255)
+        const t = dist / featherRadius;
+        const smoothT = t * t * (3 - 2 * t); // Smoothstep function
+        data[i * 4 + 3] = Math.round(smoothT * 255);
       } else {
-        data[i * 4 + 3] = 255 // Fully opaque inside
+        data[i * 4 + 3] = 255; // Fully opaque inside
       }
     } else {
-      data[i * 4 + 3] = 0 // Fully transparent outside
+      data[i * 4 + 3] = 0; // Fully transparent outside
     }
   }
 
   // Create a new canvas for the result
-  const resultCanvas = document.createElement('canvas')
-  resultCanvas.width = width
-  resultCanvas.height = height
-  const resultCtx = resultCanvas.getContext('2d')!
-  resultCtx.putImageData(imageData, 0, 0)
+  const resultCanvas = document.createElement("canvas");
+  resultCanvas.width = width;
+  resultCanvas.height = height;
+  const resultCtx = resultCanvas.getContext("2d")!;
+  resultCtx.putImageData(imageData, 0, 0);
 
-  return resultCanvas
+  return resultCanvas;
 }
diff --git a/src/lib/mediaUtils.ts b/src/lib/mediaUtils.ts
index 063b2128..b4685cec 100644
--- a/src/lib/mediaUtils.ts
+++ b/src/lib/mediaUtils.ts
@@ -1,9 +1,9 @@
 export function isUrl(str: string): boolean {
   return (
-    str.startsWith('http://') ||
-    str.startsWith('https://') ||
-    str.startsWith('local-asset://')
-  )
+    str.startsWith("http://") ||
+    str.startsWith("https://") ||
+    str.startsWith("local-asset://")
+  );
 }
 
 export function getUrlExtension(url: string): string | null {
@@ -11,38 +11,47 @@ export function getUrlExtension(url: string): string | null {
     // For custom protocols like local-asset://, new URL() misparses the path as hostname.
     // Decode and use regex fallback for these.
     if (/^local-asset:\/\//i.test(url)) {
-      const decoded = decodeURIComponent(url)
-      const match = decoded.match(/\.([a-z0-9]+)(?:\?.*)?$/i)
-      return match ? match[1].toLowerCase() : null
+      const decoded = decodeURIComponent(url);
+      const match = decoded.match(/\.([a-z0-9]+)(?:\?.*)?$/i);
+      return match ? match[1].toLowerCase() : null;
     }
     // Parse URL and get pathname (ignoring query params)
-    const urlObj = new URL(url)
-    const pathname = urlObj.pathname.toLowerCase()
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname.toLowerCase();
     // Get the last segment and extract extension
-    const lastSegment = pathname.split('/').pop() || ''
-    const match = lastSegment.match(/\.([a-z0-9]+)$/)
-    return match ? match[1] : null
+    const lastSegment = pathname.split("/").pop() || "";
+    const match = lastSegment.match(/\.([a-z0-9]+)$/);
+    return match ? match[1] : null;
   } catch {
     // Fallback for invalid URLs
-    const match = url.match(/\.([a-z0-9]+)(?:\?.*)?$/i)
-    return match ? match[1].toLowerCase() : null
+    const match = url.match(/\.([a-z0-9]+)(?:\?.*)?$/i);
+    return match ? match[1].toLowerCase() : null;
   }
 }
 
 export function isImageUrl(url: string): boolean {
-  if (!isUrl(url)) return false
-  const ext = getUrlExtension(url)
-  return ext !== null && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'avif'].includes(ext)
+  if (!isUrl(url)) return false;
+  const ext = getUrlExtension(url);
+  return (
+    ext !== null &&
+    ["jpg", "jpeg", "png", "gif", "webp", "bmp", "avif"].includes(ext)
+  );
 }
 
 export function isVideoUrl(url: string): boolean {
-  if (!isUrl(url)) return false
-  const ext = getUrlExtension(url)
-  return ext !== null && ['mp4', 'webm', 'mov', 'avi', 'mkv', 'ogv', 'm4v'].includes(ext)
+  if (!isUrl(url)) return false;
+  const ext = getUrlExtension(url);
+  return (
+    ext !== null &&
+    ["mp4", "webm", "mov", "avi", "mkv", "ogv", "m4v"].includes(ext)
+  );
 }
 
 export function isAudioUrl(url: string): boolean {
-  if (!isUrl(url)) return false
-  const ext = getUrlExtension(url)
-  return ext !== null && ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma', 'opus'].includes(ext)
+  if (!isUrl(url)) return false;
+  const ext = getUrlExtension(url);
+  return (
+    ext !== null &&
+    ["mp3", "wav", "ogg", "flac", "aac", "m4a", "wma", "opus"].includes(ext)
+  );
 }
diff --git a/src/lib/schemaToForm.ts b/src/lib/schemaToForm.ts
index 027cb637..e9d7c242 100644
--- a/src/lib/schemaToForm.ts
+++ b/src/lib/schemaToForm.ts
@@ -1,376 +1,482 @@
-import type { Model, SchemaProperty } from '@/types/model'
+import type { Model, SchemaProperty } from "@/types/model";
 
 export interface FormFieldConfig {
-  name: string
-  type: 'text' | 'textarea' | 'number' | 'slider' | 'boolean' | 'select' | 'file' | 'file-array' | 'size' | 'loras'
-  label: string
-  required: boolean
-  default?: unknown
-  min?: number
-  max?: number
-  step?: number
-  options?: (string | number)[]
-  description?: string
-  accept?: string
-  maxFiles?: number
-  placeholder?: string
-  hidden?: boolean  // x-hidden fields are optional and hidden by default
-  schemaType?: string  // Original schema type (e.g. 'integer' vs 'number')
+  name: string;
+  type:
+    | "text"
+    | "textarea"
+    | "number"
+    | "slider"
+    | "boolean"
+    | "select"
+    | "file"
+    | "file-array"
+    | "size"
+    | "loras";
+  label: string;
+  required: boolean;
+  default?: unknown;
+  min?: number;
+  max?: number;
+  step?: number;
+  options?: (string | number)[];
+  description?: string;
+  accept?: string;
+  maxFiles?: number;
+  placeholder?: string;
+  hidden?: boolean; // x-hidden fields are optional and hidden by default
+  schemaType?: string; // Original schema type (e.g. 'integer' vs 'number')
 }
 
-export function validateFormValues(fields: FormFieldConfig[], values: Record<string, unknown>): Record<string, string> {
-  const errors: Record<string, string> = {}
+export function validateFormValues(
+  fields: FormFieldConfig[],
+  values: Record<string, unknown>,
+): Record<string, string> {
+  const errors: Record<string, string> = {};
 
   for (const field of fields) {
-    const value = values[field.name]
+    const value = values[field.name];
     const isEmpty =
       value === undefined ||
       value === null ||
-      value === '' ||
-      (Array.isArray(value) && value.length === 0)
+      value === "" ||
+      (Array.isArray(value) && value.length === 0);
 
     if (field.required && isEmpty) {
-      errors[field.name] = `${field.label} is required`
-      continue
+      errors[field.name] = `${field.label} is required`;
+      continue;
     }
 
-    if (isEmpty) continue
+    if (isEmpty) continue;
 
-    if (field.type === 'number' || field.type === 'slider') {
-      const num = Number(value)
+    if (field.type === "number" || field.type === "slider") {
+      const num = Number(value);
       if (Number.isNaN(num)) {
-        errors[field.name] = `${field.label} must be a number`
-        continue
+        errors[field.name] = `${field.label} must be a number`;
+        continue;
       }
       if (field.min !== undefined && num < field.min) {
-        errors[field.name] = `${field.label} must be at least ${field.min}`
+        errors[field.name] = `${field.label} must be at least ${field.min}`;
       } else if (field.max !== undefined && num > field.max) {
-        errors[field.name] = `${field.label} must be at most ${field.max}`
+        errors[field.name] = `${field.label} must be at most ${field.max}`;
       }
     }
 
-    if (field.type === 'size') {
-      const raw = String(value)
-      const parts = raw.split('*')
-      const w = Number(parts[0])
-      const h = Number(parts[1])
+    if (field.type === "size") {
+      const raw = String(value);
+      const parts = raw.split("*");
+      const w = Number(parts[0]);
+      const h = Number(parts[1]);
       if (parts.length !== 2 || Number.isNaN(w) || Number.isNaN(h)) {
-        errors[field.name] = `${field.label} must be in the format WIDTH*HEIGHT`
+        errors[field.name] =
+          `${field.label} must be in the format WIDTH*HEIGHT`;
       } else if (
         (field.min !== undefined && (w < field.min || h < field.min)) ||
         (field.max !== undefined && (w > field.max || h > field.max))
       ) {
-        errors[field.name] = `${field.label} must be between ${field.min} and ${field.max}`
+        errors[field.name] =
+          `${field.label} must be between ${field.min} and ${field.max}`;
       }
     }
   }
 
-  return errors
+  return errors;
 }
 
 // Detect file input type based on field name patterns
-function detectFileType(name: string): { accept: string; type: 'file' | 'file-array' } | null {
-  const lowerName = name.toLowerCase()
+function detectFileType(
+  name: string,
+): { accept: string; type: "file" | "file-array" } | null {
+  const lowerName = name.toLowerCase();
 
   // Check for plural forms (arrays)
-  if (lowerName.endsWith('images') || lowerName.endsWith('image_urls')) {
-    return { accept: 'image/*', type: 'file-array' }
+  if (lowerName.endsWith("images") || lowerName.endsWith("image_urls")) {
+    return { accept: "image/*", type: "file-array" };
   }
-  if (lowerName.endsWith('videos') || lowerName.endsWith('video_urls')) {
-    return { accept: 'video/*', type: 'file-array' }
+  if (lowerName.endsWith("videos") || lowerName.endsWith("video_urls")) {
+    return { accept: "video/*", type: "file-array" };
   }
-  if (lowerName.endsWith('audios') || lowerName.endsWith('audio_urls')) {
-    return { accept: 'audio/*', type: 'file-array' }
+  if (lowerName.endsWith("audios") || lowerName.endsWith("audio_urls")) {
+    return { accept: "audio/*", type: "file-array" };
   }
 
   // Check for singular patterns (matches *image, *video, *audio)
-  if (lowerName.endsWith('image') || lowerName.endsWith('image_url')) {
-    return { accept: 'image/*', type: 'file' }
+  if (lowerName.endsWith("image") || lowerName.endsWith("image_url")) {
+    return { accept: "image/*", type: "file" };
   }
-  if (lowerName.endsWith('video') || lowerName.endsWith('video_url')) {
-    return { accept: 'video/*', type: 'file' }
+  if (lowerName.endsWith("video") || lowerName.endsWith("video_url")) {
+    return { accept: "video/*", type: "file" };
   }
-  if (lowerName.endsWith('audio') || lowerName.endsWith('audio_url')) {
-    return { accept: 'audio/*', type: 'file' }
+  if (lowerName.endsWith("audio") || lowerName.endsWith("audio_url")) {
+    return { accept: "audio/*", type: "file" };
   }
 
-  return null
+  return null;
 }
 
 // Fields that should use textarea
-const TEXTAREA_FIELDS = ['prompt', 'negative_prompt', 'text', 'description', 'content']
+const TEXTAREA_FIELDS = [
+  "prompt",
+  "negative_prompt",
+  "text",
+  "description",
+  "content",
+];
 
 // Fields to hide from the form (internal API options)
-const HIDDEN_FIELDS = ['enable_base64_output', 'enable_sync_mode']
+const HIDDEN_FIELDS = ["enable_base64_output", "enable_sync_mode"];
 
 export function schemaToFormFields(
   properties: Record<string, SchemaProperty>,
   required: string[] = [],
-  orderProperties?: string[]
+  orderProperties?: string[],
 ): FormFieldConfig[] {
-  const fields: FormFieldConfig[] = []
+  const fields: FormFieldConfig[] = [];
 
   for (const [name, prop] of Object.entries(properties)) {
     // Skip hidden fields
     if (HIDDEN_FIELDS.includes(name)) {
-      continue
+      continue;
     }
-    const field = propertyToField(name, prop, required.includes(name))
+    const field = propertyToField(name, prop, required.includes(name));
     if (field) {
-      fields.push(field)
+      fields.push(field);
     }
   }
 
   // Sort fields by x-order-properties if provided
   if (orderProperties && orderProperties.length > 0) {
     return fields.sort((a, b) => {
-      const indexA = orderProperties.indexOf(a.name)
-      const indexB = orderProperties.indexOf(b.name)
+      const indexA = orderProperties.indexOf(a.name);
+      const indexB = orderProperties.indexOf(b.name);
       // Fields not in order array go to the end
-      const orderA = indexA === -1 ? Infinity : indexA
-      const orderB = indexB === -1 ? Infinity : indexB
-      return orderA - orderB
-    })
+      const orderA = indexA === -1 ? Infinity : indexA;
+      const orderB = indexB === -1 ? Infinity : indexB;
+      return orderA - orderB;
+    });
   }
 
   // Fallback: required first, then prompt, then alphabetically
   return fields.sort((a, b) => {
     if (a.required !== b.required) {
-      return a.required ? -1 : 1
+      return a.required ? -1 : 1;
     }
-    if (a.name === 'prompt') return -1
-    if (b.name === 'prompt') return 1
-    return a.name.localeCompare(b.name)
-  })
+    if (a.name === "prompt") return -1;
+    if (b.name === "prompt") return 1;
+    return a.name.localeCompare(b.name);
+  });
 }
 
 function propertyToField(
   name: string,
   prop: SchemaProperty,
-  required: boolean
+  required: boolean,
 ): FormFieldConfig | null {
   const baseField = {
     name,
     label: prop.title || formatLabel(name),
-    required: prop['x-hidden'] ? false : required,  // x-hidden fields are never required
+    required: prop["x-hidden"] ? false : required, // x-hidden fields are never required
     default: prop.default,
     description: prop.description,
-    hidden: !!prop['x-hidden'],
-  }
+    hidden: !!prop["x-hidden"],
+  };
 
   // Handle x-ui-component: uploader (for zip files etc.)
-  if (prop['x-ui-component'] === 'uploader') {
+  if (prop["x-ui-component"] === "uploader") {
     // If no x-accept, try to infer from field name
-    let fileAccept = prop['x-accept']
+    let fileAccept = prop["x-accept"];
     if (!fileAccept) {
-      const inferred = detectFileType(name)
-      fileAccept = inferred?.accept || '*/*'
+      const inferred = detectFileType(name);
+      fileAccept = inferred?.accept || "*/*";
     }
     return {
       ...baseField,
-      type: 'file',
+      type: "file",
       accept: fileAccept,
-      placeholder: prop['x-placeholder'],
-    }
+      placeholder: prop["x-placeholder"],
+    };
   }
 
   // Check if this is a file input field (string type with matching name pattern)
-  if (prop.type === 'string') {
-    const filePattern = detectFileType(name)
+  if (prop.type === "string") {
+    const filePattern = detectFileType(name);
     if (filePattern) {
       return {
         ...baseField,
         type: filePattern.type,
         accept: filePattern.accept,
-        maxFiles: prop.maxItems || (filePattern.type === 'file-array' ? 10 : 1),
-      }
+        maxFiles: prop.maxItems || (filePattern.type === "file-array" ? 10 : 1),
+      };
     }
   }
 
   // Handle 'data' field as file upload (commonly used for training data)
-  if (name.toLowerCase() === 'data' && prop.type === 'string') {
+  if (name.toLowerCase() === "data" && prop.type === "string") {
     return {
       ...baseField,
-      type: 'file',
-      accept: prop['x-accept'] || '*/*',
-      placeholder: prop['x-placeholder'],
-    }
+      type: "file",
+      accept: prop["x-accept"] || "*/*",
+      placeholder: prop["x-placeholder"],
+    };
   }
 
   // Handle loras fields (including high_noise_loras, low_noise_loras)
-  if (prop['x-ui-component'] === 'loras' || (name.toLowerCase().includes('lora') && prop.type === 'array')) {
+  if (
+    prop["x-ui-component"] === "loras" ||
+    (name.toLowerCase().includes("lora") && prop.type === "array")
+  ) {
     return {
       ...baseField,
-      type: 'loras',
+      type: "loras",
       maxFiles: prop.maxItems || 3,
-    }
+    };
   }
 
   // Handle array type (could be file array)
-  if (prop.type === 'array') {
-    const lowerName = name.toLowerCase()
+  if (prop.type === "array") {
+    const lowerName = name.toLowerCase();
     // Check if it's an array of strings that looks like URLs/files
-    if (lowerName.includes('image') || lowerName.includes('video') || lowerName.includes('audio')) {
-      let accept = 'image/*'
-      if (lowerName.includes('video')) accept = 'video/*'
-      else if (lowerName.includes('audio')) accept = 'audio/*'
+    if (
+      lowerName.includes("image") ||
+      lowerName.includes("video") ||
+      lowerName.includes("audio")
+    ) {
+      let accept = "image/*";
+      if (lowerName.includes("video")) accept = "video/*";
+      else if (lowerName.includes("audio")) accept = "audio/*";
       return {
         ...baseField,
-        type: 'file-array',
+        type: "file-array",
         accept,
         maxFiles: prop.maxItems || 10,
-      }
+      };
     }
     // Otherwise skip array types for now
-    return null
+    return null;
   }
 
   // Handle enum type (including size with enum)
   if (prop.enum && prop.enum.length > 0) {
     return {
       ...baseField,
-      type: 'select',
+      type: "select",
       options: prop.enum,
-    }
+    };
   }
 
   // Handle size field without enum - use custom size selector with min/max
-  if (name.toLowerCase() === 'size') {
+  if (name.toLowerCase() === "size") {
     return {
       ...baseField,
-      type: 'size',
+      type: "size",
       min: prop.minimum,
       max: prop.maximum,
-    }
+    };
   }
 
   // Handle different types
   switch (prop.type) {
-    case 'string':
+    case "string":
       return {
         ...baseField,
-        type: TEXTAREA_FIELDS.some(f => name.toLowerCase().includes(f)) ? 'textarea' : 'text',
-      }
+        type: TEXTAREA_FIELDS.some((f) => name.toLowerCase().includes(f))
+          ? "textarea"
+          : "text",
+      };
 
-    case 'integer':
-    case 'number':
+    case "integer":
+    case "number":
       return {
         ...baseField,
-        type: prop['x-ui-component'] === 'slider' ? 'slider' : 'number',
+        type: prop["x-ui-component"] === "slider" ? "slider" : "number",
         schemaType: prop.type,
         min: prop.minimum,
         max: prop.maximum,
         step: prop.step,
-      }
+      };
 
-    case 'boolean':
+    case "boolean":
       return {
         ...baseField,
-        type: 'boolean',
-      }
+        type: "boolean",
+      };
 
     default:
       // For unknown types, default to text
       return {
         ...baseField,
-        type: 'text',
-      }
+        type: "text",
+      };
   }
 }
 
 function formatLabel(name: string): string {
   return name
-    .split('_')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
 }
 
-export function getDefaultValues(fields: FormFieldConfig[]): Record<string, unknown> {
-  const defaults: Record<string, unknown> = {}
+export function getDefaultValues(
+  fields: FormFieldConfig[],
+): Record<string, unknown> {
+  const defaults: Record<string, unknown> = {};
 
   for (const field of fields) {
     // Skip default values for loras - let user add them manually
-    if (field.type === 'loras') {
-      defaults[field.name] = []
-      continue
+    if (field.type === "loras") {
+      defaults[field.name] = [];
+      continue;
     }
     if (field.default !== undefined) {
-      defaults[field.name] = field.default
-    } else if (field.type === 'boolean') {
-      defaults[field.name] = false
-    } else if (field.type === 'file-array') {
-      defaults[field.name] = []
+      defaults[field.name] = field.default;
+    } else if (field.type === "boolean") {
+      defaults[field.name] = false;
+    } else if (field.type === "file-array") {
+      defaults[field.name] = [];
     }
   }
 
-  return defaults
+  return defaults;
 }
 
-export type MediaType = 'image' | 'video' | 'audio'
-
-const MEDIA_KEYS: Record<MediaType, { singular: string; plural: string; url: string; urls: string; suffixSingular: string; suffixPlural: string }> = {
-  image: { singular: 'image', plural: 'images', url: 'image_url', urls: 'image_urls', suffixSingular: '_image', suffixPlural: 'images' },
-  video: { singular: 'video', plural: 'videos', url: 'video_url', urls: 'video_urls', suffixSingular: '_video', suffixPlural: 'videos' },
-  audio: { singular: 'audio', plural: 'audios', url: 'audio_url', urls: 'audio_urls', suffixSingular: '_audio', suffixPlural: 'audios' },
-}
+export type MediaType = "image" | "video" | "audio";
+
+const MEDIA_KEYS: Record<
+  MediaType,
+  {
+    singular: string;
+    plural: string;
+    url: string;
+    urls: string;
+    suffixSingular: string;
+    suffixPlural: string;
+  }
+> = {
+  image: {
+    singular: "image",
+    plural: "images",
+    url: "image_url",
+    urls: "image_urls",
+    suffixSingular: "_image",
+    suffixPlural: "images",
+  },
+  video: {
+    singular: "video",
+    plural: "videos",
+    url: "video_url",
+    urls: "video_urls",
+    suffixSingular: "_video",
+    suffixPlural: "videos",
+  },
+  audio: {
+    singular: "audio",
+    plural: "audios",
+    url: "audio_url",
+    urls: "audio_urls",
+    suffixSingular: "_audio",
+    suffixPlural: "audios",
+  },
+};
 
 /** Get a single media URL from form values. Treats plural (e.g. "images") as singular by taking the first. */
 export function getSingleMediaFromValues(
   values: Record<string, unknown> | undefined,
-  mediaType: MediaType
+  mediaType: MediaType,
 ): string | undefined {
-  if (!values) return undefined
-  const keys = MEDIA_KEYS[mediaType]
-  const v = values[keys.singular]
-  if (typeof v === 'string' && v) return v
-  const arr = values[keys.plural]
-  if (Array.isArray(arr) && arr.length > 0 && typeof arr[0] === 'string') return arr[0]
-  if (mediaType === 'image') {
-    const input = values['input']
-    if (typeof input === 'string' && input) return input
+  if (!values) return undefined;
+  const keys = MEDIA_KEYS[mediaType];
+  const v = values[keys.singular];
+  if (typeof v === "string" && v) return v;
+  const arr = values[keys.plural];
+  if (Array.isArray(arr) && arr.length > 0 && typeof arr[0] === "string")
+    return arr[0];
+  if (mediaType === "image") {
+    const input = values["input"];
+    if (typeof input === "string" && input) return input;
   }
   for (const [key, val] of Object.entries(values)) {
-    const k = key.toLowerCase()
-    if (typeof val === 'string' && val && (k.endsWith(keys.suffixSingular) || k === keys.url)) return val
-    if (Array.isArray(val) && val.length > 0 && typeof val[0] === 'string' &&
-        (k.endsWith(keys.suffixPlural) || k.endsWith(keys.urls))) return val[0]
+    const k = key.toLowerCase();
+    if (
+      typeof val === "string" &&
+      val &&
+      (k.endsWith(keys.suffixSingular) || k === keys.url)
+    )
+      return val;
+    if (
+      Array.isArray(val) &&
+      val.length > 0 &&
+      typeof val[0] === "string" &&
+      (k.endsWith(keys.suffixPlural) || k.endsWith(keys.urls))
+    )
+      return val[0];
   }
-  return undefined
+  return undefined;
 }
 
 /** Get media URL array from form values. Treats singular (e.g. "image") as array by wrapping. */
 export function getMediaArrayFromValues(
   values: Record<string, unknown> | undefined,
-  mediaType: MediaType
+  mediaType: MediaType,
 ): string[] {
-  if (!values) return []
-  const keys = MEDIA_KEYS[mediaType]
-  const arr = values[keys.plural]
-  if (Array.isArray(arr)) return arr.filter((x): x is string => typeof x === 'string')
-  const single = values[keys.singular]
-  if (typeof single === 'string' && single) return [single]
-  const url = values[keys.url]
-  if (typeof url === 'string' && url) return [url]
-  const urls = values[keys.urls]
-  if (Array.isArray(urls)) return urls.filter((x): x is string => typeof x === 'string')
+  if (!values) return [];
+  const keys = MEDIA_KEYS[mediaType];
+  const arr = values[keys.plural];
+  if (Array.isArray(arr))
+    return arr.filter((x): x is string => typeof x === "string");
+  const single = values[keys.singular];
+  if (typeof single === "string" && single) return [single];
+  const url = values[keys.url];
+  if (typeof url === "string" && url) return [url];
+  const urls = values[keys.urls];
+  if (Array.isArray(urls))
+    return urls.filter((x): x is string => typeof x === "string");
   for (const [key, val] of Object.entries(values)) {
-    const k = key.toLowerCase()
-    if (k.endsWith(keys.suffixPlural) && Array.isArray(val)) return val.filter((x): x is string => typeof x === 'string')
-    if ((k.endsWith(keys.suffixSingular) || k === keys.url) && typeof val === 'string' && val) return [val]
+    const k = key.toLowerCase();
+    if (k.endsWith(keys.suffixPlural) && Array.isArray(val))
+      return val.filter((x): x is string => typeof x === "string");
+    if (
+      (k.endsWith(keys.suffixSingular) || k === keys.url) &&
+      typeof val === "string" &&
+      val
+    )
+      return [val];
   }
-  return []
+  return [];
 }
 
 /** Field names that the API typically expects as arrays (plural / _urls). */
 const ARRAY_FIELD_PATTERNS = [
-  'images', 'image_urls', 'videos', 'video_urls', 'audios', 'audio_urls'
-]
+  "images",
+  "image_urls",
+  "videos",
+  "video_urls",
+  "audios",
+  "audio_urls",
+];
 
 function isArrayFieldName(key: string): boolean {
-  const k = key.toLowerCase()
+  const k = key.toLowerCase();
   // Skip fields that are clearly numeric (e.g. num_images, num_videos)
-  if (k.startsWith('num_') || k.startsWith('number_') || k.startsWith('count_') || k.startsWith('total_') || k.startsWith('max_') || k.startsWith('min_')) return false
-  return ARRAY_FIELD_PATTERNS.some(p => k === p || k.endsWith('_images') || k.endsWith('_image_urls') || k.endsWith('_videos') || k.endsWith('_video_urls') || k.endsWith('_audios') || k.endsWith('_audio_urls'))
+  if (
+    k.startsWith("num_") ||
+    k.startsWith("number_") ||
+    k.startsWith("count_") ||
+    k.startsWith("total_") ||
+    k.startsWith("max_") ||
+    k.startsWith("min_")
+  )
+    return false;
+  return ARRAY_FIELD_PATTERNS.some(
+    (p) =>
+      k === p ||
+      k.endsWith("_images") ||
+      k.endsWith("_image_urls") ||
+      k.endsWith("_videos") ||
+      k.endsWith("_video_urls") ||
+      k.endsWith("_audios") ||
+      k.endsWith("_audio_urls"),
+  );
 }
 
 /**
@@ -380,77 +486,101 @@ function isArrayFieldName(key: string): boolean {
  */
 export function normalizePayloadArrays(
   payload: Record<string, unknown>,
-  formFields: FormFieldConfig[]
+  formFields: FormFieldConfig[],
 ): Record<string, unknown> {
-  const out = { ...payload }
+  const out = { ...payload };
   const arrayFieldNames = new Set<string>(
-    formFields.filter(f => f.type === 'file-array').map(f => f.name)
-  )
+    formFields.filter((f) => f.type === "file-array").map((f) => f.name),
+  );
   for (const key of Object.keys(out)) {
-    if (!arrayFieldNames.has(key) && !isArrayFieldName(key)) continue
-    const v = out[key]
-    if (v === undefined || v === null) continue
-    if (Array.isArray(v)) continue
-    out[key] = [v]
+    if (!arrayFieldNames.has(key) && !isArrayFieldName(key)) continue;
+    const v = out[key];
+    if (v === undefined || v === null) continue;
+    if (Array.isArray(v)) continue;
+    out[key] = [v];
   }
   // If API expects "images" but form only has "image", add images array (same for video/audio)
-  const singularToPlural: [string, string][] = [['image', 'images'], ['image_url', 'image_urls'], ['video', 'videos'], ['video_url', 'video_urls'], ['audio', 'audios'], ['audio_url', 'audio_urls']]
+  const singularToPlural: [string, string][] = [
+    ["image", "images"],
+    ["image_url", "image_urls"],
+    ["video", "videos"],
+    ["video_url", "video_urls"],
+    ["audio", "audios"],
+    ["audio_url", "audio_urls"],
+  ];
   for (const [singular, plural] of singularToPlural) {
-    if (out[plural] !== undefined) continue
-    const single = out[singular]
-    if (single === undefined || single === null || single === '') continue
-    out[plural] = Array.isArray(single) ? single : [single]
+    if (out[plural] !== undefined) continue;
+    const single = out[singular];
+    if (single === undefined || single === null || single === "") continue;
+    out[plural] = Array.isArray(single) ? single : [single];
   }
-  return out
+  return out;
 }
 
 /** @deprecated Use getSingleMediaFromValues(values, 'image') */
-export function getSingleImageFromValues(values: Record<string, unknown> | undefined): string | undefined {
-  return getSingleMediaFromValues(values, 'image')
+export function getSingleImageFromValues(
+  values: Record<string, unknown> | undefined,
+): string | undefined {
+  return getSingleMediaFromValues(values, "image");
 }
 
 /** @deprecated Use getMediaArrayFromValues(values, 'image') */
-export function getImageArrayFromValues(values: Record<string, unknown> | undefined): string[] {
-  return getMediaArrayFromValues(values, 'image')
+export function getImageArrayFromValues(
+  values: Record<string, unknown> | undefined,
+): string[] {
+  return getMediaArrayFromValues(values, "image");
 }
 
 /** @deprecated Use getSingleMediaFromValues(values, 'video') */
-export function getSingleVideoFromValues(values: Record<string, unknown> | undefined): string | undefined {
-  return getSingleMediaFromValues(values, 'video')
+export function getSingleVideoFromValues(
+  values: Record<string, unknown> | undefined,
+): string | undefined {
+  return getSingleMediaFromValues(values, "video");
 }
 
 /** @deprecated Use getMediaArrayFromValues(values, 'video') */
-export function getVideoArrayFromValues(values: Record<string, unknown> | undefined): string[] {
-  return getMediaArrayFromValues(values, 'video')
+export function getVideoArrayFromValues(
+  values: Record<string, unknown> | undefined,
+): string[] {
+  return getMediaArrayFromValues(values, "video");
 }
 
 /** @deprecated Use getSingleMediaFromValues(values, 'audio') */
-export function getSingleAudioFromValues(values: Record<string, unknown> | undefined): string | undefined {
-  return getSingleMediaFromValues(values, 'audio')
+export function getSingleAudioFromValues(
+  values: Record<string, unknown> | undefined,
+): string | undefined {
+  return getSingleMediaFromValues(values, "audio");
 }
 
 /** @deprecated Use getMediaArrayFromValues(values, 'audio') */
-export function getAudioArrayFromValues(values: Record<string, unknown> | undefined): string[] {
-  return getMediaArrayFromValues(values, 'audio')
+export function getAudioArrayFromValues(
+  values: Record<string, unknown> | undefined,
+): string[] {
+  return getMediaArrayFromValues(values, "audio");
 }
 
 /** Extract form fields from a Desktop API Model using the same logic as the Playground (DynamicForm). */
 export function getFormFieldsFromModel(model: Model): FormFieldConfig[] {
-  const apiSchemas = (model.api_schema as Record<string, unknown> | undefined)?.api_schemas as Array<{
-    type: string
-    request_schema?: {
-      properties?: Record<string, SchemaProperty>
-      required?: string[]
-      'x-order-properties'?: string[]
-    }
-  }> | undefined
-  const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
+  const apiSchemas = (model.api_schema as Record<string, unknown> | undefined)
+    ?.api_schemas as
+    | Array<{
+        type: string;
+        request_schema?: {
+          properties?: Record<string, SchemaProperty>;
+          required?: string[];
+          "x-order-properties"?: string[];
+        };
+      }>
+    | undefined;
+  const requestSchema = apiSchemas?.find(
+    (s) => s.type === "model_run",
+  )?.request_schema;
   if (!requestSchema?.properties) {
-    return []
+    return [];
   }
   return schemaToFormFields(
     requestSchema.properties,
     requestSchema.required ?? [],
-    requestSchema['x-order-properties']
-  )
+    requestSchema["x-order-properties"],
+  );
 }
diff --git a/src/lib/smartFormConfig.ts b/src/lib/smartFormConfig.ts
index 4fd77c0c..c54f6419 100644
--- a/src/lib/smartFormConfig.ts
+++ b/src/lib/smartFormConfig.ts
@@ -1,291 +1,334 @@
 export interface SmartFormToggle {
-  key: string
-  labelKey: string
-  options: { value: string; labelKey: string }[]
-  default: string
+  key: string;
+  labelKey: string;
+  options: { value: string; labelKey: string }[];
+  default: string;
 }
 
 export interface SmartFormFamily {
-  id: string
-  name: string
-  provider: string
-  poster: string
-  category: 'image' | 'video' | 'other'
-  variantIds: string[]
-  primaryVariant: string
-  toggles: SmartFormToggle[]
+  id: string;
+  name: string;
+  provider: string;
+  poster: string;
+  category: "image" | "video" | "other";
+  variantIds: string[];
+  primaryVariant: string;
+  toggles: SmartFormToggle[];
   resolveVariant: (
     filledFields: Set<string>,
-    toggleValues: Record<string, string>
-  ) => string
+    toggleValues: Record<string, string>,
+  ) => string;
   mapValues?: (
     values: Record<string, unknown>,
-    resolvedVariantId: string
-  ) => Record<string, unknown>
-  excludeFields?: string[]
+    resolvedVariantId: string,
+  ) => Record<string, unknown>;
+  excludeFields?: string[];
 }
 
 // Helper to check if any file-like field is filled
 function hasFileField(filledFields: Set<string>, ...names: string[]): boolean {
-  return names.some(n => filledFields.has(n))
+  return names.some((n) => filledFields.has(n));
 }
 
 function hasImageFilled(filledFields: Set<string>): boolean {
-  return hasFileField(filledFields, 'image', 'images', 'image_url', 'image_urls', 'input_image')
+  return hasFileField(
+    filledFields,
+    "image",
+    "images",
+    "image_url",
+    "image_urls",
+    "input_image",
+  );
 }
 
 function hasVideoFilled(filledFields: Set<string>): boolean {
-  return hasFileField(filledFields, 'video', 'videos', 'video_url', 'video_urls', 'input_video')
+  return hasFileField(
+    filledFields,
+    "video",
+    "videos",
+    "video_url",
+    "video_urls",
+    "input_video",
+  );
 }
 
 function hasLorasFilled(filledFields: Set<string>): boolean {
   for (const name of filledFields) {
-    if (name.toLowerCase().includes('lora')) return true
+    if (name.toLowerCase().includes("lora")) return true;
   }
-  return false
+  return false;
 }
 
 export const SMART_FORM_FAMILIES: SmartFormFamily[] = [
   // 1. Seedream 4.5
   {
-    id: 'seedream-4.5',
-    name: 'Seedream 4.5',
-    provider: 'bytedance',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1764761216479761378_Yy864da9.png',
-    category: 'image',
+    id: "seedream-4.5",
+    name: "Seedream 4.5",
+    provider: "bytedance",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1764761216479761378_Yy864da9.png",
+    category: "image",
     variantIds: [
-      'bytedance/seedream-v4.5',
-      'bytedance/seedream-v4.5/sequential',
-      'bytedance/seedream-v4.5/edit',
-      'bytedance/seedream-v4.5/edit-sequential',
+      "bytedance/seedream-v4.5",
+      "bytedance/seedream-v4.5/sequential",
+      "bytedance/seedream-v4.5/edit",
+      "bytedance/seedream-v4.5/edit-sequential",
     ],
-    primaryVariant: 'bytedance/seedream-v4.5',
+    primaryVariant: "bytedance/seedream-v4.5",
     toggles: [
       {
-        key: 'mode',
-        labelKey: 'smartPlayground.toggleMode',
+        key: "mode",
+        labelKey: "smartPlayground.toggleMode",
         options: [
-          { value: 'normal', labelKey: 'smartPlayground.modeNormal' },
-          { value: 'sequential', labelKey: 'smartPlayground.modeSequential' },
+          { value: "normal", labelKey: "smartPlayground.modeNormal" },
+          { value: "sequential", labelKey: "smartPlayground.modeSequential" },
         ],
-        default: 'normal',
+        default: "normal",
       },
     ],
     resolveVariant(filledFields, toggleValues) {
-      const hasImage = hasImageFilled(filledFields)
-      const isSequential = toggleValues.mode === 'sequential'
-      if (hasImage && isSequential) return 'bytedance/seedream-v4.5/edit-sequential'
-      if (hasImage) return 'bytedance/seedream-v4.5/edit'
-      if (isSequential) return 'bytedance/seedream-v4.5/sequential'
-      return 'bytedance/seedream-v4.5'
+      const hasImage = hasImageFilled(filledFields);
+      const isSequential = toggleValues.mode === "sequential";
+      if (hasImage && isSequential)
+        return "bytedance/seedream-v4.5/edit-sequential";
+      if (hasImage) return "bytedance/seedream-v4.5/edit";
+      if (isSequential) return "bytedance/seedream-v4.5/sequential";
+      return "bytedance/seedream-v4.5";
     },
   },
 
   // 2. Seedance 1.5 Pro
   {
-    id: 'seedance-1.5-pro',
-    name: 'Seedance 1.5 Pro',
-    provider: 'bytedance',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766494048998434655_qEMLsAI0.png',
-    category: 'video',
+    id: "seedance-1.5-pro",
+    name: "Seedance 1.5 Pro",
+    provider: "bytedance",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766494048998434655_qEMLsAI0.png",
+    category: "video",
     variantIds: [
-      'bytedance/seedance-v1.5-pro/image-to-video',
-      'bytedance/seedance-v1.5-pro/image-to-video-fast',
-      'bytedance/seedance-v1.5-pro/text-to-video',
-      'bytedance/seedance-v1.5-pro/text-to-video-fast',
-      'bytedance/seedance-v1.5-pro/video-extend',
-      'bytedance/seedance-v1.5-pro/video-extend-fast',
+      "bytedance/seedance-v1.5-pro/image-to-video",
+      "bytedance/seedance-v1.5-pro/image-to-video-fast",
+      "bytedance/seedance-v1.5-pro/text-to-video",
+      "bytedance/seedance-v1.5-pro/text-to-video-fast",
+      "bytedance/seedance-v1.5-pro/video-extend",
+      "bytedance/seedance-v1.5-pro/video-extend-fast",
     ],
-    primaryVariant: 'bytedance/seedance-v1.5-pro/image-to-video',
+    primaryVariant: "bytedance/seedance-v1.5-pro/image-to-video",
     toggles: [
       {
-        key: 'speed',
-        labelKey: 'smartPlayground.toggleSpeed',
+        key: "speed",
+        labelKey: "smartPlayground.toggleSpeed",
         options: [
-          { value: 'normal', labelKey: 'smartPlayground.speedNormal' },
-          { value: 'fast', labelKey: 'smartPlayground.speedFast' },
+          { value: "normal", labelKey: "smartPlayground.speedNormal" },
+          { value: "fast", labelKey: "smartPlayground.speedFast" },
         ],
-        default: 'normal',
+        default: "normal",
       },
     ],
     resolveVariant(filledFields, toggleValues) {
-      const hasVideo = hasVideoFilled(filledFields)
-      const hasImage = hasImageFilled(filledFields)
-      const isFast = toggleValues.speed === 'fast'
-      if (hasVideo) return isFast ? 'bytedance/seedance-v1.5-pro/video-extend-fast' : 'bytedance/seedance-v1.5-pro/video-extend'
-      if (hasImage) return isFast ? 'bytedance/seedance-v1.5-pro/image-to-video-fast' : 'bytedance/seedance-v1.5-pro/image-to-video'
-      return isFast ? 'bytedance/seedance-v1.5-pro/text-to-video-fast' : 'bytedance/seedance-v1.5-pro/text-to-video'
+      const hasVideo = hasVideoFilled(filledFields);
+      const hasImage = hasImageFilled(filledFields);
+      const isFast = toggleValues.speed === "fast";
+      if (hasVideo)
+        return isFast
+          ? "bytedance/seedance-v1.5-pro/video-extend-fast"
+          : "bytedance/seedance-v1.5-pro/video-extend";
+      if (hasImage)
+        return isFast
+          ? "bytedance/seedance-v1.5-pro/image-to-video-fast"
+          : "bytedance/seedance-v1.5-pro/image-to-video";
+      return isFast
+        ? "bytedance/seedance-v1.5-pro/text-to-video-fast"
+        : "bytedance/seedance-v1.5-pro/text-to-video";
     },
   },
 
   // 3. Wan Spicy
   {
-    id: 'wan-spicy',
-    name: 'Wan Spicy',
-    provider: 'wavespeed-ai',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766298334453523753_f975da96.png',
-    category: 'video',
+    id: "wan-spicy",
+    name: "Wan Spicy",
+    provider: "wavespeed-ai",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766298334453523753_f975da96.png",
+    category: "video",
     variantIds: [
-      'wavespeed-ai/wan-2.2-spicy/image-to-video',
-      'wavespeed-ai/wan-2.2-spicy/image-to-video-lora',
-      'wavespeed-ai/wan-2.2-spicy/video-extend',
-      'wavespeed-ai/wan-2.2-spicy/video-extend-lora',
+      "wavespeed-ai/wan-2.2-spicy/image-to-video",
+      "wavespeed-ai/wan-2.2-spicy/image-to-video-lora",
+      "wavespeed-ai/wan-2.2-spicy/video-extend",
+      "wavespeed-ai/wan-2.2-spicy/video-extend-lora",
     ],
-    primaryVariant: 'wavespeed-ai/wan-2.2-spicy/image-to-video',
+    primaryVariant: "wavespeed-ai/wan-2.2-spicy/image-to-video",
     toggles: [],
     resolveVariant(filledFields) {
-      const hasVideo = hasVideoFilled(filledFields)
-      const hasLoras = hasLorasFilled(filledFields)
-      if (hasVideo && hasLoras) return 'wavespeed-ai/wan-2.2-spicy/video-extend-lora'
-      if (hasVideo) return 'wavespeed-ai/wan-2.2-spicy/video-extend'
-      if (hasLoras) return 'wavespeed-ai/wan-2.2-spicy/image-to-video-lora'
-      return 'wavespeed-ai/wan-2.2-spicy/image-to-video'
+      const hasVideo = hasVideoFilled(filledFields);
+      const hasLoras = hasLorasFilled(filledFields);
+      if (hasVideo && hasLoras)
+        return "wavespeed-ai/wan-2.2-spicy/video-extend-lora";
+      if (hasVideo) return "wavespeed-ai/wan-2.2-spicy/video-extend";
+      if (hasLoras) return "wavespeed-ai/wan-2.2-spicy/image-to-video-lora";
+      return "wavespeed-ai/wan-2.2-spicy/image-to-video";
     },
   },
 
   // 4. Wan Animate
   {
-    id: 'wan-animate',
-    name: 'Wan Animate',
-    provider: 'wavespeed-ai',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1758433474532574441_SkTQLIEA.jpeg',
-    category: 'other',
-    variantIds: [
-      'wavespeed-ai/wan-2.2/animate',
-    ],
-    primaryVariant: 'wavespeed-ai/wan-2.2/animate',
+    id: "wan-animate",
+    name: "Wan Animate",
+    provider: "wavespeed-ai",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1758433474532574441_SkTQLIEA.jpeg",
+    category: "other",
+    variantIds: ["wavespeed-ai/wan-2.2/animate"],
+    primaryVariant: "wavespeed-ai/wan-2.2/animate",
     toggles: [],
     resolveVariant() {
-      return 'wavespeed-ai/wan-2.2/animate'
+      return "wavespeed-ai/wan-2.2/animate";
     },
   },
 
   // 5. InfiniteTalk
   {
-    id: 'infinitetalk',
-    name: 'InfiniteTalk',
-    excludeFields: ['audio'],
-    provider: 'wavespeed-ai',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766575571686877852_Sckigeck.png',
-    category: 'other',
+    id: "infinitetalk",
+    name: "InfiniteTalk",
+    excludeFields: ["audio"],
+    provider: "wavespeed-ai",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766575571686877852_Sckigeck.png",
+    category: "other",
     variantIds: [
-      'wavespeed-ai/infinitetalk',
-      'wavespeed-ai/infinitetalk/multi',
-      'wavespeed-ai/infinitetalk/video-to-video',
-      'wavespeed-ai/infinitetalk-fast',
-      'wavespeed-ai/infinitetalk-fast/multi',
-      'wavespeed-ai/infinitetalk-fast/video-to-video',
+      "wavespeed-ai/infinitetalk",
+      "wavespeed-ai/infinitetalk/multi",
+      "wavespeed-ai/infinitetalk/video-to-video",
+      "wavespeed-ai/infinitetalk-fast",
+      "wavespeed-ai/infinitetalk-fast/multi",
+      "wavespeed-ai/infinitetalk-fast/video-to-video",
     ],
-    primaryVariant: 'wavespeed-ai/infinitetalk',
+    primaryVariant: "wavespeed-ai/infinitetalk",
     toggles: [
       {
-        key: 'speed',
-        labelKey: 'smartPlayground.toggleSpeed',
+        key: "speed",
+        labelKey: "smartPlayground.toggleSpeed",
         options: [
-          { value: 'normal', labelKey: 'smartPlayground.speedNormal' },
-          { value: 'fast', labelKey: 'smartPlayground.speedFast' },
+          { value: "normal", labelKey: "smartPlayground.speedNormal" },
+          { value: "fast", labelKey: "smartPlayground.speedFast" },
         ],
-        default: 'normal',
+        default: "normal",
       },
     ],
     resolveVariant(filledFields, toggleValues) {
-      const hasVideo = hasVideoFilled(filledFields)
-      const isFast = toggleValues.speed === 'fast'
-      const hasLeftAudio = filledFields.has('left_audio')
-      const hasRightAudio = filledFields.has('right_audio')
-      const hasBothAudios = hasLeftAudio && hasRightAudio
+      const hasVideo = hasVideoFilled(filledFields);
+      const isFast = toggleValues.speed === "fast";
+      const hasLeftAudio = filledFields.has("left_audio");
+      const hasRightAudio = filledFields.has("right_audio");
+      const hasBothAudios = hasLeftAudio && hasRightAudio;
 
-      if (hasVideo) return isFast ? 'wavespeed-ai/infinitetalk-fast/video-to-video' : 'wavespeed-ai/infinitetalk/video-to-video'
-      if (hasBothAudios) return isFast ? 'wavespeed-ai/infinitetalk-fast/multi' : 'wavespeed-ai/infinitetalk/multi'
-      return isFast ? 'wavespeed-ai/infinitetalk-fast' : 'wavespeed-ai/infinitetalk'
+      if (hasVideo)
+        return isFast
+          ? "wavespeed-ai/infinitetalk-fast/video-to-video"
+          : "wavespeed-ai/infinitetalk/video-to-video";
+      if (hasBothAudios)
+        return isFast
+          ? "wavespeed-ai/infinitetalk-fast/multi"
+          : "wavespeed-ai/infinitetalk/multi";
+      return isFast
+        ? "wavespeed-ai/infinitetalk-fast"
+        : "wavespeed-ai/infinitetalk";
     },
     mapValues(values, resolvedVariantId) {
       // For single variant: map left_audio/right_audio → audio
-      if (resolvedVariantId.includes('/multi') || resolvedVariantId.includes('/video-to-video')) return values
-      const mapped = { ...values }
+      if (
+        resolvedVariantId.includes("/multi") ||
+        resolvedVariantId.includes("/video-to-video")
+      )
+        return values;
+      const mapped = { ...values };
       if (!mapped.audio) {
-        if (mapped.left_audio) mapped.audio = mapped.left_audio
-        else if (mapped.right_audio) mapped.audio = mapped.right_audio
+        if (mapped.left_audio) mapped.audio = mapped.left_audio;
+        else if (mapped.right_audio) mapped.audio = mapped.right_audio;
       }
-      delete mapped.left_audio
-      delete mapped.right_audio
-      return mapped
+      delete mapped.left_audio;
+      delete mapped.right_audio;
+      return mapped;
     },
   },
 
   // 6. Kling 2.6 Motion Control
   {
-    id: 'kling-2.6-motion-control',
-    name: 'Kling 2.6 Motion Control',
-    provider: 'kwaivgi',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766519115490596160_Smusqomu.png',
-    category: 'other',
+    id: "kling-2.6-motion-control",
+    name: "Kling 2.6 Motion Control",
+    provider: "kwaivgi",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766519115490596160_Smusqomu.png",
+    category: "other",
     variantIds: [
-      'kwaivgi/kling-v2.6-pro/motion-control',
-      'kwaivgi/kling-v2.6-std/motion-control',
+      "kwaivgi/kling-v2.6-pro/motion-control",
+      "kwaivgi/kling-v2.6-std/motion-control",
     ],
-    primaryVariant: 'kwaivgi/kling-v2.6-pro/motion-control',
+    primaryVariant: "kwaivgi/kling-v2.6-pro/motion-control",
     toggles: [
       {
-        key: 'quality',
-        labelKey: 'smartPlayground.toggleQuality',
+        key: "quality",
+        labelKey: "smartPlayground.toggleQuality",
         options: [
-          { value: 'pro', labelKey: 'smartPlayground.qualityPro' },
-          { value: 'std', labelKey: 'smartPlayground.qualityStd' },
+          { value: "pro", labelKey: "smartPlayground.qualityPro" },
+          { value: "std", labelKey: "smartPlayground.qualityStd" },
         ],
-        default: 'pro',
+        default: "pro",
       },
     ],
     resolveVariant(_filledFields, toggleValues) {
-      return toggleValues.quality === 'std'
-        ? 'kwaivgi/kling-v2.6-std/motion-control'
-        : 'kwaivgi/kling-v2.6-pro/motion-control'
+      return toggleValues.quality === "std"
+        ? "kwaivgi/kling-v2.6-std/motion-control"
+        : "kwaivgi/kling-v2.6-pro/motion-control";
     },
   },
 
   // 7. Nano Banana Pro
   {
-    id: 'nano-banana-pro',
-    name: 'Nano Banana Pro',
-    provider: 'google',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1763649945119973876_WvMIEAxu.jpg',
-    category: 'image',
+    id: "nano-banana-pro",
+    name: "Nano Banana Pro",
+    provider: "google",
+    poster:
+      "https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1763649945119973876_WvMIEAxu.jpg",
+    category: "image",
     variantIds: [
-      'google/nano-banana-pro/text-to-image',
-      'google/nano-banana-pro/text-to-image-ultra',
-      'google/nano-banana-pro/text-to-image-multi',
-      'google/nano-banana-pro/edit',
-      'google/nano-banana-pro/edit-ultra',
-      'google/nano-banana-pro/edit-multi',
+      "google/nano-banana-pro/text-to-image",
+      "google/nano-banana-pro/text-to-image-ultra",
+      "google/nano-banana-pro/text-to-image-multi",
+      "google/nano-banana-pro/edit",
+      "google/nano-banana-pro/edit-ultra",
+      "google/nano-banana-pro/edit-multi",
     ],
-    primaryVariant: 'google/nano-banana-pro/text-to-image',
+    primaryVariant: "google/nano-banana-pro/text-to-image",
     toggles: [
       {
-        key: 'quality',
-        labelKey: 'smartPlayground.toggleQuality',
+        key: "quality",
+        labelKey: "smartPlayground.toggleQuality",
         options: [
-          { value: 'standard', labelKey: 'smartPlayground.qualityStd' },
-          { value: 'ultra', labelKey: 'smartPlayground.qualityUltra' },
-          { value: 'multi', labelKey: 'smartPlayground.qualityMulti' },
+          { value: "standard", labelKey: "smartPlayground.qualityStd" },
+          { value: "ultra", labelKey: "smartPlayground.qualityUltra" },
+          { value: "multi", labelKey: "smartPlayground.qualityMulti" },
         ],
-        default: 'standard',
+        default: "standard",
       },
     ],
     resolveVariant(filledFields, toggleValues) {
-      const hasImage = hasImageFilled(filledFields)
-      const quality = toggleValues.quality || 'standard'
+      const hasImage = hasImageFilled(filledFields);
+      const quality = toggleValues.quality || "standard";
       if (hasImage) {
-        if (quality === 'ultra') return 'google/nano-banana-pro/edit-ultra'
-        if (quality === 'multi') return 'google/nano-banana-pro/edit-multi'
-        return 'google/nano-banana-pro/edit'
+        if (quality === "ultra") return "google/nano-banana-pro/edit-ultra";
+        if (quality === "multi") return "google/nano-banana-pro/edit-multi";
+        return "google/nano-banana-pro/edit";
       }
-      if (quality === 'ultra') return 'google/nano-banana-pro/text-to-image-ultra'
-      if (quality === 'multi') return 'google/nano-banana-pro/text-to-image-multi'
-      return 'google/nano-banana-pro/text-to-image'
+      if (quality === "ultra")
+        return "google/nano-banana-pro/text-to-image-ultra";
+      if (quality === "multi")
+        return "google/nano-banana-pro/text-to-image-multi";
+      return "google/nano-banana-pro/text-to-image";
     },
   },
-]
+];
 
 export function findFamilyById(id: string): SmartFormFamily | undefined {
-  return SMART_FORM_FAMILIES.find(f => f.id === id)
+  return SMART_FORM_FAMILIES.find((f) => f.id === id);
 }
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 719faf84..4b5d5f88 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -6,48 +6,52 @@
  */
 
 function hasElectronState(): boolean {
-  return typeof window !== 'undefined' && !!window.electronAPI?.getState
+  return typeof window !== "undefined" && !!window.electronAPI?.getState;
 }
 
 export const persistentStorage = {
   async get<T = unknown>(key: string): Promise<T | null> {
     try {
       if (hasElectronState()) {
-        const v = await window.electronAPI.getState(key)
-        return (v ?? null) as T | null
+        const v = await window.electronAPI.getState(key);
+        return (v ?? null) as T | null;
       }
-      const raw = localStorage.getItem(key)
-      return raw ? JSON.parse(raw) : null
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
     } catch {
-      return null
+      return null;
     }
   },
 
   async set(key: string, value: unknown): Promise<void> {
     try {
       if (hasElectronState()) {
-        await window.electronAPI.setState(key, value)
+        await window.electronAPI.setState(key, value);
       }
-      localStorage.setItem(key, JSON.stringify(value))
-    } catch { /* ignore */ }
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch {
+      /* ignore */
+    }
   },
 
   async remove(key: string): Promise<void> {
     try {
       if (hasElectronState()) {
-        await window.electronAPI.removeState(key)
+        await window.electronAPI.removeState(key);
       }
-      localStorage.removeItem(key)
-    } catch { /* ignore */ }
+      localStorage.removeItem(key);
+    } catch {
+      /* ignore */
+    }
   },
 
   /** Synchronous read from localStorage only (for initial render before async hydrate). */
   getSync<T = unknown>(key: string): T | null {
     try {
-      const raw = localStorage.getItem(key)
-      return raw ? JSON.parse(raw) : null
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
     } catch {
-      return null
+      return null;
     }
   },
-}
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0b62d4ba..ca113d89 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -2,26 +2,26 @@
  * Generic utility functions (cross-module reusable).
  */
 
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 // Tailwind CSS class name merger
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
 
 // Re-export formatting utilities from progress.ts to avoid duplication
-export { formatBytes, formatTime } from '@/types/progress'
+export { formatBytes, formatTime } from "@/types/progress";
 
 /**
  * Check if a string is a valid URL
  */
 export function isValidUrl(urlString: string): boolean {
   try {
-    new URL(urlString)
-    return true
+    new URL(urlString);
+    return true;
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -30,27 +30,27 @@ export function isValidUrl(urlString: string): boolean {
  */
 export function sanitizeFilename(filename: string): string {
   return filename
-    .replace(/[<>:"/\\|?*]/g, '-') // Replace invalid Windows chars
-    .replace(/\s+/g, '-') // Replace spaces with dashes
-    .replace(/-+/g, '-') // Replace multiple dashes with single dash
-    .replace(/^-+|-+$/g, '') // Trim dashes from start/end
+    .replace(/[<>:"/\\|?*]/g, "-") // Replace invalid Windows chars
+    .replace(/\s+/g, "-") // Replace spaces with dashes
+    .replace(/-+/g, "-") // Replace multiple dashes with single dash
+    .replace(/^-+|-+$/g, ""); // Trim dashes from start/end
 }
 
 /**
  * Parse dimension string like "512x768" to {width, height}
  */
 export function parseDimensions(dimensionStr: string): {
-  width: number
-  height: number
+  width: number;
+  height: number;
 } | null {
-  const match = dimensionStr.match(/^(\d+)x(\d+)$/)
-  if (!match) return null
+  const match = dimensionStr.match(/^(\d+)x(\d+)$/);
+  if (!match) return null;
 
-  const width = parseInt(match[1], 10)
-  const height = parseInt(match[2], 10)
+  const width = parseInt(match[1], 10);
+  const height = parseInt(match[2], 10);
 
-  if (isNaN(width) || isNaN(height)) return null
-  if (width <= 0 || height <= 0) return null
+  if (isNaN(width) || isNaN(height)) return null;
+  if (width <= 0 || height <= 0) return null;
 
-  return { width, height }
+  return { width, height };
 }
diff --git a/src/lib/zImageModel.ts b/src/lib/zImageModel.ts
index 3ad9885d..b10f19fd 100644
--- a/src/lib/zImageModel.ts
+++ b/src/lib/zImageModel.ts
@@ -4,187 +4,192 @@
  * for local AI image generation via sd.cpp
  */
 
-import type { Model } from '@/types/model'
-import { PREDEFINED_MODELS } from '@/types/stable-diffusion'
+import type { Model } from "@/types/model";
+import { PREDEFINED_MODELS } from "@/types/stable-diffusion";
 
 // ZImage model ID prefix for detection
-export const ZIMAGE_MODEL_PREFIX = 'local/z-image'
+export const ZIMAGE_MODEL_PREFIX = "local/z-image";
 
 // Check if a model is a ZImage local model
 export function isZImageModel(modelId: string): boolean {
-  return modelId.startsWith(ZIMAGE_MODEL_PREFIX)
+  return modelId.startsWith(ZIMAGE_MODEL_PREFIX);
 }
 
 // Sampling methods available in sd.cpp
 const SAMPLING_METHODS = [
-  'euler',
-  'euler_a',
-  'heun',
-  'dpm2',
-  'dpm++2s_a',
-  'dpm++2m',
-  'dpm++2mv2',
-  'ipndm',
-  'ipndm_v',
-  'lcm',
-  'ddim_trailing',
-  'tcd'
-]
+  "euler",
+  "euler_a",
+  "heun",
+  "dpm2",
+  "dpm++2s_a",
+  "dpm++2m",
+  "dpm++2mv2",
+  "ipndm",
+  "ipndm_v",
+  "lcm",
+  "ddim_trailing",
+  "tcd",
+];
 
 // Schedulers available in sd.cpp
 const SCHEDULERS = [
-  'simple',
-  'discrete',
-  'karras',
-  'exponential',
-  'ays',
-  'gits',
-  'smoothstep',
-  'sgm_uniform',
-  'lcm'
-]
+  "simple",
+  "discrete",
+  "karras",
+  "exponential",
+  "ays",
+  "gits",
+  "smoothstep",
+  "sgm_uniform",
+  "lcm",
+];
 
 /**
  * Create the ZImage model schema for use with DynamicForm
  */
 function createZImageSchema() {
   // Get model options from predefined models
-  const modelOptions = PREDEFINED_MODELS.map(m => m.id)
+  const modelOptions = PREDEFINED_MODELS.map((m) => m.id);
 
   return {
-    type: 'object',
+    type: "object",
     properties: {
       model: {
-        type: 'string',
-        title: 'Model',
-        description: 'Select a local Z-Image model to use for generation',
+        type: "string",
+        title: "Model",
+        description: "Select a local Z-Image model to use for generation",
         enum: modelOptions,
-        default: 'z-image-turbo-q4-k'
+        default: "z-image-turbo-q4-k",
       },
       prompt: {
-        type: 'string',
-        title: 'Prompt',
-        description: 'Describe what you want to generate',
-        default: ''
+        type: "string",
+        title: "Prompt",
+        description: "Describe what you want to generate",
+        default: "",
       },
       negative_prompt: {
-        type: 'string',
-        title: 'Negative Prompt',
-        description: 'Describe what you want to avoid',
-        default: ''
+        type: "string",
+        title: "Negative Prompt",
+        description: "Describe what you want to avoid",
+        default: "",
       },
       size: {
-        type: 'string',
-        title: 'Size',
-        description: 'Image dimensions',
+        type: "string",
+        title: "Size",
+        description: "Image dimensions",
         minimum: 256,
         maximum: 1536,
-        default: '1024*1024'
+        default: "1024*1024",
       },
       steps: {
-        type: 'integer',
-        title: 'Steps',
-        description: 'Number of sampling steps (1-50)',
+        type: "integer",
+        title: "Steps",
+        description: "Number of sampling steps (1-50)",
         minimum: 1,
         maximum: 50,
         default: 4,
-        'x-ui-component': 'slider' as const
+        "x-ui-component": "slider" as const,
       },
       cfg_scale: {
-        type: 'number',
-        title: 'CFG Scale',
-        description: 'Classifier-free guidance scale (1-20)',
+        type: "number",
+        title: "CFG Scale",
+        description: "Classifier-free guidance scale (1-20)",
         minimum: 1,
         maximum: 20,
         step: 0.01,
         default: 1,
-        'x-ui-component': 'slider' as const
+        "x-ui-component": "slider" as const,
       },
       low_vram_mode: {
-        type: 'boolean',
-        title: 'Enable low VRAM mode',
-        description: 'Keep CLIP on CPU to reduce VRAM usage',
-        default: false
+        type: "boolean",
+        title: "Enable low VRAM mode",
+        description: "Keep CLIP on CPU to reduce VRAM usage",
+        default: false,
       },
       vae_tiling: {
-        type: 'boolean',
-        title: 'Enable VAE tiling',
-        description: 'Reduce VRAM usage during VAE decode',
-        default: false
+        type: "boolean",
+        title: "Enable VAE tiling",
+        description: "Reduce VRAM usage during VAE decode",
+        default: false,
       },
       seed: {
-        type: 'integer',
-        title: 'Seed',
-        description: 'Random seed for reproducibility (leave empty for random)'
+        type: "integer",
+        title: "Seed",
+        description: "Random seed for reproducibility (leave empty for random)",
       },
       sampling_method: {
-        type: 'string',
-        title: 'Sampling Method',
-        description: 'Algorithm for denoising',
+        type: "string",
+        title: "Sampling Method",
+        description: "Algorithm for denoising",
         enum: SAMPLING_METHODS,
-        default: 'euler'
+        default: "euler",
       },
       scheduler: {
-        type: 'string',
-        title: 'Scheduler',
-        description: 'Noise schedule type',
+        type: "string",
+        title: "Scheduler",
+        description: "Noise schedule type",
         enum: SCHEDULERS,
-        default: 'simple'
-      }
+        default: "simple",
+      },
     },
-    required: ['model', 'prompt'],
-    'x-order-properties': [
-      'model',
-      'prompt',
-      'negative_prompt',
-      'size',
-      'steps',
-      'cfg_scale',
-      'sampling_method',
-      'scheduler',
-      'low_vram_mode',
-      'vae_tiling',
-      'seed'
-    ]
-  }
+    required: ["model", "prompt"],
+    "x-order-properties": [
+      "model",
+      "prompt",
+      "negative_prompt",
+      "size",
+      "steps",
+      "cfg_scale",
+      "sampling_method",
+      "scheduler",
+      "low_vram_mode",
+      "vae_tiling",
+      "seed",
+    ],
+  };
 }
 
 /**
  * Create the ZImage Model object for the Playground
  */
 export function createZImageModel(): Model {
-  const schema = createZImageSchema()
+  const schema = createZImageSchema();
 
   return {
     model_id: `${ZIMAGE_MODEL_PREFIX}/turbo`,
-    name: 'Z-Image (Local)',
-    description: 'Run AI image generation locally on your computer using sd.cpp. No API key or internet required.',
-    type: 'image',
+    name: "Z-Image (Local)",
+    description:
+      "Run AI image generation locally on your computer using sd.cpp. No API key or internet required.",
+    type: "image",
     base_price: 0, // Free - runs locally
     sort_order: 10000, // Show at top
     api_schema: {
-      openapi: '3.0.0',
+      openapi: "3.0.0",
       info: {
-        title: 'Z-Image Local',
-        version: '1.0.0'
+        title: "Z-Image Local",
+        version: "1.0.0",
       },
       paths: {},
       components: {
         schemas: {
-          Request: schema
-        }
+          Request: schema,
+        },
       },
       // This is the format DynamicForm expects
-      api_schemas: [{
-        type: 'model_run',
-        request_schema: schema
-      }]
-    }
-  } as Model
+      api_schemas: [
+        {
+          type: "model_run",
+          request_schema: schema,
+        },
+      ],
+    },
+  } as Model;
 }
 
 /**
  * Default prompts for ZImage
  */
-export const ZIMAGE_DEFAULT_PROMPT = 'Portrait of a beautiful woman with elegant features, professional fashion photography, studio lighting, soft focus background, glamorous makeup, flowing hair, confident pose, haute couture dress, sophisticated aesthetic, photorealistic, high detail, 8k quality'
-export const ZIMAGE_DEFAULT_NEGATIVE_PROMPT = 'blurry, bad quality, low resolution, watermark, distorted, ugly, deformed, extra limbs, poorly drawn, bad anatomy'
+export const ZIMAGE_DEFAULT_PROMPT =
+  "Portrait of a beautiful woman with elegant features, professional fashion photography, studio lighting, soft focus background, glamorous makeup, flowing hair, confident pose, haute couture dress, sophisticated aesthetic, photorealistic, high detail, 8k quality";
+export const ZIMAGE_DEFAULT_NEGATIVE_PROMPT =
+  "blurry, bad quality, low resolution, watermark, distorted, ugly, deformed, extra limbs, poorly drawn, bad anatomy";
diff --git a/src/main.tsx b/src/main.tsx
index b58da0f8..0de21b43 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,24 +1,26 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { HashRouter } from 'react-router-dom'
-import App from './App'
-import './index.css'
-import './i18n'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HashRouter } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+import "./i18n";
 // Inject the electronAPI mock in browser environments.
-import './lib/electronAPI.web'
+import "./lib/electronAPI.web";
 
 // Mark document for Electron-specific CSS (e.g. titlebar overlay spacing)
-if (navigator.userAgent.toLowerCase().includes('electron')) {
-  document.documentElement.classList.add('is-electron')
+if (navigator.userAgent.toLowerCase().includes("electron")) {
+  document.documentElement.classList.add("is-electron");
   if (/mac/i.test(navigator.platform)) {
-    document.documentElement.classList.add('is-mac')
+    document.documentElement.classList.add("is-mac");
   }
 }
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+    <HashRouter
+      future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
+    >
       <App />
     </HashRouter>
-  </React.StrictMode>
-)
+  </React.StrictMode>,
+);
diff --git a/src/pages/AssetsPage.tsx b/src/pages/AssetsPage.tsx
index 9d742e6f..85284ebf 100644
--- a/src/pages/AssetsPage.tsx
+++ b/src/pages/AssetsPage.tsx
@@ -1,19 +1,19 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useAssetsStore } from '@/stores/assetsStore'
-import { formatBytes } from '@/types/progress'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Badge } from '@/components/ui/badge'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Label } from '@/components/ui/label'
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useAssetsStore } from "@/stores/assetsStore";
+import { formatBytes } from "@/types/progress";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from "@/components/ui/select";
 import {
   Dialog,
   DialogContent,
@@ -21,14 +21,14 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
+} from "@/components/ui/dropdown-menu";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -38,11 +38,11 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { toast } from '@/hooks/useToast'
-import { useInView } from '@/hooks/useInView'
-import { cn } from '@/lib/utils'
+} from "@/components/ui/alert-dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { toast } from "@/hooks/useToast";
+import { useInView } from "@/hooks/useInView";
+import { cn } from "@/lib/utils";
 import {
   Search,
   Loader2,
@@ -71,29 +71,34 @@ import {
   GitBranch,
   Wrench,
   Cpu,
-} from 'lucide-react'
-import type { AssetMetadata, AssetType, AssetSortBy, AssetsFilter } from '@/types/asset'
+} from "lucide-react";
+import type {
+  AssetMetadata,
+  AssetType,
+  AssetSortBy,
+  AssetsFilter,
+} from "@/types/asset";
 
 // Video preview component - shows first frame, plays on hover
 function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
 
   const handleMouseEnter = () => {
     if (videoRef.current && isLoaded && enabled) {
       videoRef.current.play().catch(() => {
         // Ignore autoplay errors
-      })
+      });
     }
-  }
+  };
 
   const handleMouseLeave = () => {
     if (videoRef.current) {
-      videoRef.current.pause()
-      videoRef.current.currentTime = 0
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
     }
-  }
+  };
 
   // Show placeholder if disabled or error
   if (!enabled || hasError) {
@@ -101,7 +106,7 @@ function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
       <div className="w-full h-full flex items-center justify-center">
         <Video className="h-12 w-12 text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   return (
@@ -127,48 +132,54 @@ function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
         onError={() => setHasError(true)}
       />
     </div>
-  )
+  );
 }
 
 // Asset type icon component
-function AssetTypeIcon({ type, className }: { type: AssetType; className?: string }) {
+function AssetTypeIcon({
+  type,
+  className,
+}: {
+  type: AssetType;
+  className?: string;
+}) {
   switch (type) {
-    case 'image':
-      return <Image className={className} />
-    case 'video':
-      return <Video className={className} />
-    case 'audio':
-      return <Music className={className} />
-    case 'text':
-    case 'json':
-      return <FileText className={className} />
+    case "image":
+      return <Image className={className} />;
+    case "video":
+      return <Video className={className} />;
+    case "audio":
+      return <Music className={className} />;
+    case "text":
+    case "json":
+      return <FileText className={className} />;
   }
 }
 
 // Format date
 function formatDate(dateStr: string): string {
-  const date = new Date(dateStr)
+  const date = new Date(dateStr);
   return date.toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  })
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
 }
 
 // Check if running in desktop mode
-const isDesktopMode = !!window.electronAPI?.saveAsset
+const isDesktopMode = !!window.electronAPI?.saveAsset;
 
 // Get asset URL for preview (local-asset:// in desktop for proper video/audio support)
 function getAssetUrl(asset: AssetMetadata): string {
   if (asset.filePath) {
     // Use custom protocol for local files to ensure proper media loading in Electron
-    return `local-asset://${encodeURIComponent(asset.filePath)}`
+    return `local-asset://${encodeURIComponent(asset.filePath)}`;
   }
-  return asset.originalUrl || ''
+  return asset.originalUrl || "";
 }
 
 export function AssetsPage() {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const {
     assets,
     isLoaded,
@@ -181,280 +192,327 @@ export function AssetsPage() {
     getAllTags,
     getAllModels,
     openAssetLocation,
-  } = useAssetsStore()
+  } = useAssetsStore();
 
   // Filter state
-  const [filter, setFilter] = useState<AssetsFilter>({})
-  const [searchQuery, setSearchQuery] = useState('')
-  const [showFilters, setShowFilters] = useState(false)
+  const [filter, setFilter] = useState<AssetsFilter>({});
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showFilters, setShowFilters] = useState(false);
 
   // Selection state
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-  const [isSelectionMode, setIsSelectionMode] = useState(false)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [isSelectionMode, setIsSelectionMode] = useState(false);
 
   // Dialog state
-  const [previewAsset, setPreviewAsset] = useState<AssetMetadata | null>(null)
-  const [deleteConfirmAsset, setDeleteConfirmAsset] = useState<AssetMetadata | null>(null)
-  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
-  const [tagDialogAsset, setTagDialogAsset] = useState<AssetMetadata | null>(null)
-  const [newTag, setNewTag] = useState('')
+  const [previewAsset, setPreviewAsset] = useState<AssetMetadata | null>(null);
+  const [deleteConfirmAsset, setDeleteConfirmAsset] =
+    useState<AssetMetadata | null>(null);
+  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);
+  const [tagDialogAsset, setTagDialogAsset] = useState<AssetMetadata | null>(
+    null,
+  );
+  const [newTag, setNewTag] = useState("");
 
   // Loading state
-  const [isDeleting, setIsDeleting] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false);
 
   // Pagination state
-  const [page, setPage] = useState(1)
-  const pageSize = 50
+  const [page, setPage] = useState(1);
+  const pageSize = 50;
 
   // Preview toggle
-  const [loadPreviews, setLoadPreviews] = useState(true)
-  const [loadedPreviewKeys, setLoadedPreviewKeys] = useState<Set<string>>(() => new Set())
+  const [loadPreviews, setLoadPreviews] = useState(true);
+  const [loadedPreviewKeys, setLoadedPreviewKeys] = useState<Set<string>>(
+    () => new Set(),
+  );
 
   const markPreviewLoaded = useCallback((key: string) => {
     setLoadedPreviewKeys((prev) => {
-      if (prev.has(key)) return prev
-      const next = new Set(prev)
-      next.add(key)
-      return next
-    })
-  }, [])
+      if (prev.has(key)) return prev;
+      const next = new Set(prev);
+      next.add(key);
+      return next;
+    });
+  }, []);
 
   // Load assets on mount
   useEffect(() => {
-    loadAssets()
-  }, [loadAssets])
+    loadAssets();
+  }, [loadAssets]);
 
   // Debounce search
   useEffect(() => {
     const timer = setTimeout(() => {
-      setFilter(f => ({ ...f, search: searchQuery }))
-    }, 300)
-    return () => clearTimeout(timer)
-  }, [searchQuery])
+      setFilter((f) => ({ ...f, search: searchQuery }));
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
 
   // Reset page when filter changes
   useEffect(() => {
-    setPage(1)
-  }, [filter])
+    setPage(1);
+  }, [filter]);
 
   // Get filtered assets
   const filteredAssets = useMemo(() => {
-    return getFilteredAssets(filter)
-  }, [getFilteredAssets, filter, assets])
+    return getFilteredAssets(filter);
+  }, [getFilteredAssets, filter, assets]);
 
   // Pagination
-  const totalPages = Math.ceil(filteredAssets.length / pageSize)
+  const totalPages = Math.ceil(filteredAssets.length / pageSize);
   const paginatedAssets = useMemo(() => {
-    const start = (page - 1) * pageSize
-    return filteredAssets.slice(start, start + pageSize)
-  }, [filteredAssets, page, pageSize])
+    const start = (page - 1) * pageSize;
+    return filteredAssets.slice(start, start + pageSize);
+  }, [filteredAssets, page, pageSize]);
 
   // Get all tags and models for filters
-  const allTags = useMemo(() => getAllTags(), [getAllTags, assets])
-  const allModels = useMemo(() => getAllModels(), [getAllModels, assets])
+  const allTags = useMemo(() => getAllTags(), [getAllTags, assets]);
+  const allModels = useMemo(() => getAllModels(), [getAllModels, assets]);
 
   // Handlers
-  const handleTypeFilterChange = useCallback((type: AssetType, checked: boolean) => {
-    setFilter(f => {
-      const currentTypes = f.types || []
-      if (checked) {
-        return { ...f, types: [...currentTypes, type] }
-      }
-      return { ...f, types: currentTypes.filter(t => t !== type) }
-    })
-  }, [])
+  const handleTypeFilterChange = useCallback(
+    (type: AssetType, checked: boolean) => {
+      setFilter((f) => {
+        const currentTypes = f.types || [];
+        if (checked) {
+          return { ...f, types: [...currentTypes, type] };
+        }
+        return { ...f, types: currentTypes.filter((t) => t !== type) };
+      });
+    },
+    [],
+  );
 
   const handleModelFilterChange = useCallback((modelId: string) => {
-    setFilter(f => ({
+    setFilter((f) => ({
       ...f,
-      models: modelId === 'all' ? undefined : [modelId]
-    }))
-  }, [])
+      models: modelId === "all" ? undefined : [modelId],
+    }));
+  }, []);
 
   const handleFavoritesFilterChange = useCallback((checked: boolean) => {
-    setFilter(f => ({ ...f, favoritesOnly: checked }))
-  }, [])
+    setFilter((f) => ({ ...f, favoritesOnly: checked }));
+  }, []);
 
   const handleClearFilters = useCallback(() => {
-    setFilter({})
-    setSearchQuery('')
-  }, [])
-
-  const handleToggleFavorite = useCallback(async (asset: AssetMetadata) => {
-    await updateAsset(asset.id, { favorite: !asset.favorite })
-  }, [updateAsset])
-
-  const handleDelete = useCallback(async (asset: AssetMetadata) => {
-    setIsDeleting(true)
-    try {
-      await deleteAsset(asset.id)
-      toast({
-        title: t('assets.deleted'),
-        description: t('assets.deletedDesc', { name: asset.fileName }),
-      })
-    } catch {
-      toast({
-        title: t('common.error'),
-        description: t('assets.deleteFailed'),
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDeleting(false)
-      setDeleteConfirmAsset(null)
-    }
-  }, [deleteAsset, t])
+    setFilter({});
+    setSearchQuery("");
+  }, []);
+
+  const handleToggleFavorite = useCallback(
+    async (asset: AssetMetadata) => {
+      await updateAsset(asset.id, { favorite: !asset.favorite });
+    },
+    [updateAsset],
+  );
+
+  const handleDelete = useCallback(
+    async (asset: AssetMetadata) => {
+      setIsDeleting(true);
+      try {
+        await deleteAsset(asset.id);
+        toast({
+          title: t("assets.deleted"),
+          description: t("assets.deletedDesc", { name: asset.fileName }),
+        });
+      } catch {
+        toast({
+          title: t("common.error"),
+          description: t("assets.deleteFailed"),
+          variant: "destructive",
+        });
+      } finally {
+        setIsDeleting(false);
+        setDeleteConfirmAsset(null);
+      }
+    },
+    [deleteAsset, t],
+  );
 
   const handleBulkDelete = useCallback(async () => {
-    setIsDeleting(true)
+    setIsDeleting(true);
     try {
-      const count = await deleteAssets(Array.from(selectedIds))
+      const count = await deleteAssets(Array.from(selectedIds));
       toast({
-        title: t('assets.deletedBulk'),
-        description: t('assets.deletedBulkDesc', { count }),
-      })
-      setSelectedIds(new Set())
-      setIsSelectionMode(false)
+        title: t("assets.deletedBulk"),
+        description: t("assets.deletedBulkDesc", { count }),
+      });
+      setSelectedIds(new Set());
+      setIsSelectionMode(false);
     } catch {
       toast({
-        title: t('common.error'),
-        description: t('assets.deleteFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description: t("assets.deleteFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsDeleting(false)
-      setShowBulkDeleteConfirm(false)
-    }
-  }, [deleteAssets, selectedIds, t])
-
-  const handleBulkFavorite = useCallback(async (favorite: boolean) => {
-    const ids = Array.from(selectedIds)
-    for (const id of ids) {
-      await updateAsset(id, { favorite })
+      setIsDeleting(false);
+      setShowBulkDeleteConfirm(false);
     }
-    toast({
-      title: favorite ? t('assets.addedToFavorites') : t('assets.removedFromFavorites'),
-      description: t('assets.bulkFavoriteDesc', { count: ids.length }),
-    })
-  }, [selectedIds, updateAsset, t])
+  }, [deleteAssets, selectedIds, t]);
 
-  const handleOpenLocation = useCallback(async (asset: AssetMetadata) => {
-    await openAssetLocation(asset.id)
-  }, [openAssetLocation])
-
-  const handleDownload = useCallback((asset: AssetMetadata) => {
-    // For local files, open in file explorer instead of downloading
-    if (asset.filePath) {
-      openAssetLocation(asset.id)
-      return
-    }
-    
-    const url = asset.originalUrl
-    if (!url) return
+  const handleBulkFavorite = useCallback(
+    async (favorite: boolean) => {
+      const ids = Array.from(selectedIds);
+      for (const id of ids) {
+        await updateAsset(id, { favorite });
+      }
+      toast({
+        title: favorite
+          ? t("assets.addedToFavorites")
+          : t("assets.removedFromFavorites"),
+        description: t("assets.bulkFavoriteDesc", { count: ids.length }),
+      });
+    },
+    [selectedIds, updateAsset, t],
+  );
+
+  const handleOpenLocation = useCallback(
+    async (asset: AssetMetadata) => {
+      await openAssetLocation(asset.id);
+    },
+    [openAssetLocation],
+  );
+
+  const handleDownload = useCallback(
+    (asset: AssetMetadata) => {
+      // For local files, open in file explorer instead of downloading
+      if (asset.filePath) {
+        openAssetLocation(asset.id);
+        return;
+      }
 
-    // Create a temporary link and trigger download for remote URLs
-    const link = document.createElement('a')
-    link.href = url
-    link.download = asset.fileName
-    link.target = '_blank'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }, [openAssetLocation])
+      const url = asset.originalUrl;
+      if (!url) return;
+
+      // Create a temporary link and trigger download for remote URLs
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = asset.fileName;
+      link.target = "_blank";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+    [openAssetLocation],
+  );
 
   const handleSelectAll = useCallback(() => {
     if (selectedIds.size === filteredAssets.length) {
-      setSelectedIds(new Set())
+      setSelectedIds(new Set());
     } else {
-      setSelectedIds(new Set(filteredAssets.map(a => a.id)))
+      setSelectedIds(new Set(filteredAssets.map((a) => a.id)));
     }
-  }, [filteredAssets, selectedIds.size])
+  }, [filteredAssets, selectedIds.size]);
 
   const handleToggleSelect = useCallback((assetId: string) => {
-    setSelectedIds(prev => {
-      const next = new Set(prev)
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
       if (next.has(assetId)) {
-        next.delete(assetId)
+        next.delete(assetId);
       } else {
-        next.add(assetId)
+        next.add(assetId);
       }
-      return next
-    })
-  }, [])
+      return next;
+    });
+  }, []);
 
   const handleAddTag = useCallback(async () => {
-    if (!tagDialogAsset || !newTag.trim()) return
-    const currentTags = tagDialogAsset.tags || []
+    if (!tagDialogAsset || !newTag.trim()) return;
+    const currentTags = tagDialogAsset.tags || [];
     if (!currentTags.includes(newTag.trim())) {
-      await updateAsset(tagDialogAsset.id, { tags: [...currentTags, newTag.trim()] })
+      await updateAsset(tagDialogAsset.id, {
+        tags: [...currentTags, newTag.trim()],
+      });
     }
-    setNewTag('')
-  }, [tagDialogAsset, newTag, updateAsset])
-
-  const handleRemoveTag = useCallback(async (asset: AssetMetadata, tag: string) => {
-    await updateAsset(asset.id, { tags: asset.tags.filter(t => t !== tag) })
-  }, [updateAsset])
-
+    setNewTag("");
+  }, [tagDialogAsset, newTag, updateAsset]);
+
+  const handleRemoveTag = useCallback(
+    async (asset: AssetMetadata, tag: string) => {
+      await updateAsset(asset.id, {
+        tags: asset.tags.filter((t) => t !== tag),
+      });
+    },
+    [updateAsset],
+  );
 
   const handleOpenAssetsFolder = useCallback(async () => {
     if (window.electronAPI?.openAssetsFolder) {
-      await window.electronAPI.openAssetsFolder()
+      await window.electronAPI.openAssetsFolder();
     }
-  }, [])
+  }, []);
 
   // Navigate to previous/next asset in preview (with loop support)
-  const navigateAsset = useCallback((direction: 'prev' | 'next') => {
-    if (!previewAsset || paginatedAssets.length <= 1) return
-    const currentIdx = paginatedAssets.findIndex(a => a.id === previewAsset.id)
-    if (currentIdx === -1) return
-    let newIdx: number
-    if (direction === 'prev') {
-      newIdx = currentIdx === 0 ? paginatedAssets.length - 1 : currentIdx - 1
-    } else {
-      newIdx = currentIdx === paginatedAssets.length - 1 ? 0 : currentIdx + 1
-    }
-    setPreviewAsset(paginatedAssets[newIdx])
-  }, [previewAsset, paginatedAssets])
+  const navigateAsset = useCallback(
+    (direction: "prev" | "next") => {
+      if (!previewAsset || paginatedAssets.length <= 1) return;
+      const currentIdx = paginatedAssets.findIndex(
+        (a) => a.id === previewAsset.id,
+      );
+      if (currentIdx === -1) return;
+      let newIdx: number;
+      if (direction === "prev") {
+        newIdx = currentIdx === 0 ? paginatedAssets.length - 1 : currentIdx - 1;
+      } else {
+        newIdx = currentIdx === paginatedAssets.length - 1 ? 0 : currentIdx + 1;
+      }
+      setPreviewAsset(paginatedAssets[newIdx]);
+    },
+    [previewAsset, paginatedAssets],
+  );
 
   // Keyboard navigation for preview dialog
   useEffect(() => {
-    if (!previewAsset) return
+    if (!previewAsset) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        navigateAsset('prev')
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        navigateAsset('next')
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        navigateAsset("prev");
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        navigateAsset("next");
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [previewAsset, navigateAsset])
-
-  const AssetCard = ({ asset, assetKey }: { asset: AssetMetadata; assetKey: string }) => {
-    const { ref, isInView } = useInView<HTMLDivElement>()
-    const assetUrl = getAssetUrl(asset)
-    const shouldLoad = loadPreviews && (isInView || loadedPreviewKeys.has(assetKey))
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [previewAsset, navigateAsset]);
+
+  const AssetCard = ({
+    asset,
+    assetKey,
+  }: {
+    asset: AssetMetadata;
+    assetKey: string;
+  }) => {
+    const { ref, isInView } = useInView<HTMLDivElement>();
+    const assetUrl = getAssetUrl(asset);
+    const shouldLoad =
+      loadPreviews && (isInView || loadedPreviewKeys.has(assetKey));
 
     useEffect(() => {
-      if (!loadPreviews || !isInView || !assetUrl) return
-      markPreviewLoaded(assetKey)
-    }, [assetKey, assetUrl, isInView, loadPreviews, markPreviewLoaded])
+      if (!loadPreviews || !isInView || !assetUrl) return;
+      markPreviewLoaded(assetKey);
+    }, [assetKey, assetUrl, isInView, loadPreviews, markPreviewLoaded]);
 
     return (
       <div
         className={cn(
           "group relative overflow-hidden rounded-xl border border-border/70 bg-card/85 shadow-sm transition-all hover:shadow-md",
-          selectedIds.has(asset.id) && "ring-2 ring-primary"
+          selectedIds.has(asset.id) && "ring-2 ring-primary",
         )}
       >
         {/* Thumbnail */}
         <div
           ref={ref}
           className="aspect-square bg-muted flex items-center justify-center cursor-pointer"
-          onClick={() => isSelectionMode ? handleToggleSelect(asset.id) : setPreviewAsset(asset)}
+          onClick={() =>
+            isSelectionMode
+              ? handleToggleSelect(asset.id)
+              : setPreviewAsset(asset)
+          }
         >
-          {asset.type === 'image' && shouldLoad && assetUrl ? (
+          {asset.type === "image" && shouldLoad && assetUrl ? (
             <img
               src={assetUrl}
               alt={asset.fileName}
@@ -462,15 +520,21 @@ export function AssetsPage() {
               loading="lazy"
               decoding="async"
             />
-          ) : asset.type === 'video' && shouldLoad && assetUrl ? (
+          ) : asset.type === "video" && shouldLoad && assetUrl ? (
             <VideoPreview src={assetUrl} enabled={shouldLoad} />
           ) : (
-            <AssetTypeIcon type={asset.type} className="h-12 w-12 text-muted-foreground" />
+            <AssetTypeIcon
+              type={asset.type}
+              className="h-12 w-12 text-muted-foreground"
+            />
           )}
 
           {/* Selection checkbox overlay */}
           {isSelectionMode && (
-            <div className="absolute top-2 left-2" onClick={(e) => e.stopPropagation()}>
+            <div
+              className="absolute top-2 left-2"
+              onClick={(e) => e.stopPropagation()}
+            >
               <Checkbox
                 checked={selectedIds.has(asset.id)}
                 onCheckedChange={() => handleToggleSelect(asset.id)}
@@ -491,30 +555,37 @@ export function AssetsPage() {
             variant="secondary"
             className={cn(
               "absolute text-xs",
-              isSelectionMode ? "top-9 left-2" : "top-2 left-2"
+              isSelectionMode ? "top-9 left-2" : "top-2 left-2",
             )}
           >
             <AssetTypeIcon type={asset.type} className="h-3 w-3 mr-1" />
             {t(`assets.types.${asset.type}`)}
           </Badge>
-
-
         </div>
 
         {/* Info */}
         <div className="p-2">
           <div className="flex items-start justify-between gap-1">
             <div className="min-w-0 flex-1">
-              <p className="text-sm font-medium truncate" title={asset.fileName}>
+              <p
+                className="text-sm font-medium truncate"
+                title={asset.fileName}
+              >
                 {asset.fileName}
               </p>
-              {asset.source === 'workflow' && asset.workflowName ? (
-                <p className="text-xs text-blue-400 truncate flex items-center gap-1" title={`Workflow: ${asset.workflowName}`}>
+              {asset.source === "workflow" && asset.workflowName ? (
+                <p
+                  className="text-xs text-blue-400 truncate flex items-center gap-1"
+                  title={`Workflow: ${asset.workflowName}`}
+                >
                   <GitBranch className="h-3 w-3 shrink-0" />
                   {asset.workflowName}
                 </p>
               ) : (
-                <p className="text-xs text-muted-foreground truncate" title={asset.modelId}>
+                <p
+                  className="text-xs text-muted-foreground truncate"
+                  title={asset.modelId}
+                >
                   {asset.modelId}
                 </p>
               )}
@@ -526,33 +597,44 @@ export function AssetsPage() {
             {/* Actions */}
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:text-foreground">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
+                >
                   <MoreVertical className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuItem onClick={() => setPreviewAsset(asset)}>
                   <Eye className="mr-2 h-4 w-4" />
-                  {t('assets.preview')}
+                  {t("assets.preview")}
                 </DropdownMenuItem>
                 {isDesktopMode ? (
                   <DropdownMenuItem onClick={() => handleOpenLocation(asset)}>
                     <FolderOpen className="mr-2 h-4 w-4" />
-                    {t('assets.openLocation')}
+                    {t("assets.openLocation")}
                   </DropdownMenuItem>
                 ) : (
                   <DropdownMenuItem onClick={() => handleDownload(asset)}>
                     <Download className="mr-2 h-4 w-4" />
-                    {t('common.download')}
+                    {t("common.download")}
                   </DropdownMenuItem>
                 )}
                 <DropdownMenuItem onClick={() => handleToggleFavorite(asset)}>
-                  <Star className={cn("mr-2 h-4 w-4", asset.favorite && "fill-yellow-400")} />
-                  {asset.favorite ? t('assets.unfavorite') : t('assets.favorite')}
+                  <Star
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      asset.favorite && "fill-yellow-400",
+                    )}
+                  />
+                  {asset.favorite
+                    ? t("assets.unfavorite")
+                    : t("assets.favorite")}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => setTagDialogAsset(asset)}>
                   <Tag className="mr-2 h-4 w-4" />
-                  {t('assets.manageTags')}
+                  {t("assets.manageTags")}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem
@@ -560,7 +642,7 @@ export function AssetsPage() {
                   className="text-destructive"
                 >
                   <Trash2 className="mr-2 h-4 w-4" />
-                  {t('common.delete')}
+                  {t("common.delete")}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -570,12 +652,19 @@ export function AssetsPage() {
           {asset.tags.length > 0 && (
             <div className="flex flex-wrap gap-1 mt-2">
               {asset.tags.slice(0, 3).map((tag) => (
-                <Badge key={tag} variant="outline" className="rounded-md border-border/70 bg-background text-xs">
+                <Badge
+                  key={tag}
+                  variant="outline"
+                  className="rounded-md border-border/70 bg-background text-xs"
+                >
                   {tag}
                 </Badge>
               ))}
               {asset.tags.length > 3 && (
-                <Badge variant="outline" className="rounded-md border-border/70 bg-background text-xs">
+                <Badge
+                  variant="outline"
+                  className="rounded-md border-border/70 bg-background text-xs"
+                >
                   +{asset.tags.length - 3}
                 </Badge>
               )}
@@ -583,15 +672,15 @@ export function AssetsPage() {
           )}
         </div>
       </div>
-    )
-  }
+    );
+  };
 
   if (isLoading || !isLoaded) {
     return (
       <div className="flex h-full items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   return (
@@ -601,10 +690,10 @@ export function AssetsPage() {
         <div className="flex flex-col gap-1.5 md:flex-row md:items-baseline md:gap-3 mb-4">
           <h1 className="flex items-center gap-2 text-xl md:text-2xl font-bold tracking-tight">
             <FolderHeart className="h-5 w-5 text-primary" />
-            {t('assets.title')}
+            {t("assets.title")}
           </h1>
           <p className="text-xs md:text-sm text-muted-foreground">
-            {t('assets.subtitle', { count: assets.length })}
+            {t("assets.subtitle", { count: assets.length })}
           </p>
         </div>
 
@@ -613,38 +702,52 @@ export function AssetsPage() {
           <div className="relative w-56">
             <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
-              placeholder={t('assets.searchPlaceholder')}
+              placeholder={t("assets.searchPlaceholder")}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               className="h-9 rounded-lg border-border/80 bg-background pl-9"
             />
           </div>
           <Select
-            value={filter.sortBy || 'date-desc'}
-            onValueChange={(value) => setFilter(f => ({ ...f, sortBy: value as AssetSortBy }))}
+            value={filter.sortBy || "date-desc"}
+            onValueChange={(value) =>
+              setFilter((f) => ({ ...f, sortBy: value as AssetSortBy }))
+            }
           >
             <SelectTrigger className="h-9 w-full rounded-lg border-border/80 bg-background sm:w-[170px]">
               <ArrowUpDown className="mr-2 h-4 w-4" />
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="date-desc">{t('assets.sort.dateNewest')}</SelectItem>
-              <SelectItem value="date-asc">{t('assets.sort.dateOldest')}</SelectItem>
-              <SelectItem value="name-asc">{t('assets.sort.nameAZ')}</SelectItem>
-              <SelectItem value="name-desc">{t('assets.sort.nameZA')}</SelectItem>
-              <SelectItem value="size-desc">{t('assets.sort.sizeLargest')}</SelectItem>
-              <SelectItem value="size-asc">{t('assets.sort.sizeSmallest')}</SelectItem>
+              <SelectItem value="date-desc">
+                {t("assets.sort.dateNewest")}
+              </SelectItem>
+              <SelectItem value="date-asc">
+                {t("assets.sort.dateOldest")}
+              </SelectItem>
+              <SelectItem value="name-asc">
+                {t("assets.sort.nameAZ")}
+              </SelectItem>
+              <SelectItem value="name-desc">
+                {t("assets.sort.nameZA")}
+              </SelectItem>
+              <SelectItem value="size-desc">
+                {t("assets.sort.sizeLargest")}
+              </SelectItem>
+              <SelectItem value="size-asc">
+                {t("assets.sort.sizeSmallest")}
+              </SelectItem>
             </SelectContent>
           </Select>
           <Select
-            value={(filter.models && filter.models[0]) || 'all'}
+            value={(filter.models && filter.models[0]) || "all"}
             onValueChange={handleModelFilterChange}
           >
             <SelectTrigger className="h-9 w-full rounded-lg border-border/80 bg-background sm:w-[170px]">
-              <SelectValue placeholder={t('assets.allModels')} />
+              <SelectValue placeholder={t("assets.allModels")} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{t('assets.allModels')}</SelectItem>
+              <SelectItem value="all">{t("assets.allModels")}</SelectItem>
               {allModels.map((modelId) => (
                 <SelectItem key={modelId} value={modelId}>
                   {modelId}
@@ -653,10 +756,14 @@ export function AssetsPage() {
             </SelectContent>
           </Select>
           <Button
-            variant={loadPreviews ? 'default' : 'outline'}
+            variant={loadPreviews ? "default" : "outline"}
             size="icon"
             onClick={() => setLoadPreviews(!loadPreviews)}
-            title={loadPreviews ? t('assets.disablePreviews') : t('assets.loadPreviews')}
+            title={
+              loadPreviews
+                ? t("assets.disablePreviews")
+                : t("assets.loadPreviews")
+            }
             className="h-9 w-9 rounded-lg"
           >
             {loadPreviews ? (
@@ -666,16 +773,18 @@ export function AssetsPage() {
             )}
           </Button>
           <Button
-            variant={filter.favoritesOnly ? 'default' : 'outline'}
+            variant={filter.favoritesOnly ? "default" : "outline"}
             size="icon"
             onClick={() => handleFavoritesFilterChange(!filter.favoritesOnly)}
-            title={t('assets.showFavoritesOnly')}
+            title={t("assets.showFavoritesOnly")}
             className="h-9 w-9 rounded-lg"
           >
-            <Star className={cn('h-4 w-4', filter.favoritesOnly && 'fill-current')} />
+            <Star
+              className={cn("h-4 w-4", filter.favoritesOnly && "fill-current")}
+            />
           </Button>
           <Button
-            variant={showFilters ? 'default' : 'outline'}
+            variant={showFilters ? "default" : "outline"}
             size="icon"
             onClick={() => setShowFilters(!showFilters)}
             className="h-9 w-9 rounded-lg"
@@ -689,12 +798,12 @@ export function AssetsPage() {
                 {selectedIds.size === filteredAssets.length ? (
                   <>
                     <Square className="mr-2 h-4 w-4" />
-                    {t('assets.deselectAll')}
+                    {t("assets.deselectAll")}
                   </>
                 ) : (
                   <>
                     <CheckSquare className="mr-2 h-4 w-4" />
-                    {t('assets.selectAll')}
+                    {t("assets.selectAll")}
                   </>
                 )}
               </Button>
@@ -706,7 +815,7 @@ export function AssetsPage() {
                     onClick={() => handleBulkFavorite(true)}
                   >
                     <Star className="mr-2 h-4 w-4" />
-                    {t('assets.addToFavorites')}
+                    {t("assets.addToFavorites")}
                   </Button>
                   <Button
                     variant="outline"
@@ -714,7 +823,7 @@ export function AssetsPage() {
                     onClick={() => handleBulkFavorite(false)}
                   >
                     <Star className="mr-2 h-4 w-4" />
-                    {t('assets.removeFromFavorites')}
+                    {t("assets.removeFromFavorites")}
                   </Button>
                   <Button
                     variant="destructive"
@@ -722,7 +831,7 @@ export function AssetsPage() {
                     onClick={() => setShowBulkDeleteConfirm(true)}
                   >
                     <Trash2 className="mr-2 h-4 w-4" />
-                    {t('assets.deleteSelected', { count: selectedIds.size })}
+                    {t("assets.deleteSelected", { count: selectedIds.size })}
                   </Button>
                 </>
               )}
@@ -730,8 +839,8 @@ export function AssetsPage() {
                 variant="ghost"
                 size="sm"
                 onClick={() => {
-                  setIsSelectionMode(false)
-                  setSelectedIds(new Set())
+                  setIsSelectionMode(false);
+                  setSelectedIds(new Set());
                 }}
               >
                 <X className="h-4 w-4" />
@@ -745,12 +854,16 @@ export function AssetsPage() {
                 onClick={() => setIsSelectionMode(true)}
               >
                 <CheckSquare className="mr-2 h-4 w-4" />
-                {t('assets.select')}
+                {t("assets.select")}
               </Button>
               {isDesktopMode && (
-                <Button variant="outline" size="sm" onClick={handleOpenAssetsFolder}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleOpenAssetsFolder}
+                >
                   <FolderOpen className="mr-2 h-4 w-4" />
-                  {t('assets.openFolder')}
+                  {t("assets.openFolder")}
                 </Button>
               )}
             </>
@@ -760,65 +873,86 @@ export function AssetsPage() {
         {/* Filter Panel */}
         {showFilters && (
           <div className="mt-3 space-y-2">
-        {/* Source tabs */}
-        <div className="flex items-end gap-0.5">
-          {([
-            { value: 'playground' as const, label: 'Playground', icon: Sparkles },
-            { value: 'workflow' as const, label: 'Workflow', icon: GitBranch },
-            { value: 'free-tool' as const, label: 'Free Tool', icon: Wrench },
-            { value: 'z-image' as const, label: 'Z-Image', icon: Cpu },
-          ]).map(({ value, label, icon: Icon }) => {
-            const isActive = (filter.sources || []).includes(value)
-            return (
-              <button
-                key={value}
-                onClick={() => {
-                  setFilter(f => {
-                    const current = f.sources || []
-                    return { ...f, sources: isActive ? current.filter(s => s !== value) : [...current, value] }
-                  })
-                }}
-                className={cn(
-                  'relative inline-flex items-center gap-1.5 px-3 pb-2 text-[13px] font-medium transition-colors',
-                  'cursor-pointer select-none',
-                  isActive
-                    ? 'text-primary'
-                    : 'text-muted-foreground/60 hover:text-muted-foreground'
-                )}
-              >
-                <Icon className="h-3.5 w-3.5" />
-                {label}
-                <span className={cn(
-                  'absolute bottom-0 left-[6%] right-[6%] h-[2.5px] rounded-full transition-colors',
-                  isActive ? 'bg-primary' : 'bg-muted-foreground/25'
-                )} />
-              </button>
-            )
-          })}
-        </div>
-
-            {/* Type pills */}
-            <div className="flex flex-wrap items-center gap-1.5 pl-3">
-              {(['image', 'video', 'audio', 'text'] as AssetType[]).map((type) => {
-                const isActive = (filter.types || []).includes(type)
+            {/* Source tabs */}
+            <div className="flex items-end gap-0.5">
+              {[
+                {
+                  value: "playground" as const,
+                  label: "Playground",
+                  icon: Sparkles,
+                },
+                {
+                  value: "workflow" as const,
+                  label: "Workflow",
+                  icon: GitBranch,
+                },
+                {
+                  value: "free-tool" as const,
+                  label: "Free Tool",
+                  icon: Wrench,
+                },
+                { value: "z-image" as const, label: "Z-Image", icon: Cpu },
+              ].map(({ value, label, icon: Icon }) => {
+                const isActive = (filter.sources || []).includes(value);
                 return (
                   <button
-                    key={type}
-                    onClick={() => handleTypeFilterChange(type, !isActive)}
+                    key={value}
+                    onClick={() => {
+                      setFilter((f) => {
+                        const current = f.sources || [];
+                        return {
+                          ...f,
+                          sources: isActive
+                            ? current.filter((s) => s !== value)
+                            : [...current, value],
+                        };
+                      });
+                    }}
                     className={cn(
-                      'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-all',
-                      'cursor-pointer select-none',
+                      "relative inline-flex items-center gap-1.5 px-3 pb-2 text-[13px] font-medium transition-colors",
+                      "cursor-pointer select-none",
                       isActive
-                        ? 'bg-primary text-primary-foreground shadow-sm'
-                        : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground'
+                        ? "text-primary"
+                        : "text-muted-foreground/60 hover:text-muted-foreground",
                     )}
                   >
-                    <AssetTypeIcon type={type} className="h-3.5 w-3.5" />
-                    {t(`assets.typesPlural.${type}`)}
+                    <Icon className="h-3.5 w-3.5" />
+                    {label}
+                    <span
+                      className={cn(
+                        "absolute bottom-0 left-[6%] right-[6%] h-[2.5px] rounded-full transition-colors",
+                        isActive ? "bg-primary" : "bg-muted-foreground/25",
+                      )}
+                    />
                   </button>
-                )
+                );
               })}
             </div>
+
+            {/* Type pills */}
+            <div className="flex flex-wrap items-center gap-1.5 pl-3">
+              {(["image", "video", "audio", "text"] as AssetType[]).map(
+                (type) => {
+                  const isActive = (filter.types || []).includes(type);
+                  return (
+                    <button
+                      key={type}
+                      onClick={() => handleTypeFilterChange(type, !isActive)}
+                      className={cn(
+                        "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-all",
+                        "cursor-pointer select-none",
+                        isActive
+                          ? "bg-primary text-primary-foreground shadow-sm"
+                          : "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground",
+                      )}
+                    >
+                      <AssetTypeIcon type={type} className="h-3.5 w-3.5" />
+                      {t(`assets.typesPlural.${type}`)}
+                    </button>
+                  );
+                },
+              )}
+            </div>
           </div>
         )}
       </div>
@@ -828,18 +962,22 @@ export function AssetsPage() {
         {filteredAssets.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full p-8 text-center">
             <FolderOpen className="h-16 w-16 text-muted-foreground mb-4" />
-            <h2 className="text-lg font-semibold mb-2">{t('assets.noAssets')}</h2>
+            <h2 className="text-lg font-semibold mb-2">
+              {t("assets.noAssets")}
+            </h2>
             <p className="text-muted-foreground mb-4 max-w-md">
               {assets.length === 0
-                ? t('assets.noAssetsDesc')
-                : t('assets.noMatchingAssets')}
+                ? t("assets.noAssetsDesc")
+                : t("assets.noMatchingAssets")}
             </p>
           </div>
         ) : (
           <div className="grid grid-cols-2 gap-4 p-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
             {paginatedAssets.map((asset) => {
-              const assetKey = asset.filePath || asset.originalUrl || asset.id
-              return <AssetCard key={assetKey} asset={asset} assetKey={assetKey} />
+              const assetKey = asset.filePath || asset.originalUrl || asset.id;
+              return (
+                <AssetCard key={assetKey} asset={asset} assetKey={assetKey} />
+              );
             })}
           </div>
         )}
@@ -849,25 +987,27 @@ export function AssetsPage() {
       {totalPages > 1 && (
         <div className="flex items-center justify-between border-t border-border/70 bg-background/70 p-4 backdrop-blur">
           <p className="text-sm text-muted-foreground">
-            {(page - 1) * pageSize + 1} - {Math.min(page * pageSize, filteredAssets.length)} / {filteredAssets.length}
+            {(page - 1) * pageSize + 1} -{" "}
+            {Math.min(page * pageSize, filteredAssets.length)} /{" "}
+            {filteredAssets.length}
           </p>
           <div className="flex gap-2">
             <Button
               variant="outline"
               size="sm"
-              onClick={() => setPage(p => p - 1)}
+              onClick={() => setPage((p) => p - 1)}
               disabled={page === 1}
             >
               <ChevronLeft className="h-4 w-4" />
-              {t('common.previous')}
+              {t("common.previous")}
             </Button>
             <Button
               variant="outline"
               size="sm"
-              onClick={() => setPage(p => p + 1)}
+              onClick={() => setPage((p) => p + 1)}
               disabled={page >= totalPages}
             >
-              {t('common.next')}
+              {t("common.next")}
               <ChevronRight className="h-4 w-4" />
             </Button>
           </div>
@@ -882,15 +1022,24 @@ export function AssetsPage() {
               {previewAsset?.fileName}
               {paginatedAssets.length > 1 && previewAsset && (
                 <span className="text-sm font-normal text-muted-foreground">
-                  ({paginatedAssets.findIndex(a => a.id === previewAsset.id) + 1}/{paginatedAssets.length})
+                  (
+                  {paginatedAssets.findIndex((a) => a.id === previewAsset.id) +
+                    1}
+                  /{paginatedAssets.length})
                 </span>
               )}
             </DialogTitle>
             <DialogDescription>
-              {previewAsset?.modelId} · {previewAsset && formatDate(previewAsset.createdAt)}
-              {previewAsset?.source === 'workflow' && previewAsset?.workflowName && (
-                <> · <GitBranch className="inline h-3 w-3" /> {previewAsset.workflowName}</>
-              )}
+              {previewAsset?.modelId} ·{" "}
+              {previewAsset && formatDate(previewAsset.createdAt)}
+              {previewAsset?.source === "workflow" &&
+                previewAsset?.workflowName && (
+                  <>
+                    {" "}
+                    · <GitBranch className="inline h-3 w-3" />{" "}
+                    {previewAsset.workflowName}
+                  </>
+                )}
             </DialogDescription>
           </DialogHeader>
           <div className="flex-1 overflow-auto relative">
@@ -900,36 +1049,36 @@ export function AssetsPage() {
                 <Button
                   size="icon"
                   variant="secondary"
-                  onClick={() => navigateAsset('prev')}
+                  onClick={() => navigateAsset("prev")}
                   className="absolute left-2 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full opacity-80 hover:opacity-100"
                 >
-                  <span className="text-xl">◀</span>
+                  <ChevronLeft className="h-5 w-5" />
                 </Button>
                 <Button
                   size="icon"
                   variant="secondary"
-                  onClick={() => navigateAsset('next')}
+                  onClick={() => navigateAsset("next")}
                   className="absolute right-2 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full opacity-80 hover:opacity-100"
                 >
-                  <span className="text-xl">▶</span>
+                  <ChevronRight className="h-5 w-5" />
                 </Button>
               </>
             )}
-            {previewAsset?.type === 'image' && (
+            {previewAsset?.type === "image" && (
               <img
                 src={getAssetUrl(previewAsset)}
                 alt={previewAsset.fileName}
                 className="max-w-full max-h-[60vh] mx-auto object-contain"
               />
             )}
-            {previewAsset?.type === 'video' && (
+            {previewAsset?.type === "video" && (
               <video
                 src={getAssetUrl(previewAsset)}
                 controls
                 className="max-w-full max-h-[60vh] mx-auto"
               />
             )}
-            {previewAsset?.type === 'audio' && (
+            {previewAsset?.type === "audio" && (
               <div className="flex items-center justify-center p-8">
                 <audio
                   src={getAssetUrl(previewAsset)}
@@ -938,100 +1087,152 @@ export function AssetsPage() {
                 />
               </div>
             )}
-            {(previewAsset?.type === 'text' || previewAsset?.type === 'json') && (
+            {(previewAsset?.type === "text" ||
+              previewAsset?.type === "json") && (
               <div className="p-4 bg-muted rounded-lg text-sm">
-                <p className="text-muted-foreground">{t('assets.textPreviewUnavailable')}</p>
+                <p className="text-muted-foreground">
+                  {t("assets.textPreviewUnavailable")}
+                </p>
               </div>
             )}
           </div>
           <DialogFooter>
             {isDesktopMode ? (
-              <Button variant="outline" onClick={() => previewAsset && handleOpenLocation(previewAsset)}>
+              <Button
+                variant="outline"
+                onClick={() => previewAsset && handleOpenLocation(previewAsset)}
+              >
                 <FolderOpen className="mr-2 h-4 w-4" />
-                {t('assets.openLocation')}
+                {t("assets.openLocation")}
               </Button>
             ) : (
-              <Button variant="outline" onClick={() => previewAsset && handleDownload(previewAsset)}>
+              <Button
+                variant="outline"
+                onClick={() => previewAsset && handleDownload(previewAsset)}
+              >
                 <Download className="mr-2 h-4 w-4" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             )}
-            <Button variant="outline" onClick={() => previewAsset && handleToggleFavorite(previewAsset)}>
-              <Star className={cn("mr-2 h-4 w-4", previewAsset?.favorite && "fill-yellow-400")} />
-              {previewAsset?.favorite ? t('assets.unfavorite') : t('assets.favorite')}
+            <Button
+              variant="outline"
+              onClick={() => previewAsset && handleToggleFavorite(previewAsset)}
+            >
+              <Star
+                className={cn(
+                  "mr-2 h-4 w-4",
+                  previewAsset?.favorite && "fill-yellow-400",
+                )}
+              />
+              {previewAsset?.favorite
+                ? t("assets.unfavorite")
+                : t("assets.favorite")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* Delete Confirmation Dialog */}
-      <AlertDialog open={!!deleteConfirmAsset} onOpenChange={() => setDeleteConfirmAsset(null)}>
+      <AlertDialog
+        open={!!deleteConfirmAsset}
+        onOpenChange={() => setDeleteConfirmAsset(null)}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('assets.deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("assets.deleteConfirmTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('assets.deleteConfirmDesc', { name: deleteConfirmAsset?.fileName })}
+              {t("assets.deleteConfirmDesc", {
+                name: deleteConfirmAsset?.fileName,
+              })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
-              onClick={() => deleteConfirmAsset && handleDelete(deleteConfirmAsset)}
+              onClick={() =>
+                deleteConfirmAsset && handleDelete(deleteConfirmAsset)
+              }
               disabled={isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Trash2 className="mr-2 h-4 w-4" />}
-              {t('common.delete')}
+              {isDeleting ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="mr-2 h-4 w-4" />
+              )}
+              {t("common.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
 
       {/* Bulk Delete Confirmation Dialog */}
-      <AlertDialog open={showBulkDeleteConfirm} onOpenChange={setShowBulkDeleteConfirm}>
+      <AlertDialog
+        open={showBulkDeleteConfirm}
+        onOpenChange={setShowBulkDeleteConfirm}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('assets.bulkDeleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("assets.bulkDeleteConfirmTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('assets.bulkDeleteConfirmDesc', { count: selectedIds.size })}
+              {t("assets.bulkDeleteConfirmDesc", { count: selectedIds.size })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
             <AlertDialogAction
               onClick={handleBulkDelete}
               disabled={isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Trash2 className="mr-2 h-4 w-4" />}
-              {t('assets.deleteSelected', { count: selectedIds.size })}
+              {isDeleting ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="mr-2 h-4 w-4" />
+              )}
+              {t("assets.deleteSelected", { count: selectedIds.size })}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
 
       {/* Tag Management Dialog */}
-      <Dialog open={!!tagDialogAsset} onOpenChange={() => setTagDialogAsset(null)}>
+      <Dialog
+        open={!!tagDialogAsset}
+        onOpenChange={() => setTagDialogAsset(null)}
+      >
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>{t('assets.manageTags')}</DialogTitle>
+            <DialogTitle>{t("assets.manageTags")}</DialogTitle>
             <DialogDescription>
-              {t('assets.manageTagsDesc', { name: tagDialogAsset?.fileName })}
+              {t("assets.manageTagsDesc", { name: tagDialogAsset?.fileName })}
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             {/* Current tags */}
             <div className="space-y-2">
-              <Label>{t('assets.currentTags')}</Label>
+              <Label>{t("assets.currentTags")}</Label>
               <div className="flex flex-wrap gap-2">
                 {tagDialogAsset?.tags.length === 0 && (
-                  <p className="text-sm text-muted-foreground">{t('assets.noTags')}</p>
+                  <p className="text-sm text-muted-foreground">
+                    {t("assets.noTags")}
+                  </p>
                 )}
                 {tagDialogAsset?.tags.map((tag) => (
-                  <Badge key={tag} variant="secondary" className="flex items-center gap-1">
+                  <Badge
+                    key={tag}
+                    variant="secondary"
+                    className="flex items-center gap-1"
+                  >
                     {tag}
                     <button
-                      onClick={() => tagDialogAsset && handleRemoveTag(tagDialogAsset, tag)}
+                      onClick={() =>
+                        tagDialogAsset && handleRemoveTag(tagDialogAsset, tag)
+                      }
                       className="ml-1 hover:text-destructive"
                     >
                       <X className="h-3 w-3" />
@@ -1043,19 +1244,21 @@ export function AssetsPage() {
 
             {/* Add new tag */}
             <div className="space-y-2">
-              <Label>{t('assets.addTag')}</Label>
+              <Label>{t("assets.addTag")}</Label>
               <div className="flex gap-2">
                 <Input
-                  placeholder={t('assets.tagPlaceholder')}
+                  placeholder={t("assets.tagPlaceholder")}
                   value={newTag}
                   onChange={(e) => setNewTag(e.target.value)}
-                  onKeyDown={(e) => e.key === 'Enter' && handleAddTag()}
+                  onKeyDown={(e) => e.key === "Enter" && handleAddTag()}
                   list="tag-suggestions"
                 />
                 <datalist id="tag-suggestions">
-                  {allTags.filter(t => !tagDialogAsset?.tags.includes(t)).map((tag) => (
-                    <option key={tag} value={tag} />
-                  ))}
+                  {allTags
+                    .filter((t) => !tagDialogAsset?.tags.includes(t))
+                    .map((tag) => (
+                      <option key={tag} value={tag} />
+                    ))}
                 </datalist>
                 <Button onClick={handleAddTag} disabled={!newTag.trim()}>
                   <Plus className="h-4 w-4" />
@@ -1065,11 +1268,11 @@ export function AssetsPage() {
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setTagDialogAsset(null)}>
-              {t('common.done')}
+              {t("common.done")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/AudioConverterPage.tsx b/src/pages/AudioConverterPage.tsx
index 8a53711c..25b57992 100644
--- a/src/pages/AudioConverterPage.tsx
+++ b/src/pages/AudioConverterPage.tsx
@@ -1,26 +1,26 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { useFFmpegWorker } from '@/hooks/useFFmpegWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { useFFmpegWorker } from "@/hooks/useFFmpegWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
 import {
   AUDIO_FORMATS,
   AUDIO_BITRATES,
   getAudioFormat,
-  formatDuration
-} from '@/lib/ffmpegFormats'
-import { formatBytes } from '@/types/progress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+  formatDuration,
+} from "@/lib/ffmpegFormats";
+import { formatBytes } from "@/types/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -29,44 +29,44 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
   Download,
   Loader2,
   FileAudio,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Phase configuration for audio converter
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.ffmpeg.loading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.ffmpeg.converting', weight: 0.9 }
-]
+  { id: "download", labelKey: "freeTools.ffmpeg.loading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.ffmpeg.converting", weight: 0.9 },
+];
 
 export function AudioConverterPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const audioRef = useRef<HTMLAudioElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [audioFile, setAudioFile] = useState<File | null>(null)
-  const [audioUrl, setAudioUrl] = useState<string | null>(null)
-  const [audioDuration, setAudioDuration] = useState<number | null>(null)
-  const [convertedUrl, setConvertedUrl] = useState<string | null>(null)
-  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [outputFormat, setOutputFormat] = useState('mp3')
-  const [bitrate, setBitrate] = useState('192k')
-  const [error, setError] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [audioDuration, setAudioDuration] = useState<number | null>(null);
+  const [convertedUrl, setConvertedUrl] = useState<string | null>(null);
+  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [outputFormat, setOutputFormat] = useState("mp3");
+  const [bitrate, setBitrate] = useState("192k");
+  const [error, setError] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -75,164 +75,176 @@ export function AudioConverterPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
   const { convert, hasFailed, retryWorker } = useFFmpegWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
+      if (phase === "download") {
+        startPhase("download");
+      } else if (phase === "process") {
+        startPhase("process");
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : 'process'
-      updatePhase(phaseId, progressValue, detail)
+      const phaseId = phase === "download" ? "download" : "process";
+      updatePhase(phaseId, progressValue, detail);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      resetProgress()
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      resetProgress();
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, resetPage, location.pathname, navigate])
+  }, [isProcessing, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [resetPage, location.pathname, navigate]);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('audio/') && !file.name.match(/\.(mp3|m4a|ogg|wav|flac|aac|wma)$/i)) {
-        return
+      if (
+        !file.type.startsWith("audio/") &&
+        !file.name.match(/\.(mp3|m4a|ogg|wav|flac|aac|wma)$/i)
+      ) {
+        return;
       }
 
-      setError(null)
+      setError(null);
       // Clean up previous URLs
-      if (audioUrl) URL.revokeObjectURL(audioUrl)
-      if (convertedUrl) URL.revokeObjectURL(convertedUrl)
+      if (audioUrl) URL.revokeObjectURL(audioUrl);
+      if (convertedUrl) URL.revokeObjectURL(convertedUrl);
 
-      const url = URL.createObjectURL(file)
-      setAudioFile(file)
-      setAudioUrl(url)
-      setConvertedUrl(null)
-      setConvertedBlob(null)
-      resetProgress()
+      const url = URL.createObjectURL(file);
+      setAudioFile(file);
+      setAudioUrl(url);
+      setConvertedUrl(null);
+      setConvertedBlob(null);
+      resetProgress();
 
       // Get duration from audio element
-      const audio = new Audio(url)
-      audio.addEventListener('loadedmetadata', () => {
-        setAudioDuration(audio.duration)
-      })
+      const audio = new Audio(url);
+      audio.addEventListener("loadedmetadata", () => {
+        setAudioDuration(audio.duration);
+      });
     },
-    [audioUrl, convertedUrl, resetProgress]
-  )
+    [audioUrl, convertedUrl, resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const handleConvert = async () => {
-    if (!audioFile) return
+    if (!audioFile) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    setConvertedUrl(null);
+    setConvertedBlob(null);
+    resetAndStart("download");
 
-    const format = getAudioFormat(outputFormat)
-    if (!format) return
+    const format = getAudioFormat(outputFormat);
+    if (!format) return;
 
     try {
       // Read file as ArrayBuffer
-      const arrayBuffer = await audioFile.arrayBuffer()
+      const arrayBuffer = await audioFile.arrayBuffer();
 
       // Convert using FFmpeg worker
-      const result = await convert(arrayBuffer, audioFile.name, outputFormat, format.ext, {
-        audioCodec: format.codec,
-        audioBitrate: bitrate
-      })
+      const result = await convert(
+        arrayBuffer,
+        audioFile.name,
+        outputFormat,
+        format.ext,
+        {
+          audioCodec: format.codec,
+          audioBitrate: bitrate,
+        },
+      );
 
       // Create blob and URL
-      const blob = new Blob([result.data], { type: format.mimeType })
-      const url = URL.createObjectURL(blob)
+      const blob = new Blob([result.data], { type: format.mimeType });
+      const url = URL.createObjectURL(blob);
 
-      setConvertedBlob(blob)
-      setConvertedUrl(url)
-      completeAllPhases()
+      setConvertedBlob(blob);
+      setConvertedUrl(url);
+      completeAllPhases();
     } catch (err) {
-      console.error('Conversion failed:', err)
-      setError(err instanceof Error ? err.message : 'Conversion failed')
+      console.error("Conversion failed:", err);
+      setError(err instanceof Error ? err.message : "Conversion failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!convertedUrl || !convertedBlob || !audioFile) return
+    if (!convertedUrl || !convertedBlob || !audioFile) return;
 
-    const format = getAudioFormat(outputFormat)
-    const filename = audioFile.name.replace(/\.[^.]+$/, `.${format?.ext || outputFormat}`)
+    const format = getAudioFormat(outputFormat);
+    const filename = audioFile.name.replace(
+      /\.[^.]+$/,
+      `.${format?.ext || outputFormat}`,
+    );
 
-    const link = document.createElement('a')
-    link.href = convertedUrl
-    link.download = filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const link = document.createElement("a");
+    link.href = convertedUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
-  const selectedFormat = getAudioFormat(outputFormat)
+  const selectedFormat = getAudioFormat(outputFormat);
 
   return (
     <div
@@ -242,13 +254,14 @@ export function AudioConverterPage() {
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
     >
-
       {/* Drag overlay */}
       {isDragging && audioFile && (
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.audioConverter.dropToReplace')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.audioConverter.dropToReplace")}
+            </p>
           </div>
         </div>
       )}
@@ -259,9 +272,11 @@ export function AudioConverterPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold">{t('freeTools.audioConverter.title')}</h1>
+          <h1 className="text-2xl font-bold">
+            {t("freeTools.audioConverter.title")}
+          </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.audioConverter.description')}
+            {t("freeTools.audioConverter.description")}
           </p>
         </div>
       </div>
@@ -270,10 +285,10 @@ export function AudioConverterPage() {
       {!audioFile && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -281,12 +296,14 @@ export function AudioConverterPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.audioConverter.selectAudio')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.audioConverter.selectAudio")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.audioConverter.orDragDrop')}
+              {t("freeTools.audioConverter.orDragDrop")}
             </p>
             <p className="text-xs text-muted-foreground mt-2">
-              {t('freeTools.audioConverter.supportedFormats')}
+              {t("freeTools.audioConverter.supportedFormats")}
             </p>
           </CardContent>
         </Card>
@@ -298,9 +315,9 @@ export function AudioConverterPage() {
         accept="audio/*,.mp3,.m4a,.ogg,.wav,.flac,.aac,.wma"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
+          e.target.value = "";
         }}
       />
 
@@ -315,10 +332,14 @@ export function AudioConverterPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.audioConverter.selectAudio')}
+              {t("freeTools.audioConverter.selectAudio")}
             </Button>
 
-            <Select value={outputFormat} onValueChange={setOutputFormat} disabled={isProcessing}>
+            <Select
+              value={outputFormat}
+              onValueChange={setOutputFormat}
+              disabled={isProcessing}
+            >
               <SelectTrigger className="w-40">
                 <SelectValue />
               </SelectTrigger>
@@ -331,20 +352,26 @@ export function AudioConverterPage() {
               </SelectContent>
             </Select>
 
-            {selectedFormat && selectedFormat.id !== 'flac' && selectedFormat.id !== 'wav' && (
-              <Select value={bitrate} onValueChange={setBitrate} disabled={isProcessing}>
-                <SelectTrigger className="w-32">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {AUDIO_BITRATES.map((br) => (
-                    <SelectItem key={br.id} value={br.value}>
-                      {br.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
+            {selectedFormat &&
+              selectedFormat.id !== "flac" &&
+              selectedFormat.id !== "wav" && (
+                <Select
+                  value={bitrate}
+                  onValueChange={setBitrate}
+                  disabled={isProcessing}
+                >
+                  <SelectTrigger className="w-32">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {AUDIO_BITRATES.map((br) => (
+                      <SelectItem key={br.id} value={br.value}>
+                        {br.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
 
             <Button
               onClick={handleConvert}
@@ -354,12 +381,12 @@ export function AudioConverterPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.audioConverter.converting')}
+                  {t("freeTools.audioConverter.converting")}
                 </>
               ) : (
                 <>
                   <FileAudio className="h-4 w-4 mr-2" />
-                  {t('freeTools.audioConverter.convert')}
+                  {t("freeTools.audioConverter.convert")}
                 </>
               )}
             </Button>
@@ -367,7 +394,7 @@ export function AudioConverterPage() {
             {convertedUrl && (
               <Button variant="outline" onClick={handleDownload}>
                 <Download className="h-4 w-4 mr-2" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             )}
           </div>
@@ -386,7 +413,7 @@ export function AudioConverterPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -398,10 +425,11 @@ export function AudioConverterPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.audioConverter.original')}
+                    {t("freeTools.audioConverter.original")}
                   </span>
                   <span className="text-xs text-muted-foreground">
-                    {formatBytes(audioFile.size)} • {formatDuration(audioDuration || 0)}
+                    {formatBytes(audioFile.size)} •{" "}
+                    {formatDuration(audioDuration || 0)}
                   </span>
                 </div>
                 <div className="text-sm text-muted-foreground mb-2 truncate">
@@ -421,7 +449,7 @@ export function AudioConverterPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.audioConverter.converted')}
+                    {t("freeTools.audioConverter.converted")}
                   </span>
                   {convertedBlob && (
                     <span className="text-xs text-green-600 dark:text-green-400">
@@ -434,17 +462,15 @@ export function AudioConverterPage() {
                     <div className="text-sm text-muted-foreground mb-2">
                       {selectedFormat?.label}
                     </div>
-                    <audio
-                      src={convertedUrl}
-                      className="w-full"
-                      controls
-                    />
+                    <audio src={convertedUrl} className="w-full" controls />
                   </>
                 ) : (
                   <div className="h-[54px] bg-muted rounded-lg flex items-center justify-center">
                     <div className="text-center text-muted-foreground text-sm">
                       <FileAudio className="h-5 w-5 mx-auto mb-1 opacity-30" />
-                      <span>{selectedFormat?.label} • {bitrate}</span>
+                      <span>
+                        {selectedFormat?.label} • {bitrate}
+                      </span>
                     </div>
                   </div>
                 )}
@@ -458,19 +484,23 @@ export function AudioConverterPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/BackgroundRemoverPage.tsx b/src/pages/BackgroundRemoverPage.tsx
index 9c22bd5a..54e9aff4 100644
--- a/src/pages/BackgroundRemoverPage.tsx
+++ b/src/pages/BackgroundRemoverPage.tsx
@@ -1,21 +1,21 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useBackgroundRemoverWorker } from '@/hooks/useBackgroundRemoverWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useBackgroundRemoverWorker } from "@/hooks/useBackgroundRemoverWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,58 +24,66 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { ArrowLeft, Upload, Download, Loader2, Eraser, X, RefreshCw } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-type ModelType = 'isnet_quint8' | 'isnet_fp16' | 'isnet'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  ArrowLeft,
+  Upload,
+  Download,
+  Loader2,
+  Eraser,
+  X,
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type ModelType = "isnet_quint8" | "isnet_fp16" | "isnet";
 
 interface ResultImages {
-  foreground: string | null
-  background: string | null
-  mask: string | null
+  foreground: string | null;
+  background: string | null;
+  mask: string | null;
 }
 
 // Phase configuration for background remover
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.progress.processing', weight: 0.9 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.progress.processing", weight: 0.9 },
+];
 
 export function BackgroundRemoverPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const canvasRefs = {
     foreground: useRef<HTMLCanvasElement>(null),
     background: useRef<HTMLCanvasElement>(null),
-    mask: useRef<HTMLCanvasElement>(null)
-  }
-  const dragCounterRef = useRef(0)
+    mask: useRef<HTMLCanvasElement>(null),
+  };
+  const dragCounterRef = useRef(0);
 
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [originalBlob, setOriginalBlob] = useState<Blob | null>(null)
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [originalBlob, setOriginalBlob] = useState<Blob | null>(null);
   const [resultImages, setResultImages] = useState<ResultImages>({
     foreground: null,
     background: null,
-    mask: null
-  })
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [processingKey, setProcessingKey] = useState(0)
-  const [isDragging, setIsDragging] = useState(false)
+    mask: null,
+  });
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [processingKey, setProcessingKey] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
   const [originalSize, setOriginalSize] = useState<{
-    width: number
-    height: number
-  } | null>(null)
-  const [model, setModel] = useState<ModelType>('isnet_fp16')
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>(
-    'png'
-  )
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+    width: number;
+    height: number;
+  } | null>(null);
+  const [model, setModel] = useState<ModelType>("isnet_fp16");
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "png",
+  );
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -84,207 +92,219 @@ export function BackgroundRemoverPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
-
-  const [error, setError] = useState<string | null>(null)
-
-  const { removeBackgroundAll, dispose, retryWorker, hasFailed } = useBackgroundRemoverWorker({
-    onPhase: (phase) => {
-      // Start the corresponding phase when worker reports it
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
-      }
-    },
-    onProgress: (phase, progressValue, detail) => {
-      // Update the phase that worker reports
-      const phaseId = phase === 'download' ? 'download' : 'process'
-      updatePhase(phaseId, progressValue, detail)
-    },
-    onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { removeBackgroundAll, dispose, retryWorker, hasFailed } =
+    useBackgroundRemoverWorker({
+      onPhase: (phase) => {
+        // Start the corresponding phase when worker reports it
+        if (phase === "download") {
+          startPhase("download");
+        } else if (phase === "process") {
+          startPhase("process");
+        }
+      },
+      onProgress: (phase, progressValue, detail) => {
+        // Update the phase that worker reports
+        const phaseId = phase === "download" ? "download" : "process";
+        updatePhase(phaseId, progressValue, detail);
+      },
+      onError: (err) => {
+        console.error("Worker error:", err);
+        setError(err);
+        setIsProcessing(false);
+      },
+    });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      dispose()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      dispose();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, dispose, resetPage, location.pathname, navigate])
+  }, [isProcessing, dispose, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    dispose()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, resetPage, location.pathname, navigate])
-
-  const handleFileSelect = useCallback((file: File) => {
-    if (!file.type.startsWith('image/')) return
-
-    setError(null)
-    // Store the original blob for processing
-    setOriginalBlob(file)
-
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      const dataUrl = e.target?.result as string
-      setOriginalImage(dataUrl)
-      setResultImages({ foreground: null, background: null, mask: null })
-      resetProgress()
-
-      // Get original dimensions
-      const img = new Image()
-      img.onload = () => {
-        setOriginalSize({ width: img.width, height: img.height })
-      }
-      img.src = dataUrl
-    }
-    reader.readAsDataURL(file)
-  }, [resetProgress])
+    setShowBackWarning(false);
+    dispose();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, resetPage, location.pathname, navigate]);
+
+  const handleFileSelect = useCallback(
+    (file: File) => {
+      if (!file.type.startsWith("image/")) return;
+
+      setError(null);
+      // Store the original blob for processing
+      setOriginalBlob(file);
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result as string;
+        setOriginalImage(dataUrl);
+        setResultImages({ foreground: null, background: null, mask: null });
+        resetProgress();
+
+        // Get original dimensions
+        const img = new Image();
+        img.onload = () => {
+          setOriginalSize({ width: img.width, height: img.height });
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
+    },
+    [resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const handleRemoveBackground = async () => {
-    if (!originalBlob) return
+    if (!originalBlob) return;
 
-    setIsProcessing(true)
-    setProcessingKey((k) => k + 1)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setProcessingKey((k) => k + 1);
+    resetAndStart("download");
 
     try {
       // Process all three outputs in worker
-      const results = await removeBackgroundAll(originalBlob, model)
+      const results = await removeBackgroundAll(originalBlob, model);
 
       // Convert blobs to data URLs for display
-      const foregroundUrl = URL.createObjectURL(results.foreground)
-      const backgroundUrl = URL.createObjectURL(results.background)
-      const maskUrl = URL.createObjectURL(results.mask)
+      const foregroundUrl = URL.createObjectURL(results.foreground);
+      const backgroundUrl = URL.createObjectURL(results.background);
+      const maskUrl = URL.createObjectURL(results.mask);
 
       setResultImages({
         foreground: foregroundUrl,
         background: backgroundUrl,
-        mask: maskUrl
-      })
+        mask: maskUrl,
+      });
 
       // Draw to canvases for download format conversion
       const drawToCanvas = async (
         blob: Blob,
-        canvas: HTMLCanvasElement | null
+        canvas: HTMLCanvasElement | null,
       ) => {
-        if (!canvas) return
-        const url = URL.createObjectURL(blob)
-        const img = new Image()
+        if (!canvas) return;
+        const url = URL.createObjectURL(blob);
+        const img = new Image();
         await new Promise<void>((resolve) => {
           img.onload = () => {
-            canvas.width = img.width
-            canvas.height = img.height
-            const ctx = canvas.getContext('2d')!
-            ctx.drawImage(img, 0, 0)
-            URL.revokeObjectURL(url)
-            resolve()
-          }
-          img.src = url
-        })
-      }
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext("2d")!;
+            ctx.drawImage(img, 0, 0);
+            URL.revokeObjectURL(url);
+            resolve();
+          };
+          img.src = url;
+        });
+      };
 
       await Promise.all([
         drawToCanvas(results.foreground, canvasRefs.foreground.current),
         drawToCanvas(results.background, canvasRefs.background.current),
-        drawToCanvas(results.mask, canvasRefs.mask.current)
-      ])
+        drawToCanvas(results.mask, canvasRefs.mask.current),
+      ]);
 
-      completeAllPhases()
+      completeAllPhases();
     } catch (error) {
-      console.error('Background removal failed:', error)
+      console.error("Background removal failed:", error);
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
-  const handleDownload = (type: 'foreground' | 'background' | 'mask') => {
-    const canvas = canvasRefs[type].current
-    if (!canvas) return
+  const handleDownload = (type: "foreground" | "background" | "mask") => {
+    const canvas = canvasRefs[type].current;
+    if (!canvas) return;
 
-    const mimeType = `image/${downloadFormat}`
+    const mimeType = `image/${downloadFormat}`;
     // For PNG, maintain full quality for transparency; for JPEG/WebP, use high quality
-    const quality = downloadFormat === 'png' ? undefined : 0.95
+    const quality = downloadFormat === "png" ? undefined : 0.95;
 
-    let dataUrl: string
+    let dataUrl: string;
 
     // For JPEG with foreground/background (which have transparency), fill with white background
-    if (downloadFormat === 'jpeg' && (type === 'foreground' || type === 'background')) {
+    if (
+      downloadFormat === "jpeg" &&
+      (type === "foreground" || type === "background")
+    ) {
       // Create a temporary canvas with white background
-      const tempCanvas = document.createElement('canvas')
-      tempCanvas.width = canvas.width
-      tempCanvas.height = canvas.height
-      const tempCtx = tempCanvas.getContext('2d')!
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = canvas.width;
+      tempCanvas.height = canvas.height;
+      const tempCtx = tempCanvas.getContext("2d")!;
       // Fill with white
-      tempCtx.fillStyle = '#ffffff'
-      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height)
+      tempCtx.fillStyle = "#ffffff";
+      tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
       // Draw the original image on top
-      tempCtx.drawImage(canvas, 0, 0)
-      dataUrl = tempCanvas.toDataURL(mimeType, quality)
+      tempCtx.drawImage(canvas, 0, 0);
+      dataUrl = tempCanvas.toDataURL(mimeType, quality);
     } else {
-      dataUrl = canvas.toDataURL(mimeType, quality)
+      dataUrl = canvas.toDataURL(mimeType, quality);
     }
 
-    const link = document.createElement('a')
-    link.href = dataUrl
-    link.download = generateFreeToolFilename('bg-remover', downloadFormat, type)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
-
-  const hasResults = resultImages.foreground || resultImages.background || resultImages.mask
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = generateFreeToolFilename(
+      "bg-remover",
+      downloadFormat,
+      type,
+    );
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const hasResults =
+    resultImages.foreground || resultImages.background || resultImages.mask;
 
   return (
     <div
@@ -305,7 +325,7 @@ export function BackgroundRemoverPage() {
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
             <p className="text-lg font-medium">
-              {t('freeTools.backgroundRemover.orDragDrop')}
+              {t("freeTools.backgroundRemover.orDragDrop")}
             </p>
           </div>
         </div>
@@ -313,19 +333,15 @@ export function BackgroundRemoverPage() {
 
       {/* Header */}
       <div className="flex items-center gap-4 mb-8">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleBack}
-        >
+        <Button variant="ghost" size="icon" onClick={handleBack}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
           <h1 className="text-2xl font-bold">
-            {t('freeTools.backgroundRemover.title')}
+            {t("freeTools.backgroundRemover.title")}
           </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.backgroundRemover.description')}
+            {t("freeTools.backgroundRemover.description")}
           </p>
         </div>
       </div>
@@ -334,10 +350,10 @@ export function BackgroundRemoverPage() {
       {!originalImage && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
           onDrop={handleDrop}
@@ -350,10 +366,10 @@ export function BackgroundRemoverPage() {
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
             <p className="text-lg font-medium">
-              {t('freeTools.backgroundRemover.selectImage')}
+              {t("freeTools.backgroundRemover.selectImage")}
             </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.backgroundRemover.orDragDrop')}
+              {t("freeTools.backgroundRemover.orDragDrop")}
             </p>
           </CardContent>
         </Card>
@@ -365,8 +381,8 @@ export function BackgroundRemoverPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
         }}
       />
 
@@ -381,7 +397,7 @@ export function BackgroundRemoverPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.backgroundRemover.selectImage')}
+              {t("freeTools.backgroundRemover.selectImage")}
             </Button>
 
             <Select
@@ -394,13 +410,13 @@ export function BackgroundRemoverPage() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="isnet_quint8">
-                  {t('freeTools.backgroundRemover.modelFast')}
+                  {t("freeTools.backgroundRemover.modelFast")}
                 </SelectItem>
                 <SelectItem value="isnet_fp16">
-                  {t('freeTools.backgroundRemover.modelBalanced')}
+                  {t("freeTools.backgroundRemover.modelBalanced")}
                 </SelectItem>
                 <SelectItem value="isnet">
-                  {t('freeTools.backgroundRemover.modelQuality')}
+                  {t("freeTools.backgroundRemover.modelQuality")}
                 </SelectItem>
               </SelectContent>
             </Select>
@@ -413,12 +429,12 @@ export function BackgroundRemoverPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.backgroundRemover.processing')}
+                  {t("freeTools.backgroundRemover.processing")}
                 </>
               ) : (
                 <>
                   <Eraser className="h-4 w-4 mr-2" />
-                  {t('freeTools.backgroundRemover.remove')}
+                  {t("freeTools.backgroundRemover.remove")}
                 </>
               )}
             </Button>
@@ -427,7 +443,7 @@ export function BackgroundRemoverPage() {
               <Select
                 value={downloadFormat}
                 onValueChange={(v) =>
-                  setDownloadFormat(v as 'png' | 'jpeg' | 'webp')
+                  setDownloadFormat(v as "png" | "jpeg" | "webp")
                 }
               >
                 <SelectTrigger className="w-28">
@@ -457,7 +473,7 @@ export function BackgroundRemoverPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -469,7 +485,7 @@ export function BackgroundRemoverPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.backgroundRemover.original')}
+                    {t("freeTools.backgroundRemover.original")}
                   </span>
                   {originalSize && (
                     <span className="text-xs text-muted-foreground">
@@ -493,14 +509,14 @@ export function BackgroundRemoverPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.backgroundRemover.outputForeground')}
+                    {t("freeTools.backgroundRemover.outputForeground")}
                   </span>
                   {resultImages.foreground && (
                     <Button
                       variant="ghost"
                       size="sm"
                       className="h-7 px-2"
-                      onClick={() => handleDownload('foreground')}
+                      onClick={() => handleDownload("foreground")}
                     >
                       <Download className="h-3.5 w-3.5" />
                     </Button>
@@ -532,14 +548,14 @@ export function BackgroundRemoverPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.backgroundRemover.outputBackground')}
+                    {t("freeTools.backgroundRemover.outputBackground")}
                   </span>
                   {resultImages.background && (
                     <Button
                       variant="ghost"
                       size="sm"
                       className="h-7 px-2"
-                      onClick={() => handleDownload('background')}
+                      onClick={() => handleDownload("background")}
                     >
                       <Download className="h-3.5 w-3.5" />
                     </Button>
@@ -571,14 +587,14 @@ export function BackgroundRemoverPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.backgroundRemover.outputMask')}
+                    {t("freeTools.backgroundRemover.outputMask")}
                   </span>
                   {resultImages.mask && (
                     <Button
                       variant="ghost"
                       size="sm"
                       className="h-7 px-2"
-                      onClick={() => handleDownload('mask')}
+                      onClick={() => handleDownload("mask")}
                     >
                       <Download className="h-3.5 w-3.5" />
                     </Button>
@@ -637,19 +653,23 @@ export function BackgroundRemoverPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/FaceEnhancerPage.tsx b/src/pages/FaceEnhancerPage.tsx
index 4a6add71..dba4a058 100644
--- a/src/pages/FaceEnhancerPage.tsx
+++ b/src/pages/FaceEnhancerPage.tsx
@@ -1,21 +1,21 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useFaceEnhancerWorker } from '@/hooks/useFaceEnhancerWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useFaceEnhancerWorker } from "@/hooks/useFaceEnhancerWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -24,8 +24,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -35,53 +35,53 @@ import {
   X,
   Columns2,
   SplitSquareHorizontal,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
-type ViewMode = 'sideBySide' | 'comparison'
-type ScaleType = '1x' | '2x' | '3x' | '4x'
+type ViewMode = "sideBySide" | "comparison";
+type ScaleType = "1x" | "2x" | "3x" | "4x";
 
 // Phase configuration for face enhancer
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.2 },
-  { id: 'loading', labelKey: 'freeTools.progress.loading', weight: 0.1 },
-  { id: 'detect', labelKey: 'freeTools.faceEnhancer.detecting', weight: 0.1 },
-  { id: 'enhance', labelKey: 'freeTools.faceEnhancer.enhancing', weight: 0.6 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.2 },
+  { id: "loading", labelKey: "freeTools.progress.loading", weight: 0.1 },
+  { id: "detect", labelKey: "freeTools.faceEnhancer.detecting", weight: 0.1 },
+  { id: "enhance", labelKey: "freeTools.faceEnhancer.enhancing", weight: 0.6 },
+];
 
 export function FaceEnhancerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [enhancedImage, setEnhancedImage] = useState<string | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [enhancedImage, setEnhancedImage] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const [originalSize, setOriginalSize] = useState<{
-    width: number
-    height: number
-  } | null>(null)
-  const [faceCount, setFaceCount] = useState<number>(0)
-  const [scale, setScale] = useState<ScaleType>('1x')
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>(
-    'jpeg'
-  )
+    width: number;
+    height: number;
+  } | null>(null);
+  const [faceCount, setFaceCount] = useState<number>(0);
+  const [scale, setScale] = useState<ScaleType>("1x");
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "jpeg",
+  );
   const [enhancedSize, setEnhancedSize] = useState<{
-    width: number
-    height: number
-  } | null>(null)
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
-  const [viewMode, setViewMode] = useState<ViewMode>('sideBySide')
-  const [sliderPosition, setSliderPosition] = useState(50)
-  const comparisonRef = useRef<HTMLDivElement>(null)
-  const isDraggingSlider = useRef(false)
+    width: number;
+    height: number;
+  } | null>(null);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>("sideBySide");
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const comparisonRef = useRef<HTMLDivElement>(null);
+  const isDraggingSlider = useRef(false);
 
   // Multi-phase progress tracking
   const {
@@ -90,268 +90,269 @@ export function FaceEnhancerPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
-
-  const [error, setError] = useState<string | null>(null)
-
-  const { initModel, enhance, dispose, hasFailed, retryWorker } = useFaceEnhancerWorker({
-    onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'loading') {
-        startPhase('loading')
-      } else if (phase === 'detect') {
-        startPhase('detect')
-      } else if (phase === 'enhance') {
-        startPhase('enhance')
-      }
-    },
-    onProgress: (phase, progressValue, detail) => {
-      const phaseId =
-        phase === 'download'
-          ? 'download'
-          : phase === 'loading'
-            ? 'loading'
-            : phase === 'detect'
-              ? 'detect'
-              : 'enhance'
-      updatePhase(phaseId, progressValue, detail)
-    },
-    onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { initModel, enhance, dispose, hasFailed, retryWorker } =
+    useFaceEnhancerWorker({
+      onPhase: (phase) => {
+        if (phase === "download") {
+          startPhase("download");
+        } else if (phase === "loading") {
+          startPhase("loading");
+        } else if (phase === "detect") {
+          startPhase("detect");
+        } else if (phase === "enhance") {
+          startPhase("enhance");
+        }
+      },
+      onProgress: (phase, progressValue, detail) => {
+        const phaseId =
+          phase === "download"
+            ? "download"
+            : phase === "loading"
+              ? "loading"
+              : phase === "detect"
+                ? "detect"
+                : "enhance";
+        updatePhase(phaseId, progressValue, detail);
+      },
+      onError: (err) => {
+        console.error("Worker error:", err);
+        setError(err);
+        setIsProcessing(false);
+      },
+    });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      dispose()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      dispose();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, dispose, resetPage, location.pathname, navigate])
+  }, [isProcessing, dispose, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    dispose()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    dispose();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, resetPage, location.pathname, navigate]);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('image/')) return
+      if (!file.type.startsWith("image/")) return;
 
-      const reader = new FileReader()
+      const reader = new FileReader();
       reader.onload = (e) => {
-        const dataUrl = e.target?.result as string
-        setError(null)
-        setOriginalImage(dataUrl)
-        setEnhancedImage(null)
-        setEnhancedSize(null)
-        setFaceCount(0)
-        resetProgress()
+        const dataUrl = e.target?.result as string;
+        setError(null);
+        setOriginalImage(dataUrl);
+        setEnhancedImage(null);
+        setEnhancedSize(null);
+        setFaceCount(0);
+        resetProgress();
 
         // Get original dimensions
-        const img = new Image()
+        const img = new Image();
         img.onload = () => {
-          setOriginalSize({ width: img.width, height: img.height })
-        }
-        img.src = dataUrl
-      }
-      reader.readAsDataURL(file)
+          setOriginalSize({ width: img.width, height: img.height });
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
     },
-    [resetProgress]
-  )
+    [resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   // Comparison slider handlers
   const handleSliderMove = useCallback((clientX: number) => {
-    if (!comparisonRef.current) return
-    const rect = comparisonRef.current.getBoundingClientRect()
-    const x = clientX - rect.left
-    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
-    setSliderPosition(percentage)
-  }, [])
+    if (!comparisonRef.current) return;
+    const rect = comparisonRef.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    setSliderPosition(percentage);
+  }, []);
 
   const handleSliderMouseDown = useCallback(
     (e: React.MouseEvent) => {
-      e.preventDefault()
-      isDraggingSlider.current = true
-      handleSliderMove(e.clientX)
+      e.preventDefault();
+      isDraggingSlider.current = true;
+      handleSliderMove(e.clientX);
 
       const handleMouseMove = (e: MouseEvent) => {
         if (isDraggingSlider.current) {
-          handleSliderMove(e.clientX)
+          handleSliderMove(e.clientX);
         }
-      }
+      };
 
       const handleMouseUp = () => {
-        isDraggingSlider.current = false
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-      }
+        isDraggingSlider.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
 
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
     },
-    [handleSliderMove]
-  )
+    [handleSliderMove],
+  );
 
   const handleSliderTouchStart = useCallback(
     (e: React.TouchEvent) => {
-      isDraggingSlider.current = true
-      handleSliderMove(e.touches[0].clientX)
+      isDraggingSlider.current = true;
+      handleSliderMove(e.touches[0].clientX);
 
       const handleTouchMove = (e: TouchEvent) => {
         if (isDraggingSlider.current) {
-          handleSliderMove(e.touches[0].clientX)
+          handleSliderMove(e.touches[0].clientX);
         }
-      }
+      };
 
       const handleTouchEnd = () => {
-        isDraggingSlider.current = false
-        document.removeEventListener('touchmove', handleTouchMove)
-        document.removeEventListener('touchend', handleTouchEnd)
-      }
+        isDraggingSlider.current = false;
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
 
-      document.addEventListener('touchmove', handleTouchMove)
-      document.addEventListener('touchend', handleTouchEnd)
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
     },
-    [handleSliderMove]
-  )
+    [handleSliderMove],
+  );
 
   const handleEnhance = async () => {
-    if (!originalImage || !originalSize || !canvasRef.current) return
+    if (!originalImage || !originalSize || !canvasRef.current) return;
 
-    setIsProcessing(true)
-    setError(null)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    resetAndStart("download");
 
     try {
       // Initialize models (cached after first download)
-      await initModel()
+      await initModel();
 
       // Create source image
-      const img = new Image()
+      const img = new Image();
       await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve()
-        img.onerror = () => reject(new Error('Failed to load image'))
-        img.src = originalImage
-      })
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error("Failed to load image"));
+        img.src = originalImage;
+      });
 
       // Calculate output size based on scale
-      const scaleFactor = parseInt(scale)
-      const outputWidth = originalSize.width * scaleFactor
-      const outputHeight = originalSize.height * scaleFactor
+      const scaleFactor = parseInt(scale);
+      const outputWidth = originalSize.width * scaleFactor;
+      const outputHeight = originalSize.height * scaleFactor;
 
       // Upscale image first (before face enhancement) for better face quality
-      const tempCanvas = document.createElement('canvas')
-      tempCanvas.width = outputWidth
-      tempCanvas.height = outputHeight
-      const tempCtx = tempCanvas.getContext('2d')!
-      tempCtx.imageSmoothingEnabled = true
-      tempCtx.imageSmoothingQuality = 'high'
-      tempCtx.drawImage(img, 0, 0, outputWidth, outputHeight)
-      const imageData = tempCtx.getImageData(0, 0, outputWidth, outputHeight)
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = outputWidth;
+      tempCanvas.height = outputHeight;
+      const tempCtx = tempCanvas.getContext("2d")!;
+      tempCtx.imageSmoothingEnabled = true;
+      tempCtx.imageSmoothingQuality = "high";
+      tempCtx.drawImage(img, 0, 0, outputWidth, outputHeight);
+      const imageData = tempCtx.getImageData(0, 0, outputWidth, outputHeight);
 
       // Enhance faces on the upscaled image
-      const { dataUrl, faces } = await enhance(imageData)
+      const { dataUrl, faces } = await enhance(imageData);
 
-      setFaceCount(faces)
-      setEnhancedSize({ width: outputWidth, height: outputHeight })
+      setFaceCount(faces);
+      setEnhancedSize({ width: outputWidth, height: outputHeight });
 
       if (faces === 0) {
         // No faces detected - show warning but still update
-        setError(t('freeTools.faceEnhancer.noFaces'))
+        setError(t("freeTools.faceEnhancer.noFaces"));
       }
 
       // Set the enhanced image
-      setEnhancedImage(dataUrl)
+      setEnhancedImage(dataUrl);
 
       // Also draw to canvas for download format conversion
-      const canvas = canvasRef.current
-      canvas.width = outputWidth
-      canvas.height = outputHeight
-      const ctx = canvas.getContext('2d')!
-      const resultImg = new Image()
+      const canvas = canvasRef.current;
+      canvas.width = outputWidth;
+      canvas.height = outputHeight;
+      const ctx = canvas.getContext("2d")!;
+      const resultImg = new Image();
       await new Promise<void>((resolve) => {
         resultImg.onload = () => {
-          ctx.drawImage(resultImg, 0, 0)
-          resolve()
-        }
-        resultImg.src = dataUrl
-      })
+          ctx.drawImage(resultImg, 0, 0);
+          resolve();
+        };
+        resultImg.src = dataUrl;
+      });
 
-      completeAllPhases()
+      completeAllPhases();
     } catch (error) {
-      console.error('Enhancement failed:', error)
-      setError(error instanceof Error ? error.message : 'Enhancement failed')
+      console.error("Enhancement failed:", error);
+      setError(error instanceof Error ? error.message : "Enhancement failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!enhancedImage || !canvasRef.current) return
+    if (!enhancedImage || !canvasRef.current) return;
 
     // Get canvas and convert to selected format
-    const canvas = canvasRef.current
-    const mimeType = `image/${downloadFormat}`
-    const quality = downloadFormat === 'png' ? undefined : 0.95
-    const dataUrl = canvas.toDataURL(mimeType, quality)
-
-    const link = document.createElement('a')
-    link.href = dataUrl
-    link.download = generateFreeToolFilename('face-enhancer', downloadFormat)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const canvas = canvasRef.current;
+    const mimeType = `image/${downloadFormat}`;
+    const quality = downloadFormat === "png" ? undefined : 0.95;
+    const dataUrl = canvas.toDataURL(mimeType, quality);
+
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = generateFreeToolFilename("face-enhancer", downloadFormat);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <div
@@ -370,7 +371,7 @@ export function FaceEnhancerPage() {
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
             <p className="text-lg font-medium">
-              {t('freeTools.faceEnhancer.orDragDrop')}
+              {t("freeTools.faceEnhancer.orDragDrop")}
             </p>
           </div>
         </div>
@@ -378,19 +379,15 @@ export function FaceEnhancerPage() {
 
       {/* Header */}
       <div className="flex items-center gap-4 mb-8">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleBack}
-        >
+        <Button variant="ghost" size="icon" onClick={handleBack}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
           <h1 className="text-2xl font-bold">
-            {t('freeTools.faceEnhancer.title')}
+            {t("freeTools.faceEnhancer.title")}
           </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.faceEnhancer.description')}
+            {t("freeTools.faceEnhancer.description")}
           </p>
         </div>
       </div>
@@ -399,10 +396,10 @@ export function FaceEnhancerPage() {
       {!originalImage && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
           onDrop={handleDrop}
@@ -415,10 +412,10 @@ export function FaceEnhancerPage() {
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
             <p className="text-lg font-medium">
-              {t('freeTools.faceEnhancer.selectImage')}
+              {t("freeTools.faceEnhancer.selectImage")}
             </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.faceEnhancer.orDragDrop')}
+              {t("freeTools.faceEnhancer.orDragDrop")}
             </p>
           </CardContent>
         </Card>
@@ -430,8 +427,8 @@ export function FaceEnhancerPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
         }}
       />
 
@@ -446,7 +443,7 @@ export function FaceEnhancerPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.faceEnhancer.selectImage')}
+              {t("freeTools.faceEnhancer.selectImage")}
             </Button>
 
             <Select
@@ -473,12 +470,12 @@ export function FaceEnhancerPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.faceEnhancer.processing')}
+                  {t("freeTools.faceEnhancer.processing")}
                 </>
               ) : (
                 <>
                   <Sparkles className="h-4 w-4 mr-2" />
-                  {t('freeTools.faceEnhancer.enhance')}
+                  {t("freeTools.faceEnhancer.enhance")}
                 </>
               )}
             </Button>
@@ -487,27 +484,29 @@ export function FaceEnhancerPage() {
                 {/* Face count badge */}
                 {faceCount > 0 && (
                   <span className="text-sm text-muted-foreground px-2 py-1 bg-muted rounded">
-                    {t('freeTools.faceEnhancer.facesFound', { count: faceCount })}
+                    {t("freeTools.faceEnhancer.facesFound", {
+                      count: faceCount,
+                    })}
                   </span>
                 )}
 
                 {/* View mode toggle */}
                 <div className="flex rounded-md border">
                   <Button
-                    variant={viewMode === 'sideBySide' ? 'secondary' : 'ghost'}
+                    variant={viewMode === "sideBySide" ? "secondary" : "ghost"}
                     size="sm"
                     className="rounded-r-none border-0"
-                    onClick={() => setViewMode('sideBySide')}
-                    title={t('freeTools.faceEnhancer.sideBySide')}
+                    onClick={() => setViewMode("sideBySide")}
+                    title={t("freeTools.faceEnhancer.sideBySide")}
                   >
                     <Columns2 className="h-4 w-4" />
                   </Button>
                   <Button
-                    variant={viewMode === 'comparison' ? 'secondary' : 'ghost'}
+                    variant={viewMode === "comparison" ? "secondary" : "ghost"}
                     size="sm"
                     className="rounded-l-none border-0"
-                    onClick={() => setViewMode('comparison')}
-                    title={t('freeTools.faceEnhancer.comparison')}
+                    onClick={() => setViewMode("comparison")}
+                    title={t("freeTools.faceEnhancer.comparison")}
                   >
                     <SplitSquareHorizontal className="h-4 w-4" />
                   </Button>
@@ -516,7 +515,7 @@ export function FaceEnhancerPage() {
                 <Select
                   value={downloadFormat}
                   onValueChange={(v) =>
-                    setDownloadFormat(v as 'png' | 'jpeg' | 'webp')
+                    setDownloadFormat(v as "png" | "jpeg" | "webp")
                   }
                 >
                   <SelectTrigger className="w-28">
@@ -530,7 +529,7 @@ export function FaceEnhancerPage() {
                 </Select>
                 <Button variant="outline" onClick={handleDownload}>
                   <Download className="h-4 w-4 mr-2" />
-                  {t('freeTools.faceEnhancer.download')}
+                  {t("freeTools.faceEnhancer.download")}
                 </Button>
               </>
             )}
@@ -550,20 +549,22 @@ export function FaceEnhancerPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
 
           {/* No faces warning (non-fatal) */}
-          {error && error === t('freeTools.faceEnhancer.noFaces') && !isProcessing && (
-            <div className="flex items-center justify-center gap-3 p-4 bg-warning/10 border border-warning/20 rounded-lg">
-              <span className="text-sm text-warning-foreground">{error}</span>
-            </div>
-          )}
+          {error &&
+            error === t("freeTools.faceEnhancer.noFaces") &&
+            !isProcessing && (
+              <div className="flex items-center justify-center gap-3 p-4 bg-warning/10 border border-warning/20 rounded-lg">
+                <span className="text-sm text-warning-foreground">{error}</span>
+              </div>
+            )}
 
           {/* Preview area */}
-          {viewMode === 'sideBySide' || !enhancedImage ? (
+          {viewMode === "sideBySide" || !enhancedImage ? (
             /* Side by side preview */
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               {/* Original */}
@@ -571,7 +572,7 @@ export function FaceEnhancerPage() {
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-sm font-medium">
-                      {t('freeTools.faceEnhancer.original')}
+                      {t("freeTools.faceEnhancer.original")}
                     </span>
                     {originalSize && (
                       <span className="text-xs text-muted-foreground">
@@ -595,7 +596,7 @@ export function FaceEnhancerPage() {
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-sm font-medium">
-                      {t('freeTools.faceEnhancer.enhanced')}
+                      {t("freeTools.faceEnhancer.enhanced")}
                     </span>
                     {enhancedSize && enhancedImage && (
                       <span className="text-xs text-muted-foreground">
@@ -603,7 +604,10 @@ export function FaceEnhancerPage() {
                       </span>
                     )}
                   </div>
-                  <div className="relative bg-muted rounded-lg" style={{ minHeight: enhancedImage ? undefined : '200px' }}>
+                  <div
+                    className="relative bg-muted rounded-lg"
+                    style={{ minHeight: enhancedImage ? undefined : "200px" }}
+                  >
                     {enhancedImage ? (
                       <img
                         src={enhancedImage}
@@ -617,7 +621,7 @@ export function FaceEnhancerPage() {
                           <>
                             <Loader2 className="h-8 w-8 animate-spin mb-2" />
                             <span className="text-sm">
-                              {t('freeTools.faceEnhancer.processing')}
+                              {t("freeTools.faceEnhancer.processing")}
                             </span>
                           </>
                         ) : (
@@ -636,24 +640,29 @@ export function FaceEnhancerPage() {
                 <div className="flex items-center justify-between mb-3">
                   <div className="flex items-center gap-4">
                     <span className="text-sm font-medium">
-                      {t('freeTools.faceEnhancer.original')}
+                      {t("freeTools.faceEnhancer.original")}
                     </span>
                     <span className="text-xs text-muted-foreground">←</span>
                     <span className="text-xs text-muted-foreground">
-                      {t('freeTools.faceEnhancer.dragToCompare')}
+                      {t("freeTools.faceEnhancer.dragToCompare")}
                     </span>
                     <span className="text-xs text-muted-foreground">→</span>
                     <span className="text-sm font-medium">
-                      {t('freeTools.faceEnhancer.enhanced')}
+                      {t("freeTools.faceEnhancer.enhanced")}
                     </span>
                   </div>
                   <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     {originalSize && (
-                      <span>{originalSize.width} x {originalSize.height}</span>
-                    )}
-                    {enhancedSize && enhancedSize.width !== originalSize?.width && (
-                      <span>→ {enhancedSize.width} x {enhancedSize.height}</span>
+                      <span>
+                        {originalSize.width} x {originalSize.height}
+                      </span>
                     )}
+                    {enhancedSize &&
+                      enhancedSize.width !== originalSize?.width && (
+                        <span>
+                          → {enhancedSize.width} x {enhancedSize.height}
+                        </span>
+                      )}
                   </div>
                 </div>
                 <div
@@ -676,7 +685,7 @@ export function FaceEnhancerPage() {
                     alt="Original"
                     className="absolute inset-0 w-full max-h-[70vh] object-contain pointer-events-none"
                     style={{
-                      clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
+                      clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`,
                     }}
                     draggable={false}
                   />
@@ -686,8 +695,9 @@ export function FaceEnhancerPage() {
                     className="absolute top-0 bottom-0 w-0.5 bg-white cursor-ew-resize"
                     style={{
                       left: `${sliderPosition}%`,
-                      transform: 'translateX(-50%)',
-                      boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.5)'
+                      transform: "translateX(-50%)",
+                      boxShadow:
+                        "0 0 0 1px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.5)",
                     }}
                   >
                     {/* Handle grip */}
@@ -701,10 +711,10 @@ export function FaceEnhancerPage() {
 
                   {/* Labels */}
                   <div className="absolute bottom-3 left-3 px-2 py-1 bg-black/60 text-white text-xs rounded">
-                    {t('freeTools.faceEnhancer.original')}
+                    {t("freeTools.faceEnhancer.original")}
                   </div>
                   <div className="absolute bottom-3 right-3 px-2 py-1 bg-black/60 text-white text-xs rounded">
-                    {t('freeTools.faceEnhancer.enhanced')}
+                    {t("freeTools.faceEnhancer.enhanced")}
                   </div>
                 </div>
               </CardContent>
@@ -714,7 +724,10 @@ export function FaceEnhancerPage() {
       )}
 
       {/* Fullscreen Preview Dialog */}
-      <Dialog open={!!previewImage} onOpenChange={(open) => !open && setPreviewImage(null)}>
+      <Dialog
+        open={!!previewImage}
+        onOpenChange={(open) => !open && setPreviewImage(null)}
+      >
         <DialogContent
           className="w-screen h-screen max-w-none max-h-none p-0 border-0 bg-black flex items-center justify-center"
           hideCloseButton
@@ -742,19 +755,23 @@ export function FaceEnhancerPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/FaceSwapperPage.tsx b/src/pages/FaceSwapperPage.tsx
index 8c5f894b..af9dbea7 100644
--- a/src/pages/FaceSwapperPage.tsx
+++ b/src/pages/FaceSwapperPage.tsx
@@ -1,23 +1,26 @@
-import { useState, useRef, useCallback, useContext, useEffect } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useFaceSwapperWorker, type DetectedFace } from '@/hooks/useFaceSwapperWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
+import { useState, useRef, useCallback, useContext, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import {
+  useFaceSwapperWorker,
+  type DetectedFace,
+} from "@/hooks/useFaceSwapperWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -26,8 +29,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -37,97 +40,129 @@ import {
   X,
   RefreshCw,
   Undo2,
-  Maximize2
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  Maximize2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Phase configuration for face swapper
 const PHASES_WITHOUT_ENHANCE = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.3 },
-  { id: 'loading', labelKey: 'freeTools.progress.loading', weight: 0.1 },
-  { id: 'detect', labelKey: 'freeTools.faceSwapper.detecting', weight: 0.1 },
-  { id: 'embed', labelKey: 'freeTools.faceSwapper.extractingEmbedding', weight: 0.1 },
-  { id: 'swap', labelKey: 'freeTools.faceSwapper.swapping', weight: 0.4 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.3 },
+  { id: "loading", labelKey: "freeTools.progress.loading", weight: 0.1 },
+  { id: "detect", labelKey: "freeTools.faceSwapper.detecting", weight: 0.1 },
+  {
+    id: "embed",
+    labelKey: "freeTools.faceSwapper.extractingEmbedding",
+    weight: 0.1,
+  },
+  { id: "swap", labelKey: "freeTools.faceSwapper.swapping", weight: 0.4 },
+];
 
 const PHASES_WITH_ENHANCE = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.25 },
-  { id: 'loading', labelKey: 'freeTools.progress.loading', weight: 0.1 },
-  { id: 'detect', labelKey: 'freeTools.faceSwapper.detecting', weight: 0.1 },
-  { id: 'embed', labelKey: 'freeTools.faceSwapper.extractingEmbedding', weight: 0.05 },
-  { id: 'swap', labelKey: 'freeTools.faceSwapper.swapping', weight: 0.3 },
-  { id: 'enhance', labelKey: 'freeTools.faceSwapper.enhancing', weight: 0.2 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.25 },
+  { id: "loading", labelKey: "freeTools.progress.loading", weight: 0.1 },
+  { id: "detect", labelKey: "freeTools.faceSwapper.detecting", weight: 0.1 },
+  {
+    id: "embed",
+    labelKey: "freeTools.faceSwapper.extractingEmbedding",
+    weight: 0.05,
+  },
+  { id: "swap", labelKey: "freeTools.faceSwapper.swapping", weight: 0.3 },
+  { id: "enhance", labelKey: "freeTools.faceSwapper.enhancing", weight: 0.2 },
+];
 
 export function FaceSwapperPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const sourceInputRef = useRef<HTMLInputElement>(null)
-  const targetInputRef = useRef<HTMLInputElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const overlayCanvasRef = useRef<HTMLCanvasElement>(null)
-  const sourceOverlayCanvasRef = useRef<HTMLCanvasElement>(null)
-  const targetImageRef = useRef<HTMLImageElement>(null)
-  const sourceImageRef = useRef<HTMLImageElement>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const sourceInputRef = useRef<HTMLInputElement>(null);
+  const targetInputRef = useRef<HTMLInputElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
+  const sourceOverlayCanvasRef = useRef<HTMLCanvasElement>(null);
+  const targetImageRef = useRef<HTMLImageElement>(null);
+  const sourceImageRef = useRef<HTMLImageElement>(null);
 
   // Source image state (current working source)
-  const [sourceImage, setSourceImage] = useState<string | null>(null)
-  const [sourceSize, setSourceSize] = useState<{ width: number; height: number } | null>(null)
-  const [sourceFaces, setSourceFaces] = useState<DetectedFace[]>([])
-  const [selectedSourceFaceIndex, setSelectedSourceFaceIndex] = useState<number | null>(null)
+  const [sourceImage, setSourceImage] = useState<string | null>(null);
+  const [sourceSize, setSourceSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [sourceFaces, setSourceFaces] = useState<DetectedFace[]>([]);
+  const [selectedSourceFaceIndex, setSelectedSourceFaceIndex] = useState<
+    number | null
+  >(null);
 
   // Per-target-face source storage
   interface PerFaceSource {
-    sourceImage: string
-    sourceSize: { width: number; height: number }
-    sourceFaces: DetectedFace[]
-    selectedSourceFaceIndex: number
+    sourceImage: string;
+    sourceSize: { width: number; height: number };
+    sourceFaces: DetectedFace[];
+    selectedSourceFaceIndex: number;
   }
-  const [perFaceSourceMap, setPerFaceSourceMap] = useState<Map<number, PerFaceSource>>(new Map())
+  const [perFaceSourceMap, setPerFaceSourceMap] = useState<
+    Map<number, PerFaceSource>
+  >(new Map());
 
   // Target image state
-  const [targetImage, setTargetImage] = useState<string | null>(null)
-  const [originalTargetImage, setOriginalTargetImage] = useState<string | null>(null)
-  const [targetSize, setTargetSize] = useState<{ width: number; height: number } | null>(null)
-  const [targetFaces, setTargetFaces] = useState<DetectedFace[]>([])
-  const [selectedFaceIndices, setSelectedFaceIndices] = useState<Set<number>>(new Set())
+  const [targetImage, setTargetImage] = useState<string | null>(null);
+  const [originalTargetImage, setOriginalTargetImage] = useState<string | null>(
+    null,
+  );
+  const [targetSize, setTargetSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [targetFaces, setTargetFaces] = useState<DetectedFace[]>([]);
+  const [selectedFaceIndices, setSelectedFaceIndices] = useState<Set<number>>(
+    new Set(),
+  );
 
   // Processing state
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDetecting, setIsDetecting] = useState(false)
-  const [enableEnhancement, setEnableEnhancement] = useState(true)
-  const [resultImage, setResultImage] = useState<string | null>(null)
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDetecting, setIsDetecting] = useState(false);
+  const [enableEnhancement, setEnableEnhancement] = useState(true);
+  const [resultImage, setResultImage] = useState<string | null>(null);
 
   // Track swapped faces and their history for reverting
-  const [swappedFaces, setSwappedFaces] = useState<Set<number>>(new Set())
+  const [swappedFaces, setSwappedFaces] = useState<Set<number>>(new Set());
   // Map of faceIndex -> resultImage before that face was swapped
-  const [swapHistory, setSwapHistory] = useState<Map<number, string | null>>(new Map())
+  const [swapHistory, setSwapHistory] = useState<Map<number, string | null>>(
+    new Map(),
+  );
 
   // UI state
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>('jpeg')
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "jpeg",
+  );
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Selected target face for the working area
-  const [selectedTargetFaceIndex, setSelectedTargetFaceIndex] = useState<number | null>(null)
+  const [selectedTargetFaceIndex, setSelectedTargetFaceIndex] = useState<
+    number | null
+  >(null);
 
   // Hover state for face boxes
-  const [hoveredFaceIndex, setHoveredFaceIndex] = useState<number | null>(null)
-  const [hoveredSourceFaceIndex, setHoveredSourceFaceIndex] = useState<number | null>(null)
+  const [hoveredFaceIndex, setHoveredFaceIndex] = useState<number | null>(null);
+  const [hoveredSourceFaceIndex, setHoveredSourceFaceIndex] = useState<
+    number | null
+  >(null);
 
   // Drag and drop state
-  const [isDraggingTarget, setIsDraggingTarget] = useState(false)
-  const [isDraggingSource, setIsDraggingSource] = useState(false)
-  const targetDragCounterRef = useRef(0)
-  const sourceDragCounterRef = useRef(0)
+  const [isDraggingTarget, setIsDraggingTarget] = useState(false);
+  const [isDraggingSource, setIsDraggingSource] = useState(false);
+  const targetDragCounterRef = useRef(0);
+  const sourceDragCounterRef = useRef(0);
 
   // Resize trigger to redraw face boxes
-  const [resizeTrigger, setResizeTrigger] = useState(0)
+  const [resizeTrigger, setResizeTrigger] = useState(0);
 
   // Get phases based on enhancement toggle
-  const phases = enableEnhancement ? PHASES_WITH_ENHANCE : PHASES_WITHOUT_ENHANCE
+  const phases = enableEnhancement
+    ? PHASES_WITH_ENHANCE
+    : PHASES_WITHOUT_ENHANCE;
 
   // Multi-phase progress tracking
   const {
@@ -136,742 +171,903 @@ export function FaceSwapperPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases });
 
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null);
 
   // Reset progress when enhancement toggle changes
   useEffect(() => {
-    resetProgress()
-  }, [enableEnhancement, resetProgress])
+    resetProgress();
+  }, [enableEnhancement, resetProgress]);
 
   // Listen for window resize to redraw face boxes
   useEffect(() => {
     const handleResize = () => {
-      setResizeTrigger(prev => prev + 1)
-    }
-    window.addEventListener('resize', handleResize)
-    return () => window.removeEventListener('resize', handleResize)
-  }, [])
+      setResizeTrigger((prev) => prev + 1);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
-  const { initModels, detectFaces, swapFaces, dispose, hasFailed, retryWorker } = useFaceSwapperWorker({
+  const {
+    initModels,
+    detectFaces,
+    swapFaces,
+    dispose,
+    hasFailed,
+    retryWorker,
+  } = useFaceSwapperWorker({
     onPhase: (phase) => {
-      startPhase(phase)
+      startPhase(phase);
     },
     onProgress: (phase, progressValue, detail) => {
-      updatePhase(phase, progressValue, detail)
+      updatePhase(phase, progressValue, detail);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      setIsDetecting(false)
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      setIsDetecting(false);
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing || isDetecting) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      dispose()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      dispose();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, isDetecting, dispose, resetPage, location.pathname, navigate])
+  }, [
+    isProcessing,
+    isDetecting,
+    dispose,
+    resetPage,
+    location.pathname,
+    navigate,
+  ]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    dispose()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    dispose();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, resetPage, location.pathname, navigate]);
 
   // Load image and get ImageData
-  const loadImageData = useCallback((dataUrl: string): Promise<{ imageData: ImageData; width: number; height: number }> => {
-    return new Promise((resolve, reject) => {
-      const img = new Image()
-      img.onload = () => {
-        const canvas = document.createElement('canvas')
-        canvas.width = img.width
-        canvas.height = img.height
-        const ctx = canvas.getContext('2d')!
-        ctx.drawImage(img, 0, 0)
-        const imageData = ctx.getImageData(0, 0, img.width, img.height)
-        resolve({ imageData, width: img.width, height: img.height })
-      }
-      img.onerror = () => reject(new Error('Failed to load image'))
-      img.src = dataUrl
-    })
-  }, [])
+  const loadImageData = useCallback(
+    (
+      dataUrl: string,
+    ): Promise<{ imageData: ImageData; width: number; height: number }> => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const ctx = canvas.getContext("2d")!;
+          ctx.drawImage(img, 0, 0);
+          const imageData = ctx.getImageData(0, 0, img.width, img.height);
+          resolve({ imageData, width: img.width, height: img.height });
+        };
+        img.onerror = () => reject(new Error("Failed to load image"));
+        img.src = dataUrl;
+      });
+    },
+    [],
+  );
 
   // Handle source image selection
-  const handleSourceSelect = useCallback(async (file: File) => {
-    if (!file.type.startsWith('image/')) return
-
-    const reader = new FileReader()
-    reader.onload = async (e) => {
-      const dataUrl = e.target?.result as string
-      setError(null)
-      setSourceImage(dataUrl)
-      setSourceFaces([])
-      setSelectedSourceFaceIndex(null)
-      resetProgress()
-
-      // Get dimensions
-      const img = new Image()
-      img.onload = () => {
-        setSourceSize({ width: img.width, height: img.height })
-      }
-      img.src = dataUrl
-
-      // Auto-detect faces in source
-      try {
-        setIsDetecting(true)
-        await initModels(enableEnhancement)
-        const { imageData } = await loadImageData(dataUrl)
-        const faces = await detectFaces(imageData, 'source')
-
-        if (faces.length > 0) {
-          // Sort faces by area (largest first)
-          const sortedFaces = [...faces].sort((a, b) => {
-            const areaA = a.box.width * a.box.height
-            const areaB = b.box.width * b.box.height
-            return areaB - areaA
-          })
-          setSourceFaces(sortedFaces)
-          // Auto-select first (largest) face
-          setSelectedSourceFaceIndex(0)
-        } else {
-          setError(t('freeTools.faceSwapper.noSourceFace'))
+  const handleSourceSelect = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith("image/")) return;
+
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const dataUrl = e.target?.result as string;
+        setError(null);
+        setSourceImage(dataUrl);
+        setSourceFaces([]);
+        setSelectedSourceFaceIndex(null);
+        resetProgress();
+
+        // Get dimensions
+        const img = new Image();
+        img.onload = () => {
+          setSourceSize({ width: img.width, height: img.height });
+        };
+        img.src = dataUrl;
+
+        // Auto-detect faces in source
+        try {
+          setIsDetecting(true);
+          await initModels(enableEnhancement);
+          const { imageData } = await loadImageData(dataUrl);
+          const faces = await detectFaces(imageData, "source");
+
+          if (faces.length > 0) {
+            // Sort faces by area (largest first)
+            const sortedFaces = [...faces].sort((a, b) => {
+              const areaA = a.box.width * a.box.height;
+              const areaB = b.box.width * b.box.height;
+              return areaB - areaA;
+            });
+            setSourceFaces(sortedFaces);
+            // Auto-select first (largest) face
+            setSelectedSourceFaceIndex(0);
+          } else {
+            setError(t("freeTools.faceSwapper.noSourceFace"));
+          }
+        } catch (err) {
+          console.error("Failed to detect source face:", err);
+        } finally {
+          setIsDetecting(false);
+          resetProgress(); // Clear any phase progress from detection
         }
-      } catch (err) {
-        console.error('Failed to detect source face:', err)
-      } finally {
-        setIsDetecting(false)
-        resetProgress() // Clear any phase progress from detection
-      }
-    }
-    reader.readAsDataURL(file)
-  }, [initModels, enableEnhancement, loadImageData, detectFaces, resetProgress, t])
+      };
+      reader.readAsDataURL(file);
+    },
+    [
+      initModels,
+      enableEnhancement,
+      loadImageData,
+      detectFaces,
+      resetProgress,
+      t,
+    ],
+  );
 
   // Handle target image selection
-  const handleTargetSelect = useCallback(async (file: File) => {
-    if (!file.type.startsWith('image/')) return
-
-    const reader = new FileReader()
-    reader.onload = async (e) => {
-      const dataUrl = e.target?.result as string
-      setError(null)
-      setTargetImage(dataUrl)
-      setOriginalTargetImage(dataUrl)
-      setTargetFaces([])
-      setSelectedFaceIndices(new Set())
-      setSelectedTargetFaceIndex(null)
-      setPerFaceSourceMap(new Map())
-      setSourceImage(null)
-      setSourceSize(null)
-      setSourceFaces([])
-      setSelectedSourceFaceIndex(null)
-      setResultImage(null)
-      setSwappedFaces(new Set())
-      setSwapHistory(new Map())
-      resetProgress()
-
-      // Get dimensions
-      const img = new Image()
-      img.onload = () => {
-        setTargetSize({ width: img.width, height: img.height })
-      }
-      img.src = dataUrl
-
-      // Auto-detect faces in target
-      try {
-        setIsDetecting(true)
-        await initModels(enableEnhancement)
-        const { imageData } = await loadImageData(dataUrl)
-        const faces = await detectFaces(imageData, 'target')
-
-        if (faces.length > 0) {
-          // Sort faces by area (largest first)
-          const sortedFaces = [...faces].sort((a, b) => {
-            const areaA = a.box.width * a.box.height
-            const areaB = b.box.width * b.box.height
-            return areaB - areaA
-          })
-          setTargetFaces(sortedFaces)
-          // Auto-select first (largest) face
-          setSelectedTargetFaceIndex(0)
-          setSelectedFaceIndices(new Set([0]))
-        } else {
-          setError(t('freeTools.faceSwapper.noTargetFaces'))
+  const handleTargetSelect = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith("image/")) return;
+
+      const reader = new FileReader();
+      reader.onload = async (e) => {
+        const dataUrl = e.target?.result as string;
+        setError(null);
+        setTargetImage(dataUrl);
+        setOriginalTargetImage(dataUrl);
+        setTargetFaces([]);
+        setSelectedFaceIndices(new Set());
+        setSelectedTargetFaceIndex(null);
+        setPerFaceSourceMap(new Map());
+        setSourceImage(null);
+        setSourceSize(null);
+        setSourceFaces([]);
+        setSelectedSourceFaceIndex(null);
+        setResultImage(null);
+        setSwappedFaces(new Set());
+        setSwapHistory(new Map());
+        resetProgress();
+
+        // Get dimensions
+        const img = new Image();
+        img.onload = () => {
+          setTargetSize({ width: img.width, height: img.height });
+        };
+        img.src = dataUrl;
+
+        // Auto-detect faces in target
+        try {
+          setIsDetecting(true);
+          await initModels(enableEnhancement);
+          const { imageData } = await loadImageData(dataUrl);
+          const faces = await detectFaces(imageData, "target");
+
+          if (faces.length > 0) {
+            // Sort faces by area (largest first)
+            const sortedFaces = [...faces].sort((a, b) => {
+              const areaA = a.box.width * a.box.height;
+              const areaB = b.box.width * b.box.height;
+              return areaB - areaA;
+            });
+            setTargetFaces(sortedFaces);
+            // Auto-select first (largest) face
+            setSelectedTargetFaceIndex(0);
+            setSelectedFaceIndices(new Set([0]));
+          } else {
+            setError(t("freeTools.faceSwapper.noTargetFaces"));
+          }
+        } catch (err) {
+          console.error("Failed to detect target faces:", err);
+        } finally {
+          setIsDetecting(false);
+          resetProgress(); // Clear any phase progress from detection
         }
-      } catch (err) {
-        console.error('Failed to detect target faces:', err)
-      } finally {
-        setIsDetecting(false)
-        resetProgress() // Clear any phase progress from detection
-      }
-    }
-    reader.readAsDataURL(file)
-  }, [initModels, enableEnhancement, loadImageData, detectFaces, resetProgress, t])
+      };
+      reader.readAsDataURL(file);
+    },
+    [
+      initModels,
+      enableEnhancement,
+      loadImageData,
+      detectFaces,
+      resetProgress,
+      t,
+    ],
+  );
 
   // Drag and drop handlers for target
   const handleTargetDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      targetDragCounterRef.current = 0
-      setIsDraggingTarget(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleTargetSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      targetDragCounterRef.current = 0;
+      setIsDraggingTarget(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleTargetSelect(file);
     },
-    [handleTargetSelect, isProcessing]
-  )
+    [handleTargetSelect, isProcessing],
+  );
 
   const handleTargetDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleTargetDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    targetDragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    targetDragCounterRef.current++;
     if (targetDragCounterRef.current === 1) {
-      setIsDraggingTarget(true)
+      setIsDraggingTarget(true);
     }
-  }, [])
+  }, []);
 
   const handleTargetDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    targetDragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    targetDragCounterRef.current--;
     if (targetDragCounterRef.current === 0) {
-      setIsDraggingTarget(false)
+      setIsDraggingTarget(false);
     }
-  }, [])
+  }, []);
 
   // Drag and drop handlers for source
   const handleSourceDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      sourceDragCounterRef.current = 0
-      setIsDraggingSource(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleSourceSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      sourceDragCounterRef.current = 0;
+      setIsDraggingSource(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleSourceSelect(file);
     },
-    [handleSourceSelect, isProcessing]
-  )
+    [handleSourceSelect, isProcessing],
+  );
 
   const handleSourceDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleSourceDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    sourceDragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    sourceDragCounterRef.current++;
     if (sourceDragCounterRef.current === 1) {
-      setIsDraggingSource(true)
+      setIsDraggingSource(true);
     }
-  }, [])
+  }, []);
 
   const handleSourceDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    sourceDragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    sourceDragCounterRef.current--;
     if (sourceDragCounterRef.current === 0) {
-      setIsDraggingSource(false)
+      setIsDraggingSource(false);
     }
-  }, [])
+  }, []);
 
   // Calculate displayed image area - with object-contain, image may have letterboxing
   const getDisplayedImageArea = (img: HTMLImageElement) => {
-    const containerRect = img.getBoundingClientRect()
-    const naturalWidth = img.naturalWidth
-    const naturalHeight = img.naturalHeight
+    const containerRect = img.getBoundingClientRect();
+    const naturalWidth = img.naturalWidth;
+    const naturalHeight = img.naturalHeight;
 
     if (!naturalWidth || !naturalHeight) {
       return {
         displayWidth: containerRect.width,
         displayHeight: containerRect.height,
         offsetX: 0,
-        offsetY: 0
-      }
+        offsetY: 0,
+      };
     }
 
     // Calculate aspect ratios
-    const containerAspect = containerRect.width / containerRect.height
-    const imageAspect = naturalWidth / naturalHeight
+    const containerAspect = containerRect.width / containerRect.height;
+    const imageAspect = naturalWidth / naturalHeight;
 
-    let displayWidth: number
-    let displayHeight: number
+    let displayWidth: number;
+    let displayHeight: number;
 
     if (imageAspect > containerAspect) {
       // Image is wider - fits width, letterbox top/bottom
-      displayWidth = containerRect.width
-      displayHeight = containerRect.width / imageAspect
+      displayWidth = containerRect.width;
+      displayHeight = containerRect.width / imageAspect;
     } else {
       // Image is taller - fits height, pillarbox left/right
-      displayHeight = containerRect.height
-      displayWidth = containerRect.height * imageAspect
+      displayHeight = containerRect.height;
+      displayWidth = containerRect.height * imageAspect;
     }
 
     // Calculate offset (centered)
-    const offsetX = (containerRect.width - displayWidth) / 2
-    const offsetY = (containerRect.height - displayHeight) / 2
+    const offsetX = (containerRect.width - displayWidth) / 2;
+    const offsetY = (containerRect.height - displayHeight) / 2;
 
     return {
       displayWidth,
       displayHeight,
       offsetX,
-      offsetY
-    }
-  }
+      offsetY,
+    };
+  };
 
   // Draw face overlay on target image
   useEffect(() => {
-    if (!overlayCanvasRef.current || !targetImageRef.current || targetFaces.length === 0) return
+    if (
+      !overlayCanvasRef.current ||
+      !targetImageRef.current ||
+      targetFaces.length === 0
+    )
+      return;
 
-    const canvas = overlayCanvasRef.current
-    const img = targetImageRef.current
-    const ctx = canvas.getContext('2d')!
+    const canvas = overlayCanvasRef.current;
+    const img = targetImageRef.current;
+    const ctx = canvas.getContext("2d")!;
 
     // Get image size for overlay
-    const imgRect = img.getBoundingClientRect()
-    const { displayWidth, displayHeight, offsetX, offsetY } = getDisplayedImageArea(img)
+    const imgRect = img.getBoundingClientRect();
+    const { displayWidth, displayHeight, offsetX, offsetY } =
+      getDisplayedImageArea(img);
 
     // Match canvas buffer size to image size
-    canvas.width = imgRect.width
-    canvas.height = imgRect.height
+    canvas.width = imgRect.width;
+    canvas.height = imgRect.height;
 
     // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
     // Calculate scale from actual image to displayed size
-    const scaleX = displayWidth / (targetSize?.width || 1)
-    const scaleY = displayHeight / (targetSize?.height || 1)
+    const scaleX = displayWidth / (targetSize?.width || 1);
+    const scaleY = displayHeight / (targetSize?.height || 1);
 
     // Draw face boxes
     targetFaces.forEach((face, idx) => {
-      const isSelected = selectedFaceIndices.has(idx)
-      const isHovered = hoveredFaceIndex === idx
-      const box = face.box
+      const isSelected = selectedFaceIndices.has(idx);
+      const isHovered = hoveredFaceIndex === idx;
+      const box = face.box;
 
       // Scale box coordinates to displayed size and add offset
-      const x = box.x * scaleX + offsetX
-      const y = box.y * scaleY + offsetY
-      const w = box.width * scaleX
-      const h = box.height * scaleY
+      const x = box.x * scaleX + offsetX;
+      const y = box.y * scaleY + offsetY;
+      const w = box.width * scaleX;
+      const h = box.height * scaleY;
 
       // Draw box - red for selected, cyan for hovered, blue for unselected
-      ctx.strokeStyle = isSelected ? '#ef4444' : isHovered ? '#06b6d4' : '#3b82f6'
-      ctx.lineWidth = isHovered ? 3 : 2
-      ctx.strokeRect(x, y, w, h)
+      ctx.strokeStyle = isSelected
+        ? "#ef4444"
+        : isHovered
+          ? "#06b6d4"
+          : "#3b82f6";
+      ctx.lineWidth = isHovered ? 3 : 2;
+      ctx.strokeRect(x, y, w, h);
 
       // Fill for selected or hovered
       if (isSelected) {
-        ctx.fillStyle = 'rgba(239, 68, 68, 0.15)'
-        ctx.fillRect(x, y, w, h)
+        ctx.fillStyle = "rgba(239, 68, 68, 0.15)";
+        ctx.fillRect(x, y, w, h);
       } else if (isHovered) {
-        ctx.fillStyle = 'rgba(6, 182, 212, 0.1)'
-        ctx.fillRect(x, y, w, h)
+        ctx.fillStyle = "rgba(6, 182, 212, 0.1)";
+        ctx.fillRect(x, y, w, h);
       }
 
       // Draw index badge
-      const badgeSize = 20
-      ctx.fillStyle = isSelected ? '#ef4444' : isHovered ? '#06b6d4' : '#3b82f6'
-      ctx.fillRect(x, y - badgeSize - 2, badgeSize, badgeSize)
-      ctx.fillStyle = '#fff'
-      ctx.font = 'bold 12px sans-serif'
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'middle'
-      ctx.fillText(String(idx + 1), x + badgeSize / 2, y - badgeSize / 2 - 2)
-    })
-  }, [targetFaces, selectedFaceIndices, targetSize, resizeTrigger, hoveredFaceIndex])
+      const badgeSize = 20;
+      ctx.fillStyle = isSelected
+        ? "#ef4444"
+        : isHovered
+          ? "#06b6d4"
+          : "#3b82f6";
+      ctx.fillRect(x, y - badgeSize - 2, badgeSize, badgeSize);
+      ctx.fillStyle = "#fff";
+      ctx.font = "bold 12px sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(String(idx + 1), x + badgeSize / 2, y - badgeSize / 2 - 2);
+    });
+  }, [
+    targetFaces,
+    selectedFaceIndices,
+    targetSize,
+    resizeTrigger,
+    hoveredFaceIndex,
+  ]);
 
   // Draw face overlay on source image
   useEffect(() => {
-    if (!sourceOverlayCanvasRef.current || !sourceImageRef.current || sourceFaces.length === 0) return
+    if (
+      !sourceOverlayCanvasRef.current ||
+      !sourceImageRef.current ||
+      sourceFaces.length === 0
+    )
+      return;
 
-    const canvas = sourceOverlayCanvasRef.current
-    const img = sourceImageRef.current
-    const ctx = canvas.getContext('2d')!
+    const canvas = sourceOverlayCanvasRef.current;
+    const img = sourceImageRef.current;
+    const ctx = canvas.getContext("2d")!;
 
     // Get image size for overlay
-    const imgRect = img.getBoundingClientRect()
-    const { displayWidth, displayHeight, offsetX, offsetY } = getDisplayedImageArea(img)
+    const imgRect = img.getBoundingClientRect();
+    const { displayWidth, displayHeight, offsetX, offsetY } =
+      getDisplayedImageArea(img);
 
     // Match canvas buffer size to image size
-    canvas.width = imgRect.width
-    canvas.height = imgRect.height
+    canvas.width = imgRect.width;
+    canvas.height = imgRect.height;
 
     // Clear canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
     // Calculate scale from actual image to displayed size
-    const scaleX = displayWidth / (sourceSize?.width || 1)
-    const scaleY = displayHeight / (sourceSize?.height || 1)
+    const scaleX = displayWidth / (sourceSize?.width || 1);
+    const scaleY = displayHeight / (sourceSize?.height || 1);
 
     // Draw face boxes
     sourceFaces.forEach((face, idx) => {
-      const isSelected = selectedSourceFaceIndex === idx
-      const isHovered = hoveredSourceFaceIndex === idx
-      const box = face.box
+      const isSelected = selectedSourceFaceIndex === idx;
+      const isHovered = hoveredSourceFaceIndex === idx;
+      const box = face.box;
 
       // Scale box coordinates to displayed size and add offset
-      const x = box.x * scaleX + offsetX
-      const y = box.y * scaleY + offsetY
-      const w = box.width * scaleX
-      const h = box.height * scaleY
+      const x = box.x * scaleX + offsetX;
+      const y = box.y * scaleY + offsetY;
+      const w = box.width * scaleX;
+      const h = box.height * scaleY;
 
       // Draw box - red for selected, cyan for hovered, blue for unselected
-      ctx.strokeStyle = isSelected ? '#ef4444' : isHovered ? '#06b6d4' : '#3b82f6'
-      ctx.lineWidth = isHovered ? 3 : 2
-      ctx.strokeRect(x, y, w, h)
+      ctx.strokeStyle = isSelected
+        ? "#ef4444"
+        : isHovered
+          ? "#06b6d4"
+          : "#3b82f6";
+      ctx.lineWidth = isHovered ? 3 : 2;
+      ctx.strokeRect(x, y, w, h);
 
       // Fill for selected or hovered
       if (isSelected) {
-        ctx.fillStyle = 'rgba(239, 68, 68, 0.15)'
-        ctx.fillRect(x, y, w, h)
+        ctx.fillStyle = "rgba(239, 68, 68, 0.15)";
+        ctx.fillRect(x, y, w, h);
       } else if (isHovered) {
-        ctx.fillStyle = 'rgba(6, 182, 212, 0.1)'
-        ctx.fillRect(x, y, w, h)
+        ctx.fillStyle = "rgba(6, 182, 212, 0.1)";
+        ctx.fillRect(x, y, w, h);
       }
 
       // Draw index badge
-      const badgeSize = 20
-      ctx.fillStyle = isSelected ? '#ef4444' : isHovered ? '#06b6d4' : '#3b82f6'
-      ctx.fillRect(x, y - badgeSize - 2, badgeSize, badgeSize)
-      ctx.fillStyle = '#fff'
-      ctx.font = 'bold 12px sans-serif'
-      ctx.textAlign = 'center'
-      ctx.textBaseline = 'middle'
-      ctx.fillText(String(idx + 1), x + badgeSize / 2, y - badgeSize / 2 - 2)
-    })
-  }, [sourceFaces, selectedSourceFaceIndex, sourceSize, sourceImage, resizeTrigger, hoveredSourceFaceIndex])
+      const badgeSize = 20;
+      ctx.fillStyle = isSelected
+        ? "#ef4444"
+        : isHovered
+          ? "#06b6d4"
+          : "#3b82f6";
+      ctx.fillRect(x, y - badgeSize - 2, badgeSize, badgeSize);
+      ctx.fillStyle = "#fff";
+      ctx.font = "bold 12px sans-serif";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(String(idx + 1), x + badgeSize / 2, y - badgeSize / 2 - 2);
+    });
+  }, [
+    sourceFaces,
+    selectedSourceFaceIndex,
+    sourceSize,
+    sourceImage,
+    resizeTrigger,
+    hoveredSourceFaceIndex,
+  ]);
 
   // Auto-save source to per-face map when source changes
   useEffect(() => {
-    if (selectedTargetFaceIndex !== null && sourceImage && sourceSize && selectedSourceFaceIndex !== null) {
-      setPerFaceSourceMap(prev => {
-        const newMap = new Map(prev)
+    if (
+      selectedTargetFaceIndex !== null &&
+      sourceImage &&
+      sourceSize &&
+      selectedSourceFaceIndex !== null
+    ) {
+      setPerFaceSourceMap((prev) => {
+        const newMap = new Map(prev);
         newMap.set(selectedTargetFaceIndex, {
           sourceImage,
           sourceSize,
           sourceFaces,
-          selectedSourceFaceIndex
-        })
-        return newMap
-      })
+          selectedSourceFaceIndex,
+        });
+        return newMap;
+      });
     }
-  }, [selectedTargetFaceIndex, sourceImage, sourceSize, sourceFaces, selectedSourceFaceIndex])
+  }, [
+    selectedTargetFaceIndex,
+    sourceImage,
+    sourceSize,
+    sourceFaces,
+    selectedSourceFaceIndex,
+  ]);
 
   // Handle source face click
-  const handleSourceFaceClick = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!sourceOverlayCanvasRef.current || !sourceImageRef.current || !sourceSize) return
-
-    const img = sourceImageRef.current
-    const imgRect = img.getBoundingClientRect()
-    const { displayWidth, displayHeight, offsetX, offsetY } = getDisplayedImageArea(img)
-
-    const clickX = e.clientX - imgRect.left
-    const clickY = e.clientY - imgRect.top
-
-    // Calculate scale
-    const scaleX = displayWidth / sourceSize.width
-    const scaleY = displayHeight / sourceSize.height
-
-    // Check which face was clicked
-    for (let i = 0; i < sourceFaces.length; i++) {
-      const face = sourceFaces[i]
-      const box = face.box
-      const fx = box.x * scaleX + offsetX
-      const fy = box.y * scaleY + offsetY
-      const fw = box.width * scaleX
-      const fh = box.height * scaleY
-
-      if (clickX >= fx && clickX <= fx + fw && clickY >= fy && clickY <= fy + fh) {
-        setSelectedSourceFaceIndex(i)
-        break
+  const handleSourceFaceClick = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (
+        !sourceOverlayCanvasRef.current ||
+        !sourceImageRef.current ||
+        !sourceSize
+      )
+        return;
+
+      const img = sourceImageRef.current;
+      const imgRect = img.getBoundingClientRect();
+      const { displayWidth, displayHeight, offsetX, offsetY } =
+        getDisplayedImageArea(img);
+
+      const clickX = e.clientX - imgRect.left;
+      const clickY = e.clientY - imgRect.top;
+
+      // Calculate scale
+      const scaleX = displayWidth / sourceSize.width;
+      const scaleY = displayHeight / sourceSize.height;
+
+      // Check which face was clicked
+      for (let i = 0; i < sourceFaces.length; i++) {
+        const face = sourceFaces[i];
+        const box = face.box;
+        const fx = box.x * scaleX + offsetX;
+        const fy = box.y * scaleY + offsetY;
+        const fw = box.width * scaleX;
+        const fh = box.height * scaleY;
+
+        if (
+          clickX >= fx &&
+          clickX <= fx + fw &&
+          clickY >= fy &&
+          clickY <= fy + fh
+        ) {
+          setSelectedSourceFaceIndex(i);
+          break;
+        }
       }
-    }
-  }, [sourceFaces, sourceSize])
+    },
+    [sourceFaces, sourceSize],
+  );
 
   // Handle target face click
-  const handleFaceClick = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!overlayCanvasRef.current || !targetImageRef.current || !targetSize) return
-
-    const img = targetImageRef.current
-    const imgRect = img.getBoundingClientRect()
-    const { displayWidth, displayHeight, offsetX, offsetY } = getDisplayedImageArea(img)
-
-    const clickX = e.clientX - imgRect.left
-    const clickY = e.clientY - imgRect.top
-
-    // Calculate scale
-    const scaleX = displayWidth / targetSize.width
-    const scaleY = displayHeight / targetSize.height
-
-    // Check which face was clicked
-    for (let i = 0; i < targetFaces.length; i++) {
-      const face = targetFaces[i]
-      const box = face.box
-      const fx = box.x * scaleX + offsetX
-      const fy = box.y * scaleY + offsetY
-      const fw = box.width * scaleX
-      const fh = box.height * scaleY
-
-      if (clickX >= fx && clickX <= fx + fw && clickY >= fy && clickY <= fy + fh) {
-        // Select this face for the working area
-        if (selectedTargetFaceIndex === i) {
-          // Same face clicked - check if it's already in selectedFaceIndices
-          if (selectedFaceIndices.has(i)) {
-            // Clicking same face again deselects it completely
-            setSelectedTargetFaceIndex(null)
-            setSelectedFaceIndices(new Set())
+  const handleFaceClick = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (!overlayCanvasRef.current || !targetImageRef.current || !targetSize)
+        return;
+
+      const img = targetImageRef.current;
+      const imgRect = img.getBoundingClientRect();
+      const { displayWidth, displayHeight, offsetX, offsetY } =
+        getDisplayedImageArea(img);
+
+      const clickX = e.clientX - imgRect.left;
+      const clickY = e.clientY - imgRect.top;
+
+      // Calculate scale
+      const scaleX = displayWidth / targetSize.width;
+      const scaleY = displayHeight / targetSize.height;
+
+      // Check which face was clicked
+      for (let i = 0; i < targetFaces.length; i++) {
+        const face = targetFaces[i];
+        const box = face.box;
+        const fx = box.x * scaleX + offsetX;
+        const fy = box.y * scaleY + offsetY;
+        const fw = box.width * scaleX;
+        const fh = box.height * scaleY;
+
+        if (
+          clickX >= fx &&
+          clickX <= fx + fw &&
+          clickY >= fy &&
+          clickY <= fy + fh
+        ) {
+          // Select this face for the working area
+          if (selectedTargetFaceIndex === i) {
+            // Same face clicked - check if it's already in selectedFaceIndices
+            if (selectedFaceIndices.has(i)) {
+              // Clicking same face again deselects it completely
+              setSelectedTargetFaceIndex(null);
+              setSelectedFaceIndices(new Set());
+            } else {
+              // Face was in working area but not selected for swap (e.g., after a swap completed)
+              // Re-add it to selectedFaceIndices to allow another swap
+              setSelectedFaceIndices(new Set([i]));
+            }
           } else {
-            // Face was in working area but not selected for swap (e.g., after a swap completed)
-            // Re-add it to selectedFaceIndices to allow another swap
-            setSelectedFaceIndices(new Set([i]))
-          }
-        } else {
-          // Save current source to map before switching
-          if (selectedTargetFaceIndex !== null && sourceImage && sourceSize && selectedSourceFaceIndex !== null) {
-            setPerFaceSourceMap(prev => {
-              const newMap = new Map(prev)
-              newMap.set(selectedTargetFaceIndex, {
-                sourceImage,
-                sourceSize,
-                sourceFaces,
-                selectedSourceFaceIndex
-              })
-              return newMap
-            })
-          }
-
-          // Switch to new face
-          setSelectedTargetFaceIndex(i)
-          setSelectedFaceIndices(new Set([i]))
-
-          // Load source for this face if exists, otherwise clear
-          const savedSource = perFaceSourceMap.get(i)
-          if (savedSource) {
-            setSourceImage(savedSource.sourceImage)
-            setSourceSize(savedSource.sourceSize)
-            setSourceFaces(savedSource.sourceFaces)
-            setSelectedSourceFaceIndex(savedSource.selectedSourceFaceIndex)
-          } else {
-            setSourceImage(null)
-            setSourceSize(null)
-            setSourceFaces([])
-            setSelectedSourceFaceIndex(null)
+            // Save current source to map before switching
+            if (
+              selectedTargetFaceIndex !== null &&
+              sourceImage &&
+              sourceSize &&
+              selectedSourceFaceIndex !== null
+            ) {
+              setPerFaceSourceMap((prev) => {
+                const newMap = new Map(prev);
+                newMap.set(selectedTargetFaceIndex, {
+                  sourceImage,
+                  sourceSize,
+                  sourceFaces,
+                  selectedSourceFaceIndex,
+                });
+                return newMap;
+              });
+            }
+
+            // Switch to new face
+            setSelectedTargetFaceIndex(i);
+            setSelectedFaceIndices(new Set([i]));
+
+            // Load source for this face if exists, otherwise clear
+            const savedSource = perFaceSourceMap.get(i);
+            if (savedSource) {
+              setSourceImage(savedSource.sourceImage);
+              setSourceSize(savedSource.sourceSize);
+              setSourceFaces(savedSource.sourceFaces);
+              setSelectedSourceFaceIndex(savedSource.selectedSourceFaceIndex);
+            } else {
+              setSourceImage(null);
+              setSourceSize(null);
+              setSourceFaces([]);
+              setSelectedSourceFaceIndex(null);
+            }
           }
+          break;
         }
-        break
       }
-    }
-  }, [targetFaces, targetSize, selectedTargetFaceIndex, selectedFaceIndices, sourceImage, sourceSize, sourceFaces, selectedSourceFaceIndex, perFaceSourceMap])
+    },
+    [
+      targetFaces,
+      targetSize,
+      selectedTargetFaceIndex,
+      selectedFaceIndices,
+      sourceImage,
+      sourceSize,
+      sourceFaces,
+      selectedSourceFaceIndex,
+      perFaceSourceMap,
+    ],
+  );
 
   // Handle face hover
-  const handleFaceHover = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!overlayCanvasRef.current || !targetImageRef.current || !targetSize) {
-      setHoveredFaceIndex(null)
-      return
-    }
+  const handleFaceHover = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (!overlayCanvasRef.current || !targetImageRef.current || !targetSize) {
+        setHoveredFaceIndex(null);
+        return;
+      }
 
-    const img = targetImageRef.current
-    const imgRect = img.getBoundingClientRect()
-    const { displayWidth, displayHeight, offsetX, offsetY } = getDisplayedImageArea(img)
-
-    const hoverX = e.clientX - imgRect.left
-    const hoverY = e.clientY - imgRect.top
-
-    const scaleX = displayWidth / targetSize.width
-    const scaleY = displayHeight / targetSize.height
-
-    let foundHover = false
-    for (let i = 0; i < targetFaces.length; i++) {
-      const face = targetFaces[i]
-      const box = face.box
-      const fx = box.x * scaleX + offsetX
-      const fy = box.y * scaleY + offsetY
-      const fw = box.width * scaleX
-      const fh = box.height * scaleY
-
-      if (hoverX >= fx && hoverX <= fx + fw && hoverY >= fy && hoverY <= fy + fh) {
-        setHoveredFaceIndex(i)
-        foundHover = true
-        break
+      const img = targetImageRef.current;
+      const imgRect = img.getBoundingClientRect();
+      const { displayWidth, displayHeight, offsetX, offsetY } =
+        getDisplayedImageArea(img);
+
+      const hoverX = e.clientX - imgRect.left;
+      const hoverY = e.clientY - imgRect.top;
+
+      const scaleX = displayWidth / targetSize.width;
+      const scaleY = displayHeight / targetSize.height;
+
+      let foundHover = false;
+      for (let i = 0; i < targetFaces.length; i++) {
+        const face = targetFaces[i];
+        const box = face.box;
+        const fx = box.x * scaleX + offsetX;
+        const fy = box.y * scaleY + offsetY;
+        const fw = box.width * scaleX;
+        const fh = box.height * scaleY;
+
+        if (
+          hoverX >= fx &&
+          hoverX <= fx + fw &&
+          hoverY >= fy &&
+          hoverY <= fy + fh
+        ) {
+          setHoveredFaceIndex(i);
+          foundHover = true;
+          break;
+        }
       }
-    }
-    if (!foundHover) {
-      setHoveredFaceIndex(null)
-    }
-  }, [targetFaces, targetSize])
+      if (!foundHover) {
+        setHoveredFaceIndex(null);
+      }
+    },
+    [targetFaces, targetSize],
+  );
 
   // Handle source face hover
-  const handleSourceFaceHover = useCallback((e: React.MouseEvent<HTMLCanvasElement>) => {
-    if (!sourceOverlayCanvasRef.current || !sourceImageRef.current || !sourceSize) {
-      setHoveredSourceFaceIndex(null)
-      return
-    }
+  const handleSourceFaceHover = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (
+        !sourceOverlayCanvasRef.current ||
+        !sourceImageRef.current ||
+        !sourceSize
+      ) {
+        setHoveredSourceFaceIndex(null);
+        return;
+      }
 
-    const img = sourceImageRef.current
-    const imgRect = img.getBoundingClientRect()
-    const { displayWidth, displayHeight, offsetX, offsetY } = getDisplayedImageArea(img)
-
-    const hoverX = e.clientX - imgRect.left
-    const hoverY = e.clientY - imgRect.top
-
-    const scaleX = displayWidth / sourceSize.width
-    const scaleY = displayHeight / sourceSize.height
-
-    let foundHover = false
-    for (let i = 0; i < sourceFaces.length; i++) {
-      const face = sourceFaces[i]
-      const box = face.box
-      const fx = box.x * scaleX + offsetX
-      const fy = box.y * scaleY + offsetY
-      const fw = box.width * scaleX
-      const fh = box.height * scaleY
-
-      if (hoverX >= fx && hoverX <= fx + fw && hoverY >= fy && hoverY <= fy + fh) {
-        setHoveredSourceFaceIndex(i)
-        foundHover = true
-        break
+      const img = sourceImageRef.current;
+      const imgRect = img.getBoundingClientRect();
+      const { displayWidth, displayHeight, offsetX, offsetY } =
+        getDisplayedImageArea(img);
+
+      const hoverX = e.clientX - imgRect.left;
+      const hoverY = e.clientY - imgRect.top;
+
+      const scaleX = displayWidth / sourceSize.width;
+      const scaleY = displayHeight / sourceSize.height;
+
+      let foundHover = false;
+      for (let i = 0; i < sourceFaces.length; i++) {
+        const face = sourceFaces[i];
+        const box = face.box;
+        const fx = box.x * scaleX + offsetX;
+        const fy = box.y * scaleY + offsetY;
+        const fw = box.width * scaleX;
+        const fh = box.height * scaleY;
+
+        if (
+          hoverX >= fx &&
+          hoverX <= fx + fw &&
+          hoverY >= fy &&
+          hoverY <= fy + fh
+        ) {
+          setHoveredSourceFaceIndex(i);
+          foundHover = true;
+          break;
+        }
       }
-    }
-    if (!foundHover) {
-      setHoveredSourceFaceIndex(null)
-    }
-  }, [sourceFaces, sourceSize])
+      if (!foundHover) {
+        setHoveredSourceFaceIndex(null);
+      }
+    },
+    [sourceFaces, sourceSize],
+  );
 
   // Handle swap
   const handleSwap = async () => {
-    if (!sourceImage || !targetImage || selectedSourceFaceIndex === null || selectedFaceIndices.size === 0) return
+    if (
+      !sourceImage ||
+      !targetImage ||
+      selectedSourceFaceIndex === null ||
+      selectedFaceIndices.size === 0
+    )
+      return;
 
-    const selectedSourceFace = sourceFaces[selectedSourceFaceIndex]
-    if (!selectedSourceFace) return
+    const selectedSourceFace = sourceFaces[selectedSourceFaceIndex];
+    if (!selectedSourceFace) return;
 
-    setIsProcessing(true)
-    setError(null)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    resetAndStart("download");
 
     try {
       // Initialize models
-      await initModels(enableEnhancement)
+      await initModels(enableEnhancement);
 
       // Load images - use resultImage if available (for iterative swapping)
-      const { imageData: sourceImageData } = await loadImageData(sourceImage)
-      const currentTarget = resultImage || targetImage
-      const { imageData: targetImageData } = await loadImageData(currentTarget)
+      const { imageData: sourceImageData } = await loadImageData(sourceImage);
+      const currentTarget = resultImage || targetImage;
+      const { imageData: targetImageData } = await loadImageData(currentTarget);
 
       // Get selected faces
       const selectedFaces = targetFaces
         .filter((_, idx) => selectedFaceIndices.has(idx))
-        .map(face => ({
+        .map((face) => ({
           landmarks: face.landmarks,
-          box: face.box
-        }))
+          box: face.box,
+        }));
 
       // Save current state to history before swapping (for revert)
-      const prevResult = resultImage
-      const faceIdx = selectedTargetFaceIndex!
+      const prevResult = resultImage;
+      const faceIdx = selectedTargetFaceIndex!;
 
       // Swap faces
       const { dataUrl } = await swapFaces({
         sourceImage: sourceImageData,
         sourceLandmarks: selectedSourceFace.landmarks,
         targetImage: targetImageData,
-        targetFaces: selectedFaces
-      })
+        targetFaces: selectedFaces,
+      });
 
       // Update history - store the state before this swap
-      setSwapHistory(prev => {
-        const newHistory = new Map(prev)
+      setSwapHistory((prev) => {
+        const newHistory = new Map(prev);
         // Only store if this face hasn't been swapped before
         if (!prev.has(faceIdx)) {
-          newHistory.set(faceIdx, prevResult)
+          newHistory.set(faceIdx, prevResult);
         }
-        return newHistory
-      })
+        return newHistory;
+      });
 
       // Mark face as swapped
-      setSwappedFaces(prev => new Set(prev).add(faceIdx))
+      setSwappedFaces((prev) => new Set(prev).add(faceIdx));
 
-      setResultImage(dataUrl)
+      setResultImage(dataUrl);
 
       // Keep target face selected so user can swap with different source or adjust parameters
-      completeAllPhases()
+      completeAllPhases();
     } catch (err) {
-      console.error('Swap failed:', err)
-      setError(err instanceof Error ? err.message : 'Face swap failed')
+      console.error("Swap failed:", err);
+      setError(err instanceof Error ? err.message : "Face swap failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!resultImage || !canvasRef.current) return
+    if (!resultImage || !canvasRef.current) return;
 
     // Load result image to canvas for format conversion
-    const img = new Image()
+    const img = new Image();
     img.onload = () => {
-      const canvas = canvasRef.current!
-      canvas.width = img.width
-      canvas.height = img.height
-      const ctx = canvas.getContext('2d')!
-      ctx.drawImage(img, 0, 0)
-
-      const mimeType = `image/${downloadFormat}`
-      const quality = downloadFormat === 'png' ? undefined : 0.95
-      const dataUrl = canvas.toDataURL(mimeType, quality)
-
-      const link = document.createElement('a')
-      link.href = dataUrl
-      link.download = generateFreeToolFilename('face-swapper', downloadFormat)
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-    }
-    img.src = resultImage
-  }
+      const canvas = canvasRef.current!;
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d")!;
+      ctx.drawImage(img, 0, 0);
+
+      const mimeType = `image/${downloadFormat}`;
+      const quality = downloadFormat === "png" ? undefined : 0.95;
+      const dataUrl = canvas.toDataURL(mimeType, quality);
+
+      const link = document.createElement("a");
+      link.href = dataUrl;
+      link.download = generateFreeToolFilename("face-swapper", downloadFormat);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
+    img.src = resultImage;
+  };
 
   // Revert a swapped face back to original
-  const handleRevert = useCallback((faceIndex: number) => {
-    if (!swappedFaces.has(faceIndex)) return
-
-    // Get the result image before this face was swapped
-    const prevResult = swapHistory.get(faceIndex)
-
-    // Restore to previous state (null means original target image)
-    setResultImage(prevResult ?? null)
-
-    // Remove from swapped faces
-    setSwappedFaces(prev => {
-      const newSet = new Set(prev)
-      newSet.delete(faceIndex)
-      return newSet
-    })
-
-    // Remove from history
-    setSwapHistory(prev => {
-      const newHistory = new Map(prev)
-      newHistory.delete(faceIndex)
-      return newHistory
-    })
-  }, [swappedFaces, swapHistory])
+  const handleRevert = useCallback(
+    (faceIndex: number) => {
+      if (!swappedFaces.has(faceIndex)) return;
+
+      // Get the result image before this face was swapped
+      const prevResult = swapHistory.get(faceIndex);
+
+      // Restore to previous state (null means original target image)
+      setResultImage(prevResult ?? null);
+
+      // Remove from swapped faces
+      setSwappedFaces((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(faceIndex);
+        return newSet;
+      });
+
+      // Remove from history
+      setSwapHistory((prev) => {
+        const newHistory = new Map(prev);
+        newHistory.delete(faceIndex);
+        return newHistory;
+      });
+    },
+    [swappedFaces, swapHistory],
+  );
 
   return (
     <div className="p-8 relative">
@@ -884,9 +1080,11 @@ export function FaceSwapperPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold">{t('freeTools.faceSwapper.title')}</h1>
+          <h1 className="text-2xl font-bold">
+            {t("freeTools.faceSwapper.title")}
+          </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.faceSwapper.description')}
+            {t("freeTools.faceSwapper.description")}
           </p>
         </div>
       </div>
@@ -896,7 +1094,9 @@ export function FaceSwapperPage() {
         <div className="flex flex-wrap items-center gap-4 mb-6">
           <Select
             value={downloadFormat}
-            onValueChange={(v) => setDownloadFormat(v as 'png' | 'jpeg' | 'webp')}
+            onValueChange={(v) =>
+              setDownloadFormat(v as "png" | "jpeg" | "webp")
+            }
           >
             <SelectTrigger className="w-28">
               <SelectValue />
@@ -909,7 +1109,7 @@ export function FaceSwapperPage() {
           </Select>
           <Button variant="outline" onClick={handleDownload}>
             <Download className="h-4 w-4 mr-2" />
-            {t('freeTools.faceSwapper.download')}
+            {t("freeTools.faceSwapper.download")}
           </Button>
         </div>
       )}
@@ -928,7 +1128,7 @@ export function FaceSwapperPage() {
           <span className="text-sm text-destructive">{error}</span>
           <Button variant="outline" size="sm" onClick={handleRetry}>
             <RefreshCw className="h-4 w-4 mr-2" />
-            {t('common.retry')}
+            {t("common.retry")}
           </Button>
         </div>
       )}
@@ -946,14 +1146,16 @@ export function FaceSwapperPage() {
         <div className="flex-1 max-w-2xl">
           <Card
             className={cn(
-              'border-2 transition-colors',
+              "border-2 transition-colors",
               isDraggingTarget
-                ? 'border-primary bg-primary/5 border-dashed'
+                ? "border-primary bg-primary/5 border-dashed"
                 : targetImage
-                  ? 'border-muted'
-                  : 'border-dashed border-muted-foreground/25 hover:border-primary/50 cursor-pointer'
+                  ? "border-muted"
+                  : "border-dashed border-muted-foreground/25 hover:border-primary/50 cursor-pointer",
             )}
-            onClick={() => !targetImage && !isProcessing && targetInputRef.current?.click()}
+            onClick={() =>
+              !targetImage && !isProcessing && targetInputRef.current?.click()
+            }
             onDrop={handleTargetDrop}
             onDragOver={handleTargetDragOver}
             onDragEnter={handleTargetDragEnter}
@@ -963,7 +1165,7 @@ export function FaceSwapperPage() {
               <div className="flex items-center justify-between mb-3">
                 <span className="text-sm font-medium flex items-center gap-2">
                   <ArrowLeftRight className="h-4 w-4" />
-                  {t('freeTools.faceSwapper.targetTitle')}
+                  {t("freeTools.faceSwapper.targetTitle")}
                 </span>
                 <div className="flex items-center gap-2">
                   {targetSize && targetImage && (
@@ -978,10 +1180,10 @@ export function FaceSwapperPage() {
                         size="icon"
                         className="h-7 w-7"
                         onClick={(e) => {
-                          e.stopPropagation()
-                          setPreviewImage(resultImage || targetImage)
+                          e.stopPropagation();
+                          setPreviewImage(resultImage || targetImage);
                         }}
-                        title={t('assets.preview')}
+                        title={t("assets.preview")}
                       >
                         <Maximize2 className="h-3.5 w-3.5" />
                       </Button>
@@ -990,12 +1192,12 @@ export function FaceSwapperPage() {
                         size="sm"
                         className="h-7 text-xs"
                         onClick={(e) => {
-                          e.stopPropagation()
-                          targetInputRef.current?.click()
+                          e.stopPropagation();
+                          targetInputRef.current?.click();
                         }}
                       >
                         <Upload className="h-3 w-3 mr-1" />
-                        {t('freeTools.faceSwapper.change')}
+                        {t("freeTools.faceSwapper.change")}
                       </Button>
                     </>
                   )}
@@ -1007,12 +1209,14 @@ export function FaceSwapperPage() {
                   <div className="p-4 rounded-full bg-muted mb-4">
                     <Upload className="h-8 w-8 text-muted-foreground" />
                   </div>
-                  <p className="text-sm font-medium">{t('freeTools.faceSwapper.selectTarget')}</p>
+                  <p className="text-sm font-medium">
+                    {t("freeTools.faceSwapper.selectTarget")}
+                  </p>
                   <p className="text-xs text-muted-foreground mt-1">
-                    {t('freeTools.faceSwapper.orDragDrop')}
+                    {t("freeTools.faceSwapper.orDragDrop")}
                   </p>
                   <p className="text-xs text-muted-foreground mt-1">
-                    {t('freeTools.faceSwapper.targetHint')}
+                    {t("freeTools.faceSwapper.targetHint")}
                   </p>
                 </div>
               ) : (
@@ -1023,8 +1227,8 @@ export function FaceSwapperPage() {
                     alt={resultImage ? "Result" : "Target"}
                     className="w-full max-h-[70vh] object-contain cursor-pointer hover:opacity-90 transition-opacity"
                     onClick={(e) => {
-                      e.stopPropagation()
-                      setPreviewImage(resultImage || targetImage)
+                      e.stopPropagation();
+                      setPreviewImage(resultImage || targetImage);
                     }}
                   />
                   {/* Face selection overlay - always show for interaction */}
@@ -1033,8 +1237,8 @@ export function FaceSwapperPage() {
                       ref={overlayCanvasRef}
                       className="absolute inset-0 cursor-pointer"
                       onClick={(e) => {
-                        e.stopPropagation()
-                        handleFaceClick(e)
+                        e.stopPropagation();
+                        handleFaceClick(e);
                       }}
                       onMouseMove={handleFaceHover}
                       onMouseLeave={() => setHoveredFaceIndex(null)}
@@ -1043,10 +1247,13 @@ export function FaceSwapperPage() {
                   {targetFaces.length > 0 && (
                     <div className="absolute bottom-2 left-2 right-2 flex justify-between items-center">
                       <div className="px-2 py-1 bg-black/70 text-white text-xs rounded">
-                        {resultImage ? t('freeTools.faceSwapper.clickToSwapMore') : t('freeTools.faceSwapper.clickFaceToSwap')}
+                        {resultImage
+                          ? t("freeTools.faceSwapper.clickToSwapMore")
+                          : t("freeTools.faceSwapper.clickFaceToSwap")}
                       </div>
                       <div className="px-2 py-1 bg-blue-500/90 text-white text-xs rounded">
-                        {targetFaces.length} {targetFaces.length === 1 ? 'face' : 'faces'}
+                        {targetFaces.length}{" "}
+                        {targetFaces.length === 1 ? "face" : "faces"}
                       </div>
                     </div>
                   )}
@@ -1070,210 +1277,286 @@ export function FaceSwapperPage() {
         {targetImage && (
           <div className="flex-1 lg:min-w-[400px]">
             {selectedTargetFaceIndex !== null ? (
-            <Card className="border-2 border-muted">
-              <CardContent className="p-4 space-y-4">
-                {/* Source image upload with drag and drop */}
-                <div>
-                  <div className="text-sm font-medium mb-2">{t('freeTools.faceSwapper.sourceFace')}</div>
-                  <div
-                    className={cn(
-                      "bg-muted rounded-lg cursor-pointer border-2 border-dashed transition-colors overflow-hidden",
-                      isDraggingSource
-                        ? "border-primary bg-primary/5"
-                        : sourceImage
-                          ? "border-transparent"
-                          : "border-muted-foreground/25 hover:border-primary/50"
-                    )}
-                    onClick={() => sourceInputRef.current?.click()}
-                    onDrop={handleSourceDrop}
-                    onDragOver={handleSourceDragOver}
-                    onDragEnter={handleSourceDragEnter}
-                    onDragLeave={handleSourceDragLeave}
-                  >
-                    {!sourceImage ? (
-                      <div className="flex flex-col items-center justify-center py-12">
-                        <Upload className="h-8 w-8 text-muted-foreground mb-2" />
-                        <p className="text-sm text-muted-foreground">{t('freeTools.faceSwapper.selectSource')}</p>
-                        <p className="text-xs text-muted-foreground mt-1">{t('freeTools.faceSwapper.orDragDrop')}</p>
-                      </div>
-                    ) : (
-                      <div className="relative">
-                        <img
-                          ref={sourceImageRef}
-                          src={sourceImage}
-                          alt="Source"
-                          className="w-full max-h-[50vh] object-contain"
-                          onLoad={() => setResizeTrigger(prev => prev + 1)}
-                        />
-                        {sourceFaces.length > 0 && (
-                          <canvas
-                            ref={sourceOverlayCanvasRef}
-                            className="absolute inset-0 cursor-pointer"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              handleSourceFaceClick(e)
-                            }}
-                            onMouseMove={handleSourceFaceHover}
-                            onMouseLeave={() => setHoveredSourceFaceIndex(null)}
+              <Card className="border-2 border-muted">
+                <CardContent className="p-4 space-y-4">
+                  {/* Source image upload with drag and drop */}
+                  <div>
+                    <div className="text-sm font-medium mb-2">
+                      {t("freeTools.faceSwapper.sourceFace")}
+                    </div>
+                    <div
+                      className={cn(
+                        "bg-muted rounded-lg cursor-pointer border-2 border-dashed transition-colors overflow-hidden",
+                        isDraggingSource
+                          ? "border-primary bg-primary/5"
+                          : sourceImage
+                            ? "border-transparent"
+                            : "border-muted-foreground/25 hover:border-primary/50",
+                      )}
+                      onClick={() => sourceInputRef.current?.click()}
+                      onDrop={handleSourceDrop}
+                      onDragOver={handleSourceDragOver}
+                      onDragEnter={handleSourceDragEnter}
+                      onDragLeave={handleSourceDragLeave}
+                    >
+                      {!sourceImage ? (
+                        <div className="flex flex-col items-center justify-center py-12">
+                          <Upload className="h-8 w-8 text-muted-foreground mb-2" />
+                          <p className="text-sm text-muted-foreground">
+                            {t("freeTools.faceSwapper.selectSource")}
+                          </p>
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {t("freeTools.faceSwapper.orDragDrop")}
+                          </p>
+                        </div>
+                      ) : (
+                        <div className="relative">
+                          <img
+                            ref={sourceImageRef}
+                            src={sourceImage}
+                            alt="Source"
+                            className="w-full max-h-[50vh] object-contain"
+                            onLoad={() => setResizeTrigger((prev) => prev + 1)}
                           />
-                        )}
-                        {isDetecting && sourceFaces.length === 0 && (
-                          <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
-                            <Loader2 className="h-5 w-5 animate-spin text-white" />
-                          </div>
-                        )}
-                        {sourceFaces.length > 0 && selectedSourceFaceIndex !== null && (
-                          <div className="absolute bottom-1 left-1 px-1.5 py-0.5 bg-red-500/90 text-white text-xs rounded">
-                            Face #{selectedSourceFaceIndex + 1}
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                {/* Enhancement toggle and Swap button */}
-                <div className="flex items-center gap-3">
-                  <div className="flex items-center gap-2 p-2 bg-muted rounded-lg">
-                    <Switch
-                      id="enhance-panel"
-                      checked={enableEnhancement}
-                      onCheckedChange={setEnableEnhancement}
-                      disabled={isProcessing}
-                    />
-                    <Label htmlFor="enhance-panel" className="text-xs whitespace-nowrap">{t('freeTools.faceSwapper.enhanceFace')}</Label>
+                          {sourceFaces.length > 0 && (
+                            <canvas
+                              ref={sourceOverlayCanvasRef}
+                              className="absolute inset-0 cursor-pointer"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleSourceFaceClick(e);
+                              }}
+                              onMouseMove={handleSourceFaceHover}
+                              onMouseLeave={() =>
+                                setHoveredSourceFaceIndex(null)
+                              }
+                            />
+                          )}
+                          {isDetecting && sourceFaces.length === 0 && (
+                            <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+                              <Loader2 className="h-5 w-5 animate-spin text-white" />
+                            </div>
+                          )}
+                          {sourceFaces.length > 0 &&
+                            selectedSourceFaceIndex !== null && (
+                              <div className="absolute bottom-1 left-1 px-1.5 py-0.5 bg-red-500/90 text-white text-xs rounded">
+                                Face #{selectedSourceFaceIndex + 1}
+                              </div>
+                            )}
+                        </div>
+                      )}
+                    </div>
                   </div>
-                  <Button
-                    className="flex-1"
-                    onClick={handleSwap}
-                    disabled={!sourceImage || selectedSourceFaceIndex === null || isProcessing}
-                  >
-                    {isProcessing ? (
-                      <>
-                        <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                        {t('freeTools.faceSwapper.swapping')}
-                      </>
-                    ) : (
-                      <>
-                        <ArrowLeftRight className="h-4 w-4 mr-2" />
-                        {t('freeTools.faceSwapper.swap')}
-                      </>
-                    )}
-                  </Button>
-                </div>
 
-                {/* Target and Swapped face previews side by side */}
-                <div className="flex gap-4">
-                  {/* Target face (original) */}
-                  <div className="flex-1">
-                    <div className="mb-2">
-                      <span className="text-sm font-medium">
-                        {t('freeTools.faceSwapper.targetFace')}
-                      </span>
-                    </div>
-                    <div className="bg-muted rounded-lg overflow-hidden flex items-center justify-center p-2 min-h-[180px]">
-                      <canvas
-                        key={`target-${selectedTargetFaceIndex}`}
-                        ref={(canvas) => {
-                          if (!canvas || !targetImage || selectedTargetFaceIndex === null) return
-                          const face = targetFaces[selectedTargetFaceIndex]
-                          if (!face) return
-                          const img = new Image()
-                          img.onload = () => {
-                            const padding = 0.3
-                            const padX = face.box.width * padding
-                            const padY = face.box.height * padding
-                            const cropX = Math.max(0, face.box.x - padX)
-                            const cropY = Math.max(0, face.box.y - padY)
-                            const cropW = Math.min(img.width - cropX, face.box.width + padX * 2)
-                            const cropH = Math.min(img.height - cropY, face.box.height + padY * 2)
-
-                            const maxSize = 160
-                            const scale = Math.min(maxSize / cropW, maxSize / cropH, 1)
-                            canvas.width = cropW * scale
-                            canvas.height = cropH * scale
-
-                            const ctx = canvas.getContext('2d')!
-                            ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, canvas.width, canvas.height)
-                          }
-                          // Always use original target image
-                          img.src = originalTargetImage || targetImage
-                        }}
-                        className="mx-auto rounded"
+                  {/* Enhancement toggle and Swap button */}
+                  <div className="flex items-center gap-3">
+                    <div className="flex items-center gap-2 p-2 bg-muted rounded-lg">
+                      <Switch
+                        id="enhance-panel"
+                        checked={enableEnhancement}
+                        onCheckedChange={setEnableEnhancement}
+                        disabled={isProcessing}
                       />
+                      <Label
+                        htmlFor="enhance-panel"
+                        className="text-xs whitespace-nowrap"
+                      >
+                        {t("freeTools.faceSwapper.enhanceFace")}
+                      </Label>
                     </div>
-                    <div className="text-center text-xs text-muted-foreground mt-1">
-                      Face #{selectedTargetFaceIndex + 1}
-                    </div>
+                    <Button
+                      className="flex-1"
+                      onClick={handleSwap}
+                      disabled={
+                        !sourceImage ||
+                        selectedSourceFaceIndex === null ||
+                        isProcessing
+                      }
+                    >
+                      {isProcessing ? (
+                        <>
+                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                          {t("freeTools.faceSwapper.swapping")}
+                        </>
+                      ) : (
+                        <>
+                          <ArrowLeftRight className="h-4 w-4 mr-2" />
+                          {t("freeTools.faceSwapper.swap")}
+                        </>
+                      )}
+                    </Button>
                   </div>
 
-                  {/* Swapped face (result) */}
-                  <div className="flex-1">
-                    <div className="mb-2">
-                      <span className="text-sm font-medium">
-                        {t('freeTools.faceSwapper.swappedFace')}
-                      </span>
-                    </div>
-                    <div className="bg-muted rounded-lg overflow-hidden flex items-center justify-center p-2 min-h-[180px]">
-                      {resultImage && selectedTargetFaceIndex !== null && swappedFaces.has(selectedTargetFaceIndex) ? (
+                  {/* Target and Swapped face previews side by side */}
+                  <div className="flex gap-4">
+                    {/* Target face (original) */}
+                    <div className="flex-1">
+                      <div className="mb-2">
+                        <span className="text-sm font-medium">
+                          {t("freeTools.faceSwapper.targetFace")}
+                        </span>
+                      </div>
+                      <div className="bg-muted rounded-lg overflow-hidden flex items-center justify-center p-2 min-h-[180px]">
                         <canvas
-                          key={`swapped-${selectedTargetFaceIndex}`}
+                          key={`target-${selectedTargetFaceIndex}`}
                           ref={(canvas) => {
-                            if (!canvas || !resultImage || selectedTargetFaceIndex === null) return
-                            const face = targetFaces[selectedTargetFaceIndex]
-                            if (!face) return
-                            const img = new Image()
+                            if (
+                              !canvas ||
+                              !targetImage ||
+                              selectedTargetFaceIndex === null
+                            )
+                              return;
+                            const face = targetFaces[selectedTargetFaceIndex];
+                            if (!face) return;
+                            const img = new Image();
                             img.onload = () => {
-                              const padding = 0.3
-                              const padX = face.box.width * padding
-                              const padY = face.box.height * padding
-                              const cropX = Math.max(0, face.box.x - padX)
-                              const cropY = Math.max(0, face.box.y - padY)
-                              const cropW = Math.min(img.width - cropX, face.box.width + padX * 2)
-                              const cropH = Math.min(img.height - cropY, face.box.height + padY * 2)
-
-                              const maxSize = 160
-                              const scale = Math.min(maxSize / cropW, maxSize / cropH, 1)
-                              canvas.width = cropW * scale
-                              canvas.height = cropH * scale
-
-                              const ctx = canvas.getContext('2d')!
-                              ctx.drawImage(img, cropX, cropY, cropW, cropH, 0, 0, canvas.width, canvas.height)
-                            }
-                            img.src = resultImage
+                              const padding = 0.3;
+                              const padX = face.box.width * padding;
+                              const padY = face.box.height * padding;
+                              const cropX = Math.max(0, face.box.x - padX);
+                              const cropY = Math.max(0, face.box.y - padY);
+                              const cropW = Math.min(
+                                img.width - cropX,
+                                face.box.width + padX * 2,
+                              );
+                              const cropH = Math.min(
+                                img.height - cropY,
+                                face.box.height + padY * 2,
+                              );
+
+                              const maxSize = 160;
+                              const scale = Math.min(
+                                maxSize / cropW,
+                                maxSize / cropH,
+                                1,
+                              );
+                              canvas.width = cropW * scale;
+                              canvas.height = cropH * scale;
+
+                              const ctx = canvas.getContext("2d")!;
+                              ctx.drawImage(
+                                img,
+                                cropX,
+                                cropY,
+                                cropW,
+                                cropH,
+                                0,
+                                0,
+                                canvas.width,
+                                canvas.height,
+                              );
+                            };
+                            // Always use original target image
+                            img.src = originalTargetImage || targetImage;
                           }}
                           className="mx-auto rounded"
                         />
-                      ) : (
-                        <div key="placeholder" className="text-xs text-muted-foreground text-center px-2">
-                          {t('freeTools.faceSwapper.swappedFacePlaceholder')}
-                        </div>
-                      )}
+                      </div>
+                      <div className="text-center text-xs text-muted-foreground mt-1">
+                        Face #{selectedTargetFaceIndex + 1}
+                      </div>
                     </div>
-                    {selectedTargetFaceIndex !== null && swappedFaces.has(selectedTargetFaceIndex) && (
-                      <div className="flex items-center justify-center gap-2 mt-1">
-                        <span className="text-xs text-muted-foreground">
-                          {t('freeTools.faceSwapper.swapped')}
+
+                    {/* Swapped face (result) */}
+                    <div className="flex-1">
+                      <div className="mb-2">
+                        <span className="text-sm font-medium">
+                          {t("freeTools.faceSwapper.swappedFace")}
                         </span>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-6 px-2 text-xs"
-                          onClick={() => handleRevert(selectedTargetFaceIndex)}
-                          disabled={isProcessing}
-                        >
-                          <Undo2 className="h-3 w-3 mr-1" />
-                          {t('freeTools.faceSwapper.revert')}
-                        </Button>
                       </div>
-                    )}
+                      <div className="bg-muted rounded-lg overflow-hidden flex items-center justify-center p-2 min-h-[180px]">
+                        {resultImage &&
+                        selectedTargetFaceIndex !== null &&
+                        swappedFaces.has(selectedTargetFaceIndex) ? (
+                          <canvas
+                            key={`swapped-${selectedTargetFaceIndex}`}
+                            ref={(canvas) => {
+                              if (
+                                !canvas ||
+                                !resultImage ||
+                                selectedTargetFaceIndex === null
+                              )
+                                return;
+                              const face = targetFaces[selectedTargetFaceIndex];
+                              if (!face) return;
+                              const img = new Image();
+                              img.onload = () => {
+                                const padding = 0.3;
+                                const padX = face.box.width * padding;
+                                const padY = face.box.height * padding;
+                                const cropX = Math.max(0, face.box.x - padX);
+                                const cropY = Math.max(0, face.box.y - padY);
+                                const cropW = Math.min(
+                                  img.width - cropX,
+                                  face.box.width + padX * 2,
+                                );
+                                const cropH = Math.min(
+                                  img.height - cropY,
+                                  face.box.height + padY * 2,
+                                );
+
+                                const maxSize = 160;
+                                const scale = Math.min(
+                                  maxSize / cropW,
+                                  maxSize / cropH,
+                                  1,
+                                );
+                                canvas.width = cropW * scale;
+                                canvas.height = cropH * scale;
+
+                                const ctx = canvas.getContext("2d")!;
+                                ctx.drawImage(
+                                  img,
+                                  cropX,
+                                  cropY,
+                                  cropW,
+                                  cropH,
+                                  0,
+                                  0,
+                                  canvas.width,
+                                  canvas.height,
+                                );
+                              };
+                              img.src = resultImage;
+                            }}
+                            className="mx-auto rounded"
+                          />
+                        ) : (
+                          <div
+                            key="placeholder"
+                            className="text-xs text-muted-foreground text-center px-2"
+                          >
+                            {t("freeTools.faceSwapper.swappedFacePlaceholder")}
+                          </div>
+                        )}
+                      </div>
+                      {selectedTargetFaceIndex !== null &&
+                        swappedFaces.has(selectedTargetFaceIndex) && (
+                          <div className="flex items-center justify-center gap-2 mt-1">
+                            <span className="text-xs text-muted-foreground">
+                              {t("freeTools.faceSwapper.swapped")}
+                            </span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-6 px-2 text-xs"
+                              onClick={() =>
+                                handleRevert(selectedTargetFaceIndex)
+                              }
+                              disabled={isProcessing}
+                            >
+                              <Undo2 className="h-3 w-3 mr-1" />
+                              {t("freeTools.faceSwapper.revert")}
+                            </Button>
+                          </div>
+                        )}
+                    </div>
                   </div>
-                </div>
-              </CardContent>
-            </Card>
+                </CardContent>
+              </Card>
             ) : (
               <div className="h-full flex items-center justify-center text-muted-foreground text-sm">
-                {t('freeTools.faceSwapper.clickFaceToSwap')}
+                {t("freeTools.faceSwapper.clickFaceToSwap")}
               </div>
             )}
           </div>
@@ -1287,9 +1570,9 @@ export function FaceSwapperPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleSourceSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleSourceSelect(file);
+          e.target.value = "";
         }}
       />
       <input
@@ -1298,14 +1581,17 @@ export function FaceSwapperPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleTargetSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleTargetSelect(file);
+          e.target.value = "";
         }}
       />
 
       {/* Fullscreen Preview Dialog */}
-      <Dialog open={!!previewImage} onOpenChange={(open) => !open && setPreviewImage(null)}>
+      <Dialog
+        open={!!previewImage}
+        onOpenChange={(open) => !open && setPreviewImage(null)}
+      >
         <DialogContent
           className="w-screen h-screen max-w-none max-h-none p-0 border-0 bg-black flex items-center justify-center"
           hideCloseButton
@@ -1333,19 +1619,23 @@ export function FaceSwapperPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/FeaturedModelsPage.tsx b/src/pages/FeaturedModelsPage.tsx
deleted file mode 100644
index 6ed1b367..00000000
--- a/src/pages/FeaturedModelsPage.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { Badge } from '@/components/ui/badge'
-import { PlayCircle, Star } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { SMART_FORM_FAMILIES } from '@/lib/smartFormConfig'
-
-// Featured model families with all variants
-const FEATURED_MODEL_FAMILIES = [
-  {
-    name: 'Seedream 4.5',
-    provider: 'bytedance',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1764761216479761378_Yy864da9.png',
-    variants: [
-      { id: 'bytedance/seedream-v4.5', type: 'text-to-image' },
-      { id: 'bytedance/seedream-v4.5/edit', type: 'image-to-image' },
-      { id: 'bytedance/seedream-v4.5/edit-sequential', type: 'image-to-image' },
-      { id: 'bytedance/seedream-v4.5/sequential', type: 'text-to-image' },
-    ],
-    primaryVariant: 'bytedance/seedream-v4.5',
-    category: 'image' as const,
-  },
-  {
-    name: 'Seedance 1.5 Pro',
-    provider: 'bytedance',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766494048998434655_qEMLsAI0.png',
-    variants: [
-      { id: 'bytedance/seedance-v1.5-pro/image-to-video', type: 'image-to-video' },
-      { id: 'bytedance/seedance-v1.5-pro/text-to-video', type: 'text-to-video' },
-      { id: 'bytedance/seedance-v1.5-pro/image-to-video-fast', type: 'image-to-video' },
-      { id: 'bytedance/seedance-v1.5-pro/text-to-video-fast', type: 'text-to-video' },
-      { id: 'bytedance/seedance-v1.5-pro/video-extend', type: 'video-extend' },
-      { id: 'bytedance/seedance-v1.5-pro/video-extend-fast', type: 'video-extend' },
-    ],
-    primaryVariant: 'bytedance/seedance-v1.5-pro/image-to-video',
-    category: 'video' as const,
-  },
-  {
-    name: 'Wan Spicy',
-    provider: 'wavespeed-ai',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766298334453523753_f975da96.png',
-    variants: [
-      { id: 'wavespeed-ai/wan-2.2-spicy/image-to-video', type: 'image-to-video' },
-      { id: 'wavespeed-ai/wan-2.2-spicy/image-to-video-lora', type: 'lora-support' },
-      { id: 'wavespeed-ai/wan-2.2-spicy/video-extend', type: 'video-extend' },
-      { id: 'wavespeed-ai/wan-2.2-spicy/video-extend-lora', type: 'lora-support' },
-    ],
-    primaryVariant: 'wavespeed-ai/wan-2.2-spicy/image-to-video',
-    category: 'video' as const,
-  },
-  {
-    name: 'Wan Animate',
-    provider: 'wavespeed-ai',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1758433474532574441_SkTQLIEA.jpeg',
-    variants: [
-      { id: 'wavespeed-ai/wan-2.2/animate', type: 'motion-control' },
-    ],
-    primaryVariant: 'wavespeed-ai/wan-2.2/animate',
-    category: 'other' as const,
-  },
-  {
-    name: 'InfiniteTalk',
-    provider: 'wavespeed-ai',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766575571686877852_Sckigeck.png',
-    variants: [
-      { id: 'wavespeed-ai/infinitetalk', type: 'digital-human' },
-      { id: 'wavespeed-ai/infinitetalk/multi', type: 'digital-human' },
-      { id: 'wavespeed-ai/infinitetalk/video-to-video', type: 'digital-human' },
-      { id: 'wavespeed-ai/infinitetalk-fast', type: 'digital-human' },
-      { id: 'wavespeed-ai/infinitetalk-fast/multi', type: 'digital-human' },
-      { id: 'wavespeed-ai/infinitetalk-fast/video-to-video', type: 'digital-human' },
-    ],
-    primaryVariant: 'wavespeed-ai/infinitetalk',
-    category: 'other' as const,
-  },
-  {
-    name: 'Kling 2.6 Motion Control',
-    provider: 'kwaivgi',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1766519115490596160_Smusqomu.png',
-    variants: [
-      { id: 'kwaivgi/kling-v2.6-pro/motion-control', type: 'motion-control' },
-      { id: 'kwaivgi/kling-v2.6-std/motion-control', type: 'motion-control' },
-    ],
-    primaryVariant: 'kwaivgi/kling-v2.6-pro/motion-control',
-    category: 'other' as const,
-  },
-  {
-    name: 'Nano Banana Pro',
-    provider: 'google',
-    poster: 'https://d1q70pf5vjeyhc.wavespeed.ai/media/images/1763649945119973876_WvMIEAxu.jpg',
-    variants: [
-      { id: 'google/nano-banana-pro/text-to-image', type: 'text-to-image' },
-      { id: 'google/nano-banana-pro/text-to-image-ultra', type: 'text-to-image' },
-      { id: 'google/nano-banana-pro/text-to-image-multi', type: 'text-to-image' },
-      { id: 'google/nano-banana-pro/edit', type: 'image-to-image' },
-      { id: 'google/nano-banana-pro/edit-ultra', type: 'image-to-image' },
-      { id: 'google/nano-banana-pro/edit-multi', type: 'image-to-image' },
-    ],
-    primaryVariant: 'google/nano-banana-pro/text-to-image',
-    category: 'image' as const,
-  },
-]
-
-function getCategoryAccent(category: 'image' | 'video' | 'other') {
-  switch (category) {
-    case 'video':
-      return {
-        bar: 'from-purple-500 to-violet-500',
-        badge: 'bg-purple-500/15 text-purple-600 dark:text-purple-400',
-        border: 'hover:border-purple-500/40',
-      }
-    case 'image':
-      return {
-        bar: 'from-sky-400 to-blue-500',
-        badge: 'bg-blue-500/15 text-blue-600 dark:text-blue-400',
-        border: 'hover:border-blue-500/40',
-      }
-    default:
-      return {
-        bar: 'from-emerald-400 to-teal-500',
-        badge: 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400',
-        border: 'hover:border-emerald-500/40',
-      }
-  }
-}
-
-export function FeaturedModelsPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { models, fetchModels } = useModelsStore()
-  const { isValidated } = useApiKeyStore()
-
-  useEffect(() => {
-    if (isValidated) {
-      fetchModels()
-    }
-  }, [isValidated, fetchModels])
-
-  const getPrice = (modelId: string) => {
-    const model = models.find(m => m.model_id === modelId)
-    return model?.base_price
-  }
-
-  return (
-    <div className="flex h-full flex-col relative overflow-hidden">
-      {/* Header */}
-      <div className="page-header px-4 md:px-6 py-4 relative z-10">
-        <div className="flex flex-col gap-1.5 md:flex-row md:items-baseline md:gap-3">
-          <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
-            <Star className="h-5 w-5 text-primary" />
-            {t('welcome.featuredModels.title')}
-          </h1>
-          <p className="text-muted-foreground text-xs md:text-sm">{t('welcome.featuredModels.description')}</p>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-auto px-6 py-4 relative z-10">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-w-5xl mx-auto">
-          {FEATURED_MODEL_FAMILIES.map((family) => {
-            const accent = getCategoryAccent(family.category)
-            const price = getPrice(family.primaryVariant)
-            const uniqueTypes = [...new Set(family.variants.map(v => v.type))]
-
-            return (
-              <div
-                key={family.name}
-                className={cn(
-                  "group cursor-pointer rounded-xl border border-border/50 bg-card/60 backdrop-blur-sm transition-all duration-300 hover:shadow-lg hover:scale-[1.02] overflow-hidden",
-                  accent.border
-                )}
-                onClick={() => {
-                  const smartFamily = SMART_FORM_FAMILIES.find(sf => sf.primaryVariant === family.primaryVariant)
-                  if (smartFamily) {
-                    navigate(`/featured-models/${smartFamily.id}`)
-                  } else {
-                    navigate(`/playground/${family.primaryVariant}`)
-                  }
-                }}
-              >
-                {/* Cover image */}
-                <div className="relative aspect-[3/4] overflow-hidden bg-muted">
-                  <img
-                    src={family.poster}
-                    alt={family.name}
-                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
-                    loading="lazy"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
-                  <div className="absolute bottom-2 left-3 right-3 flex items-end justify-between">
-                    <div>
-                      <h3 className="text-sm font-semibold text-white leading-tight drop-shadow-md">
-                        {family.name}
-                      </h3>
-                      <p className="text-[10px] text-white/70">{family.provider}</p>
-                    </div>
-                    <Badge variant="secondary" className="shrink-0 text-[10px] px-1.5 py-0 font-medium bg-black/40 text-white border-0">
-                      {family.variants.length === 1 ? '1 variant' : `${family.variants.length} variants`}
-                    </Badge>
-                  </div>
-                </div>
-
-                <div className="p-4">
-
-                  {/* Type tags */}
-                  <div className="flex flex-wrap gap-1.5 mb-3">
-                    {uniqueTypes.map((type) => (
-                      <span
-                        key={type}
-                        className={cn("text-[10px] px-2 py-0.5 rounded-full font-medium", accent.badge)}
-                      >
-                        {type}
-                      </span>
-                    ))}
-                  </div>
-
-                  {/* Footer */}
-                  <div className="flex items-center justify-between pt-2 border-t border-border/30">
-                    {price !== undefined ? (
-                      <span className="text-sm font-bold text-primary">${price.toFixed(4)}</span>
-                    ) : (
-                      <span />
-                    )}
-                    <div className="flex items-center gap-1 text-xs font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity">
-                      <PlayCircle className="h-3.5 w-3.5" />
-                      <span>Try it</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/pages/FreeToolsPage.tsx b/src/pages/FreeToolsPage.tsx
index 05764272..718ffc9a 100644
--- a/src/pages/FreeToolsPage.tsx
+++ b/src/pages/FreeToolsPage.tsx
@@ -1,138 +1,158 @@
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Video, ImageUp, Eraser, Wand2, ArrowRight, MousePointer2, FileVideo, FileAudio, FileImage, Scissors, Combine, Sparkles, ArrowLeftRight } from 'lucide-react'
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Video,
+  ImageUp,
+  Eraser,
+  Wand2,
+  ArrowRight,
+  MousePointer2,
+  FileVideo,
+  FileAudio,
+  FileImage,
+  Scissors,
+  Combine,
+  Sparkles,
+  ArrowLeftRight,
+} from "lucide-react";
 
 // Import tool demo images
-import videoEnhancerImg from '../../build/images/VideoEnhancer.jpeg'
-import imageEnhancerImg from '../../build/images/ImageEnhancer.jpeg'
-import faceEnhancerImg from '../../build/images/FaceEnhancer.jpeg'
-import faceSwapperImg from '../../build/images/FaceSwapper.jpeg'
-import backgroundRemoverImg from '../../build/images/BackgroundRemover.jpeg'
-import imageEraserImg from '../../build/images/ImageEraser.jpeg'
-import SegmentAnythingImg from '../../build/images/SegmentAnything.png'
-import freeToolImg from '../../build/images/FreeTool.jpeg'
-import videoConverterImg from '../../build/images/VideoConverter.png'
-import audioConverterImg from '../../build/images/AudioConverter.png'
-import imageConverterImg from '../../build/images/ImageConverter.png'
-import mediaTrimmerImg from '../../build/images/MediaTrimmer.png'
-import mediaMergerImg from '../../build/images/MediaMerger.png'
+import videoEnhancerImg from "../../build/images/VideoEnhancer.jpeg";
+import imageEnhancerImg from "../../build/images/ImageEnhancer.jpeg";
+import faceEnhancerImg from "../../build/images/FaceEnhancer.jpeg";
+import faceSwapperImg from "../../build/images/FaceSwapper.jpeg";
+import backgroundRemoverImg from "../../build/images/BackgroundRemover.jpeg";
+import imageEraserImg from "../../build/images/ImageEraser.jpeg";
+import SegmentAnythingImg from "../../build/images/SegmentAnything.png";
+import freeToolImg from "../../build/images/FreeTool.jpeg";
+import videoConverterImg from "../../build/images/VideoConverter.png";
+import audioConverterImg from "../../build/images/AudioConverter.png";
+import imageConverterImg from "../../build/images/ImageConverter.png";
+import mediaTrimmerImg from "../../build/images/MediaTrimmer.png";
+import mediaMergerImg from "../../build/images/MediaMerger.png";
 
 export function FreeToolsPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
   const tools = [
     {
-      id: 'video',
+      id: "video",
       icon: Video,
-      titleKey: 'freeTools.videoEnhancer.title',
-      descriptionKey: 'freeTools.videoEnhancer.description',
-      route: '/free-tools/video-enhancer',
-      gradient: 'from-violet-500/20 via-purple-500/10 to-transparent',
-      image: videoEnhancerImg
+      titleKey: "freeTools.videoEnhancer.title",
+      descriptionKey: "freeTools.videoEnhancer.description",
+      route: "/free-tools/video-enhancer",
+      gradient: "from-violet-500/20 via-purple-500/10 to-transparent",
+      image: videoEnhancerImg,
     },
     {
-      id: 'image',
+      id: "image",
       icon: ImageUp,
-      titleKey: 'freeTools.imageEnhancer.title',
-      descriptionKey: 'freeTools.imageEnhancer.description',
-      route: '/free-tools/image-enhancer',
-      gradient: 'from-cyan-500/20 via-blue-500/10 to-transparent',
-      image: imageEnhancerImg
+      titleKey: "freeTools.imageEnhancer.title",
+      descriptionKey: "freeTools.imageEnhancer.description",
+      route: "/free-tools/image-enhancer",
+      gradient: "from-cyan-500/20 via-blue-500/10 to-transparent",
+      image: imageEnhancerImg,
     },
     {
-      id: 'face-enhancer',
+      id: "face-enhancer",
       icon: Sparkles,
-      titleKey: 'freeTools.faceEnhancer.title',
-      descriptionKey: 'freeTools.faceEnhancer.description',
-      route: '/free-tools/face-enhancer',
-      gradient: 'from-rose-500/20 via-pink-500/10 to-transparent',
-      image: faceEnhancerImg
+      titleKey: "freeTools.faceEnhancer.title",
+      descriptionKey: "freeTools.faceEnhancer.description",
+      route: "/free-tools/face-enhancer",
+      gradient: "from-rose-500/20 via-pink-500/10 to-transparent",
+      image: faceEnhancerImg,
     },
     {
-      id: 'face-swapper',
+      id: "face-swapper",
       icon: ArrowLeftRight,
-      titleKey: 'freeTools.faceSwapper.title',
-      descriptionKey: 'freeTools.faceSwapper.description',
-      route: '/free-tools/face-swapper',
-      gradient: 'from-amber-500/20 via-orange-500/10 to-transparent',
-      image: faceSwapperImg
+      titleKey: "freeTools.faceSwapper.title",
+      descriptionKey: "freeTools.faceSwapper.description",
+      route: "/free-tools/face-swapper",
+      gradient: "from-amber-500/20 via-orange-500/10 to-transparent",
+      image: faceSwapperImg,
     },
     {
-      id: 'background-remover',
+      id: "background-remover",
       icon: Eraser,
-      titleKey: 'freeTools.backgroundRemover.title',
-      descriptionKey: 'freeTools.backgroundRemover.description',
-      route: '/free-tools/background-remover',
-      gradient: 'from-emerald-500/20 via-green-500/10 to-transparent',
-      image: backgroundRemoverImg
+      titleKey: "freeTools.backgroundRemover.title",
+      descriptionKey: "freeTools.backgroundRemover.description",
+      route: "/free-tools/background-remover",
+      gradient: "from-emerald-500/20 via-green-500/10 to-transparent",
+      image: backgroundRemoverImg,
     },
     {
-      id: 'image-eraser',
+      id: "image-eraser",
       icon: Wand2,
-      titleKey: 'freeTools.imageEraser.title',
-      descriptionKey: 'freeTools.imageEraser.description',
-      route: '/free-tools/image-eraser',
-      gradient: 'from-orange-500/20 via-red-500/10 to-transparent',
-      image: imageEraserImg
+      titleKey: "freeTools.imageEraser.title",
+      descriptionKey: "freeTools.imageEraser.description",
+      route: "/free-tools/image-eraser",
+      gradient: "from-orange-500/20 via-red-500/10 to-transparent",
+      image: imageEraserImg,
     },
     {
-      id: 'segment-anything',
+      id: "segment-anything",
       icon: MousePointer2,
-      titleKey: 'freeTools.segmentAnything.title',
-      descriptionKey: 'freeTools.segmentAnything.description',
-      route: '/free-tools/segment-anything',
-      gradient: 'from-pink-500/20 via-rose-500/10 to-transparent',
-      image: SegmentAnythingImg
+      titleKey: "freeTools.segmentAnything.title",
+      descriptionKey: "freeTools.segmentAnything.description",
+      route: "/free-tools/segment-anything",
+      gradient: "from-pink-500/20 via-rose-500/10 to-transparent",
+      image: SegmentAnythingImg,
     },
     {
-      id: 'video-converter',
+      id: "video-converter",
       icon: FileVideo,
-      titleKey: 'freeTools.videoConverter.title',
-      descriptionKey: 'freeTools.videoConverter.description',
-      route: '/free-tools/video-converter',
-      gradient: 'from-indigo-500/20 via-blue-500/10 to-transparent',
-      image: videoConverterImg
+      titleKey: "freeTools.videoConverter.title",
+      descriptionKey: "freeTools.videoConverter.description",
+      route: "/free-tools/video-converter",
+      gradient: "from-indigo-500/20 via-blue-500/10 to-transparent",
+      image: videoConverterImg,
     },
     {
-      id: 'audio-converter',
+      id: "audio-converter",
       icon: FileAudio,
-      titleKey: 'freeTools.audioConverter.title',
-      descriptionKey: 'freeTools.audioConverter.description',
-      route: '/free-tools/audio-converter',
-      gradient: 'from-teal-500/20 via-cyan-500/10 to-transparent',
-      image: audioConverterImg
+      titleKey: "freeTools.audioConverter.title",
+      descriptionKey: "freeTools.audioConverter.description",
+      route: "/free-tools/audio-converter",
+      gradient: "from-teal-500/20 via-cyan-500/10 to-transparent",
+      image: audioConverterImg,
     },
     {
-      id: 'image-converter',
+      id: "image-converter",
       icon: FileImage,
-      titleKey: 'freeTools.imageConverter.title',
-      descriptionKey: 'freeTools.imageConverter.description',
-      route: '/free-tools/image-converter',
-      gradient: 'from-amber-500/20 via-yellow-500/10 to-transparent',
-      image: imageConverterImg
+      titleKey: "freeTools.imageConverter.title",
+      descriptionKey: "freeTools.imageConverter.description",
+      route: "/free-tools/image-converter",
+      gradient: "from-amber-500/20 via-yellow-500/10 to-transparent",
+      image: imageConverterImg,
     },
     {
-      id: 'media-trimmer',
+      id: "media-trimmer",
       icon: Scissors,
-      titleKey: 'freeTools.mediaTrimmer.title',
-      descriptionKey: 'freeTools.mediaTrimmer.description',
-      route: '/free-tools/media-trimmer',
-      gradient: 'from-red-500/20 via-orange-500/10 to-transparent',
-      image: mediaTrimmerImg
+      titleKey: "freeTools.mediaTrimmer.title",
+      descriptionKey: "freeTools.mediaTrimmer.description",
+      route: "/free-tools/media-trimmer",
+      gradient: "from-red-500/20 via-orange-500/10 to-transparent",
+      image: mediaTrimmerImg,
     },
     {
-      id: 'media-merger',
+      id: "media-merger",
       icon: Combine,
-      titleKey: 'freeTools.mediaMerger.title',
-      descriptionKey: 'freeTools.mediaMerger.description',
-      route: '/free-tools/media-merger',
-      gradient: 'from-purple-500/20 via-fuchsia-500/10 to-transparent',
-      image: mediaMergerImg
-    }
-  ]
+      titleKey: "freeTools.mediaMerger.title",
+      descriptionKey: "freeTools.mediaMerger.description",
+      route: "/free-tools/media-merger",
+      gradient: "from-purple-500/20 via-fuchsia-500/10 to-transparent",
+      image: mediaMergerImg,
+    },
+  ];
 
   return (
     <div className="flex h-full flex-col pt-12 md:pt-0">
@@ -140,23 +160,30 @@ export function FreeToolsPage() {
         <div className="flex flex-col gap-1.5 md:flex-row md:items-baseline md:gap-3">
           <h1 className="flex items-center gap-2 text-xl md:text-2xl font-bold tracking-tight">
             <Sparkles className="h-5 w-5 text-primary" />
-            {t('freeTools.title')}
+            {t("freeTools.title")}
           </h1>
-          <p className="max-w-2xl text-xs md:text-sm text-muted-foreground">{t('freeTools.description')}</p>
+          <p className="max-w-2xl text-xs md:text-sm text-muted-foreground">
+            {t("freeTools.description")}
+          </p>
         </div>
       </div>
 
       <div className="flex-1 overflow-auto p-4 md:p-6">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:gap-6">
-          {tools.map((tool) => (
+          {tools.map((tool, index) => (
             <Card
               key={tool.id}
-              className="group relative flex cursor-pointer flex-col overflow-hidden rounded-xl border border-border/70 bg-card/80 shadow-sm transition-all duration-200 hover:border-primary/40 hover:shadow-lg"
+              className="group relative flex cursor-pointer flex-col overflow-hidden rounded-xl border border-border/70 bg-card/80 shadow-sm transition-all duration-200 hover:border-primary/40 hover:shadow-lg animate-in fade-in slide-in-from-bottom-2 fill-mode-both"
+              style={{ animationDelay: `${index * 60}ms` }}
               onClick={() => navigate(tool.route)}
             >
               {/* Decorative gradient background */}
-              <div className={`absolute right-0 top-0 h-32 w-32 rounded-full bg-gradient-to-bl ${tool.gradient} opacity-60 blur-2xl transition-all duration-500 group-hover:scale-125 group-hover:opacity-100`} />
-              <div className={`absolute bottom-0 left-0 h-24 w-24 rounded-full bg-gradient-to-tr ${tool.gradient} opacity-40 blur-xl transition-all duration-500 group-hover:opacity-70`} />
+              <div
+                className={`absolute right-0 top-0 h-32 w-32 rounded-full bg-gradient-to-bl ${tool.gradient} opacity-60 blur-2xl transition-all duration-500 group-hover:scale-125 group-hover:opacity-100`}
+              />
+              <div
+                className={`absolute bottom-0 left-0 h-24 w-24 rounded-full bg-gradient-to-tr ${tool.gradient} opacity-40 blur-xl transition-all duration-500 group-hover:opacity-70`}
+              />
 
               {/* Demo image */}
               <div className="relative z-10 px-4 pt-4">
@@ -178,10 +205,14 @@ export function FreeToolsPage() {
                   <div className="rounded-lg bg-primary/10 p-2 transition-colors group-hover:bg-primary/20">
                     <tool.icon className="h-4 w-4 text-primary" />
                   </div>
-                  <CardTitle className="text-base">{t(tool.titleKey)}</CardTitle>
+                  <CardTitle className="text-base">
+                    {t(tool.titleKey)}
+                  </CardTitle>
                 </div>
                 <CardDescription className="mt-2 text-sm">
-                  <span className="line-clamp-2 leading-relaxed">{t(tool.descriptionKey)}</span>
+                  <span className="line-clamp-2 leading-relaxed">
+                    {t(tool.descriptionKey)}
+                  </span>
                 </CardDescription>
               </CardHeader>
               <CardContent className="relative z-10 mt-auto pt-0">
@@ -189,7 +220,7 @@ export function FreeToolsPage() {
                   variant="ghost"
                   className="w-full justify-between rounded-lg group-hover:bg-primary/5"
                 >
-                  <span>{t('common.open')}</span>
+                  <span>{t("common.open")}</span>
                   <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                 </Button>
               </CardContent>
@@ -198,5 +229,5 @@ export function FreeToolsPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/pages/HistoryPage.tsx b/src/pages/HistoryPage.tsx
index a671f63d..670c51e0 100644
--- a/src/pages/HistoryPage.tsx
+++ b/src/pages/HistoryPage.tsx
@@ -1,19 +1,19 @@
-import { useState, useEffect, useRef, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { apiClient } from '@/api/client'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import type { HistoryItem } from '@/types/prediction'
-import { OutputDisplay } from '@/components/playground/OutputDisplay'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { ScrollArea } from '@/components/ui/scroll-area'
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "@/api/client";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import type { HistoryItem } from "@/types/prediction";
+import { OutputDisplay } from "@/components/playground/OutputDisplay";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
+} from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -23,15 +23,15 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
+} from "@/components/ui/alert-dialog";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
-import { Checkbox } from '@/components/ui/checkbox'
+} from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Loader2,
   RefreshCw,
@@ -53,33 +53,33 @@ import {
   Trash2,
   Sparkles,
   CheckSquare,
-  History
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { AudioPlayer } from '@/components/shared/AudioPlayer'
-import { useInView } from '@/hooks/useInView'
-import { toast } from '@/hooks/useToast'
+  History,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { AudioPlayer } from "@/components/shared/AudioPlayer";
+import { useInView } from "@/hooks/useInView";
+import { toast } from "@/hooks/useToast";
 
 // Video preview component - shows first frame, plays on hover
 function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
 
   const handleMouseEnter = () => {
     if (videoRef.current && isLoaded && enabled) {
       videoRef.current.play().catch(() => {
         // Ignore autoplay errors
-      })
+      });
     }
-  }
+  };
 
   const handleMouseLeave = () => {
     if (videoRef.current) {
-      videoRef.current.pause()
-      videoRef.current.currentTime = 0
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
     }
-  }
+  };
 
   // Show placeholder if disabled or error
   if (!enabled || hasError) {
@@ -87,7 +87,7 @@ function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
       <div className="w-full h-full flex items-center justify-center">
         <Video className="h-12 w-12 text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   return (
@@ -113,254 +113,303 @@ function VideoPreview({ src, enabled }: { src: string; enabled: boolean }) {
         onError={() => setHasError(true)}
       />
     </div>
-  )
+  );
 }
 
 export function HistoryPage() {
-  const { t } = useTranslation()
-  const { isLoading: isLoadingApiKey, isValidated, loadApiKey, hasAttemptedLoad } = useApiKeyStore()
-  const [items, setItems] = useState<HistoryItem[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [page, setPage] = useState(1)
-  const [statusFilter, setStatusFilter] = useState<string>('all')
-  const [selectedItem, setSelectedItem] = useState<HistoryItem | null>(null)
-  const [copiedId, setCopiedId] = useState(false)
-  const [loadPreviews, setLoadPreviews] = useState(true)
-  const [deleteConfirmItem, setDeleteConfirmItem] = useState<HistoryItem | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [isSelectionMode, setIsSelectionMode] = useState(false)
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
-  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false)
-  const pageSize = 50
+  const { t } = useTranslation();
+  const {
+    isLoading: isLoadingApiKey,
+    isValidated,
+    loadApiKey,
+    hasAttemptedLoad,
+  } = useApiKeyStore();
+  const [items, setItems] = useState<HistoryItem[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [selectedItem, setSelectedItem] = useState<HistoryItem | null>(null);
+  const [copiedId, setCopiedId] = useState(false);
+  const [loadPreviews, setLoadPreviews] = useState(true);
+  const [deleteConfirmItem, setDeleteConfirmItem] =
+    useState<HistoryItem | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isSelectionMode, setIsSelectionMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);
+  const pageSize = 50;
 
   const handleCopyId = async (id: string) => {
-    await navigator.clipboard.writeText(id)
-    setCopiedId(true)
-    setTimeout(() => setCopiedId(false), 2000)
-  }
+    await navigator.clipboard.writeText(id);
+    setCopiedId(true);
+    setTimeout(() => setCopiedId(false), 2000);
+  };
 
   // Navigate to previous/next history item (with loop support)
-  const navigateHistory = useCallback((direction: 'prev' | 'next') => {
-    if (!selectedItem || items.length <= 1) return
+  const navigateHistory = useCallback(
+    (direction: "prev" | "next") => {
+      if (!selectedItem || items.length <= 1) return;
 
-    const currentIdx = items.findIndex(item => item.id === selectedItem.id)
-    if (currentIdx === -1) return
+      const currentIdx = items.findIndex((item) => item.id === selectedItem.id);
+      if (currentIdx === -1) return;
 
-    let newIdx: number
-    if (direction === 'prev') {
-      newIdx = currentIdx === 0 ? items.length - 1 : currentIdx - 1
-    } else {
-      newIdx = currentIdx === items.length - 1 ? 0 : currentIdx + 1
-    }
+      let newIdx: number;
+      if (direction === "prev") {
+        newIdx = currentIdx === 0 ? items.length - 1 : currentIdx - 1;
+      } else {
+        newIdx = currentIdx === items.length - 1 ? 0 : currentIdx + 1;
+      }
 
-    setSelectedItem(items[newIdx])
-  }, [selectedItem, items])
+      setSelectedItem(items[newIdx]);
+    },
+    [selectedItem, items],
+  );
 
   // Keyboard navigation for detail dialog
   useEffect(() => {
-    if (!selectedItem) return
+    if (!selectedItem) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        navigateHistory('prev')
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        navigateHistory('next')
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        navigateHistory("prev");
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        navigateHistory("next");
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [selectedItem, navigateHistory])
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [selectedItem, navigateHistory]);
 
   const fetchHistory = useCallback(async () => {
-    if (!isValidated) return
+    if (!isValidated) return;
 
-    setIsLoading(true)
-    setError(null)
+    setIsLoading(true);
+    setError(null);
 
     try {
-      const filters = statusFilter !== 'all'
-        ? { status: statusFilter as 'completed' | 'failed' | 'processing' | 'created' }
-        : undefined
+      const filters =
+        statusFilter !== "all"
+          ? {
+              status: statusFilter as
+                | "completed"
+                | "failed"
+                | "processing"
+                | "created",
+            }
+          : undefined;
 
-      const response = await apiClient.getHistory(page, pageSize, filters)
-      setItems(response.items || [])
+      const response = await apiClient.getHistory(page, pageSize, filters);
+      setItems(response.items || []);
     } catch (err) {
-      console.error('History fetch error:', err)
-      setError(err instanceof Error ? err.message : 'Failed to fetch history')
+      console.error("History fetch error:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch history");
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [isValidated, page, pageSize, statusFilter])
-
-  const handleDelete = useCallback(async (item: HistoryItem) => {
-    setIsDeleting(true)
-    try {
-      await apiClient.deletePrediction(item.id)
-      setItems(prevItems => prevItems.filter((existing) => existing.id !== item.id))
-      if (selectedItem?.id === item.id) {
-        setSelectedItem(null)
+  }, [isValidated, page, pageSize, statusFilter]);
+
+  const handleDelete = useCallback(
+    async (item: HistoryItem) => {
+      setIsDeleting(true);
+      try {
+        await apiClient.deletePrediction(item.id);
+        setItems((prevItems) =>
+          prevItems.filter((existing) => existing.id !== item.id),
+        );
+        if (selectedItem?.id === item.id) {
+          setSelectedItem(null);
+        }
+        toast({
+          title: t("history.deleted"),
+        });
+      } catch (err) {
+        toast({
+          title: t("common.error"),
+          description:
+            err instanceof Error ? err.message : t("history.deleteFailed"),
+          variant: "destructive",
+        });
+      } finally {
+        setIsDeleting(false);
+        setDeleteConfirmItem(null);
       }
-      toast({
-        title: t('history.deleted'),
-      })
-    } catch (err) {
-      toast({
-        title: t('common.error'),
-        description: err instanceof Error ? err.message : t('history.deleteFailed'),
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDeleting(false)
-      setDeleteConfirmItem(null)
-    }
-  }, [selectedItem?.id, t])
+    },
+    [selectedItem?.id, t],
+  );
 
   const handleBulkDelete = useCallback(async () => {
-    if (selectedIds.size === 0) return
-    setIsDeleting(true)
-    const idsToDelete = Array.from(selectedIds)
-    const idsSet = new Set(idsToDelete)
+    if (selectedIds.size === 0) return;
+    setIsDeleting(true);
+    const idsToDelete = Array.from(selectedIds);
+    const idsSet = new Set(idsToDelete);
     try {
-      await apiClient.deletePredictions(idsToDelete)
-      setItems(prevItems => prevItems.filter((existing) => !idsSet.has(existing.id)))
+      await apiClient.deletePredictions(idsToDelete);
+      setItems((prevItems) =>
+        prevItems.filter((existing) => !idsSet.has(existing.id)),
+      );
       if (selectedItem && idsSet.has(selectedItem.id)) {
-        setSelectedItem(null)
+        setSelectedItem(null);
       }
-      setSelectedIds(new Set())
-      setIsSelectionMode(false)
+      setSelectedIds(new Set());
+      setIsSelectionMode(false);
       toast({
-        title: t('history.deletedBulk'),
-        description: t('history.deletedBulkDesc', { count: idsToDelete.length }),
-      })
+        title: t("history.deletedBulk"),
+        description: t("history.deletedBulkDesc", {
+          count: idsToDelete.length,
+        }),
+      });
     } catch (err) {
       toast({
-        title: t('common.error'),
-        description: err instanceof Error ? err.message : t('history.deleteFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description:
+          err instanceof Error ? err.message : t("history.deleteFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsDeleting(false)
-      setShowBulkDeleteConfirm(false)
+      setIsDeleting(false);
+      setShowBulkDeleteConfirm(false);
     }
-  }, [selectedIds, selectedItem, t])
+  }, [selectedIds, selectedItem, t]);
 
   const handleToggleSelect = useCallback((id: string) => {
-    setSelectedIds(prev => {
-      const next = new Set(prev)
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
       if (next.has(id)) {
-        next.delete(id)
+        next.delete(id);
       } else {
-        next.add(id)
+        next.add(id);
       }
-      return next
-    })
-  }, [])
+      return next;
+    });
+  }, []);
 
   const handleToggleSelectionMode = useCallback(() => {
     setIsSelectionMode((prev) => {
-      const next = !prev
+      const next = !prev;
       if (!next) {
-        setSelectedIds(new Set())
+        setSelectedIds(new Set());
       }
-      return next
-    })
-  }, [])
+      return next;
+    });
+  }, []);
 
   const handleSelectAll = useCallback(() => {
-    setSelectedIds(new Set(items.map(item => item.id)))
-  }, [items])
+    setSelectedIds(new Set(items.map((item) => item.id)));
+  }, [items]);
 
   const handleClearSelection = useCallback(() => {
-    setSelectedIds(new Set())
-  }, [])
+    setSelectedIds(new Set());
+  }, []);
 
   // Load API key on mount
   useEffect(() => {
-    loadApiKey()
-  }, [loadApiKey])
+    loadApiKey();
+  }, [loadApiKey]);
 
   useEffect(() => {
-    fetchHistory()
-  }, [fetchHistory])
+    fetchHistory();
+  }, [fetchHistory]);
 
   useEffect(() => {
-    setSelectedIds(new Set())
-  }, [page, statusFilter])
-
-  const maxSelectablePages = 100
-  const pageOptions = Array.from({ length: maxSelectablePages }, (_, index) => index + 1)
-  const displayStart = items.length === 0 ? 0 : (page - 1) * pageSize + 1
-  const displayEnd = items.length === 0 ? 0 : (page - 1) * pageSize + items.length
+    setSelectedIds(new Set());
+  }, [page, statusFilter]);
+
+  const maxSelectablePages = 100;
+  const pageOptions = Array.from(
+    { length: maxSelectablePages },
+    (_, index) => index + 1,
+  );
+  const displayStart = items.length === 0 ? 0 : (page - 1) * pageSize + 1;
+  const displayEnd =
+    items.length === 0 ? 0 : (page - 1) * pageSize + items.length;
 
   useEffect(() => {
     if (page > maxSelectablePages) {
-      setPage(maxSelectablePages)
+      setPage(maxSelectablePages);
     }
-  }, [page, maxSelectablePages])
+  }, [page, maxSelectablePages]);
 
   const getStatusBadge = (status: string) => {
     switch (status) {
-      case 'completed':
-        return <Badge variant="success">{t('history.status.completed')}</Badge>
-      case 'failed':
-        return <Badge variant="destructive">{t('history.status.failed')}</Badge>
-      case 'processing':
-        return <Badge variant="warning">{t('history.status.processing')}</Badge>
-      case 'created':
-        return <Badge variant="info">{t('history.status.created')}</Badge>
+      case "completed":
+        return <Badge variant="success">{t("history.status.completed")}</Badge>;
+      case "failed":
+        return (
+          <Badge variant="destructive">{t("history.status.failed")}</Badge>
+        );
+      case "processing":
+        return (
+          <Badge variant="warning">{t("history.status.processing")}</Badge>
+        );
+      case "created":
+        return <Badge variant="info">{t("history.status.created")}</Badge>;
       default:
-        return <Badge variant="secondary">{status}</Badge>
+        return <Badge variant="secondary">{status}</Badge>;
     }
-  }
+  };
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString()
-  }
-
-  const getOutputType = (output: unknown): 'image' | 'video' | 'audio' | 'url' | 'json' | 'text' => {
-    if (typeof output === 'object' && output !== null) {
-      return 'json'
+    return new Date(dateString).toLocaleString();
+  };
+
+  const getOutputType = (
+    output: unknown,
+  ): "image" | "video" | "audio" | "url" | "json" | "text" => {
+    if (typeof output === "object" && output !== null) {
+      return "json";
     }
-    if (typeof output === 'string') {
-      if (output.match(/\.(jpg|jpeg|png|gif|webp|bmp)(\?.*)?$/i)) return 'image'
-      if (output.match(/\.(mp4|webm|mov|avi|mkv)(\?.*)?$/i)) return 'video'
-      if (output.match(/\.(mp3|wav|ogg|flac|aac|m4a|wma)(\?.*)?$/i)) return 'audio'
-      if (output.startsWith('http://') || output.startsWith('https://')) return 'url'
+    if (typeof output === "string") {
+      if (output.match(/\.(jpg|jpeg|png|gif|webp|bmp)(\?.*)?$/i))
+        return "image";
+      if (output.match(/\.(mp4|webm|mov|avi|mkv)(\?.*)?$/i)) return "video";
+      if (output.match(/\.(mp3|wav|ogg|flac|aac|m4a|wma)(\?.*)?$/i))
+        return "audio";
+      if (output.startsWith("http://") || output.startsWith("https://"))
+        return "url";
     }
-    return 'text'
-  }
+    return "text";
+  };
 
   const getPreviewIcon = (item: HistoryItem) => {
-    const firstOutput = item.outputs?.[0]
-    const type = getOutputType(firstOutput)
+    const firstOutput = item.outputs?.[0];
+    const type = getOutputType(firstOutput);
     switch (type) {
-      case 'image': return Image
-      case 'video': return Video
-      case 'audio': return Music
-      case 'url': return Link
-      case 'json': return FileJson
-      case 'text': return FileText
-      default: return File
+      case "image":
+        return Image;
+      case "video":
+        return Video;
+      case "audio":
+        return Music;
+      case "url":
+        return Link;
+      case "json":
+        return FileJson;
+      case "text":
+        return FileText;
+      default:
+        return File;
     }
-  }
+  };
 
   const HistoryCard = ({ item }: { item: HistoryItem }) => {
-    const { ref, isInView } = useInView<HTMLDivElement>()
-    const PreviewIcon = getPreviewIcon(item)
-    const hasPreview = item.outputs && item.outputs.length > 0
-    const firstOutput = item.outputs?.[0]
-    const shouldLoad = loadPreviews && isInView
+    const { ref, isInView } = useInView<HTMLDivElement>();
+    const PreviewIcon = getPreviewIcon(item);
+    const hasPreview = item.outputs && item.outputs.length > 0;
+    const firstOutput = item.outputs?.[0];
+    const shouldLoad = loadPreviews && isInView;
 
     return (
       <Card
         key={item.id}
         className={cn(
           "overflow-hidden cursor-pointer rounded-xl border border-border/70 bg-card/80 shadow-sm hover:shadow-md transition-all",
-          selectedIds.has(item.id) && "ring-2 ring-primary"
+          selectedIds.has(item.id) && "ring-2 ring-primary",
         )}
-        onClick={() => isSelectionMode ? handleToggleSelect(item.id) : setSelectedItem(item)}
+        onClick={() =>
+          isSelectionMode ? handleToggleSelect(item.id) : setSelectedItem(item)
+        }
       >
         {/* Preview */}
         <div ref={ref} className="aspect-square bg-muted relative">
@@ -376,7 +425,10 @@ export function HistoryPage() {
               />
             </div>
           )}
-          {shouldLoad && hasPreview && typeof firstOutput === 'string' && firstOutput.match(/\.(jpg|jpeg|png|gif|webp)/i) ? (
+          {shouldLoad &&
+          hasPreview &&
+          typeof firstOutput === "string" &&
+          firstOutput.match(/\.(jpg|jpeg|png|gif|webp)/i) ? (
             <img
               src={firstOutput}
               alt="Preview"
@@ -384,30 +436,42 @@ export function HistoryPage() {
               loading="lazy"
               decoding="async"
             />
-          ) : shouldLoad && hasPreview && typeof firstOutput === 'string' && firstOutput.match(/\.(mp4|webm|mov)/i) ? (
+          ) : shouldLoad &&
+            hasPreview &&
+            typeof firstOutput === "string" &&
+            firstOutput.match(/\.(mp4|webm|mov)/i) ? (
             <VideoPreview src={firstOutput} enabled={shouldLoad} />
-          ) : shouldLoad && hasPreview && typeof firstOutput === 'string' && firstOutput.match(/\.(mp3|wav|ogg|flac|aac|m4a|wma)/i) ? (
+          ) : shouldLoad &&
+            hasPreview &&
+            typeof firstOutput === "string" &&
+            firstOutput.match(/\.(mp3|wav|ogg|flac|aac|m4a|wma)/i) ? (
             <div
               className="w-full h-full flex items-center justify-center p-3"
               onClick={(e) => e.stopPropagation()}
             >
               <AudioPlayer src={firstOutput} compact />
             </div>
-          ) : shouldLoad && hasPreview && typeof firstOutput === 'object' ? (
+          ) : shouldLoad && hasPreview && typeof firstOutput === "object" ? (
             <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
               <FileJson className="h-6 w-6 text-muted-foreground shrink-0" />
               <pre className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-3">
                 {JSON.stringify(firstOutput, null, 0).slice(0, 100)}
               </pre>
             </div>
-          ) : shouldLoad && hasPreview && typeof firstOutput === 'string' && !firstOutput.startsWith('http') ? (
+          ) : shouldLoad &&
+            hasPreview &&
+            typeof firstOutput === "string" &&
+            !firstOutput.startsWith("http") ? (
             <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
               <FileText className="h-6 w-6 text-muted-foreground shrink-0" />
               <p className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-3">
                 {firstOutput.slice(0, 150)}
               </p>
             </div>
-          ) : shouldLoad && hasPreview && typeof firstOutput === 'string' && firstOutput.startsWith('http') ? (
+          ) : shouldLoad &&
+            hasPreview &&
+            typeof firstOutput === "string" &&
+            firstOutput.startsWith("http") ? (
             <div className="w-full h-full flex flex-col items-center justify-center p-3 gap-1">
               <Link className="h-6 w-6 text-muted-foreground shrink-0" />
               <p className="text-[10px] text-muted-foreground overflow-hidden text-ellipsis w-full text-center line-clamp-2 break-all">
@@ -426,7 +490,9 @@ export function HistoryPage() {
 
         <CardContent className="p-2.5">
           <p className="text-sm font-medium truncate">{item.model}</p>
-          <p className="mt-0.5 text-xs text-muted-foreground truncate">{formatDate(item.created_at)}</p>
+          <p className="mt-0.5 text-xs text-muted-foreground truncate">
+            {formatDate(item.created_at)}
+          </p>
           {item.execution_time && (
             <p className="mt-0.5 text-xs text-muted-foreground">
               {(item.execution_time / 1000).toFixed(2)}s
@@ -434,8 +500,8 @@ export function HistoryPage() {
           )}
         </CardContent>
       </Card>
-    )
-  }
+    );
+  };
 
   // Show loading state while API key is being loaded from storage
   if (isLoadingApiKey || !hasAttemptedLoad) {
@@ -443,10 +509,9 @@ export function HistoryPage() {
       <div className="flex h-full items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
-
   return (
     <div className="flex h-full flex-col overflow-hidden">
       {/* Header */}
@@ -455,9 +520,11 @@ export function HistoryPage() {
           <div className="flex flex-col gap-1.5 md:flex-row md:items-baseline md:gap-3">
             <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
               <History className="h-5 w-5 text-primary" />
-              {t('history.title')}
+              {t("history.title")}
             </h1>
-            <p className="text-muted-foreground text-xs md:text-sm">{t('history.description')}</p>
+            <p className="text-muted-foreground text-xs md:text-sm">
+              {t("history.description")}
+            </p>
           </div>
         </div>
 
@@ -466,26 +533,38 @@ export function HistoryPage() {
           <Select
             value={statusFilter}
             onValueChange={(value) => {
-              setStatusFilter(value)
-              setPage(1)
+              setStatusFilter(value);
+              setPage(1);
             }}
           >
             <SelectTrigger className="h-9 w-36 rounded-lg border-border/80 bg-background">
-              <SelectValue placeholder={t('history.status.all')} />
+              <SelectValue placeholder={t("history.status.all")} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{t('history.status.all')}</SelectItem>
-              <SelectItem value="completed">{t('history.status.completed')}</SelectItem>
-              <SelectItem value="failed">{t('history.status.failed')}</SelectItem>
-              <SelectItem value="processing">{t('history.status.processing')}</SelectItem>
-              <SelectItem value="created">{t('history.status.created')}</SelectItem>
+              <SelectItem value="all">{t("history.status.all")}</SelectItem>
+              <SelectItem value="completed">
+                {t("history.status.completed")}
+              </SelectItem>
+              <SelectItem value="failed">
+                {t("history.status.failed")}
+              </SelectItem>
+              <SelectItem value="processing">
+                {t("history.status.processing")}
+              </SelectItem>
+              <SelectItem value="created">
+                {t("history.status.created")}
+              </SelectItem>
             </SelectContent>
           </Select>
           <Button
             variant={loadPreviews ? "default" : "outline"}
             size="sm"
             onClick={() => setLoadPreviews(!loadPreviews)}
-            title={loadPreviews ? t('history.disablePreviews') : t('history.loadPreviews')}
+            title={
+              loadPreviews
+                ? t("history.disablePreviews")
+                : t("history.loadPreviews")
+            }
             className="h-9 rounded-lg"
           >
             {loadPreviews ? (
@@ -502,7 +581,7 @@ export function HistoryPage() {
               disabled={isDeleting}
             >
               <Trash2 className="mr-2 h-4 w-4" />
-              {t('history.deleteSelected', { count: selectedIds.size })}
+              {t("history.deleteSelected", { count: selectedIds.size })}
             </Button>
           )}
           <Button
@@ -512,19 +591,36 @@ export function HistoryPage() {
             disabled={isDeleting}
           >
             <CheckSquare className="mr-2 h-4 w-4" />
-            {isSelectionMode ? t('history.selectionDone') : t('history.select')}
+            {isSelectionMode ? t("history.selectionDone") : t("history.select")}
           </Button>
-          <Button variant="outline" size="sm" onClick={fetchHistory} disabled={isLoading}>
-            <RefreshCw className={cn("mr-2 h-4 w-4", isLoading && "animate-spin")} />
-            {t('common.refresh')}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={fetchHistory}
+            disabled={isLoading}
+          >
+            <RefreshCw
+              className={cn("mr-2 h-4 w-4", isLoading && "animate-spin")}
+            />
+            {t("common.refresh")}
           </Button>
           {isSelectionMode && items.length > 0 && (
             <>
-              <Button variant="outline" size="sm" onClick={handleSelectAll} disabled={selectedIds.size === items.length}>
-                {t('common.selectAll')}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleSelectAll}
+                disabled={selectedIds.size === items.length}
+              >
+                {t("common.selectAll")}
               </Button>
-              <Button variant="outline" size="sm" onClick={handleClearSelection} disabled={selectedIds.size === 0}>
-                {t('common.clear')}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleClearSelection}
+                disabled={selectedIds.size === 0}
+              >
+                {t("common.clear")}
               </Button>
             </>
           )}
@@ -541,26 +637,39 @@ export function HistoryPage() {
           ) : error ? (
             <div className="text-center py-8">
               <AlertCircle className="mx-auto h-10 w-10 text-muted-foreground mb-3" />
-              {error.includes('404') || error.includes('page not found') || error.includes('504') || error.includes('timeout') || error.includes('Gateway') ? (
+              {error.includes("404") ||
+              error.includes("page not found") ||
+              error.includes("504") ||
+              error.includes("timeout") ||
+              error.includes("Gateway") ? (
                 <>
-                  <p className="text-base font-medium">{t('history.notAvailable')}</p>
+                  <p className="text-base font-medium">
+                    {t("history.notAvailable")}
+                  </p>
                   <p className="text-muted-foreground text-sm mt-1">
-                    {t('history.notAvailableDesc')}
+                    {t("history.notAvailableDesc")}
                   </p>
                 </>
               ) : (
                 <>
                   <p className="text-destructive text-sm">{error}</p>
-                  <Button variant="outline" size="sm" className="mt-3" onClick={fetchHistory}>
-                    {t('errors.tryAgain')}
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-3"
+                    onClick={fetchHistory}
+                  >
+                    {t("errors.tryAgain")}
                   </Button>
                 </>
               )}
             </div>
           ) : items.length === 0 ? (
-            <div className="text-center py-8">
-              <Clock className="mx-auto h-10 w-10 text-muted-foreground mb-3" />
-              <p className="text-muted-foreground text-sm">{t('history.noHistory')}</p>
+            <div className="text-center py-16 animate-in fade-in duration-500">
+              <Clock className="mx-auto h-12 w-12 text-muted-foreground/40 mb-4 animate-pulse" />
+              <p className="text-muted-foreground text-sm">
+                {t("history.noHistory")}
+              </p>
             </div>
           ) : (
             <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
@@ -579,50 +688,55 @@ export function HistoryPage() {
             variant="ghost"
             size="icon"
             className="h-8 w-8 rounded-lg"
-            onClick={() => setPage(p => p - 1)}
+            onClick={() => setPage((p) => p - 1)}
             disabled={page === 1 || isLoading}
           >
             <ChevronLeft className="h-4 w-4" />
           </Button>
           {(() => {
-            const pages: (number | 'ellipsis')[] = []
-            const total = Math.min(maxSelectablePages, 99)
+            const pages: (number | "ellipsis")[] = [];
+            const total = Math.min(maxSelectablePages, 99);
             if (total <= 7) {
-              for (let i = 1; i <= total; i++) pages.push(i)
+              for (let i = 1; i <= total; i++) pages.push(i);
             } else {
-              pages.push(1)
-              if (page > 3) pages.push('ellipsis')
-              const start = Math.max(2, page - 1)
-              const end = Math.min(total - 1, page + 1)
-              for (let i = start; i <= end; i++) pages.push(i)
-              if (page < total - 2) pages.push('ellipsis')
-              pages.push(total)
+              pages.push(1);
+              if (page > 3) pages.push("ellipsis");
+              const start = Math.max(2, page - 1);
+              const end = Math.min(total - 1, page + 1);
+              for (let i = start; i <= end; i++) pages.push(i);
+              if (page < total - 2) pages.push("ellipsis");
+              pages.push(total);
             }
             return pages.map((p, i) =>
-              p === 'ellipsis' ? (
-                <span key={`e${i}`} className="w-8 text-center text-xs text-muted-foreground">···</span>
+              p === "ellipsis" ? (
+                <span
+                  key={`e${i}`}
+                  className="w-8 text-center text-xs text-muted-foreground"
+                >
+                  ···
+                </span>
               ) : (
                 <Button
                   key={p}
-                  variant={p === page ? 'default' : 'ghost'}
+                  variant={p === page ? "default" : "ghost"}
                   size="icon"
                   className={cn(
-                    'h-8 w-8 rounded-lg text-xs font-medium',
-                    p === page && 'pointer-events-none'
+                    "h-8 w-8 rounded-lg text-xs font-medium",
+                    p === page && "pointer-events-none",
                   )}
                   onClick={() => setPage(p)}
                   disabled={isLoading}
                 >
                   {p}
                 </Button>
-              )
-            )
+              ),
+            );
           })()}
           <Button
             variant="ghost"
             size="icon"
             className="h-8 w-8 rounded-lg"
-            onClick={() => setPage(p => p + 1)}
+            onClick={() => setPage((p) => p + 1)}
             disabled={page >= maxSelectablePages || isLoading}
           >
             <ChevronRight className="h-4 w-4" />
@@ -631,14 +745,18 @@ export function HistoryPage() {
       )}
 
       {/* Detail Dialog */}
-      <Dialog open={!!selectedItem} onOpenChange={(open) => !open && setSelectedItem(null)}>
+      <Dialog
+        open={!!selectedItem}
+        onOpenChange={(open) => !open && setSelectedItem(null)}
+      >
         <DialogContent className="max-h-[90vh] max-w-4xl overflow-hidden border-border/70 flex flex-col">
           <DialogHeader>
             <DialogTitle className="flex items-center gap-2">
-              {t('history.generationDetails')}
+              {t("history.generationDetails")}
               {items.length > 1 && (
                 <span className="text-sm font-normal text-muted-foreground">
-                  ({items.findIndex(item => item.id === selectedItem?.id) + 1}/{items.length})
+                  ({items.findIndex((item) => item.id === selectedItem?.id) + 1}
+                  /{items.length})
                 </span>
               )}
             </DialogTitle>
@@ -651,7 +769,7 @@ export function HistoryPage() {
                   <Button
                     size="icon"
                     variant="secondary"
-                    onClick={() => navigateHistory('prev')}
+                    onClick={() => navigateHistory("prev")}
                     className="absolute left-2 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full opacity-80 hover:opacity-100"
                   >
                     <ChevronLeft className="h-5 w-5" />
@@ -659,7 +777,7 @@ export function HistoryPage() {
                   <Button
                     size="icon"
                     variant="secondary"
-                    onClick={() => navigateHistory('next')}
+                    onClick={() => navigateHistory("next")}
                     className="absolute right-2 top-1/2 -translate-y-1/2 z-10 h-10 w-10 rounded-full opacity-80 hover:opacity-100"
                   >
                     <ChevronRight className="h-5 w-5" />
@@ -673,8 +791,12 @@ export function HistoryPage() {
                   onClick={() => setDeleteConfirmItem(selectedItem)}
                   disabled={isDeleting}
                 >
-                  {isDeleting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Trash2 className="h-4 w-4 mr-2" />}
-                  {t('common.delete')}
+                  {isDeleting ? (
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  ) : (
+                    <Trash2 className="h-4 w-4 mr-2" />
+                  )}
+                  {t("common.delete")}
                 </Button>
               </div>
               {/* Preview using OutputDisplay */}
@@ -689,7 +811,7 @@ export function HistoryPage() {
                       has_nsfw_contents: selectedItem.has_nsfw_contents,
                       timings: selectedItem.execution_time
                         ? { inference: selectedItem.execution_time }
-                        : undefined
+                        : undefined,
                     }}
                     outputs={selectedItem.outputs}
                     error={null}
@@ -701,25 +823,37 @@ export function HistoryPage() {
               {/* Details */}
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <p className="text-muted-foreground">{t('history.model')}</p>
+                  <p className="text-muted-foreground">{t("history.model")}</p>
                   <p className="font-medium">{selectedItem.model}</p>
                 </div>
                 <div>
-                  <p className="text-muted-foreground">{t('history.status.all').replace('All ', '')}</p>
+                  <p className="text-muted-foreground">
+                    {t("history.status.all").replace("All ", "")}
+                  </p>
                   <div>{getStatusBadge(selectedItem.status)}</div>
                 </div>
                 <div>
-                  <p className="text-muted-foreground">{t('history.created')}</p>
-                  <p className="font-medium">{formatDate(selectedItem.created_at)}</p>
+                  <p className="text-muted-foreground">
+                    {t("history.created")}
+                  </p>
+                  <p className="font-medium">
+                    {formatDate(selectedItem.created_at)}
+                  </p>
                 </div>
                 {selectedItem.execution_time && (
                   <div>
-                    <p className="text-muted-foreground">{t('history.executionTime')}</p>
-                    <p className="font-medium">{(selectedItem.execution_time / 1000).toFixed(2)}s</p>
+                    <p className="text-muted-foreground">
+                      {t("history.executionTime")}
+                    </p>
+                    <p className="font-medium">
+                      {(selectedItem.execution_time / 1000).toFixed(2)}s
+                    </p>
                   </div>
                 )}
                 <div className="col-span-2">
-                  <p className="text-muted-foreground">{t('history.predictionId')}</p>
+                  <p className="text-muted-foreground">
+                    {t("history.predictionId")}
+                  </p>
                   <div className="flex items-center gap-2">
                     <code className="text-xs bg-muted px-2 py-1 rounded flex-1 truncate">
                       {selectedItem.id}
@@ -743,49 +877,73 @@ export function HistoryPage() {
         </DialogContent>
       </Dialog>
 
-      <AlertDialog open={!!deleteConfirmItem} onOpenChange={() => setDeleteConfirmItem(null)}>
+      <AlertDialog
+        open={!!deleteConfirmItem}
+        onOpenChange={() => setDeleteConfirmItem(null)}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('history.deleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("history.deleteConfirmTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('history.deleteConfirmDesc')}
+              {t("history.deleteConfirmDesc")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>
+              {t("common.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction
-              onClick={() => deleteConfirmItem && handleDelete(deleteConfirmItem)}
+              onClick={() =>
+                deleteConfirmItem && handleDelete(deleteConfirmItem)
+              }
               disabled={!deleteConfirmItem || isDeleting}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Trash2 className="h-4 w-4 mr-2" />}
-              {t('common.delete')}
+              {isDeleting ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4 mr-2" />
+              )}
+              {t("common.delete")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
 
-      <AlertDialog open={showBulkDeleteConfirm} onOpenChange={setShowBulkDeleteConfirm}>
+      <AlertDialog
+        open={showBulkDeleteConfirm}
+        onOpenChange={setShowBulkDeleteConfirm}
+      >
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('history.bulkDeleteConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("history.bulkDeleteConfirmTitle")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('history.bulkDeleteConfirmDesc', { count: selectedIds.size })}
+              {t("history.bulkDeleteConfirmDesc", { count: selectedIds.size })}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel disabled={isDeleting}>
+              {t("common.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction
               onClick={handleBulkDelete}
               disabled={isDeleting || selectedIds.size === 0}
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {isDeleting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Trash2 className="h-4 w-4 mr-2" />}
-              {t('history.deleteSelected', { count: selectedIds.size })}
+              {isDeleting ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <Trash2 className="h-4 w-4 mr-2" />
+              )}
+              {t("history.deleteSelected", { count: selectedIds.size })}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/ImageConverterPage.tsx b/src/pages/ImageConverterPage.tsx
index 36ada4c7..9fc171e2 100644
--- a/src/pages/ImageConverterPage.tsx
+++ b/src/pages/ImageConverterPage.tsx
@@ -1,23 +1,23 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { useFFmpegWorker } from '@/hooks/useFFmpegWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { IMAGE_FORMATS, getImageFormat } from '@/lib/ffmpegFormats'
-import { formatBytes } from '@/types/progress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Slider } from '@/components/ui/slider'
-import { Label } from '@/components/ui/label'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { useFFmpegWorker } from "@/hooks/useFFmpegWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { IMAGE_FORMATS, getImageFormat } from "@/lib/ffmpegFormats";
+import { formatBytes } from "@/types/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -26,8 +26,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -36,47 +36,47 @@ import {
   FileImage,
   X,
   RefreshCw,
-  Trash2
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface ImageFile {
-  id: string
-  file: File
-  preview: string
-  size: { width: number; height: number } | null
+  id: string;
+  file: File;
+  preview: string;
+  size: { width: number; height: number } | null;
 }
 
 interface ConvertedImage {
-  id: string
-  blob: Blob
-  url: string
-  filename: string
+  id: string;
+  blob: Blob;
+  url: string;
+  filename: string;
 }
 
 // Phase configuration for image converter
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.ffmpeg.loading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.ffmpeg.converting', weight: 0.9 }
-]
+  { id: "download", labelKey: "freeTools.ffmpeg.loading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.ffmpeg.converting", weight: 0.9 },
+];
 
 export function ImageConverterPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [images, setImages] = useState<ImageFile[]>([])
-  const [convertedImages, setConvertedImages] = useState<ConvertedImage[]>([])
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [outputFormat, setOutputFormat] = useState('jpg')
-  const [quality, setQuality] = useState(95)
-  const [error, setError] = useState<string | null>(null)
-  const [currentIndex, setCurrentIndex] = useState(0)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [images, setImages] = useState<ImageFile[]>([]);
+  const [convertedImages, setConvertedImages] = useState<ConvertedImage[]>([]);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [outputFormat, setOutputFormat] = useState("jpg");
+  const [quality, setQuality] = useState(95);
+  const [error, setError] = useState<string | null>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -85,157 +85,167 @@ export function ImageConverterPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
   const { convert, hasFailed, retryWorker } = useFFmpegWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
+      if (phase === "download") {
+        startPhase("download");
+      } else if (phase === "process") {
+        startPhase("process");
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : 'process'
+      const phaseId = phase === "download" ? "download" : "process";
       // Adjust progress for batch processing
-      const batchProgress = ((currentIndex + progressValue / 100) / images.length) * 100
-      updatePhase(phaseId, phaseId === 'process' ? batchProgress : progressValue, detail)
+      const batchProgress =
+        ((currentIndex + progressValue / 100) / images.length) * 100;
+      updatePhase(
+        phaseId,
+        phaseId === "process" ? batchProgress : progressValue,
+        detail,
+      );
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      resetProgress()
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      resetProgress();
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, resetPage, location.pathname, navigate])
+  }, [isProcessing, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [resetPage, location.pathname, navigate])
-
-  const handleFileSelect = useCallback((files: FileList | File[]) => {
-    setError(null)
-    const newImages: ImageFile[] = []
-
-    Array.from(files).forEach((file) => {
-      if (!file.type.startsWith('image/')) return
-
-      const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-      const preview = URL.createObjectURL(file)
-
-      const img = new Image()
-      img.onload = () => {
-        setImages((prev) =>
-          prev.map((item) =>
-            item.id === id ? { ...item, size: { width: img.width, height: img.height } } : item
-          )
-        )
-      }
-      img.src = preview
-
-      newImages.push({ id, file, preview, size: null })
-    })
-
-    setImages((prev) => [...prev, ...newImages])
-    setConvertedImages([])
-    resetProgress()
-  }, [resetProgress])
+    setShowBackWarning(false);
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [resetPage, location.pathname, navigate]);
+
+  const handleFileSelect = useCallback(
+    (files: FileList | File[]) => {
+      setError(null);
+      const newImages: ImageFile[] = [];
+
+      Array.from(files).forEach((file) => {
+        if (!file.type.startsWith("image/")) return;
+
+        const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const preview = URL.createObjectURL(file);
+
+        const img = new Image();
+        img.onload = () => {
+          setImages((prev) =>
+            prev.map((item) =>
+              item.id === id
+                ? { ...item, size: { width: img.width, height: img.height } }
+                : item,
+            ),
+          );
+        };
+        img.src = preview;
+
+        newImages.push({ id, file, preview, size: null });
+      });
+
+      setImages((prev) => [...prev, ...newImages]);
+      setConvertedImages([]);
+      resetProgress();
+    },
+    [resetProgress],
+  );
 
   const handleRemoveImage = useCallback((id: string) => {
     setImages((prev) => {
-      const image = prev.find((img) => img.id === id)
-      if (image) URL.revokeObjectURL(image.preview)
-      return prev.filter((img) => img.id !== id)
-    })
+      const image = prev.find((img) => img.id === id);
+      if (image) URL.revokeObjectURL(image.preview);
+      return prev.filter((img) => img.id !== id);
+    });
     setConvertedImages((prev) => {
-      const converted = prev.find((img) => img.id === id)
-      if (converted) URL.revokeObjectURL(converted.url)
-      return prev.filter((img) => img.id !== id)
-    })
-  }, [])
+      const converted = prev.find((img) => img.id === id);
+      if (converted) URL.revokeObjectURL(converted.url);
+      return prev.filter((img) => img.id !== id);
+    });
+  }, []);
 
   const handleClearAll = useCallback(() => {
-    images.forEach((img) => URL.revokeObjectURL(img.preview))
-    convertedImages.forEach((img) => URL.revokeObjectURL(img.url))
-    setImages([])
-    setConvertedImages([])
-    resetProgress()
-  }, [images, convertedImages, resetProgress])
+    images.forEach((img) => URL.revokeObjectURL(img.preview));
+    convertedImages.forEach((img) => URL.revokeObjectURL(img.url));
+    setImages([]);
+    setConvertedImages([]);
+    resetProgress();
+  }, [images, convertedImages, resetProgress]);
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
       if (e.dataTransfer.files.length > 0) {
-        handleFileSelect(e.dataTransfer.files)
+        handleFileSelect(e.dataTransfer.files);
       }
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const handleConvert = async () => {
-    if (images.length === 0) return
+    if (images.length === 0) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setConvertedImages([])
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    setConvertedImages([]);
+    resetAndStart("download");
 
-    const format = getImageFormat(outputFormat)
-    if (!format) return
+    const format = getImageFormat(outputFormat);
+    if (!format) return;
 
-    const results: ConvertedImage[] = []
+    const results: ConvertedImage[] = [];
 
     try {
       for (let i = 0; i < images.length; i++) {
-        setCurrentIndex(i)
-        const image = images[i]
+        setCurrentIndex(i);
+        const image = images[i];
 
         // Read file as ArrayBuffer
-        const arrayBuffer = await image.file.arrayBuffer()
+        const arrayBuffer = await image.file.arrayBuffer();
 
         // Convert using FFmpeg worker
         const result = await convert(
@@ -243,46 +253,46 @@ export function ImageConverterPage() {
           image.file.name,
           outputFormat,
           format.ext,
-          format.supportsQuality ? { quality } : undefined
-        )
+          format.supportsQuality ? { quality } : undefined,
+        );
 
         // Create blob and URL
-        const blob = new Blob([result.data], { type: format.mimeType })
-        const url = URL.createObjectURL(blob)
-        const filename = image.file.name.replace(/\.[^.]+$/, `.${format.ext}`)
+        const blob = new Blob([result.data], { type: format.mimeType });
+        const url = URL.createObjectURL(blob);
+        const filename = image.file.name.replace(/\.[^.]+$/, `.${format.ext}`);
 
-        results.push({ id: image.id, blob, url, filename })
+        results.push({ id: image.id, blob, url, filename });
       }
 
-      setConvertedImages(results)
-      completeAllPhases()
+      setConvertedImages(results);
+      completeAllPhases();
     } catch (err) {
-      console.error('Conversion failed:', err)
-      setError(err instanceof Error ? err.message : 'Conversion failed')
+      console.error("Conversion failed:", err);
+      setError(err instanceof Error ? err.message : "Conversion failed");
     } finally {
-      setIsProcessing(false)
-      setCurrentIndex(0)
+      setIsProcessing(false);
+      setCurrentIndex(0);
     }
-  }
+  };
 
   const handleDownload = (converted: ConvertedImage) => {
-    const link = document.createElement('a')
-    link.href = converted.url
-    link.download = converted.filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const link = document.createElement("a");
+    link.href = converted.url;
+    link.download = converted.filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   const handleDownloadAll = async () => {
     // For multiple files, download each one with a small delay
     for (const converted of convertedImages) {
-      handleDownload(converted)
-      await new Promise((resolve) => setTimeout(resolve, 200))
+      handleDownload(converted);
+      await new Promise((resolve) => setTimeout(resolve, 200));
     }
-  }
+  };
 
-  const selectedFormat = getImageFormat(outputFormat)
+  const selectedFormat = getImageFormat(outputFormat);
 
   return (
     <div
@@ -297,7 +307,9 @@ export function ImageConverterPage() {
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.imageConverter.dropToAdd')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.imageConverter.dropToAdd")}
+            </p>
           </div>
         </div>
       )}
@@ -308,9 +320,11 @@ export function ImageConverterPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold">{t('freeTools.imageConverter.title')}</h1>
+          <h1 className="text-2xl font-bold">
+            {t("freeTools.imageConverter.title")}
+          </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.imageConverter.description')}
+            {t("freeTools.imageConverter.description")}
           </p>
         </div>
       </div>
@@ -319,10 +333,10 @@ export function ImageConverterPage() {
       {images.length === 0 && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -330,12 +344,14 @@ export function ImageConverterPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.imageConverter.selectImages')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.imageConverter.selectImages")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.imageConverter.orDragDrop')}
+              {t("freeTools.imageConverter.orDragDrop")}
             </p>
             <p className="text-xs text-muted-foreground mt-2">
-              {t('freeTools.imageConverter.supportedFormats')}
+              {t("freeTools.imageConverter.supportedFormats")}
             </p>
           </CardContent>
         </Card>
@@ -348,8 +364,8 @@ export function ImageConverterPage() {
         multiple
         className="hidden"
         onChange={(e) => {
-          if (e.target.files) handleFileSelect(e.target.files)
-          e.target.value = ''
+          if (e.target.files) handleFileSelect(e.target.files);
+          e.target.value = "";
         }}
       />
 
@@ -364,7 +380,7 @@ export function ImageConverterPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.imageConverter.addMore')}
+              {t("freeTools.imageConverter.addMore")}
             </Button>
 
             <Select
@@ -387,7 +403,7 @@ export function ImageConverterPage() {
             {selectedFormat?.supportsQuality && (
               <div className="flex items-center gap-3">
                 <Label className="text-sm whitespace-nowrap">
-                  {t('freeTools.imageConverter.quality')}: {quality}%
+                  {t("freeTools.imageConverter.quality")}: {quality}%
                 </Label>
                 <Slider
                   value={[quality]}
@@ -409,12 +425,13 @@ export function ImageConverterPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.imageConverter.converting')} ({currentIndex + 1}/{images.length})
+                  {t("freeTools.imageConverter.converting")} ({currentIndex + 1}
+                  /{images.length})
                 </>
               ) : (
                 <>
                   <FileImage className="h-4 w-4 mr-2" />
-                  {t('freeTools.imageConverter.convert')} ({images.length})
+                  {t("freeTools.imageConverter.convert")} ({images.length})
                 </>
               )}
             </Button>
@@ -422,7 +439,7 @@ export function ImageConverterPage() {
             {convertedImages.length > 1 && (
               <Button variant="outline" onClick={handleDownloadAll}>
                 <Download className="h-4 w-4 mr-2" />
-                {t('freeTools.imageConverter.downloadAll')}
+                {t("freeTools.imageConverter.downloadAll")}
               </Button>
             )}
 
@@ -451,7 +468,7 @@ export function ImageConverterPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -459,7 +476,7 @@ export function ImageConverterPage() {
           {/* Image grid */}
           <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
             {images.map((image) => {
-              const converted = convertedImages.find((c) => c.id === image.id)
+              const converted = convertedImages.find((c) => c.id === image.id);
               return (
                 <Card key={image.id} className="overflow-hidden group relative">
                   <CardContent className="p-0">
@@ -489,13 +506,16 @@ export function ImageConverterPage() {
                             onClick={() => handleDownload(converted)}
                           >
                             <Download className="h-3 w-3 mr-1" />
-                            {t('common.download')}
+                            {t("common.download")}
                           </Button>
                         </div>
                       )}
                     </div>
                     <div className="p-2 space-y-1">
-                      <p className="text-xs font-medium truncate" title={image.file.name}>
+                      <p
+                        className="text-xs font-medium truncate"
+                        title={image.file.name}
+                      >
                         {image.file.name}
                       </p>
                       <div className="flex justify-between text-xs text-muted-foreground">
@@ -514,7 +534,7 @@ export function ImageConverterPage() {
                     </div>
                   </CardContent>
                 </Card>
-              )
+              );
             })}
           </div>
         </div>
@@ -524,19 +544,23 @@ export function ImageConverterPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/ImageEnhancerPage.tsx b/src/pages/ImageEnhancerPage.tsx
index 406f63cc..a79db4d6 100644
--- a/src/pages/ImageEnhancerPage.tsx
+++ b/src/pages/ImageEnhancerPage.tsx
@@ -1,24 +1,24 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useUpscalerWorker } from '@/hooks/useUpscalerWorker'
-import { useFaceEnhancerWorker } from '@/hooks/useFaceEnhancerWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Label } from '@/components/ui/label'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useUpscalerWorker } from "@/hooks/useUpscalerWorker";
+import { useFaceEnhancerWorker } from "@/hooks/useFaceEnhancerWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -27,8 +27,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -38,58 +38,78 @@ import {
   X,
   Columns2,
   SplitSquareHorizontal,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
-type ViewMode = 'sideBySide' | 'comparison'
+type ViewMode = "sideBySide" | "comparison";
 
-type ModelType = 'slim' | 'medium' | 'thick'
-type ScaleType = '2x' | '3x' | '4x'
+type ModelType = "slim" | "medium" | "thick";
+type ScaleType = "2x" | "3x" | "4x";
 
 // Phase configuration for image enhancer (face enhancement + upscale)
 const PHASES = [
-  { id: 'face-download', labelKey: 'freeTools.progress.downloading', weight: 0.1 },
-  { id: 'face-loading', labelKey: 'freeTools.progress.loading', weight: 0.1 },
-  { id: 'face-detect', labelKey: 'freeTools.faceEnhancer.detecting', weight: 0.1 },
-  { id: 'face-enhance', labelKey: 'freeTools.faceEnhancer.enhancing', weight: 0.2 },
-  { id: 'upscale-download', labelKey: 'freeTools.progress.downloading', weight: 0.1 },
-  { id: 'upscale-process', labelKey: 'freeTools.progress.processing', weight: 0.4 }
-]
+  {
+    id: "face-download",
+    labelKey: "freeTools.progress.downloading",
+    weight: 0.1,
+  },
+  { id: "face-loading", labelKey: "freeTools.progress.loading", weight: 0.1 },
+  {
+    id: "face-detect",
+    labelKey: "freeTools.faceEnhancer.detecting",
+    weight: 0.1,
+  },
+  {
+    id: "face-enhance",
+    labelKey: "freeTools.faceEnhancer.enhancing",
+    weight: 0.2,
+  },
+  {
+    id: "upscale-download",
+    labelKey: "freeTools.progress.downloading",
+    weight: 0.1,
+  },
+  {
+    id: "upscale-process",
+    labelKey: "freeTools.progress.processing",
+    weight: 0.4,
+  },
+];
 
 export function ImageEnhancerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [enhancedImage, setEnhancedImage] = useState<string | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [enhancedImage, setEnhancedImage] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
   const [originalSize, setOriginalSize] = useState<{
-    width: number
-    height: number
-  } | null>(null)
+    width: number;
+    height: number;
+  } | null>(null);
   const [enhancedSize, setEnhancedSize] = useState<{
-    width: number
-    height: number
-  } | null>(null)
-  const [model, setModel] = useState<ModelType>('slim')
-  const [scale, setScale] = useState<ScaleType>('2x')
-  const [enhanceFace, setEnhanceFace] = useState(false)
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>(
-    'jpeg'
-  )
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
-  const [viewMode, setViewMode] = useState<ViewMode>('sideBySide')
-  const [sliderPosition, setSliderPosition] = useState(50)
-  const comparisonRef = useRef<HTMLDivElement>(null)
-  const isDraggingSlider = useRef(false)
+    width: number;
+    height: number;
+  } | null>(null);
+  const [model, setModel] = useState<ModelType>("slim");
+  const [scale, setScale] = useState<ScaleType>("2x");
+  const [enhanceFace, setEnhanceFace] = useState(false);
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "jpeg",
+  );
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>("sideBySide");
+  const [sliderPosition, setSliderPosition] = useState(50);
+  const comparisonRef = useRef<HTMLDivElement>(null);
+  const isDraggingSlider = useRef(false);
 
   // Multi-phase progress tracking
   const {
@@ -99,316 +119,326 @@ export function ImageEnhancerPage() {
     completePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
-
-  const [error, setError] = useState<string | null>(null)
-
-  const { loadModel, upscale, dispose, hasFailed, retryWorker } = useUpscalerWorker({
-    onPhase: (phase) => {
-      // Start the corresponding phase when worker reports it
-      if (phase === 'download') {
-        startPhase('upscale-download')
-      } else if (phase === 'process') {
-        startPhase('upscale-process')
-      }
-    },
-    onProgress: (phase, progressValue, detail) => {
-      // Update the phase that worker reports
-      const phaseId = phase === 'download' ? 'upscale-download' : 'upscale-process'
-      updatePhase(phaseId, progressValue, detail)
-    },
-    onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { loadModel, upscale, dispose, hasFailed, retryWorker } =
+    useUpscalerWorker({
+      onPhase: (phase) => {
+        // Start the corresponding phase when worker reports it
+        if (phase === "download") {
+          startPhase("upscale-download");
+        } else if (phase === "process") {
+          startPhase("upscale-process");
+        }
+      },
+      onProgress: (phase, progressValue, detail) => {
+        // Update the phase that worker reports
+        const phaseId =
+          phase === "download" ? "upscale-download" : "upscale-process";
+        updatePhase(phaseId, progressValue, detail);
+      },
+      onError: (err) => {
+        console.error("Worker error:", err);
+        setError(err);
+        setIsProcessing(false);
+      },
+    });
 
   const {
     initModel: initFaceModel,
     enhance: enhanceFaces,
     dispose: disposeFaceEnhancer,
     hasFailed: hasFaceFailed,
-    retryWorker: retryFaceWorker
+    retryWorker: retryFaceWorker,
   } = useFaceEnhancerWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('face-download')
-      } else if (phase === 'loading') {
-        startPhase('face-loading')
-      } else if (phase === 'detect') {
-        startPhase('face-detect')
-      } else if (phase === 'enhance') {
-        startPhase('face-enhance')
+      if (phase === "download") {
+        startPhase("face-download");
+      } else if (phase === "loading") {
+        startPhase("face-loading");
+      } else if (phase === "detect") {
+        startPhase("face-detect");
+      } else if (phase === "enhance") {
+        startPhase("face-enhance");
       }
     },
     onProgress: (phase, progressValue, detail) => {
       const phaseId =
-        phase === 'download'
-          ? 'face-download'
-          : phase === 'loading'
-            ? 'face-loading'
-          : phase === 'detect'
-            ? 'face-detect'
-            : 'face-enhance'
-      updatePhase(phaseId, progressValue, detail)
+        phase === "download"
+          ? "face-download"
+          : phase === "loading"
+            ? "face-loading"
+            : phase === "detect"
+              ? "face-detect"
+              : "face-enhance";
+      updatePhase(phaseId, progressValue, detail);
     },
     onError: (err) => {
-      console.error('Face enhancer error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+      console.error("Face enhancer error:", err);
+      setError(err);
+      setIsProcessing(false);
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-    retryFaceWorker()
-  }, [retryWorker, retryFaceWorker])
+    setError(null);
+    retryWorker();
+    retryFaceWorker();
+  }, [retryWorker, retryFaceWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      dispose()
-      disposeFaceEnhancer()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      dispose();
+      disposeFaceEnhancer();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, dispose, disposeFaceEnhancer, resetPage, location.pathname, navigate])
+  }, [
+    isProcessing,
+    dispose,
+    disposeFaceEnhancer,
+    resetPage,
+    location.pathname,
+    navigate,
+  ]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    dispose()
-    disposeFaceEnhancer()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, disposeFaceEnhancer, resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    dispose();
+    disposeFaceEnhancer();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, disposeFaceEnhancer, resetPage, location.pathname, navigate]);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('image/')) return
+      if (!file.type.startsWith("image/")) return;
 
-      const reader = new FileReader()
+      const reader = new FileReader();
       reader.onload = (e) => {
-        const dataUrl = e.target?.result as string
-        setError(null)
-        setOriginalImage(dataUrl)
-        setEnhancedImage(null)
-        setEnhancedSize(null)
-        resetProgress()
+        const dataUrl = e.target?.result as string;
+        setError(null);
+        setOriginalImage(dataUrl);
+        setEnhancedImage(null);
+        setEnhancedSize(null);
+        resetProgress();
 
         // Get original dimensions
-        const img = new Image()
+        const img = new Image();
         img.onload = () => {
-          setOriginalSize({ width: img.width, height: img.height })
-        }
-        img.src = dataUrl
-      }
-      reader.readAsDataURL(file)
+          setOriginalSize({ width: img.width, height: img.height });
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
     },
-    [resetProgress]
-  )
+    [resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   // Comparison slider handlers
   const handleSliderMove = useCallback((clientX: number) => {
-    if (!comparisonRef.current) return
-    const rect = comparisonRef.current.getBoundingClientRect()
-    const x = clientX - rect.left
-    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100))
-    setSliderPosition(percentage)
-  }, [])
+    if (!comparisonRef.current) return;
+    const rect = comparisonRef.current.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
+    setSliderPosition(percentage);
+  }, []);
 
   const handleSliderMouseDown = useCallback(
     (e: React.MouseEvent) => {
-      e.preventDefault()
-      isDraggingSlider.current = true
-      handleSliderMove(e.clientX)
+      e.preventDefault();
+      isDraggingSlider.current = true;
+      handleSliderMove(e.clientX);
 
       const handleMouseMove = (e: MouseEvent) => {
         if (isDraggingSlider.current) {
-          handleSliderMove(e.clientX)
+          handleSliderMove(e.clientX);
         }
-      }
+      };
 
       const handleMouseUp = () => {
-        isDraggingSlider.current = false
-        document.removeEventListener('mousemove', handleMouseMove)
-        document.removeEventListener('mouseup', handleMouseUp)
-      }
+        isDraggingSlider.current = false;
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
 
-      document.addEventListener('mousemove', handleMouseMove)
-      document.addEventListener('mouseup', handleMouseUp)
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
     },
-    [handleSliderMove]
-  )
+    [handleSliderMove],
+  );
 
   const handleSliderTouchStart = useCallback(
     (e: React.TouchEvent) => {
-      isDraggingSlider.current = true
-      handleSliderMove(e.touches[0].clientX)
+      isDraggingSlider.current = true;
+      handleSliderMove(e.touches[0].clientX);
 
       const handleTouchMove = (e: TouchEvent) => {
         if (isDraggingSlider.current) {
-          handleSliderMove(e.touches[0].clientX)
+          handleSliderMove(e.touches[0].clientX);
         }
-      }
+      };
 
       const handleTouchEnd = () => {
-        isDraggingSlider.current = false
-        document.removeEventListener('touchmove', handleTouchMove)
-        document.removeEventListener('touchend', handleTouchEnd)
-      }
+        isDraggingSlider.current = false;
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
 
-      document.addEventListener('touchmove', handleTouchMove)
-      document.addEventListener('touchend', handleTouchEnd)
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
     },
-    [handleSliderMove]
-  )
+    [handleSliderMove],
+  );
 
   const handleEnhance = async () => {
-    if (!originalImage || !originalSize || !canvasRef.current) return
+    if (!originalImage || !originalSize || !canvasRef.current) return;
 
-    setIsProcessing(true)
-    setError(null)
+    setIsProcessing(true);
+    setError(null);
     if (enhanceFace) {
-      resetAndStart('face-download')
+      resetAndStart("face-download");
     } else {
-      resetAndStart('upscale-download')
-      completePhase('face-download')
-      completePhase('face-loading')
-      completePhase('face-detect')
-      completePhase('face-enhance')
+      resetAndStart("upscale-download");
+      completePhase("face-download");
+      completePhase("face-loading");
+      completePhase("face-detect");
+      completePhase("face-enhance");
     }
 
     try {
       // Load the selected model in worker (cached by browser after first download)
-      await loadModel(model, scale)
+      await loadModel(model, scale);
 
       // Create source image and get ImageData
-      const img = new Image()
+      const img = new Image();
       await new Promise<void>((resolve, reject) => {
-        img.onload = () => resolve()
-        img.onerror = () => reject(new Error('Failed to load image'))
-        img.src = originalImage
-      })
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error("Failed to load image"));
+        img.src = originalImage;
+      });
 
       // Draw to canvas to get ImageData
-      const tempCanvas = document.createElement('canvas')
-      tempCanvas.width = img.width
-      tempCanvas.height = img.height
-      const tempCtx = tempCanvas.getContext('2d')!
-      tempCtx.drawImage(img, 0, 0)
-      const imageData = tempCtx.getImageData(0, 0, img.width, img.height)
-
-      let baseImageData = imageData
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = img.width;
+      tempCanvas.height = img.height;
+      const tempCtx = tempCanvas.getContext("2d")!;
+      tempCtx.drawImage(img, 0, 0);
+      const imageData = tempCtx.getImageData(0, 0, img.width, img.height);
+
+      let baseImageData = imageData;
       if (enhanceFace) {
-        await initFaceModel()
-        const { dataUrl, faces } = await enhanceFaces(imageData)
+        await initFaceModel();
+        const { dataUrl, faces } = await enhanceFaces(imageData);
         if (faces === 0) {
-          setError(t('freeTools.faceEnhancer.noFaces'))
+          setError(t("freeTools.faceEnhancer.noFaces"));
         }
 
-        const faceImg = new Image()
+        const faceImg = new Image();
         await new Promise<void>((resolve, reject) => {
-          faceImg.onload = () => resolve()
-          faceImg.onerror = () => reject(new Error('Failed to load face enhanced image'))
-          faceImg.src = dataUrl
-        })
-        tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height)
-        tempCtx.drawImage(faceImg, 0, 0)
-        baseImageData = tempCtx.getImageData(0, 0, img.width, img.height)
+          faceImg.onload = () => resolve();
+          faceImg.onerror = () =>
+            reject(new Error("Failed to load face enhanced image"));
+          faceImg.src = dataUrl;
+        });
+        tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
+        tempCtx.drawImage(faceImg, 0, 0);
+        baseImageData = tempCtx.getImageData(0, 0, img.width, img.height);
       }
 
       // Upscale in worker
-      const upscaledDataUrl = await upscale(baseImageData)
+      const upscaledDataUrl = await upscale(baseImageData);
 
       // Get scale multiplier
-      const scaleMultiplier = parseInt(scale.replace('x', ''))
+      const scaleMultiplier = parseInt(scale.replace("x", ""));
 
       setEnhancedSize({
         width: originalSize.width * scaleMultiplier,
-        height: originalSize.height * scaleMultiplier
-      })
+        height: originalSize.height * scaleMultiplier,
+      });
 
       // Draw to canvas for face enhancement and download format conversion
-      const canvas = canvasRef.current
-      canvas.width = originalSize.width * scaleMultiplier
-      canvas.height = originalSize.height * scaleMultiplier
-      const ctx = canvas.getContext('2d')!
-      const resultImg = new Image()
+      const canvas = canvasRef.current;
+      canvas.width = originalSize.width * scaleMultiplier;
+      canvas.height = originalSize.height * scaleMultiplier;
+      const ctx = canvas.getContext("2d")!;
+      const resultImg = new Image();
       await new Promise<void>((resolve) => {
         resultImg.onload = () => {
-          ctx.drawImage(resultImg, 0, 0)
-          resolve()
-        }
-        resultImg.src = upscaledDataUrl
-      })
+          ctx.drawImage(resultImg, 0, 0);
+          resolve();
+        };
+        resultImg.src = upscaledDataUrl;
+      });
 
       // Set the enhanced image
-      setEnhancedImage(upscaledDataUrl)
+      setEnhancedImage(upscaledDataUrl);
 
-      completeAllPhases()
+      completeAllPhases();
     } catch (error) {
-      console.error('Enhancement failed:', error)
+      console.error("Enhancement failed:", error);
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!enhancedImage || !canvasRef.current) return
+    if (!enhancedImage || !canvasRef.current) return;
 
     // Get canvas and convert to selected format
-    const canvas = canvasRef.current
-    const mimeType = `image/${downloadFormat}`
-    const quality = downloadFormat === 'png' ? undefined : 0.95
-    const dataUrl = canvas.toDataURL(mimeType, quality)
-
-    const link = document.createElement('a')
-    link.href = dataUrl
-    link.download = generateFreeToolFilename('image-enhancer', downloadFormat)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const canvas = canvasRef.current;
+    const mimeType = `image/${downloadFormat}`;
+    const quality = downloadFormat === "png" ? undefined : 0.95;
+    const dataUrl = canvas.toDataURL(mimeType, quality);
+
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = generateFreeToolFilename("image-enhancer", downloadFormat);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <div
@@ -427,7 +457,7 @@ export function ImageEnhancerPage() {
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
             <p className="text-lg font-medium">
-              {t('freeTools.imageEnhancer.orDragDrop')}
+              {t("freeTools.imageEnhancer.orDragDrop")}
             </p>
           </div>
         </div>
@@ -435,19 +465,15 @@ export function ImageEnhancerPage() {
 
       {/* Header */}
       <div className="flex items-center gap-4 mb-8">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleBack}
-        >
+        <Button variant="ghost" size="icon" onClick={handleBack}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
           <h1 className="text-2xl font-bold">
-            {t('freeTools.imageEnhancer.title')}
+            {t("freeTools.imageEnhancer.title")}
           </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.imageEnhancer.description')}
+            {t("freeTools.imageEnhancer.description")}
           </p>
         </div>
       </div>
@@ -456,10 +482,10 @@ export function ImageEnhancerPage() {
       {!originalImage && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
           onDrop={handleDrop}
@@ -472,10 +498,10 @@ export function ImageEnhancerPage() {
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
             <p className="text-lg font-medium">
-              {t('freeTools.imageEnhancer.selectImage')}
+              {t("freeTools.imageEnhancer.selectImage")}
             </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.imageEnhancer.orDragDrop')}
+              {t("freeTools.imageEnhancer.orDragDrop")}
             </p>
           </CardContent>
         </Card>
@@ -487,8 +513,8 @@ export function ImageEnhancerPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
         }}
       />
 
@@ -503,7 +529,7 @@ export function ImageEnhancerPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.imageEnhancer.selectImage')}
+              {t("freeTools.imageEnhancer.selectImage")}
             </Button>
 
             <Select
@@ -516,13 +542,13 @@ export function ImageEnhancerPage() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="slim">
-                  {t('freeTools.imageEnhancer.modelFast')}
+                  {t("freeTools.imageEnhancer.modelFast")}
                 </SelectItem>
                 <SelectItem value="medium">
-                  {t('freeTools.imageEnhancer.modelBalanced')}
+                  {t("freeTools.imageEnhancer.modelBalanced")}
                 </SelectItem>
                 <SelectItem value="thick">
-                  {t('freeTools.imageEnhancer.modelQuality')}
+                  {t("freeTools.imageEnhancer.modelQuality")}
                 </SelectItem>
               </SelectContent>
             </Select>
@@ -549,8 +575,11 @@ export function ImageEnhancerPage() {
                 onCheckedChange={setEnhanceFace}
                 disabled={isProcessing}
               />
-              <Label htmlFor="image-enhancer-face-toggle" className="text-xs whitespace-nowrap">
-                {t('freeTools.imageEnhancer.enhanceFace')}
+              <Label
+                htmlFor="image-enhancer-face-toggle"
+                className="text-xs whitespace-nowrap"
+              >
+                {t("freeTools.imageEnhancer.enhanceFace")}
               </Label>
             </div>
 
@@ -562,12 +591,12 @@ export function ImageEnhancerPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.imageEnhancer.processing')}
+                  {t("freeTools.imageEnhancer.processing")}
                 </>
               ) : (
                 <>
                   <ImageUp className="h-4 w-4 mr-2" />
-                  {t('freeTools.imageEnhancer.enhance')}
+                  {t("freeTools.imageEnhancer.enhance")}
                 </>
               )}
             </Button>
@@ -576,20 +605,20 @@ export function ImageEnhancerPage() {
                 {/* View mode toggle */}
                 <div className="flex rounded-md border">
                   <Button
-                    variant={viewMode === 'sideBySide' ? 'secondary' : 'ghost'}
+                    variant={viewMode === "sideBySide" ? "secondary" : "ghost"}
                     size="sm"
                     className="rounded-r-none border-0"
-                    onClick={() => setViewMode('sideBySide')}
-                    title={t('freeTools.imageEnhancer.sideBySide')}
+                    onClick={() => setViewMode("sideBySide")}
+                    title={t("freeTools.imageEnhancer.sideBySide")}
                   >
                     <Columns2 className="h-4 w-4" />
                   </Button>
                   <Button
-                    variant={viewMode === 'comparison' ? 'secondary' : 'ghost'}
+                    variant={viewMode === "comparison" ? "secondary" : "ghost"}
                     size="sm"
                     className="rounded-l-none border-0"
-                    onClick={() => setViewMode('comparison')}
-                    title={t('freeTools.imageEnhancer.comparison')}
+                    onClick={() => setViewMode("comparison")}
+                    title={t("freeTools.imageEnhancer.comparison")}
                   >
                     <SplitSquareHorizontal className="h-4 w-4" />
                   </Button>
@@ -598,7 +627,7 @@ export function ImageEnhancerPage() {
                 <Select
                   value={downloadFormat}
                   onValueChange={(v) =>
-                    setDownloadFormat(v as 'png' | 'jpeg' | 'webp')
+                    setDownloadFormat(v as "png" | "jpeg" | "webp")
                   }
                 >
                   <SelectTrigger className="w-28">
@@ -612,7 +641,7 @@ export function ImageEnhancerPage() {
                 </Select>
                 <Button variant="outline" onClick={handleDownload}>
                   <Download className="h-4 w-4 mr-2" />
-                  {t('freeTools.imageEnhancer.download')}
+                  {t("freeTools.imageEnhancer.download")}
                 </Button>
               </>
             )}
@@ -632,20 +661,22 @@ export function ImageEnhancerPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
 
           {/* No faces warning (non-fatal) */}
-          {error && error === t('freeTools.faceEnhancer.noFaces') && !isProcessing && (
-            <div className="flex items-center justify-center gap-3 p-4 bg-warning/10 border border-warning/20 rounded-lg">
-              <span className="text-sm text-warning-foreground">{error}</span>
-            </div>
-          )}
+          {error &&
+            error === t("freeTools.faceEnhancer.noFaces") &&
+            !isProcessing && (
+              <div className="flex items-center justify-center gap-3 p-4 bg-warning/10 border border-warning/20 rounded-lg">
+                <span className="text-sm text-warning-foreground">{error}</span>
+              </div>
+            )}
 
           {/* Preview area */}
-          {viewMode === 'sideBySide' || !enhancedImage ? (
+          {viewMode === "sideBySide" || !enhancedImage ? (
             /* Side by side preview */
             <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
               {/* Original */}
@@ -653,7 +684,7 @@ export function ImageEnhancerPage() {
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-sm font-medium">
-                      {t('freeTools.imageEnhancer.original')}
+                      {t("freeTools.imageEnhancer.original")}
                     </span>
                     {originalSize && (
                       <span className="text-xs text-muted-foreground">
@@ -677,7 +708,7 @@ export function ImageEnhancerPage() {
                 <CardContent className="p-4">
                   <div className="flex items-center justify-between mb-3">
                     <span className="text-sm font-medium">
-                      {t('freeTools.imageEnhancer.enhanced')}
+                      {t("freeTools.imageEnhancer.enhanced")}
                     </span>
                     {enhancedSize && (
                       <span className="text-xs text-muted-foreground">
@@ -699,7 +730,7 @@ export function ImageEnhancerPage() {
                           <>
                             <Loader2 className="h-8 w-8 animate-spin mb-2" />
                             <span className="text-sm">
-                              {t('freeTools.imageEnhancer.processing')}
+                              {t("freeTools.imageEnhancer.processing")}
                             </span>
                           </>
                         ) : (
@@ -718,24 +749,28 @@ export function ImageEnhancerPage() {
                 <div className="flex items-center justify-between mb-3">
                   <div className="flex items-center gap-4">
                     <span className="text-sm font-medium">
-                      {t('freeTools.imageEnhancer.original')}
+                      {t("freeTools.imageEnhancer.original")}
                     </span>
                     <span className="text-xs text-muted-foreground">←</span>
                     <span className="text-xs text-muted-foreground">
-                      {t('freeTools.imageEnhancer.dragToCompare')}
+                      {t("freeTools.imageEnhancer.dragToCompare")}
                     </span>
                     <span className="text-xs text-muted-foreground">→</span>
                     <span className="text-sm font-medium">
-                      {t('freeTools.imageEnhancer.enhanced')}
+                      {t("freeTools.imageEnhancer.enhanced")}
                     </span>
                   </div>
                   <div className="flex items-center gap-2 text-xs text-muted-foreground">
                     {originalSize && (
-                      <span>{originalSize.width} x {originalSize.height}</span>
+                      <span>
+                        {originalSize.width} x {originalSize.height}
+                      </span>
                     )}
                     <span>→</span>
                     {enhancedSize && (
-                      <span>{enhancedSize.width} x {enhancedSize.height}</span>
+                      <span>
+                        {enhancedSize.width} x {enhancedSize.height}
+                      </span>
                     )}
                   </div>
                 </div>
@@ -759,7 +794,7 @@ export function ImageEnhancerPage() {
                     alt="Original"
                     className="absolute inset-0 w-full max-h-[70vh] object-contain pointer-events-none"
                     style={{
-                      clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
+                      clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`,
                     }}
                     draggable={false}
                   />
@@ -769,8 +804,9 @@ export function ImageEnhancerPage() {
                     className="absolute top-0 bottom-0 w-0.5 bg-white cursor-ew-resize"
                     style={{
                       left: `${sliderPosition}%`,
-                      transform: 'translateX(-50%)',
-                      boxShadow: '0 0 0 1px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.5)'
+                      transform: "translateX(-50%)",
+                      boxShadow:
+                        "0 0 0 1px rgba(0,0,0,0.3), 0 0 8px rgba(0,0,0,0.5)",
                     }}
                   >
                     {/* Handle grip */}
@@ -784,10 +820,10 @@ export function ImageEnhancerPage() {
 
                   {/* Labels */}
                   <div className="absolute bottom-3 left-3 px-2 py-1 bg-black/60 text-white text-xs rounded">
-                    {t('freeTools.imageEnhancer.original')}
+                    {t("freeTools.imageEnhancer.original")}
                   </div>
                   <div className="absolute bottom-3 right-3 px-2 py-1 bg-black/60 text-white text-xs rounded">
-                    {t('freeTools.imageEnhancer.enhanced')}
+                    {t("freeTools.imageEnhancer.enhanced")}
                   </div>
                 </div>
               </CardContent>
@@ -797,7 +833,10 @@ export function ImageEnhancerPage() {
       )}
 
       {/* Fullscreen Preview Dialog */}
-      <Dialog open={!!previewImage} onOpenChange={(open) => !open && setPreviewImage(null)}>
+      <Dialog
+        open={!!previewImage}
+        onOpenChange={(open) => !open && setPreviewImage(null)}
+      >
         <DialogContent
           className="w-screen h-screen max-w-none max-h-none p-0 border-0 bg-black flex items-center justify-center"
           hideCloseButton
@@ -825,19 +864,23 @@ export function ImageEnhancerPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/ImageEraserPage.tsx b/src/pages/ImageEraserPage.tsx
index df51a9c0..bcfaba3f 100644
--- a/src/pages/ImageEraserPage.tsx
+++ b/src/pages/ImageEraserPage.tsx
@@ -1,11 +1,11 @@
-import { useState, useRef, useCallback, useEffect, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useImageEraserWorker } from '@/hooks/useImageEraserWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
+import { useState, useRef, useCallback, useEffect, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useImageEraserWorker } from "@/hooks/useImageEraserWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
 import {
   canvasToFloat32Array,
   maskCanvasToFloat32Array,
@@ -15,20 +15,24 @@ import {
   cropCanvas,
   pasteWithBlending,
   addReflectPadding,
-  addMaskReflectPadding
-} from '@/lib/lamaUtils'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Slider } from '@/components/ui/slider'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+  addMaskReflectPadding,
+} from "@/lib/lamaUtils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Slider } from "@/components/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -37,8 +41,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -53,54 +57,64 @@ import {
   ZoomIn,
   ZoomOut,
   Maximize2,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
-type Tool = 'brush' | 'eraser'
+type Tool = "brush" | "eraser";
 
 // Phase configuration for image eraser
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.1 },
-  { id: 'loading', labelKey: 'freeTools.progress.loading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.progress.processing', weight: 0.8 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.1 },
+  { id: "loading", labelKey: "freeTools.progress.loading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.progress.processing", weight: 0.8 },
+];
 
 export function ImageEraserPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const imageCanvasRef = useRef<HTMLCanvasElement>(null)
-  const maskCanvasRef = useRef<HTMLCanvasElement>(null)
-  const resultCanvasRef = useRef<HTMLCanvasElement>(null)
-  const dragCounterRef = useRef(0)
-  const lastPosRef = useRef<{ x: number; y: number } | null>(null)
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null)
-  const [resultImage, setResultImage] = useState<string | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [isDrawing, setIsDrawing] = useState(false)
-  const [canvasSize, setCanvasSize] = useState({ width: 512, height: 512 })
-  const [originalSize, setOriginalSize] = useState<{ width: number; height: number } | null>(null)
-  const [containerSize, setContainerSize] = useState({ width: 800, height: 600 })
-  const [tool, setTool] = useState<Tool>('brush')
-  const [brushSize, setBrushSize] = useState(30)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const imageCanvasRef = useRef<HTMLCanvasElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
+  const resultCanvasRef = useRef<HTMLCanvasElement>(null);
+  const dragCounterRef = useRef(0);
+  const lastPosRef = useRef<{ x: number; y: number } | null>(null);
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null);
+  const [resultImage, setResultImage] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({ width: 512, height: 512 });
+  const [originalSize, setOriginalSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [containerSize, setContainerSize] = useState({
+    width: 800,
+    height: 600,
+  });
+  const [tool, setTool] = useState<Tool>("brush");
+  const [brushSize, setBrushSize] = useState(30);
   // Mask drawing history (for current editing session)
-  const [maskHistory, setMaskHistory] = useState<ImageData[]>([])
-  const [maskHistoryIndex, setMaskHistoryIndex] = useState(-1)
+  const [maskHistory, setMaskHistory] = useState<ImageData[]>([]);
+  const [maskHistoryIndex, setMaskHistoryIndex] = useState(-1);
   // Image edit history (for undo/redo of object removal operations)
-  const [imageHistory, setImageHistory] = useState<ImageData[]>([])
-  const [imageHistoryIndex, setImageHistoryIndex] = useState(-1)
-  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>('jpeg')
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
-  const [zoom, setZoom] = useState(1)
+  const [imageHistory, setImageHistory] = useState<ImageData[]>([]);
+  const [imageHistoryIndex, setImageHistoryIndex] = useState(-1);
+  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "jpeg",
+  );
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
+  const [zoom, setZoom] = useState(1);
 
   // Multi-phase progress tracking
   const {
@@ -109,517 +123,588 @@ export function ImageEraserPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
-
-  const [error, setError] = useState<string | null>(null)
-
-  const { initModel, removeObjects, dispose, hasFailed, retryWorker } = useImageEraserWorker({
-    onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'loading') {
-        startPhase('loading')
-      } else if (phase === 'process') {
-        startPhase('process')
-      }
-    },
-    onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : phase === 'loading' ? 'loading' : 'process'
-      updatePhase(phaseId, progressValue, detail)
-    },
-    onReady: () => {
-      setError(null)
-    },
-    onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { initModel, removeObjects, dispose, hasFailed, retryWorker } =
+    useImageEraserWorker({
+      onPhase: (phase) => {
+        if (phase === "download") {
+          startPhase("download");
+        } else if (phase === "loading") {
+          startPhase("loading");
+        } else if (phase === "process") {
+          startPhase("process");
+        }
+      },
+      onProgress: (phase, progressValue, detail) => {
+        const phaseId =
+          phase === "download"
+            ? "download"
+            : phase === "loading"
+              ? "loading"
+              : "process";
+        updatePhase(phaseId, progressValue, detail);
+      },
+      onReady: () => {
+        setError(null);
+      },
+      onError: (err) => {
+        console.error("Worker error:", err);
+        setError(err);
+        setIsProcessing(false);
+      },
+    });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      dispose()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      dispose();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, dispose, resetPage, location.pathname, navigate])
+  }, [isProcessing, dispose, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    dispose()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    dispose();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, resetPage, location.pathname, navigate]);
 
   // Measure available container size on mount and window resize
   useEffect(() => {
     const updateContainerSize = () => {
       // Use most of viewport width (minus sidebar ~240px and padding)
       // Use generous height - page can scroll if needed
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-      const availableWidth = Math.max(500, viewportWidth - 300)
-      const availableHeight = Math.max(500, viewportHeight - 250)
-      setContainerSize({ width: availableWidth, height: availableHeight })
-    }
-
-    updateContainerSize()
-    window.addEventListener('resize', updateContainerSize)
-    return () => window.removeEventListener('resize', updateContainerSize)
-  }, [])
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const availableWidth = Math.max(500, viewportWidth - 300);
+      const availableHeight = Math.max(500, viewportHeight - 250);
+      setContainerSize({ width: availableWidth, height: availableHeight });
+    };
+
+    updateContainerSize();
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, []);
 
   // Recalculate canvas size when container or image changes
   useEffect(() => {
-    if (!loadedImage) return
+    if (!loadedImage) return;
 
-    const imgWidth = loadedImage.width
-    const imgHeight = loadedImage.height
+    const imgWidth = loadedImage.width;
+    const imgHeight = loadedImage.height;
 
-    let width = imgWidth
-    let height = imgHeight
+    let width = imgWidth;
+    let height = imgHeight;
 
     // Scale to fit container while maintaining aspect ratio
     if (width > containerSize.width) {
-      height = (height * containerSize.width) / width
-      width = containerSize.width
+      height = (height * containerSize.width) / width;
+      width = containerSize.width;
     }
     if (height > containerSize.height) {
-      width = (width * containerSize.height) / height
-      height = containerSize.height
+      width = (width * containerSize.height) / height;
+      height = containerSize.height;
     }
 
-    setCanvasSize({ width: Math.round(width), height: Math.round(height) })
-  }, [loadedImage, containerSize])
+    setCanvasSize({ width: Math.round(width), height: Math.round(height) });
+  }, [loadedImage, containerSize]);
 
   // Draw loaded image to canvas at ORIGINAL resolution (not display size)
   useEffect(() => {
-    if (!loadedImage || !imageCanvasRef.current || !originalSize) return
+    if (!loadedImage || !imageCanvasRef.current || !originalSize) return;
 
-    const imageCanvas = imageCanvasRef.current
+    const imageCanvas = imageCanvasRef.current;
     // Set canvas buffer to original image size for full resolution processing
-    imageCanvas.width = originalSize.width
-    imageCanvas.height = originalSize.height
+    imageCanvas.width = originalSize.width;
+    imageCanvas.height = originalSize.height;
 
-    const ctx = imageCanvas.getContext('2d', { willReadFrequently: true })
-    if (!ctx) return
+    const ctx = imageCanvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
 
-    ctx.drawImage(loadedImage, 0, 0, originalSize.width, originalSize.height)
-  }, [loadedImage, originalSize])
+    ctx.drawImage(loadedImage, 0, 0, originalSize.width, originalSize.height);
+  }, [loadedImage, originalSize]);
 
   // Initialize mask canvas when image loads (at original resolution)
   useEffect(() => {
-    if (!originalImage || !maskCanvasRef.current || !originalSize) return
+    if (!originalImage || !maskCanvasRef.current || !originalSize) return;
 
-    const maskCanvas = maskCanvasRef.current
+    const maskCanvas = maskCanvasRef.current;
     // Set mask canvas to original image size
-    maskCanvas.width = originalSize.width
-    maskCanvas.height = originalSize.height
+    maskCanvas.width = originalSize.width;
+    maskCanvas.height = originalSize.height;
 
-    const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx) return
+    const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx) return;
 
     // Clear mask canvas to transparent (no mask)
-    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height)
+    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height);
 
     // Save initial mask state to mask history
-    const initialMaskState = maskCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-    setMaskHistory([initialMaskState])
-    setMaskHistoryIndex(0)
-  }, [originalImage, originalSize])
+    const initialMaskState = maskCtx.getImageData(
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    setMaskHistory([initialMaskState]);
+    setMaskHistoryIndex(0);
+  }, [originalImage, originalSize]);
 
   // Initialize image history when image is drawn to canvas
   useEffect(() => {
-    if (!loadedImage || !imageCanvasRef.current || !originalSize) return
+    if (!loadedImage || !imageCanvasRef.current || !originalSize) return;
 
     // Small delay to ensure image is drawn to canvas
     const timer = setTimeout(() => {
-      const imageCtx = imageCanvasRef.current?.getContext('2d', { willReadFrequently: true })
-      if (!imageCtx) return
-
-      const initialImageState = imageCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-      setImageHistory([initialImageState])
-      setImageHistoryIndex(0)
-    }, 50)
-
-    return () => clearTimeout(timer)
-  }, [loadedImage, originalSize])
+      const imageCtx = imageCanvasRef.current?.getContext("2d", {
+        willReadFrequently: true,
+      });
+      if (!imageCtx) return;
+
+      const initialImageState = imageCtx.getImageData(
+        0,
+        0,
+        originalSize.width,
+        originalSize.height,
+      );
+      setImageHistory([initialImageState]);
+      setImageHistoryIndex(0);
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, [loadedImage, originalSize]);
 
   // Save mask history snapshot (for mask drawing undo/redo)
   const saveMaskSnapshot = useCallback(() => {
-    const maskCanvas = maskCanvasRef.current
-    const maskCtx = maskCanvas?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    const maskCtx = maskCanvas?.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx || !maskCanvas) return;
 
-    const imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
+    const imageData = maskCtx.getImageData(
+      0,
+      0,
+      maskCanvas.width,
+      maskCanvas.height,
+    );
 
     setMaskHistory((prev) => {
-      const newHistory = prev.slice(0, maskHistoryIndex + 1)
-      newHistory.push(imageData)
+      const newHistory = prev.slice(0, maskHistoryIndex + 1);
+      newHistory.push(imageData);
       if (newHistory.length > 50) {
-        newHistory.shift()
-        return newHistory
+        newHistory.shift();
+        return newHistory;
       }
-      return newHistory
-    })
-    setMaskHistoryIndex((prev) => Math.min(prev + 1, 49))
-  }, [maskHistoryIndex])
+      return newHistory;
+    });
+    setMaskHistoryIndex((prev) => Math.min(prev + 1, 49));
+  }, [maskHistoryIndex]);
 
   // Save image history snapshot (for object removal undo/redo)
   const saveImageSnapshot = useCallback(() => {
-    const imageCanvas = imageCanvasRef.current
-    const imageCtx = imageCanvas?.getContext('2d', { willReadFrequently: true })
-    if (!imageCtx || !imageCanvas) return
-
-    const imageData = imageCtx.getImageData(0, 0, imageCanvas.width, imageCanvas.height)
+    const imageCanvas = imageCanvasRef.current;
+    const imageCtx = imageCanvas?.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!imageCtx || !imageCanvas) return;
+
+    const imageData = imageCtx.getImageData(
+      0,
+      0,
+      imageCanvas.width,
+      imageCanvas.height,
+    );
 
     setImageHistory((prev) => {
-      const newHistory = prev.slice(0, imageHistoryIndex + 1)
-      newHistory.push(imageData)
+      const newHistory = prev.slice(0, imageHistoryIndex + 1);
+      newHistory.push(imageData);
       if (newHistory.length > 20) {
         // Keep fewer image snapshots (they're larger)
-        newHistory.shift()
-        return newHistory
+        newHistory.shift();
+        return newHistory;
       }
-      return newHistory
-    })
-    setImageHistoryIndex((prev) => Math.min(prev + 1, 19))
-  }, [imageHistoryIndex])
+      return newHistory;
+    });
+    setImageHistoryIndex((prev) => Math.min(prev + 1, 19));
+  }, [imageHistoryIndex]);
 
   // Undo mask drawing
   const undoMask = useCallback(() => {
-    if (maskHistoryIndex <= 0) return
+    if (maskHistoryIndex <= 0) return;
 
-    const newIndex = maskHistoryIndex - 1
-    const maskCtx = maskCanvasRef.current?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskHistory[newIndex]) return
+    const newIndex = maskHistoryIndex - 1;
+    const maskCtx = maskCanvasRef.current?.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!maskCtx || !maskHistory[newIndex]) return;
 
-    maskCtx.putImageData(maskHistory[newIndex], 0, 0)
-    setMaskHistoryIndex(newIndex)
-  }, [maskHistoryIndex, maskHistory])
+    maskCtx.putImageData(maskHistory[newIndex], 0, 0);
+    setMaskHistoryIndex(newIndex);
+  }, [maskHistoryIndex, maskHistory]);
 
   // Redo mask drawing
   const redoMask = useCallback(() => {
-    if (maskHistoryIndex >= maskHistory.length - 1) return
+    if (maskHistoryIndex >= maskHistory.length - 1) return;
 
-    const newIndex = maskHistoryIndex + 1
-    const maskCtx = maskCanvasRef.current?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskHistory[newIndex]) return
+    const newIndex = maskHistoryIndex + 1;
+    const maskCtx = maskCanvasRef.current?.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!maskCtx || !maskHistory[newIndex]) return;
 
-    maskCtx.putImageData(maskHistory[newIndex], 0, 0)
-    setMaskHistoryIndex(newIndex)
-  }, [maskHistoryIndex, maskHistory])
+    maskCtx.putImageData(maskHistory[newIndex], 0, 0);
+    setMaskHistoryIndex(newIndex);
+  }, [maskHistoryIndex, maskHistory]);
 
   // Undo image edit (object removal)
   const undoImage = useCallback(() => {
-    if (imageHistoryIndex <= 0) return
+    if (imageHistoryIndex <= 0) return;
 
-    const newIndex = imageHistoryIndex - 1
-    const imageCtx = imageCanvasRef.current?.getContext('2d', { willReadFrequently: true })
-    if (!imageCtx || !imageHistory[newIndex]) return
+    const newIndex = imageHistoryIndex - 1;
+    const imageCtx = imageCanvasRef.current?.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!imageCtx || !imageHistory[newIndex]) return;
 
-    imageCtx.putImageData(imageHistory[newIndex], 0, 0)
-    setImageHistoryIndex(newIndex)
+    imageCtx.putImageData(imageHistory[newIndex], 0, 0);
+    setImageHistoryIndex(newIndex);
 
     // Update result image preview
     if (imageCanvasRef.current) {
-      const dataUrl = imageCanvasRef.current.toDataURL('image/png')
-      setResultImage(dataUrl)
+      const dataUrl = imageCanvasRef.current.toDataURL("image/png");
+      setResultImage(dataUrl);
     }
-  }, [imageHistoryIndex, imageHistory])
+  }, [imageHistoryIndex, imageHistory]);
 
   // Redo image edit (object removal)
   const redoImage = useCallback(() => {
-    if (imageHistoryIndex >= imageHistory.length - 1) return
+    if (imageHistoryIndex >= imageHistory.length - 1) return;
 
-    const newIndex = imageHistoryIndex + 1
-    const imageCtx = imageCanvasRef.current?.getContext('2d', { willReadFrequently: true })
-    if (!imageCtx || !imageHistory[newIndex]) return
+    const newIndex = imageHistoryIndex + 1;
+    const imageCtx = imageCanvasRef.current?.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!imageCtx || !imageHistory[newIndex]) return;
 
-    imageCtx.putImageData(imageHistory[newIndex], 0, 0)
-    setImageHistoryIndex(newIndex)
+    imageCtx.putImageData(imageHistory[newIndex], 0, 0);
+    setImageHistoryIndex(newIndex);
 
     // Update result image preview
     if (imageCanvasRef.current) {
-      const dataUrl = imageCanvasRef.current.toDataURL('image/png')
-      setResultImage(dataUrl)
+      const dataUrl = imageCanvasRef.current.toDataURL("image/png");
+      setResultImage(dataUrl);
     }
-  }, [imageHistoryIndex, imageHistory])
+  }, [imageHistoryIndex, imageHistory]);
 
   // Clear mask
   const clearMask = useCallback(() => {
-    const maskCanvas = maskCanvasRef.current
-    const maskCtx = maskCanvas?.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx || !maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    const maskCtx = maskCanvas?.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx || !maskCanvas) return;
 
-    maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
-    saveMaskSnapshot()
-  }, [saveMaskSnapshot])
+    maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
+    saveMaskSnapshot();
+  }, [saveMaskSnapshot]);
 
   // Zoom controls
   const zoomIn = useCallback(() => {
-    setZoom((prev) => Math.min(prev + 0.25, 3))
-  }, [])
+    setZoom((prev) => Math.min(prev + 0.25, 3));
+  }, []);
 
   const zoomOut = useCallback(() => {
-    setZoom((prev) => Math.max(prev - 0.25, 0.5))
-  }, [])
+    setZoom((prev) => Math.max(prev - 0.25, 0.5));
+  }, []);
 
   const resetZoom = useCallback(() => {
-    setZoom(1)
-  }, [])
+    setZoom(1);
+  }, []);
 
   // Get coordinates relative to canvas (accounting for zoom)
   const getCanvasCoords = useCallback(
     (e: React.MouseEvent<HTMLCanvasElement>) => {
-      const canvas = maskCanvasRef.current
-      if (!canvas) return null
+      const canvas = maskCanvasRef.current;
+      if (!canvas) return null;
 
-      const rect = canvas.getBoundingClientRect()
-      const scaleX = canvas.width / rect.width
-      const scaleY = canvas.height / rect.height
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
 
       return {
         x: (e.clientX - rect.left) * scaleX,
-        y: (e.clientY - rect.top) * scaleY
-      }
+        y: (e.clientY - rect.top) * scaleY,
+      };
     },
-    []
-  )
+    [],
+  );
 
   // Get display coordinates for cursor overlay (adjusted for zoom)
   const getDisplayCoords = useCallback(
     (e: React.MouseEvent<HTMLCanvasElement>) => {
-      const canvas = maskCanvasRef.current
-      if (!canvas) return null
+      const canvas = maskCanvasRef.current;
+      if (!canvas) return null;
 
-      const rect = canvas.getBoundingClientRect()
+      const rect = canvas.getBoundingClientRect();
       // Divide by zoom because cursor is inside the scaled container
       return {
         x: (e.clientX - rect.left) / zoom,
-        y: (e.clientY - rect.top) / zoom
-      }
+        y: (e.clientY - rect.top) / zoom,
+      };
     },
-    [zoom]
-  )
+    [zoom],
+  );
 
   // Draw at position
   const drawAt = useCallback(
     (x: number, y: number, lastX?: number, lastY?: number) => {
-      const maskCanvas = maskCanvasRef.current
-      const maskCtx = maskCanvas?.getContext('2d', { willReadFrequently: true })
-      if (!maskCtx || !maskCanvas) return
+      const maskCanvas = maskCanvasRef.current;
+      const maskCtx = maskCanvas?.getContext("2d", {
+        willReadFrequently: true,
+      });
+      if (!maskCtx || !maskCanvas) return;
 
       // Scale brush size from display to canvas coordinates
-      const scaleRatio = maskCanvas.width / canvasSize.width
-      const scaledBrushSize = brushSize * scaleRatio
+      const scaleRatio = maskCanvas.width / canvasSize.width;
+      const scaledBrushSize = brushSize * scaleRatio;
 
-      if (tool === 'eraser') {
+      if (tool === "eraser") {
         // Eraser: use destination-out to make transparent
-        maskCtx.globalCompositeOperation = 'destination-out'
-        maskCtx.fillStyle = 'rgba(0,0,0,1)'
-        maskCtx.strokeStyle = 'rgba(0,0,0,1)'
+        maskCtx.globalCompositeOperation = "destination-out";
+        maskCtx.fillStyle = "rgba(0,0,0,1)";
+        maskCtx.strokeStyle = "rgba(0,0,0,1)";
       } else {
         // Brush: draw with full opacity (transparency applied via CSS)
-        maskCtx.globalCompositeOperation = 'source-over'
-        maskCtx.fillStyle = 'rgba(255, 80, 80, 1)'
-        maskCtx.strokeStyle = 'rgba(255, 80, 80, 1)'
+        maskCtx.globalCompositeOperation = "source-over";
+        maskCtx.fillStyle = "rgba(255, 80, 80, 1)";
+        maskCtx.strokeStyle = "rgba(255, 80, 80, 1)";
       }
 
-      maskCtx.lineWidth = scaledBrushSize
-      maskCtx.lineCap = 'round'
-      maskCtx.lineJoin = 'round'
+      maskCtx.lineWidth = scaledBrushSize;
+      maskCtx.lineCap = "round";
+      maskCtx.lineJoin = "round";
 
       if (lastX !== undefined && lastY !== undefined) {
-        maskCtx.beginPath()
-        maskCtx.moveTo(lastX, lastY)
-        maskCtx.lineTo(x, y)
-        maskCtx.stroke()
+        maskCtx.beginPath();
+        maskCtx.moveTo(lastX, lastY);
+        maskCtx.lineTo(x, y);
+        maskCtx.stroke();
       } else {
-        maskCtx.beginPath()
-        maskCtx.arc(x, y, scaledBrushSize / 2, 0, Math.PI * 2)
-        maskCtx.fill()
+        maskCtx.beginPath();
+        maskCtx.arc(x, y, scaledBrushSize / 2, 0, Math.PI * 2);
+        maskCtx.fill();
       }
 
       // Reset composite operation
-      maskCtx.globalCompositeOperation = 'source-over'
+      maskCtx.globalCompositeOperation = "source-over";
     },
-    [tool, brushSize, canvasSize.width]
-  )
+    [tool, brushSize, canvasSize.width],
+  );
 
   // Mouse event handlers for drawing
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLCanvasElement>) => {
-      if (isProcessing) return
+      if (isProcessing) return;
 
-      const coords = getCanvasCoords(e)
-      if (!coords) return
+      const coords = getCanvasCoords(e);
+      if (!coords) return;
 
-      setIsDrawing(true)
-      lastPosRef.current = coords
-      drawAt(coords.x, coords.y)
+      setIsDrawing(true);
+      lastPosRef.current = coords;
+      drawAt(coords.x, coords.y);
     },
-    [isProcessing, getCanvasCoords, drawAt]
-  )
+    [isProcessing, getCanvasCoords, drawAt],
+  );
 
   const handleMouseMove = useCallback(
     (e: React.MouseEvent<HTMLCanvasElement>) => {
-      const displayCoords = getDisplayCoords(e)
+      const displayCoords = getDisplayCoords(e);
       if (displayCoords) {
-        setCursorPos(displayCoords)
+        setCursorPos(displayCoords);
       }
 
-      if (!isDrawing) return
+      if (!isDrawing) return;
 
-      const coords = getCanvasCoords(e)
-      if (!coords) return
+      const coords = getCanvasCoords(e);
+      if (!coords) return;
 
-      const lastPos = lastPosRef.current
-      drawAt(coords.x, coords.y, lastPos?.x, lastPos?.y)
-      lastPosRef.current = coords
+      const lastPos = lastPosRef.current;
+      drawAt(coords.x, coords.y, lastPos?.x, lastPos?.y);
+      lastPosRef.current = coords;
     },
-    [isDrawing, getCanvasCoords, getDisplayCoords, drawAt]
-  )
+    [isDrawing, getCanvasCoords, getDisplayCoords, drawAt],
+  );
 
   const handleMouseUp = useCallback(() => {
     if (isDrawing) {
-      setIsDrawing(false)
-      lastPosRef.current = null
-      saveMaskSnapshot()
+      setIsDrawing(false);
+      lastPosRef.current = null;
+      saveMaskSnapshot();
     }
-  }, [isDrawing, saveMaskSnapshot])
+  }, [isDrawing, saveMaskSnapshot]);
 
   const handleMouseLeave = useCallback(() => {
-    setCursorPos(null)
+    setCursorPos(null);
     if (isDrawing) {
-      setIsDrawing(false)
-      lastPosRef.current = null
-      saveMaskSnapshot()
+      setIsDrawing(false);
+      lastPosRef.current = null;
+      saveMaskSnapshot();
     }
-  }, [isDrawing, saveMaskSnapshot])
+  }, [isDrawing, saveMaskSnapshot]);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('image/')) return
+      if (!file.type.startsWith("image/")) return;
 
-      setError(null)
-      const reader = new FileReader()
+      setError(null);
+      const reader = new FileReader();
       reader.onload = (e) => {
-        const dataUrl = e.target?.result as string
-        setOriginalImage(dataUrl)
-        setResultImage(null)
-        setLoadedImage(null)
-        setZoom(1)
-        resetProgress()
+        const dataUrl = e.target?.result as string;
+        setOriginalImage(dataUrl);
+        setResultImage(null);
+        setLoadedImage(null);
+        setZoom(1);
+        resetProgress();
 
         // Load image to get dimensions
-        const img = new Image()
+        const img = new Image();
         img.onload = () => {
-          setOriginalSize({ width: img.width, height: img.height })
-          setLoadedImage(img) // Canvas size is calculated by effect
-        }
-        img.src = dataUrl
-      }
-      reader.readAsDataURL(file)
+          setOriginalSize({ width: img.width, height: img.height });
+          setLoadedImage(img); // Canvas size is calculated by effect
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
     },
-    [resetProgress]
-  )
+    [resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const handleRemoveObjects = async () => {
-    const imageCanvas = imageCanvasRef.current
-    const maskCanvas = maskCanvasRef.current
-    if (!imageCanvas || !maskCanvas) return
+    const imageCanvas = imageCanvasRef.current;
+    const maskCanvas = maskCanvasRef.current;
+    if (!imageCanvas || !maskCanvas) return;
 
     // Find mask bounding box (at least 512x512 and 2x mask size)
-    const bbox = getMaskBoundingBox(maskCanvas)
+    const bbox = getMaskBoundingBox(maskCanvas);
     if (!bbox) {
-      console.warn('No mask drawn')
-      return
+      console.warn("No mask drawn");
+      return;
     }
 
-    setIsProcessing(true)
-    resetAndStart('download')
+    setIsProcessing(true);
+    resetAndStart("download");
 
     try {
       // Initialize model if not already done (instant if cached)
-      await initModel()
+      await initModel();
 
       // Crop the region around the mask
-      const croppedImage = cropCanvas(imageCanvas, bbox.x, bbox.y, bbox.width, bbox.height)
-      const croppedMask = cropCanvas(maskCanvas, bbox.x, bbox.y, bbox.width, bbox.height)
+      const croppedImage = cropCanvas(
+        imageCanvas,
+        bbox.x,
+        bbox.y,
+        bbox.width,
+        bbox.height,
+      );
+      const croppedMask = cropCanvas(
+        maskCanvas,
+        bbox.x,
+        bbox.y,
+        bbox.width,
+        bbox.height,
+      );
 
       // Add reflect padding at image edges to prevent seams
-      const padAmount = 32
+      const padAmount = 32;
       const padding = {
         top: bbox.y === 0 ? padAmount : 0,
         left: bbox.x === 0 ? padAmount : 0,
-        bottom: originalSize && bbox.y + bbox.height >= originalSize.height ? padAmount : 0,
-        right: originalSize && bbox.x + bbox.width >= originalSize.width ? padAmount : 0
-      }
-      const hasPadding = padding.top > 0 || padding.left > 0 || padding.bottom > 0 || padding.right > 0
+        bottom:
+          originalSize && bbox.y + bbox.height >= originalSize.height
+            ? padAmount
+            : 0,
+        right:
+          originalSize && bbox.x + bbox.width >= originalSize.width
+            ? padAmount
+            : 0,
+      };
+      const hasPadding =
+        padding.top > 0 ||
+        padding.left > 0 ||
+        padding.bottom > 0 ||
+        padding.right > 0;
 
       // Apply padding if needed
-      const processImage = hasPadding ? addReflectPadding(croppedImage, padding) : croppedImage
-      const processMask = hasPadding ? addMaskReflectPadding(croppedMask, padding) : croppedMask
+      const processImage = hasPadding
+        ? addReflectPadding(croppedImage, padding)
+        : croppedImage;
+      const processMask = hasPadding
+        ? addMaskReflectPadding(croppedMask, padding)
+        : croppedMask;
 
       // Convert to Float32Arrays (worker handles resize to 768x768 internally)
-      const imageData = canvasToFloat32Array(processImage)
-      const maskData = maskCanvasToFloat32Array(processMask)
+      const imageData = canvasToFloat32Array(processImage);
+      const maskData = maskCanvasToFloat32Array(processMask);
 
       // Run inference (worker handles resize internally)
       const result = await removeObjects(
         imageData,
         maskData,
         processImage.width,
-        processImage.height
-      )
+        processImage.height,
+      );
 
       // Convert result back to canvas (DeepFillv2 outputs normalized 0-1)
-      let resultCanvas = tensorToCanvas(result.data, result.width, result.height, true)
+      let resultCanvas = tensorToCanvas(
+        result.data,
+        result.width,
+        result.height,
+        true,
+      );
 
       // Crop away padding if it was added
       if (hasPadding) {
@@ -628,105 +713,126 @@ export function ImageEraserPage() {
           padding.left,
           padding.top,
           bbox.width,
-          bbox.height
-        )
+          bbox.height,
+        );
       }
 
       // Paste back into original image with blending
-      pasteWithBlending(imageCanvas, resultCanvas, croppedMask, bbox.x, bbox.y, 12)
+      pasteWithBlending(
+        imageCanvas,
+        resultCanvas,
+        croppedMask,
+        bbox.x,
+        bbox.y,
+        12,
+      );
 
       // Save the new image state to history (for undo/redo of removals)
-      saveImageSnapshot()
+      saveImageSnapshot();
 
       // Copy to result canvas ref for download (full size)
       if (resultCanvasRef.current && originalSize) {
-        resultCanvasRef.current.width = originalSize.width
-        resultCanvasRef.current.height = originalSize.height
-        const downloadCtx = resultCanvasRef.current.getContext('2d')
+        resultCanvasRef.current.width = originalSize.width;
+        resultCanvasRef.current.height = originalSize.height;
+        const downloadCtx = resultCanvasRef.current.getContext("2d");
         if (downloadCtx) {
-          downloadCtx.drawImage(imageCanvas, 0, 0)
+          downloadCtx.drawImage(imageCanvas, 0, 0);
         }
       }
 
       // Convert to data URL for preview
-      const blob = await canvasToBlob(imageCanvas)
-      const resultUrl = URL.createObjectURL(blob)
-      setResultImage(resultUrl)
+      const blob = await canvasToBlob(imageCanvas);
+      const resultUrl = URL.createObjectURL(blob);
+      setResultImage(resultUrl);
 
       // Clear the mask canvas for next iteration
-      const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
+      const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
       if (maskCtx) {
-        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
+        maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
         // Reset mask history for new editing session
-        const initialState = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height)
-        setMaskHistory([initialState])
-        setMaskHistoryIndex(0)
+        const initialState = maskCtx.getImageData(
+          0,
+          0,
+          maskCanvas.width,
+          maskCanvas.height,
+        );
+        setMaskHistory([initialState]);
+        setMaskHistoryIndex(0);
       }
 
-      completeAllPhases()
+      completeAllPhases();
     } catch (error) {
-      console.error('Object removal failed:', error)
+      console.error("Object removal failed:", error);
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
     // Prefer result canvas, fallback to image canvas
-    const canvas = resultCanvasRef.current || imageCanvasRef.current
-    if (!canvas) return
+    const canvas = resultCanvasRef.current || imageCanvasRef.current;
+    if (!canvas) return;
 
-    const mimeType = `image/${downloadFormat}`
-    const quality = downloadFormat === 'png' ? undefined : 0.95
-    const dataUrl = canvas.toDataURL(mimeType, quality)
+    const mimeType = `image/${downloadFormat}`;
+    const quality = downloadFormat === "png" ? undefined : 0.95;
+    const dataUrl = canvas.toDataURL(mimeType, quality);
 
-    const link = document.createElement('a')
-    link.href = dataUrl
-    link.download = generateFreeToolFilename('image-eraser', downloadFormat)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = generateFreeToolFilename("image-eraser", downloadFormat);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.ctrlKey || e.metaKey) {
-        if (e.key === 'z' && !e.shiftKey) {
-          e.preventDefault()
+        if (e.key === "z" && !e.shiftKey) {
+          e.preventDefault();
           // Prefer mask undo if available, otherwise image undo
           if (maskHistoryIndex > 0) {
-            undoMask()
+            undoMask();
           } else if (imageHistoryIndex > 0) {
-            undoImage()
+            undoImage();
           }
-        } else if ((e.key === 'z' && e.shiftKey) || e.key === 'y') {
-          e.preventDefault()
+        } else if ((e.key === "z" && e.shiftKey) || e.key === "y") {
+          e.preventDefault();
           // Prefer mask redo if available, otherwise image redo
           if (maskHistoryIndex < maskHistory.length - 1) {
-            redoMask()
+            redoMask();
           } else if (imageHistoryIndex < imageHistory.length - 1) {
-            redoImage()
+            redoImage();
           }
         }
       }
-    }
-
-    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [undoMask, redoMask, undoImage, redoImage, maskHistoryIndex, maskHistory.length, imageHistoryIndex, imageHistory.length])
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    undoMask,
+    redoMask,
+    undoImage,
+    redoImage,
+    maskHistoryIndex,
+    maskHistory.length,
+    imageHistoryIndex,
+    imageHistory.length,
+  ]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      dispose()
-    }
-  }, [dispose])
+      dispose();
+    };
+  }, [dispose]);
 
-  const canUndoMask = maskHistoryIndex > 0
-  const canRedoMask = maskHistoryIndex < maskHistory.length - 1
-  const canUndoImage = imageHistoryIndex > 0
-  const canRedoImage = imageHistoryIndex < imageHistory.length - 1
+  const canUndoMask = maskHistoryIndex > 0;
+  const canRedoMask = maskHistoryIndex < maskHistory.length - 1;
+  const canUndoImage = imageHistoryIndex > 0;
+  const canRedoImage = imageHistoryIndex < imageHistory.length - 1;
 
   return (
     <div
@@ -744,7 +850,9 @@ export function ImageEraserPage() {
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.imageEraser.orDragDrop')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.imageEraser.orDragDrop")}
+            </p>
           </div>
         </div>
       )}
@@ -755,9 +863,11 @@ export function ImageEraserPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.imageEraser.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.imageEraser.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.imageEraser.description')}
+            {t("freeTools.imageEraser.description")}
           </p>
         </div>
       </div>
@@ -766,10 +876,10 @@ export function ImageEraserPage() {
       {!originalImage && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -777,9 +887,11 @@ export function ImageEraserPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.imageEraser.selectImage')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.imageEraser.selectImage")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.imageEraser.orDragDrop')}
+              {t("freeTools.imageEraser.orDragDrop")}
             </p>
           </CardContent>
         </Card>
@@ -791,8 +903,8 @@ export function ImageEraserPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
         }}
       />
 
@@ -807,7 +919,7 @@ export function ImageEraserPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.imageEraser.selectImage')}
+              {t("freeTools.imageEraser.selectImage")}
             </Button>
 
             {/* Drawing tools */}
@@ -815,29 +927,33 @@ export function ImageEraserPage() {
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant={tool === 'brush' ? 'default' : 'outline'}
+                    variant={tool === "brush" ? "default" : "outline"}
                     size="icon"
-                    onClick={() => setTool('brush')}
+                    onClick={() => setTool("brush")}
                     disabled={isProcessing}
                   >
                     <Paintbrush className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('freeTools.imageEraser.brush')}</TooltipContent>
+                <TooltipContent>
+                  {t("freeTools.imageEraser.brush")}
+                </TooltipContent>
               </Tooltip>
 
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    variant={tool === 'eraser' ? 'default' : 'outline'}
+                    variant={tool === "eraser" ? "default" : "outline"}
                     size="icon"
-                    onClick={() => setTool('eraser')}
+                    onClick={() => setTool("eraser")}
                     disabled={isProcessing}
                   >
                     <Eraser className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('freeTools.imageEraser.eraser')}</TooltipContent>
+                <TooltipContent>
+                  {t("freeTools.imageEraser.eraser")}
+                </TooltipContent>
               </Tooltip>
             </div>
 
@@ -856,7 +972,9 @@ export function ImageEraserPage() {
                     <Undo2 className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('freeTools.imageEraser.undo')} (Ctrl+Z)</TooltipContent>
+                <TooltipContent>
+                  {t("freeTools.imageEraser.undo")} (Ctrl+Z)
+                </TooltipContent>
               </Tooltip>
 
               <Tooltip>
@@ -871,7 +989,7 @@ export function ImageEraserPage() {
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {t('freeTools.imageEraser.redo')} (Ctrl+Shift+Z)
+                  {t("freeTools.imageEraser.redo")} (Ctrl+Shift+Z)
                 </TooltipContent>
               </Tooltip>
 
@@ -886,7 +1004,9 @@ export function ImageEraserPage() {
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>{t('freeTools.imageEraser.clear')}</TooltipContent>
+                <TooltipContent>
+                  {t("freeTools.imageEraser.clear")}
+                </TooltipContent>
               </Tooltip>
             </div>
 
@@ -896,7 +1016,7 @@ export function ImageEraserPage() {
                 <div className="h-6 w-px bg-border" />
                 <div className="flex items-center gap-1">
                   <span className="text-xs text-muted-foreground mr-1">
-                    {t('freeTools.imageEraser.edits')}:
+                    {t("freeTools.imageEraser.edits")}:
                   </span>
                   <Tooltip>
                     <TooltipTrigger asChild>
@@ -909,7 +1029,9 @@ export function ImageEraserPage() {
                         <Undo2 className="h-4 w-4" />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>{t('freeTools.imageEraser.undoEdit')}</TooltipContent>
+                    <TooltipContent>
+                      {t("freeTools.imageEraser.undoEdit")}
+                    </TooltipContent>
                   </Tooltip>
 
                   <Tooltip>
@@ -923,7 +1045,9 @@ export function ImageEraserPage() {
                         <Redo2 className="h-4 w-4" />
                       </Button>
                     </TooltipTrigger>
-                    <TooltipContent>{t('freeTools.imageEraser.redoEdit')}</TooltipContent>
+                    <TooltipContent>
+                      {t("freeTools.imageEraser.redoEdit")}
+                    </TooltipContent>
                   </Tooltip>
                 </div>
               </>
@@ -985,7 +1109,7 @@ export function ImageEraserPage() {
             {/* Brush size */}
             <div className="flex items-center gap-3 min-w-[150px] max-w-[200px]">
               <span className="text-xs text-muted-foreground whitespace-nowrap">
-                {t('freeTools.imageEraser.brushSize')}
+                {t("freeTools.imageEraser.brushSize")}
               </span>
               <Slider
                 value={[brushSize]}
@@ -996,7 +1120,9 @@ export function ImageEraserPage() {
                 disabled={isProcessing}
                 className="flex-1"
               />
-              <span className="text-xs text-muted-foreground w-6 text-right">{brushSize}</span>
+              <span className="text-xs text-muted-foreground w-6 text-right">
+                {brushSize}
+              </span>
             </div>
 
             <div className="flex-1" />
@@ -1009,12 +1135,12 @@ export function ImageEraserPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.imageEraser.processing')}
+                  {t("freeTools.imageEraser.processing")}
                 </>
               ) : (
                 <>
                   <Eraser className="h-4 w-4 mr-2" />
-                  {t('freeTools.imageEraser.removeObjects')}
+                  {t("freeTools.imageEraser.removeObjects")}
                 </>
               )}
             </Button>
@@ -1034,7 +1160,7 @@ export function ImageEraserPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -1044,7 +1170,7 @@ export function ImageEraserPage() {
             <CardContent className="p-4">
               <div className="flex items-center justify-between mb-3">
                 <span className="text-sm font-medium">
-                  {t('freeTools.imageEraser.drawMask')}
+                  {t("freeTools.imageEraser.drawMask")}
                 </span>
                 <div className="flex items-center gap-2">
                   {originalSize && (
@@ -1056,7 +1182,9 @@ export function ImageEraserPage() {
                     <>
                       <Select
                         value={downloadFormat}
-                        onValueChange={(v) => setDownloadFormat(v as 'png' | 'jpeg' | 'webp')}
+                        onValueChange={(v) =>
+                          setDownloadFormat(v as "png" | "jpeg" | "webp")
+                        }
                       >
                         <SelectTrigger className="h-7 w-20 text-xs">
                           <SelectValue />
@@ -1082,7 +1210,9 @@ export function ImageEraserPage() {
               <div
                 ref={containerRef}
                 className="relative flex items-center justify-center bg-muted rounded-lg overflow-auto"
-                style={{ minHeight: Math.max(400, canvasSize.height * zoom + 16) }}
+                style={{
+                  minHeight: Math.max(400, canvasSize.height * zoom + 16),
+                }}
               >
                 <div
                   className="relative cursor-none"
@@ -1090,64 +1220,67 @@ export function ImageEraserPage() {
                     width: canvasSize.width,
                     height: canvasSize.height,
                     transform: `scale(${zoom})`,
-                    transformOrigin: 'center center'
+                    transformOrigin: "center center",
                   }}
                 >
-                {/* Background image canvas - buffer at original res, displayed at canvasSize */}
-                <canvas
-                  ref={imageCanvasRef}
-                  className="absolute inset-0 cursor-none"
-                  style={{
-                    width: canvasSize.width,
-                    height: canvasSize.height,
-                    objectFit: 'contain'
-                  }}
-                  onClick={() => resultImage && setPreviewImage(resultImage)}
-                />
+                  {/* Background image canvas - buffer at original res, displayed at canvasSize */}
+                  <canvas
+                    ref={imageCanvasRef}
+                    className="absolute inset-0 cursor-none"
+                    style={{
+                      width: canvasSize.width,
+                      height: canvasSize.height,
+                      objectFit: "contain",
+                    }}
+                    onClick={() => resultImage && setPreviewImage(resultImage)}
+                  />
 
-                {/* Mask canvas (drawing layer) - buffer at original res, displayed at canvasSize */}
-                <canvas
-                  ref={maskCanvasRef}
-                  className={cn('absolute inset-0 cursor-none', isProcessing && 'pointer-events-none')}
-                  style={{
-                    width: canvasSize.width,
-                    height: canvasSize.height,
-                    opacity: 0.5
-                  }}
-                  onMouseDown={handleMouseDown}
-                  onMouseMove={handleMouseMove}
-                  onMouseUp={handleMouseUp}
-                  onMouseLeave={handleMouseLeave}
-                />
-
-                {/* Processing overlay */}
-                {isProcessing && (
-                  <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
-                    <Loader2 className="h-8 w-8 animate-spin" />
-                  </div>
-                )}
-
-                {/* Brush cursor indicator */}
-                {cursorPos && !isProcessing && (
-                  <div
-                    className="pointer-events-none absolute rounded-full border-2"
+                  {/* Mask canvas (drawing layer) - buffer at original res, displayed at canvasSize */}
+                  <canvas
+                    ref={maskCanvasRef}
+                    className={cn(
+                      "absolute inset-0 cursor-none",
+                      isProcessing && "pointer-events-none",
+                    )}
                     style={{
-                      left: cursorPos.x,
-                      top: cursorPos.y,
-                      width: brushSize,
-                      height: brushSize,
-                      transform: 'translate(-50%, -50%)',
-                      borderColor:
-                        tool === 'eraser'
-                          ? 'rgba(0, 0, 0, 0.8)'
-                          : 'rgba(255, 255, 255, 0.8)',
-                      boxShadow:
-                        tool === 'eraser'
-                          ? '0 0 0 1px rgba(255, 255, 255, 0.5)'
-                          : '0 0 0 1px rgba(0, 0, 0, 0.5)'
+                      width: canvasSize.width,
+                      height: canvasSize.height,
+                      opacity: 0.5,
                     }}
+                    onMouseDown={handleMouseDown}
+                    onMouseMove={handleMouseMove}
+                    onMouseUp={handleMouseUp}
+                    onMouseLeave={handleMouseLeave}
                   />
-                )}
+
+                  {/* Processing overlay */}
+                  {isProcessing && (
+                    <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
+                      <Loader2 className="h-8 w-8 animate-spin" />
+                    </div>
+                  )}
+
+                  {/* Brush cursor indicator */}
+                  {cursorPos && !isProcessing && (
+                    <div
+                      className="pointer-events-none absolute rounded-full border-2"
+                      style={{
+                        left: cursorPos.x,
+                        top: cursorPos.y,
+                        width: brushSize,
+                        height: brushSize,
+                        transform: "translate(-50%, -50%)",
+                        borderColor:
+                          tool === "eraser"
+                            ? "rgba(0, 0, 0, 0.8)"
+                            : "rgba(255, 255, 255, 0.8)",
+                        boxShadow:
+                          tool === "eraser"
+                            ? "0 0 0 1px rgba(255, 255, 255, 0.5)"
+                            : "0 0 0 1px rgba(0, 0, 0, 0.5)",
+                      }}
+                    />
+                  )}
                 </div>
               </div>
             </CardContent>
@@ -1184,19 +1317,23 @@ export function ImageEraserPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/MediaMergerPage.tsx b/src/pages/MediaMergerPage.tsx
index 394c962f..d9d18b0f 100644
--- a/src/pages/MediaMergerPage.tsx
+++ b/src/pages/MediaMergerPage.tsx
@@ -1,15 +1,15 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useFFmpegWorker } from '@/hooks/useFFmpegWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { getMediaType, formatDuration } from '@/lib/ffmpegFormats'
-import { formatBytes } from '@/types/progress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useFFmpegWorker } from "@/hooks/useFFmpegWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { getMediaType, formatDuration } from "@/lib/ffmpegFormats";
+import { formatBytes } from "@/types/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -18,8 +18,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -33,40 +33,40 @@ import {
   Video,
   Trash2,
   ChevronUp,
-  ChevronDown
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  ChevronDown,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 interface MediaItem {
-  id: string
-  file: File
-  type: 'video' | 'audio'
-  duration: number | null
-  preview: string | null
+  id: string;
+  file: File;
+  type: "video" | "audio";
+  duration: number | null;
+  preview: string | null;
 }
 
 // Phase configuration for media merger
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.ffmpeg.loading', weight: 0.1 },
-  { id: 'transcode', labelKey: 'freeTools.ffmpeg.transcoding', weight: 0.7 },
-  { id: 'merge', labelKey: 'freeTools.ffmpeg.merging', weight: 0.2 }
-]
+  { id: "download", labelKey: "freeTools.ffmpeg.loading", weight: 0.1 },
+  { id: "transcode", labelKey: "freeTools.ffmpeg.transcoding", weight: 0.7 },
+  { id: "merge", labelKey: "freeTools.ffmpeg.merging", weight: 0.2 },
+];
 
 export function MediaMergerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [mediaItems, setMediaItems] = useState<MediaItem[]>([])
-  const [mergedUrl, setMergedUrl] = useState<string | null>(null)
-  const [mergedBlob, setMergedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [mediaItems, setMediaItems] = useState<MediaItem[]>([]);
+  const [mergedUrl, setMergedUrl] = useState<string | null>(null);
+  const [mergedBlob, setMergedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -75,215 +75,225 @@ export function MediaMergerPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
   const { merge, hasFailed, retryWorker } = useFFmpegWorker({
     onPhase: (phase) => {
-      if (phase === 'download' || phase === 'transcode' || phase === 'merge') {
-        startPhase(phase)
+      if (phase === "download" || phase === "transcode" || phase === "merge") {
+        startPhase(phase);
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      if (phase === 'download' || phase === 'transcode' || phase === 'merge') {
-        updatePhase(phase, progressValue, detail)
+      if (phase === "download" || phase === "transcode" || phase === "merge") {
+        updatePhase(phase, progressValue, detail);
       }
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      resetProgress()
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      resetProgress();
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, resetPage, location.pathname, navigate])
+  }, [isProcessing, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [resetPage, location.pathname, navigate]);
 
   const handleFilesSelect = useCallback(
     (files: FileList | File[]) => {
-      setError(null)
-      const newItems: MediaItem[] = []
-      const firstType = mediaItems.length > 0 ? mediaItems[0].type : null
+      setError(null);
+      const newItems: MediaItem[] = [];
+      const firstType = mediaItems.length > 0 ? mediaItems[0].type : null;
 
       Array.from(files).forEach((file) => {
-        const type = getMediaType(file)
-        if (type !== 'video' && type !== 'audio') return
+        const type = getMediaType(file);
+        if (type !== "video" && type !== "audio") return;
 
         // Only allow same media type
-        if (firstType && type !== firstType) return
-        if (newItems.length > 0 && type !== newItems[0].type) return
+        if (firstType && type !== firstType) return;
+        if (newItems.length > 0 && type !== newItems[0].type) return;
 
-        const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-        const preview = type === 'video' ? URL.createObjectURL(file) : null
+        const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const preview = type === "video" ? URL.createObjectURL(file) : null;
 
-        const item: MediaItem = { id, file, type, duration: null, preview }
-        newItems.push(item)
+        const item: MediaItem = { id, file, type, duration: null, preview };
+        newItems.push(item);
 
         // Get duration
-        const media = document.createElement(type === 'video' ? 'video' : 'audio')
-        media.addEventListener('loadedmetadata', () => {
+        const media = document.createElement(
+          type === "video" ? "video" : "audio",
+        );
+        media.addEventListener("loadedmetadata", () => {
           setMediaItems((prev) =>
-            prev.map((m) => (m.id === id ? { ...m, duration: media.duration } : m))
-          )
-        })
-        media.src = URL.createObjectURL(file)
-      })
-
-      setMediaItems((prev) => [...prev, ...newItems])
-      setMergedUrl(null)
-      setMergedBlob(null)
-      resetProgress()
+            prev.map((m) =>
+              m.id === id ? { ...m, duration: media.duration } : m,
+            ),
+          );
+        });
+        media.src = URL.createObjectURL(file);
+      });
+
+      setMediaItems((prev) => [...prev, ...newItems]);
+      setMergedUrl(null);
+      setMergedBlob(null);
+      resetProgress();
     },
-    [mediaItems, resetProgress]
-  )
+    [mediaItems, resetProgress],
+  );
 
   const handleRemoveItem = useCallback((id: string) => {
     setMediaItems((prev) => {
-      const item = prev.find((m) => m.id === id)
-      if (item?.preview) URL.revokeObjectURL(item.preview)
-      return prev.filter((m) => m.id !== id)
-    })
-  }, [])
+      const item = prev.find((m) => m.id === id);
+      if (item?.preview) URL.revokeObjectURL(item.preview);
+      return prev.filter((m) => m.id !== id);
+    });
+  }, []);
 
-  const handleMoveItem = useCallback((id: string, direction: 'up' | 'down') => {
+  const handleMoveItem = useCallback((id: string, direction: "up" | "down") => {
     setMediaItems((prev) => {
-      const index = prev.findIndex((m) => m.id === id)
-      if (index === -1) return prev
-      if (direction === 'up' && index === 0) return prev
-      if (direction === 'down' && index === prev.length - 1) return prev
-
-      const newItems = [...prev]
-      const swapIndex = direction === 'up' ? index - 1 : index + 1
-      ;[newItems[index], newItems[swapIndex]] = [newItems[swapIndex], newItems[index]]
-      return newItems
-    })
-  }, [])
+      const index = prev.findIndex((m) => m.id === id);
+      if (index === -1) return prev;
+      if (direction === "up" && index === 0) return prev;
+      if (direction === "down" && index === prev.length - 1) return prev;
+
+      const newItems = [...prev];
+      const swapIndex = direction === "up" ? index - 1 : index + 1;
+      [newItems[index], newItems[swapIndex]] = [
+        newItems[swapIndex],
+        newItems[index],
+      ];
+      return newItems;
+    });
+  }, []);
 
   const handleClearAll = useCallback(() => {
     mediaItems.forEach((item) => {
-      if (item.preview) URL.revokeObjectURL(item.preview)
-    })
-    if (mergedUrl) URL.revokeObjectURL(mergedUrl)
-    setMediaItems([])
-    setMergedUrl(null)
-    setMergedBlob(null)
-    resetProgress()
-  }, [mediaItems, mergedUrl, resetProgress])
+      if (item.preview) URL.revokeObjectURL(item.preview);
+    });
+    if (mergedUrl) URL.revokeObjectURL(mergedUrl);
+    setMediaItems([]);
+    setMergedUrl(null);
+    setMergedBlob(null);
+    resetProgress();
+  }, [mediaItems, mergedUrl, resetProgress]);
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
       if (e.dataTransfer.files.length > 0) {
-        handleFilesSelect(e.dataTransfer.files)
+        handleFilesSelect(e.dataTransfer.files);
       }
     },
-    [handleFilesSelect, isProcessing]
-  )
+    [handleFilesSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const handleMerge = async () => {
-    if (mediaItems.length < 2) return
+    if (mediaItems.length < 2) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setMergedUrl(null)
-    setMergedBlob(null)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    setMergedUrl(null);
+    setMergedBlob(null);
+    resetAndStart("download");
 
-    const mediaType = mediaItems[0].type
-    const ext = mediaType === 'video' ? 'mp4' : 'mp3'
-    const mimeType = mediaType === 'video' ? 'video/mp4' : 'audio/mpeg'
+    const mediaType = mediaItems[0].type;
+    const ext = mediaType === "video" ? "mp4" : "mp3";
+    const mimeType = mediaType === "video" ? "video/mp4" : "audio/mpeg";
 
     try {
       // Read all files as ArrayBuffers
-      const files: ArrayBuffer[] = []
-      const fileNames: string[] = []
+      const files: ArrayBuffer[] = [];
+      const fileNames: string[] = [];
 
       for (const item of mediaItems) {
-        const arrayBuffer = await item.file.arrayBuffer()
-        files.push(arrayBuffer)
-        fileNames.push(item.file.name)
+        const arrayBuffer = await item.file.arrayBuffer();
+        files.push(arrayBuffer);
+        fileNames.push(item.file.name);
       }
 
       // Merge using FFmpeg worker
-      const result = await merge(files, fileNames, ext, ext)
+      const result = await merge(files, fileNames, ext, ext);
 
       // Create blob and URL
-      const blob = new Blob([result.data], { type: mimeType })
-      const url = URL.createObjectURL(blob)
+      const blob = new Blob([result.data], { type: mimeType });
+      const url = URL.createObjectURL(blob);
 
-      setMergedBlob(blob)
-      setMergedUrl(url)
-      completeAllPhases()
+      setMergedBlob(blob);
+      setMergedUrl(url);
+      completeAllPhases();
     } catch (err) {
-      console.error('Merging failed:', err)
-      setError(err instanceof Error ? err.message : 'Merging failed')
+      console.error("Merging failed:", err);
+      setError(err instanceof Error ? err.message : "Merging failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!mergedUrl || !mergedBlob) return
-
-    const mediaType = mediaItems[0]?.type || 'video'
-    const ext = mediaType === 'video' ? 'mp4' : 'mp3'
-    const filename = generateFreeToolFilename('media-merger', ext)
-
-    const link = document.createElement('a')
-    link.href = mergedUrl
-    link.download = filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
-
-  const totalDuration = mediaItems.reduce((sum, item) => sum + (item.duration || 0), 0)
-  const mediaType = mediaItems.length > 0 ? mediaItems[0].type : null
+    if (!mergedUrl || !mergedBlob) return;
+
+    const mediaType = mediaItems[0]?.type || "video";
+    const ext = mediaType === "video" ? "mp4" : "mp3";
+    const filename = generateFreeToolFilename("media-merger", ext);
+
+    const link = document.createElement("a");
+    link.href = mergedUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const totalDuration = mediaItems.reduce(
+    (sum, item) => sum + (item.duration || 0),
+    0,
+  );
+  const mediaType = mediaItems.length > 0 ? mediaItems[0].type : null;
 
   return (
     <div
@@ -298,7 +308,9 @@ export function MediaMergerPage() {
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.mediaMerger.dropToAdd')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.mediaMerger.dropToAdd")}
+            </p>
           </div>
         </div>
       )}
@@ -309,9 +321,11 @@ export function MediaMergerPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold">{t('freeTools.mediaMerger.title')}</h1>
+          <h1 className="text-2xl font-bold">
+            {t("freeTools.mediaMerger.title")}
+          </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.mediaMerger.description')}
+            {t("freeTools.mediaMerger.description")}
           </p>
         </div>
       </div>
@@ -320,10 +334,10 @@ export function MediaMergerPage() {
       {mediaItems.length === 0 && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -331,12 +345,14 @@ export function MediaMergerPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.mediaMerger.selectFiles')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.mediaMerger.selectFiles")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.mediaMerger.orDragDrop')}
+              {t("freeTools.mediaMerger.orDragDrop")}
             </p>
             <p className="text-xs text-muted-foreground mt-2">
-              {t('freeTools.mediaMerger.supportedFormats')}
+              {t("freeTools.mediaMerger.supportedFormats")}
             </p>
           </CardContent>
         </Card>
@@ -349,8 +365,8 @@ export function MediaMergerPage() {
         multiple
         className="hidden"
         onChange={(e) => {
-          if (e.target.files) handleFilesSelect(e.target.files)
-          e.target.value = ''
+          if (e.target.files) handleFilesSelect(e.target.files);
+          e.target.value = "";
         }}
       />
 
@@ -365,7 +381,7 @@ export function MediaMergerPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.mediaMerger.addMore')}
+              {t("freeTools.mediaMerger.addMore")}
             </Button>
 
             <Button
@@ -376,24 +392,24 @@ export function MediaMergerPage() {
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.mediaMerger.merging')}
+                  {t("freeTools.mediaMerger.merging")}
                 </>
               ) : (
                 <>
                   <Combine className="h-4 w-4 mr-2" />
-                  {t('freeTools.mediaMerger.merge')} ({mediaItems.length})
+                  {t("freeTools.mediaMerger.merge")} ({mediaItems.length})
                 </>
               )}
             </Button>
 
             <p className="text-xs text-muted-foreground">
-              {t('freeTools.mediaMerger.sameFormatNote')}
+              {t("freeTools.mediaMerger.sameFormatNote")}
             </p>
 
             {mergedUrl && (
               <Button variant="outline" onClick={handleDownload}>
                 <Download className="h-4 w-4 mr-2" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             )}
 
@@ -422,7 +438,7 @@ export function MediaMergerPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -445,7 +461,7 @@ export function MediaMergerPage() {
                     </span>
 
                     {/* Preview/Icon */}
-                    {item.type === 'video' && item.preview ? (
+                    {item.type === "video" && item.preview ? (
                       <div className="w-16 h-12 rounded overflow-hidden bg-black shrink-0">
                         <video
                           src={item.preview}
@@ -455,7 +471,7 @@ export function MediaMergerPage() {
                       </div>
                     ) : (
                       <div className="w-12 h-12 rounded bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center shrink-0">
-                        {item.type === 'video' ? (
+                        {item.type === "video" ? (
                           <Video className="h-5 w-5 text-primary/60" />
                         ) : (
                           <Music className="h-5 w-5 text-primary/60" />
@@ -465,10 +481,14 @@ export function MediaMergerPage() {
 
                     {/* Info */}
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate">{item.file.name}</p>
+                      <p className="text-sm font-medium truncate">
+                        {item.file.name}
+                      </p>
                       <div className="flex items-center gap-3 text-xs text-muted-foreground">
                         <span>{formatBytes(item.file.size)}</span>
-                        {item.duration && <span>{formatDuration(item.duration)}</span>}
+                        {item.duration && (
+                          <span>{formatDuration(item.duration)}</span>
+                        )}
                       </div>
                     </div>
 
@@ -478,7 +498,7 @@ export function MediaMergerPage() {
                         variant="ghost"
                         size="icon"
                         className="h-8 w-8"
-                        onClick={() => handleMoveItem(item.id, 'up')}
+                        onClick={() => handleMoveItem(item.id, "up")}
                         disabled={index === 0 || isProcessing}
                       >
                         <ChevronUp className="h-4 w-4" />
@@ -487,8 +507,10 @@ export function MediaMergerPage() {
                         variant="ghost"
                         size="icon"
                         className="h-8 w-8"
-                        onClick={() => handleMoveItem(item.id, 'down')}
-                        disabled={index === mediaItems.length - 1 || isProcessing}
+                        onClick={() => handleMoveItem(item.id, "down")}
+                        disabled={
+                          index === mediaItems.length - 1 || isProcessing
+                        }
                       >
                         <ChevronDown className="h-4 w-4" />
                       </Button>
@@ -509,11 +531,16 @@ export function MediaMergerPage() {
               {/* Summary */}
               <div className="flex items-center justify-between mt-4 pt-4 border-t">
                 <div className="text-sm text-muted-foreground">
-                  {mediaItems.length} {mediaType === 'video' ? 'videos' : 'audio files'}
+                  {mediaItems.length}{" "}
+                  {mediaType === "video" ? "videos" : "audio files"}
                 </div>
                 <div className="text-sm">
-                  <span className="text-muted-foreground">{t('freeTools.mediaMerger.totalDuration')}: </span>
-                  <span className="font-medium">{formatDuration(totalDuration)}</span>
+                  <span className="text-muted-foreground">
+                    {t("freeTools.mediaMerger.totalDuration")}:{" "}
+                  </span>
+                  <span className="font-medium">
+                    {formatDuration(totalDuration)}
+                  </span>
                 </div>
               </div>
 
@@ -522,7 +549,7 @@ export function MediaMergerPage() {
                 <div className="mt-4 pt-4 border-t space-y-4">
                   <div className="flex items-center justify-between">
                     <span className="text-sm font-medium text-green-600 dark:text-green-400">
-                      {t('freeTools.mediaMerger.merged')}
+                      {t("freeTools.mediaMerger.merged")}
                     </span>
                     <span className="text-sm text-muted-foreground">
                       {formatBytes(mergedBlob.size)}
@@ -530,7 +557,7 @@ export function MediaMergerPage() {
                   </div>
 
                   {/* Merged media player */}
-                  {mediaType === 'video' ? (
+                  {mediaType === "video" ? (
                     <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
                       <video
                         src={mergedUrl}
@@ -540,18 +567,12 @@ export function MediaMergerPage() {
                       />
                     </div>
                   ) : (
-                    <audio
-                      src={mergedUrl}
-                      className="w-full"
-                      controls
-                    />
+                    <audio src={mergedUrl} className="w-full" controls />
                   )}
                 </div>
               )}
             </CardContent>
           </Card>
-
-
         </div>
       )}
 
@@ -559,19 +580,23 @@ export function MediaMergerPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/MediaTrimmerPage.tsx b/src/pages/MediaTrimmerPage.tsx
index 18cc76e8..8842a914 100644
--- a/src/pages/MediaTrimmerPage.tsx
+++ b/src/pages/MediaTrimmerPage.tsx
@@ -1,15 +1,15 @@
-import { useState, useRef, useCallback, useEffect, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { useFFmpegWorker } from '@/hooks/useFFmpegWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { TimeRangeSlider } from '@/components/ffmpeg/TimeRangeSlider'
-import { getMediaType, formatDuration } from '@/lib/ffmpegFormats'
-import { formatBytes } from '@/types/progress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useRef, useCallback, useEffect, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { useFFmpegWorker } from "@/hooks/useFFmpegWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { TimeRangeSlider } from "@/components/ffmpeg/TimeRangeSlider";
+import { getMediaType, formatDuration } from "@/lib/ffmpegFormats";
+import { formatBytes } from "@/types/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -18,8 +18,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -27,39 +27,39 @@ import {
   Loader2,
   Scissors,
   RefreshCw,
-  Music
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  Music,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Phase configuration for media trimmer
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.ffmpeg.loading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.ffmpeg.trimming', weight: 0.9 }
-]
+  { id: "download", labelKey: "freeTools.ffmpeg.loading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.ffmpeg.trimming", weight: 0.9 },
+];
 
 export function MediaTrimmerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [mediaFile, setMediaFile] = useState<File | null>(null)
-  const [mediaUrl, setMediaUrl] = useState<string | null>(null)
-  const [mediaType, setMediaType] = useState<'video' | 'audio' | null>(null)
-  const [duration, setDuration] = useState<number>(0)
-  const [startTime, setStartTime] = useState<number>(0)
-  const [endTime, setEndTime] = useState<number>(0)
-  const [_currentTime, setCurrentTime] = useState<number>(0)
-  const [_isPlaying, setIsPlaying] = useState(false)
-  const [trimmedUrl, setTrimmedUrl] = useState<string | null>(null)
-  const [trimmedBlob, setTrimmedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [mediaFile, setMediaFile] = useState<File | null>(null);
+  const [mediaUrl, setMediaUrl] = useState<string | null>(null);
+  const [mediaType, setMediaType] = useState<"video" | "audio" | null>(null);
+  const [duration, setDuration] = useState<number>(0);
+  const [startTime, setStartTime] = useState<number>(0);
+  const [endTime, setEndTime] = useState<number>(0);
+  const [_currentTime, setCurrentTime] = useState<number>(0);
+  const [_isPlaying, setIsPlaying] = useState(false);
+  const [trimmedUrl, setTrimmedUrl] = useState<string | null>(null);
+  const [trimmedBlob, setTrimmedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -68,147 +68,149 @@ export function MediaTrimmerPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
   const { trim, hasFailed, retryWorker } = useFFmpegWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
+      if (phase === "download") {
+        startPhase("download");
+      } else if (phase === "process") {
+        startPhase("process");
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : 'process'
-      updatePhase(phaseId, progressValue, detail)
+      const phaseId = phase === "download" ? "download" : "process";
+      updatePhase(phaseId, progressValue, detail);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      resetProgress()
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      resetProgress();
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, resetPage, location.pathname, navigate])
+  }, [isProcessing, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [resetPage, location.pathname, navigate]);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      const type = getMediaType(file)
-      if (type !== 'video' && type !== 'audio') return
+      const type = getMediaType(file);
+      if (type !== "video" && type !== "audio") return;
 
-      setError(null)
+      setError(null);
       // Clean up previous URLs
-      if (mediaUrl) URL.revokeObjectURL(mediaUrl)
-      if (trimmedUrl) URL.revokeObjectURL(trimmedUrl)
-
-      const url = URL.createObjectURL(file)
-      setMediaFile(file)
-      setMediaUrl(url)
-      setMediaType(type)
-      setTrimmedUrl(null)
-      setTrimmedBlob(null)
-      setIsPlaying(false)
-      setStartTime(0)
-      setCurrentTime(0)
-      resetProgress()
+      if (mediaUrl) URL.revokeObjectURL(mediaUrl);
+      if (trimmedUrl) URL.revokeObjectURL(trimmedUrl);
+
+      const url = URL.createObjectURL(file);
+      setMediaFile(file);
+      setMediaUrl(url);
+      setMediaType(type);
+      setTrimmedUrl(null);
+      setTrimmedBlob(null);
+      setIsPlaying(false);
+      setStartTime(0);
+      setCurrentTime(0);
+      resetProgress();
     },
-    [mediaUrl, trimmedUrl, resetProgress]
-  )
+    [mediaUrl, trimmedUrl, resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   // Handle media loaded
   const handleLoadedMetadata = useCallback(() => {
     if (mediaRef.current) {
-      const dur = mediaRef.current.duration
-      setDuration(dur)
-      setEndTime(dur)
+      const dur = mediaRef.current.duration;
+      setDuration(dur);
+      setEndTime(dur);
     }
-  }, [])
+  }, []);
 
   // Sync playback position
   useEffect(() => {
-    const media = mediaRef.current
-    if (!media) return
+    const media = mediaRef.current;
+    if (!media) return;
 
     const handleTimeUpdate = () => {
-      setCurrentTime(media.currentTime)
-    }
+      setCurrentTime(media.currentTime);
+    };
 
-    media.addEventListener('timeupdate', handleTimeUpdate)
-    return () => media.removeEventListener('timeupdate', handleTimeUpdate)
-  }, [])
+    media.addEventListener("timeupdate", handleTimeUpdate);
+    return () => media.removeEventListener("timeupdate", handleTimeUpdate);
+  }, []);
 
   const handleTrim = async () => {
-    if (!mediaFile || !duration) return
+    if (!mediaFile || !duration) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setTrimmedUrl(null)
-    setTrimmedBlob(null)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    setTrimmedUrl(null);
+    setTrimmedBlob(null);
+    resetAndStart("download");
 
     // Determine output format from input
-    const ext = mediaFile.name.split('.').pop()?.toLowerCase() || (mediaType === 'video' ? 'mp4' : 'mp3')
-    const mimeType = mediaType === 'video' ? 'video/mp4' : 'audio/mpeg'
+    const ext =
+      mediaFile.name.split(".").pop()?.toLowerCase() ||
+      (mediaType === "video" ? "mp4" : "mp3");
+    const mimeType = mediaType === "video" ? "video/mp4" : "audio/mpeg";
 
     try {
       // Read file as ArrayBuffer
-      const arrayBuffer = await mediaFile.arrayBuffer()
+      const arrayBuffer = await mediaFile.arrayBuffer();
 
       // Trim using FFmpeg worker
       const result = await trim(
@@ -217,38 +219,38 @@ export function MediaTrimmerPage() {
         startTime,
         endTime,
         ext,
-        ext
-      )
+        ext,
+      );
 
       // Create blob and URL
-      const blob = new Blob([result.data], { type: mimeType })
-      const url = URL.createObjectURL(blob)
+      const blob = new Blob([result.data], { type: mimeType });
+      const url = URL.createObjectURL(blob);
 
-      setTrimmedBlob(blob)
-      setTrimmedUrl(url)
-      completeAllPhases()
+      setTrimmedBlob(blob);
+      setTrimmedUrl(url);
+      completeAllPhases();
     } catch (err) {
-      console.error('Trimming failed:', err)
-      setError(err instanceof Error ? err.message : 'Trimming failed')
+      console.error("Trimming failed:", err);
+      setError(err instanceof Error ? err.message : "Trimming failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!trimmedUrl || !trimmedBlob || !mediaFile) return
+    if (!trimmedUrl || !trimmedBlob || !mediaFile) return;
 
-    const ext = mediaFile.name.split('.').pop()?.toLowerCase() || 'mp4'
-    const baseName = mediaFile.name.replace(/\.[^.]+$/, '')
-    const filename = `${baseName}_trimmed.${ext}`
+    const ext = mediaFile.name.split(".").pop()?.toLowerCase() || "mp4";
+    const baseName = mediaFile.name.replace(/\.[^.]+$/, "");
+    const filename = `${baseName}_trimmed.${ext}`;
 
-    const link = document.createElement('a')
-    link.href = trimmedUrl
-    link.download = filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const link = document.createElement("a");
+    link.href = trimmedUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <div
@@ -263,7 +265,9 @@ export function MediaTrimmerPage() {
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.mediaTrimmer.dropToReplace')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.mediaTrimmer.dropToReplace")}
+            </p>
           </div>
         </div>
       )}
@@ -274,9 +278,11 @@ export function MediaTrimmerPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold">{t('freeTools.mediaTrimmer.title')}</h1>
+          <h1 className="text-2xl font-bold">
+            {t("freeTools.mediaTrimmer.title")}
+          </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.mediaTrimmer.description')}
+            {t("freeTools.mediaTrimmer.description")}
           </p>
         </div>
       </div>
@@ -285,10 +291,10 @@ export function MediaTrimmerPage() {
       {!mediaFile && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -296,12 +302,14 @@ export function MediaTrimmerPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.mediaTrimmer.selectMedia')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.mediaTrimmer.selectMedia")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.mediaTrimmer.orDragDrop')}
+              {t("freeTools.mediaTrimmer.orDragDrop")}
             </p>
             <p className="text-xs text-muted-foreground mt-2">
-              {t('freeTools.mediaTrimmer.supportedFormats')}
+              {t("freeTools.mediaTrimmer.supportedFormats")}
             </p>
           </CardContent>
         </Card>
@@ -313,9 +321,9 @@ export function MediaTrimmerPage() {
         accept="video/*,audio/*,.mp4,.webm,.mov,.avi,.mkv,.mp3,.m4a,.ogg,.wav,.flac"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
+          e.target.value = "";
         }}
       />
 
@@ -330,19 +338,23 @@ export function MediaTrimmerPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.mediaTrimmer.selectMedia')}
+              {t("freeTools.mediaTrimmer.selectMedia")}
             </Button>
 
-            <Button onClick={handleTrim} disabled={isProcessing} className="gradient-bg">
+            <Button
+              onClick={handleTrim}
+              disabled={isProcessing}
+              className="gradient-bg"
+            >
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.mediaTrimmer.trimming')}
+                  {t("freeTools.mediaTrimmer.trimming")}
                 </>
               ) : (
                 <>
                   <Scissors className="h-4 w-4 mr-2" />
-                  {t('freeTools.mediaTrimmer.trim')}
+                  {t("freeTools.mediaTrimmer.trim")}
                 </>
               )}
             </Button>
@@ -350,7 +362,7 @@ export function MediaTrimmerPage() {
             {trimmedUrl && (
               <Button variant="outline" onClick={handleDownload}>
                 <Download className="h-4 w-4 mr-2" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             )}
           </div>
@@ -369,7 +381,7 @@ export function MediaTrimmerPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -378,7 +390,7 @@ export function MediaTrimmerPage() {
           <Card>
             <CardContent className="p-6 space-y-6">
               {/* Media element */}
-              {mediaType === 'video' ? (
+              {mediaType === "video" ? (
                 <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
                   <video
                     ref={mediaRef as React.RefObject<HTMLVideoElement>}
@@ -394,7 +406,9 @@ export function MediaTrimmerPage() {
                   <div className="flex items-center gap-3 p-3 bg-muted rounded-lg">
                     <Music className="h-8 w-8 text-primary/60" />
                     <div className="flex-1 min-w-0">
-                      <div className="font-medium truncate">{mediaFile.name}</div>
+                      <div className="font-medium truncate">
+                        {mediaFile.name}
+                      </div>
                       <div className="text-sm text-muted-foreground">
                         {formatBytes(mediaFile.size)}
                       </div>
@@ -424,16 +438,26 @@ export function MediaTrimmerPage() {
               {/* Info */}
               <div className="flex flex-wrap gap-6 text-sm">
                 <div>
-                  <span className="text-muted-foreground">{t('freeTools.mediaTrimmer.originalDuration')}: </span>
-                  <span className="font-medium">{formatDuration(duration)}</span>
+                  <span className="text-muted-foreground">
+                    {t("freeTools.mediaTrimmer.originalDuration")}:{" "}
+                  </span>
+                  <span className="font-medium">
+                    {formatDuration(duration)}
+                  </span>
                 </div>
                 <div>
-                  <span className="text-muted-foreground">{t('freeTools.mediaTrimmer.selectedDuration')}: </span>
-                  <span className="font-medium text-primary">{formatDuration(endTime - startTime)}</span>
+                  <span className="text-muted-foreground">
+                    {t("freeTools.mediaTrimmer.selectedDuration")}:{" "}
+                  </span>
+                  <span className="font-medium text-primary">
+                    {formatDuration(endTime - startTime)}
+                  </span>
                 </div>
                 {trimmedBlob && (
                   <div>
-                    <span className="text-muted-foreground">{t('freeTools.mediaTrimmer.trimmedSize')}: </span>
+                    <span className="text-muted-foreground">
+                      {t("freeTools.mediaTrimmer.trimmedSize")}:{" "}
+                    </span>
                     <span className="font-medium text-green-600 dark:text-green-400">
                       {formatBytes(trimmedBlob.size)}
                     </span>
@@ -449,19 +473,23 @@ export function MediaTrimmerPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/ModelsPage.tsx b/src/pages/ModelsPage.tsx
index 6296f796..75ccb7af 100644
--- a/src/pages/ModelsPage.tsx
+++ b/src/pages/ModelsPage.tsx
@@ -1,536 +1,41 @@
-import { useState, useEffect, useRef, useMemo, memo, useCallback } from 'react'
-import { useVirtualizer } from '@tanstack/react-virtual'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useModelsStore, type SortBy } from '@/stores/modelsStore'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Search, PlayCircle, Loader2, RefreshCw, ArrowUp, ArrowDown, ExternalLink, Star, X, Info, LayoutGrid } from 'lucide-react'
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/components/ui/hover-card'
-import { cn } from '@/lib/utils'
-import { fuzzySearch } from '@/lib/fuzzySearch'
-import { usePlaygroundStore } from '@/stores/playgroundStore'
-import type { Model } from '@/types/model'
-
-// Get accent color class based on model type (3 categories: image, video, other)
-function getTypeAccentClass(type?: string): string {
-  const baseClasses = 'bg-[length:200%_100%] animate-gradient'
-
-  if (!type) return `${baseClasses} bg-gradient-to-r from-emerald-400 via-teal-500 to-emerald-400`
-
-  const normalizedType = type.toLowerCase()
-
-  // Video related types
-  if (normalizedType.includes('video')) {
-    return `${baseClasses} bg-gradient-to-r from-purple-500 via-violet-500 to-purple-500`
-  }
-
-  // Image related types
-  if (normalizedType.includes('image')) {
-    return `${baseClasses} bg-gradient-to-r from-sky-400 via-blue-400 to-sky-400`
-  }
-
-  // Other types
-  return `${baseClasses} bg-gradient-to-r from-emerald-400 via-teal-500 to-emerald-400`
-}
-
-// Memoized model card component
-const ModelCard = memo(function ModelCard({
-  model,
-  isFavorite,
-  onOpenPlayground,
-  onOpenInNewTab,
-  onToggleFavorite,
-  t
-}: {
-  model: Model
-  isFavorite: boolean
-  onOpenPlayground: (modelId: string) => void
-  onOpenInNewTab: (e: React.MouseEvent, modelId: string) => void
-  onToggleFavorite: (e: React.MouseEvent, modelId: string) => void
-  t: (key: string) => string
-}) {
-  return (
-    <Card
-      className="cursor-pointer card-elevated overflow-hidden group flex flex-col h-full border-transparent hover:border-primary/20"
-      onClick={() => onOpenPlayground(model.model_id)}
-    >
-      <div className={cn("h-[3px]", getTypeAccentClass(model.type))} />
-      <CardHeader className="p-3 pb-2">
-        <div className="flex items-start justify-between gap-2">
-          <CardTitle className="text-sm font-semibold leading-tight line-clamp-2 group-hover:text-primary transition-colors">
-            {model.name}
-          </CardTitle>
-          {model.type && (
-            <Badge variant="secondary" className="shrink-0 text-[10px] px-1.5 py-0 font-medium">
-              {model.type}
-            </Badge>
-          )}
-        </div>
-      </CardHeader>
-      <CardContent className="p-3 pt-0 mt-auto">
-        <div className="flex items-center justify-between">
-          {model.base_price !== undefined && (
-            <span className="text-sm font-bold text-primary">
-              ${model.base_price.toFixed(4)}
-            </span>
-          )}
-          <div className="flex gap-0.5 ml-auto opacity-60 group-hover:opacity-100 transition-opacity">
-            <HoverCard openDelay={200} closeDelay={100}>
-              <HoverCardTrigger asChild>
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  className="h-7 w-7 p-0"
-                  onClick={(e) => e.stopPropagation()}
-                  title="More info"
-                >
-                  <Info className="h-3.5 w-3.5" />
-                </Button>
-              </HoverCardTrigger>
-              <HoverCardContent className="w-72" side="top" align="end">
-                <div className="space-y-2">
-                  <h4 className="font-semibold text-sm">{model.name}</h4>
-                  <p className="text-xs text-muted-foreground font-mono break-all">
-                    {model.model_id}
-                  </p>
-                  {model.description && (
-                    <p className="text-xs text-muted-foreground">
-                      {model.description}
-                    </p>
-                  )}
-                  {model.type && (
-                    <div className="flex items-center gap-2 text-xs">
-                      <span className="text-muted-foreground">{t('models.type')}:</span>
-                      <Badge variant="secondary" className="text-xs">{model.type}</Badge>
-                    </div>
-                  )}
-                  {model.base_price !== undefined && (
-                    <div className="flex items-center gap-2 text-xs">
-                      <span className="text-muted-foreground">{t('models.basePrice')}:</span>
-                      <span className="font-medium text-primary">${model.base_price.toFixed(4)}</span>
-                    </div>
-                  )}
-                </div>
-              </HoverCardContent>
-            </HoverCard>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="h-7 w-7 p-0"
-              onClick={(e) => onToggleFavorite(e, model.model_id)}
-              title={isFavorite ? t('models.removeFromFavorites') : t('models.addToFavorites')}
-            >
-              <Star className={cn(
-                "h-3.5 w-3.5",
-                isFavorite && "fill-yellow-400 text-yellow-400"
-              )} />
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="h-7 w-7 p-0"
-              title={t('common.open')}
-              onClick={(e) => {
-                e.stopPropagation()
-                onOpenPlayground(model.model_id)
-              }}
-            >
-              <PlayCircle className="h-3.5 w-3.5" />
-            </Button>
-            <Button
-              size="sm"
-              variant="ghost"
-              className="h-7 w-7 p-0"
-              onClick={(e) => onOpenInNewTab(e, model.model_id)}
-              title={t('models.openInNewTab')}
-            >
-              <ExternalLink className="h-3.5 w-3.5" />
-            </Button>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-})
-
-// Separate component to prevent parent re-renders during typing
-const SearchInput = memo(function SearchInput({
-  value,
-  onChange,
-  onClear,
-  placeholder
-}: {
-  value: string
-  onChange: (value: string) => void
-  onClear: () => void
-  placeholder: string
-}) {
-  const [localValue, setLocalValue] = useState(value)
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current)
-    debounceRef.current = setTimeout(() => {
-      onChange(localValue)
-    }, 300)
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current)
-    }
-  }, [localValue, onChange])
-
-  // Sync when external value changes (e.g., clear button from parent)
-  useEffect(() => {
-    setLocalValue(value)
-  }, [value])
-
-  return (
-    <div className="relative flex-1 max-w-md">
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        placeholder={placeholder}
-        value={localValue}
-        onChange={(e) => setLocalValue(e.target.value)}
-        className={cn("pl-10", localValue && "pr-10")}
-      />
-      {localValue && (
-        <button
-          onClick={() => {
-            setLocalValue('')
-            onClear()
-          }}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  )
-})
+import { useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useModelsStore } from "@/stores/modelsStore";
+import { usePlaygroundStore } from "@/stores/playgroundStore";
+import { ExplorePanel } from "@/components/playground/ExplorePanel";
+import { Layers } from "lucide-react";
 
 export function ModelsPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const {
-    isLoading,
-    error,
-    searchQuery,
-    setSearchQuery,
-    fetchModels,
-    sortBy,
-    sortOrder,
-    setSortBy,
-    toggleSortOrder,
-    models,
-    toggleFavorite,
-    isFavorite,
-    favorites,
-    showFavoritesOnly,
-    setShowFavoritesOnly,
-    selectedType,
-    setSelectedType
-  } = useModelsStore()
-  const { isLoading: isLoadingApiKey, isValidated, loadApiKey, hasAttemptedLoad } = useApiKeyStore()
-  const { createTab, tabs, setActiveTab, setSelectedModel } = usePlaygroundStore()
-
-  // Load API key and fetch models on mount
-  useEffect(() => {
-    loadApiKey()
-  }, [loadApiKey])
-
-  useEffect(() => {
-    if (isValidated) {
-      fetchModels()
-    }
-  }, [isValidated, fetchModels])
-
-  // Memoize filtered models with proper dependencies
-  const filteredModels = useMemo(() => {
-    // First filter by favorites if enabled
-    let filtered = showFavoritesOnly
-      ? models.filter(m => favorites.has(m.model_id))
-      : [...models]
-
-    // Then filter by type if selected
-    if (selectedType) {
-      filtered = filtered.filter(m => m.type === selectedType)
-    }
-
-    // Then apply fuzzy search
-    if (searchQuery.trim()) {
-      const results = fuzzySearch(filtered, searchQuery, (model) => [
-        model.name,
-        model.model_id,
-        model.description || '',
-        model.type || ''
-      ])
-      return results.map(r => r.item)
-    }
-
-    // Apply sorting only when not searching
-    return [...filtered].sort((a, b) => {
-      let comparison = 0
-      switch (sortBy) {
-        case 'name':
-          comparison = a.name.localeCompare(b.name)
-          break
-        case 'price':
-          comparison = (a.base_price ?? 0) - (b.base_price ?? 0)
-          break
-        case 'type':
-          comparison = (a.type || '').localeCompare(b.type || '')
-          break
-        case 'sort_order':
-          comparison = (a.sort_order ?? 0) - (b.sort_order ?? 0)
-          break
-      }
-      return sortOrder === 'asc' ? comparison : -comparison
-    })
-  }, [models, searchQuery, sortBy, sortOrder, showFavoritesOnly, selectedType, favorites])
-
-  // Extract unique types from all models for the tag filter
-  const allTypes = useMemo(() => {
-    const types = new Set<string>()
-    models.forEach(model => {
-      if (model.type) {
-        types.add(model.type)
-      }
-    })
-    return Array.from(types).sort()
-  }, [models])
-
-  // Grid virtualization
-  const parentRef = useRef<HTMLDivElement>(null)
-  const [columns, setColumns] = useState(4)
-
-  // Calculate columns based on container width (mobile-first breakpoints)
-  useEffect(() => {
-    const updateColumns = () => {
-      if (parentRef.current) {
-        const width = parentRef.current.offsetWidth
-        if (width >= 1024) setColumns(4)
-        else if (width >= 768) setColumns(3)
-        else if (width >= 480) setColumns(2)
-        else setColumns(1)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { models } = useModelsStore();
+  const { createTab } = usePlaygroundStore();
+
+  const handleSelectModel = useCallback(
+    (modelId: string) => {
+      const model = models.find((m) => m.model_id === modelId);
+      if (model) {
+        createTab(model);
+        navigate(`/playground/${encodeURIComponent(modelId)}`);
       }
-    }
-
-    updateColumns()
-    const resizeObserver = new ResizeObserver(updateColumns)
-    if (parentRef.current) {
-      resizeObserver.observe(parentRef.current)
-    }
-    return () => resizeObserver.disconnect()
-  }, [])
-
-  // Group models into rows
-  const rows = useMemo(() => {
-    const result: Model[][] = []
-    for (let i = 0; i < filteredModels.length; i += columns) {
-      result.push(filteredModels.slice(i, i + columns))
-    }
-    return result
-  }, [filteredModels, columns])
-
-  const rowVirtualizer = useVirtualizer({
-    count: rows.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 110, // Estimated row height
-    overscan: 3,
-  })
-
-  // Memoized handlers
-  const handleOpenPlayground = useCallback((modelId: string) => {
-    const model = models.find(m => m.model_id === modelId)
-    if (tabs.length === 1 && tabs[0].selectedModel == null) {
-      setActiveTab(tabs[0].id)
-      setSelectedModel(model || null)
-    } else {
-      createTab(model)
-    }
-    navigate(`/playground/${encodeURIComponent(modelId)}`)
-  }, [models, tabs, setActiveTab, setSelectedModel, createTab, navigate])
-
-  const handleOpenInNewTab = useCallback((e: React.MouseEvent, modelId: string) => {
-    e.stopPropagation()
-    const model = models.find(m => m.model_id === modelId)
-    createTab(model)
-    navigate(`/playground/${encodeURIComponent(modelId)}`)
-  }, [models, createTab, navigate])
-
-  const handleToggleFavorite = useCallback((e: React.MouseEvent, modelId: string) => {
-    e.stopPropagation()
-    toggleFavorite(modelId)
-  }, [toggleFavorite])
-
-  // Show loading state while API key is being loaded from storage
-  if (isLoadingApiKey || !hasAttemptedLoad) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    )
-  }
+    },
+    [models, createTab, navigate],
+  );
 
   return (
-    <div className="flex h-full flex-col relative overflow-hidden">
-      {/* Header */}
-      <div className="page-header px-4 md:px-6 py-4 relative z-10">
-        <div className="flex flex-col gap-1.5 md:flex-row md:items-baseline md:gap-3 mb-4">
-          <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
-            <LayoutGrid className="h-5 w-5 text-primary" />
-            {t('models.title')}
-          </h1>
-          <p className="text-muted-foreground text-xs md:text-sm hidden md:block">{t('models.description')}</p>
-        </div>
-
-        {/* Search, Filters and Sort */}
-        <div className="flex items-center gap-3">
-          <SearchInput
-            value={searchQuery}
-            onChange={setSearchQuery}
-            onClear={() => setSearchQuery('')}
-            placeholder={t('models.searchPlaceholder')}
-          />
-
-          {/* Favorites Filter */}
-          <Button
-            variant={showFavoritesOnly ? "default" : "outline"}
-            size="sm"
-            onClick={() => setShowFavoritesOnly(!showFavoritesOnly)}
-            title={showFavoritesOnly ? t('models.showAll') : t('models.showFavoritesOnly')}
-          >
-            <Star className={cn("h-4 w-4", showFavoritesOnly && "fill-current")} />
-          </Button>
-
-          {/* Sort Controls */}
-          <div className="flex items-center gap-1">
-            <Select value={sortBy} onValueChange={(value) => setSortBy(value as SortBy)}>
-              <SelectTrigger className="w-[110px] h-9">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="sort_order">{t('models.popularity')}</SelectItem>
-                <SelectItem value="name">{t('models.name')}</SelectItem>
-                <SelectItem value="price">{t('models.price')}</SelectItem>
-                <SelectItem value="type">{t('models.type')}</SelectItem>
-              </SelectContent>
-            </Select>
-            <Button variant="outline" size="sm" className="h-9 w-9 p-0" onClick={toggleSortOrder}>
-              {sortOrder === 'asc' ? (
-                <ArrowUp className="h-4 w-4" />
-              ) : (
-                <ArrowDown className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-
-          {/* Refresh */}
-          <Button variant="outline" size="sm" className="shrink-0 ml-auto" onClick={() => fetchModels(true)}>
-            <RefreshCw className="mr-2 h-4 w-4" />
-            {t('common.refresh')}
-          </Button>
-        </div>
-
-        {/* Tag Filter Bar */}
-        {allTypes.length > 0 && (
-          <div className="flex items-center gap-2 overflow-x-auto pb-1 scrollbar-thin mt-3">
-            <span className="text-sm text-muted-foreground shrink-0">{t('models.type')}:</span>
-            <Button
-              variant={selectedType === null ? "default" : "ghost"}
-              size="sm"
-              onClick={() => setSelectedType(null)}
-              className="shrink-0 h-8 px-3 text-sm"
-            >
-              {t('common.all')}
-            </Button>
-            {allTypes.map((type) => (
-              <Button
-                key={type}
-                variant={selectedType === type ? "default" : "ghost"}
-                size="sm"
-                onClick={() => setSelectedType(selectedType === type ? null : type)}
-                className="shrink-0 h-8 px-3 text-sm capitalize"
-              >
-                {type}
-              </Button>
-            ))}
-          </div>
-        )}
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Page Title */}
+      <div className="px-4 md:px-6 py-4 pt-14 md:pt-4 border-b border-border shrink-0">
+        <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
+          <Layers className="h-5 w-5 text-primary" />
+          {t("playground.rightPanel.models", "All Models")}
+        </h1>
       </div>
-
-      {/* Content - Virtualized Grid */}
-      <div ref={parentRef} className="flex-1 overflow-auto px-6 py-5 relative z-10">
-        {isLoading ? (
-          <div className="flex items-center justify-center py-8">
-            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : error ? (
-          <div className="text-center py-8">
-            <p className="text-destructive text-sm">{error}</p>
-            <Button variant="outline" size="sm" className="mt-3" onClick={() => fetchModels(true)}>
-              {t('errors.tryAgain')}
-            </Button>
-          </div>
-        ) : filteredModels.length === 0 ? (
-          <div className="text-center py-8">
-            <p className="text-muted-foreground text-sm">{t('models.noResults')}</p>
-          </div>
-        ) : (
-          <div
-            style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
-              width: '100%',
-              position: 'relative',
-            }}
-          >
-            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-              const rowModels = rows[virtualRow.index]
-              return (
-                <div
-                  key={virtualRow.key}
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: `${virtualRow.size}px`,
-                    transform: `translateY(${virtualRow.start}px)`,
-                  }}
-                >
-                  <div className="grid gap-3" style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>
-                    {rowModels.map((model) => (
-                      <ModelCard
-                        key={model.model_id}
-                        model={model}
-                        isFavorite={isFavorite(model.model_id)}
-                        onOpenPlayground={handleOpenPlayground}
-                        onOpenInNewTab={handleOpenInNewTab}
-                        onToggleFavorite={handleToggleFavorite}
-                        t={t}
-                      />
-                    ))}
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        )}
+      {/* ExplorePanel fills the rest */}
+      <div className="flex-1 overflow-hidden">
+        <ExplorePanel onSelectModel={handleSelectModel} />
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/pages/PlaygroundPage.tsx b/src/pages/PlaygroundPage.tsx
index 9b2232e8..4292d67e 100644
--- a/src/pages/PlaygroundPage.tsx
+++ b/src/pages/PlaygroundPage.tsx
@@ -1,46 +1,99 @@
-import { useState, useEffect, useCallback, useRef, useMemo, Fragment } from 'react'
-import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { usePlaygroundStore, persistPlaygroundSession, hydratePlaygroundSession } from '@/stores/playgroundStore'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { useTemplateStore } from '@/stores/templateStore'
-import { apiClient } from '@/api/client'
-import { DynamicForm } from '@/components/playground/DynamicForm'
-import { OutputDisplay } from '@/components/playground/OutputDisplay'
-import { ModelSelector } from '@/components/playground/ModelSelector'
-import { BatchControls } from '@/components/playground/BatchControls'
-import { BatchOutputGrid } from '@/components/playground/BatchOutputGrid'
-import { HistoryPanel } from '@/components/playground/HistoryPanel'
-import { Button } from '@/components/ui/button'
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+  useTransition,
+} from "react";
+import { flushSync } from "react-dom";
+import { useParams, useNavigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  usePlaygroundStore,
+  persistPlaygroundSession,
+  hydratePlaygroundSession,
+} from "@/stores/playgroundStore";
+import { useModelsStore } from "@/stores/modelsStore";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { useTemplateStore } from "@/stores/templateStore";
+import { DynamicForm } from "@/components/playground/DynamicForm";
+import { ModelSelector } from "@/components/playground/ModelSelector";
+import { BatchControls } from "@/components/playground/BatchControls";
+import { HistoryDrawer } from "@/components/playground/HistoryDrawer";
+import { ResultPanel } from "@/components/playground/ResultPanel";
+// TemplatesPanel removed from top bar (sidebar entry remains)
+import { FeaturedModelsPanel } from "@/components/playground/FeaturedModelsPanel";
+import { TemplatesPanel } from "@/components/playground/TemplatesPanel";
+import {
+  RotateCcw,
+  Loader2,
+  Plus,
+  X,
+  Save,
+  Sparkles,
+  PlayCircle,
+  LayoutGrid,
+  Compass,
+  Layers,
+  ChevronDown,
+  Clock,
+  FolderOpen,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "@/hooks/useToast";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { RotateCcw, Loader2, Plus, X, BookOpen, Save, Globe, Sparkles } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { toast } from '@/hooks/useToast'
-import { TemplateDialog, type TemplateFormData } from '@/components/templates/TemplateDialog'
-import { TemplatePickerDialog } from '@/components/templates/TemplatePickerDialog'
+} from "@/components/ui/tooltip";
+import {
+  TemplateDialog,
+  type TemplateFormData,
+} from "@/components/templates/TemplateDialog";
+
+type RightPanelTab = "result" | "featured" | "templates";
+
+/** Format raw model name/id for display. e.g. "google/nano-banana-pro/text-to-image" → "Google / Nano Banana Pro" */
+function formatModelDisplay(name: string): string {
+  const parts = name.split("/");
+  const fmt = (s: string) =>
+    s
+      .split("-")
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(" ");
+  if (parts.length >= 2) return `${fmt(parts[0])} / ${fmt(parts[1])}`;
+  return fmt(parts[0]);
+}
+
+const isCapacitorNative = () => {
+  try {
+    return !!(window as any).Capacitor?.isNativePlatform?.();
+  } catch {
+    return false;
+  }
+};
 
 export function PlaygroundPage() {
-  const { t } = useTranslation()
-  const params = useParams()
+  const { t } = useTranslation();
+  const params = useParams();
   // Support both old format (playground/:modelId) and new format (playground/*)
-  const modelId = params['*'] || params.modelId
-  const [searchParams, setSearchParams] = useSearchParams()
-  const navigate = useNavigate()
-  const { models, fetchModels } = useModelsStore()
-  const { isLoading: isLoadingApiKey, isValidated, loadApiKey, apiKey, hasAttemptedLoad } = useApiKeyStore()
+  const modelId = params["*"] || params.modelId;
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const { models, fetchModels } = useModelsStore();
+  const {
+    isLoading: isLoadingApiKey,
+    isValidated,
+    loadApiKey,
+    hasAttemptedLoad,
+  } = useApiKeyStore();
   const {
     tabs,
     activeTabId,
     createTab,
     closeTab,
     setActiveTab,
-    reorderTab,
     getActiveTab,
     setSelectedModel,
     setFormValue,
@@ -53,511 +106,624 @@ export function PlaygroundPage() {
     generateBatchInputs,
     setUploading,
     selectHistoryItem,
-  } = usePlaygroundStore()
-  const { templates, loadTemplates, createTemplate, migrateFromLocalStorage } = useTemplateStore()
+    reorderTab,
+  } = usePlaygroundStore();
+  const { templates, loadTemplates, createTemplate, migrateFromLocalStorage } =
+    useTemplateStore();
 
-  const activeTab = getActiveTab()
+  const activeTab = getActiveTab();
 
   // History-aware output display
-  const historyIndex = activeTab?.selectedHistoryIndex ?? null
-  const historyItem = historyIndex !== null ? activeTab?.generationHistory[historyIndex] : null
-  const displayedPrediction = historyItem ? historyItem.prediction : (activeTab?.currentPrediction ?? null)
-  const displayedOutputs = historyItem ? historyItem.outputs : (activeTab?.outputs ?? [])
+  const historyIndex = activeTab?.selectedHistoryIndex ?? null;
+  const historyItem =
+    historyIndex !== null ? activeTab?.generationHistory[historyIndex] : null;
+  const displayedPrediction = historyItem
+    ? historyItem.prediction
+    : (activeTab?.currentPrediction ?? null);
+  const displayedOutputs = historyItem
+    ? historyItem.outputs
+    : (activeTab?.outputs ?? []);
 
-  const templateLoadedRef = useRef<string | null>(null)
-  const initialTabCreatedRef = useRef(false)
+  const historyLen = activeTab?.generationHistory.length ?? 0;
+  const navigateHistory = useCallback(
+    (direction: "prev" | "next") => {
+      if (historyLen === 0) return;
+      const cur = historyIndex ?? 0;
+      if (direction === "prev") {
+        selectHistoryItem(cur === 0 ? historyLen - 1 : cur - 1);
+      } else {
+        selectHistoryItem(cur === historyLen - 1 ? 0 : cur + 1);
+      }
+    },
+    [historyLen, historyIndex, selectHistoryItem],
+  );
+
+  const templateLoadedRef = useRef<string | null>(null);
+  const initialTabCreatedRef = useRef(false);
 
   // Mobile view state: 'config' or 'output'
-  const [mobileView, setMobileView] = useState<'config' | 'output'>('config')
+  const [mobileView, setMobileView] = useState<"config" | "output">("config");
 
-  // Tab overflow detection (Chrome-like + button behavior)
-  const tabScrollRef = useRef<HTMLDivElement>(null)
-  const [tabsOverflow, setTabsOverflow] = useState(false)
+  // Resizable left panel
+  const [leftPanelWidth, setLeftPanelWidth] = useState(300);
+  const isDraggingRef = useRef(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      isDraggingRef.current = true;
+      const startX = e.clientX;
+      const startWidth = leftPanelWidth;
+      const onMove = (ev: MouseEvent) => {
+        if (!isDraggingRef.current) return;
+        const delta = ev.clientX - startX;
+        const newWidth = Math.max(220, Math.min(500, startWidth + delta));
+        setLeftPanelWidth(newWidth);
+      };
+      const onUp = () => {
+        isDraggingRef.current = false;
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [leftPanelWidth],
+  );
 
+  // Right panel tab state
+  const isMobile = isCapacitorNative();
+  // Persist rightPanelTab across navigation using sessionStorage
+  const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(() => {
+    // If arriving with a modelId in the URL, go straight to result
+    if (params["*"] || params.modelId) return "result";
+    const saved = sessionStorage.getItem(
+      "pg_rightPanelTab",
+    ) as RightPanelTab | null;
+    return saved ?? (tabs.length > 0 ? "result" : "featured");
+  });
+  const [, startTransition] = useTransition();
+  const switchTab = useCallback((tab: RightPanelTab) => {
+    startTransition(() => {
+      setRightPanelTab(tab);
+      sessionStorage.setItem("pg_rightPanelTab", tab);
+    });
+  }, []);
+
+  // When all tabs are closed and we're on the Result tab, switch to Featured
   useEffect(() => {
-    const el = tabScrollRef.current
-    if (!el) return
-    const check = () => setTabsOverflow(el.scrollWidth > el.clientWidth)
-    const ro = new ResizeObserver(check)
-    ro.observe(el)
-    check()
-    return () => ro.disconnect()
-  }, [tabs.length])
-
-  // Tab drag-and-drop state (desktop only)
-  const [dragTabIndex, setDragTabIndex] = useState<number | null>(null)
-  const [dropTargetIndex, setDropTargetIndex] = useState<number | null>(null)
-
-  const handleDragStart = useCallback((e: React.DragEvent, index: number) => {
-    setDragTabIndex(index)
-    e.dataTransfer.effectAllowed = 'move'
-    if (e.currentTarget instanceof HTMLElement) {
-      e.dataTransfer.setDragImage(e.currentTarget, e.currentTarget.offsetWidth / 2, e.currentTarget.offsetHeight / 2)
+    if (!activeTab && rightPanelTab === "result") {
+      setRightPanelTab("featured");
+      sessionStorage.setItem("pg_rightPanelTab", "featured");
     }
-  }, [])
+  }, [activeTab, rightPanelTab, isMobile]);
 
-  const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
-    e.preventDefault()
-    e.dataTransfer.dropEffect = 'move'
-    if (dragTabIndex !== null && index !== dragTabIndex) {
-      setDropTargetIndex(index)
-    }
-  }, [dragTabIndex])
+  // Top search bar state — removed: search is now inline per tab
 
-  const handleDragEnd = useCallback(() => {
-    if (dragTabIndex !== null && dropTargetIndex !== null && dragTabIndex !== dropTargetIndex) {
-      reorderTab(dragTabIndex, dropTargetIndex)
-    }
-    setDragTabIndex(null)
-    setDropTargetIndex(null)
-  }, [dragTabIndex, dropTargetIndex, reorderTab])
+  // Workspace sessions dropdown state — removed, now using browser-style tabs
+
+  // Tab scroll ref for overflow detection
+  const pgTabScrollRef = useRef<HTMLDivElement>(null);
+
+  // Tab list dropdown state
+  const [tabListOpen, setTabListOpen] = useState(false);
+  const tabListRef = useRef<HTMLDivElement>(null);
+
+  // Tab drag-to-reorder state
+  const [dragTabId, setDragTabId] = useState<string | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<{
+    tabId: string;
+    side: "left" | "right";
+  } | null>(null);
+
+  // Close tab list dropdown on click outside
+  useEffect(() => {
+    if (!tabListOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        tabListRef.current &&
+        !tabListRef.current.contains(e.target as Node)
+      ) {
+        setTabListOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [tabListOpen]);
+
+  // Tab drag handlers
+  const handleTabDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      setDragTabId(tabId);
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", tabId);
+    },
+    [],
+  );
+
+  const handleTabDragOver = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      if (!dragTabId || tabId === dragTabId) {
+        setDropIndicator(null);
+        return;
+      }
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const side = e.clientX - rect.left < rect.width / 2 ? "left" : "right";
+      setDropIndicator({ tabId, side });
+    },
+    [dragTabId],
+  );
+
+  const handleTabDrop = useCallback(
+    (e: React.DragEvent, targetTabId: string) => {
+      e.preventDefault();
+      if (!dragTabId || dragTabId === targetTabId) {
+        setDragTabId(null);
+        setDropIndicator(null);
+        return;
+      }
+      const fromIdx = tabs.findIndex((t) => t.id === dragTabId);
+      const toIdx = tabs.findIndex((t) => t.id === targetTabId);
+      if (fromIdx !== -1 && toIdx !== -1) {
+        const side = dropIndicator?.side ?? "right";
+        const insertIdx =
+          fromIdx < toIdx
+            ? side === "left"
+              ? toIdx - 1
+              : toIdx
+            : side === "left"
+              ? toIdx
+              : toIdx + 1;
+        reorderTab(fromIdx, Math.max(0, insertIdx));
+      }
+      setDragTabId(null);
+      setDropIndicator(null);
+    },
+    [dragTabId, dropIndicator, tabs, reorderTab],
+  );
 
-  const handleDragLeave = useCallback(() => {
-    setDropTargetIndex(null)
-  }, [])
+  const handleTabDragEnd = useCallback(() => {
+    setDragTabId(null);
+    setDropIndicator(null);
+  }, []);
 
   // Template dialog states
-  const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false)
+  const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false);
 
   // Generate batch preview inputs
   const batchPreviewInputs = useMemo(() => {
-    if (!activeTab) return []
-    const { batchConfig } = activeTab
-    if (!batchConfig.enabled) return []
-    return generateBatchInputs()
-  }, [activeTab, generateBatchInputs])
-
-  // Dynamic pricing state
-  const [calculatedPrice, setCalculatedPrice] = useState<number | null>(null)
-  const [isPricingLoading, setIsPricingLoading] = useState(false)
-  const pricingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+    if (!activeTab) return [];
+    const { batchConfig } = activeTab;
+    if (!batchConfig.enabled) return [];
+    return generateBatchInputs();
+  }, [activeTab, generateBatchInputs]);
 
   // Migrate templates and load on mount
   useEffect(() => {
     const init = async () => {
-      await migrateFromLocalStorage()
-      await loadTemplates({ templateType: 'playground' })
-    }
-    init()
+      await migrateFromLocalStorage();
+      await loadTemplates({ templateType: "playground" });
+    };
+    init();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []) // Only run once on mount
+  }, []); // Only run once on mount
 
   // Hydrate playground session from Electron persistent storage on first mount
   useEffect(() => {
-    hydratePlaygroundSession()
-  }, [])
+    hydratePlaygroundSession();
+  }, []);
 
   // Persist playground tabs (debounced) so they restore on next visit
   useEffect(() => {
-    let timer: ReturnType<typeof setTimeout>
+    let timer: ReturnType<typeof setTimeout>;
     const unsub = usePlaygroundStore.subscribe(() => {
-      clearTimeout(timer)
-      timer = setTimeout(persistPlaygroundSession, 300)
-    })
+      clearTimeout(timer);
+      timer = setTimeout(persistPlaygroundSession, 300);
+    });
     return () => {
-      clearTimeout(timer)
-      unsub()
-    }
-  }, [])
+      clearTimeout(timer);
+      unsub();
+    };
+  }, []);
 
   // Load API key and fetch models on mount
   useEffect(() => {
-    loadApiKey()
-  }, [loadApiKey])
+    loadApiKey();
+  }, [loadApiKey]);
 
   useEffect(() => {
     if (isValidated) {
-      fetchModels()
-    }
-  }, [isValidated, fetchModels])
-
-  // Calculate dynamic pricing with debounce
-  useEffect(() => {
-    if (!activeTab?.selectedModel || !apiKey) {
-      setCalculatedPrice(null)
-      return
-    }
-
-    // Clear previous timeout
-    if (pricingTimeoutRef.current) {
-      clearTimeout(pricingTimeoutRef.current)
-    }
-
-    // Debounce pricing calculation
-    pricingTimeoutRef.current = setTimeout(async () => {
-      setIsPricingLoading(true)
-      try {
-        const price = await apiClient.calculatePricing(
-          activeTab.selectedModel!.model_id,
-          activeTab.formValues
-        )
-        setCalculatedPrice(price)
-      } catch {
-        // Fall back to base price on error
-        setCalculatedPrice(null)
-      } finally {
-        setIsPricingLoading(false)
-      }
-    }, 500)
-
-    return () => {
-      if (pricingTimeoutRef.current) {
-        clearTimeout(pricingTimeoutRef.current)
-      }
+      fetchModels();
     }
-  }, [activeTab?.selectedModel, activeTab?.formValues, apiKey, tabs])
+  }, [isValidated, fetchModels]);
 
   // Load template from URL query param
   useEffect(() => {
-    const templateId = searchParams.get('template')
-    if (templateId && templates.length > 0 && activeTab && templateLoadedRef.current !== templateId) {
-      const template = templates.find(t => t.id === templateId)
+    const templateId = searchParams.get("template");
+    if (
+      templateId &&
+      templates.length > 0 &&
+      activeTab &&
+      templateLoadedRef.current !== templateId
+    ) {
+      const template = templates.find((t) => t.id === templateId);
       if (template && template.playgroundData) {
-        setFormValues(template.playgroundData.values)
-        templateLoadedRef.current = templateId
+        setFormValues(template.playgroundData.values);
+        templateLoadedRef.current = templateId;
         toast({
-          title: t('playground.templateLoaded'),
-          description: t('playground.loadedTemplate', { name: template.name }),
-        })
+          title: t("playground.templateLoaded"),
+          description: t("playground.loadedTemplate", { name: template.name }),
+        });
         // Clear the query param after loading
-        setSearchParams({}, { replace: true })
+        setSearchParams({}, { replace: true });
       }
     }
-  }, [searchParams, templates, activeTab, setFormValues, setSearchParams, t])
+  }, [searchParams, templates, activeTab, setFormValues, setSearchParams, t]);
 
   const handleSaveTemplate = async (data: TemplateFormData) => {
-    if (!activeTab?.selectedModel) return
+    if (!activeTab?.selectedModel) return;
 
     await createTemplate({
       name: data.name,
       description: data.description || null,
       tags: data.tags,
       thumbnail: data.thumbnail || null,
-      type: 'custom',
-      templateType: 'playground',
+      type: "custom",
+      templateType: "playground",
       playgroundData: {
         modelId: activeTab.selectedModel.model_id,
         modelName: activeTab.selectedModel.name,
-        values: activeTab.formValues
-      }
-    })
+        values: activeTab.formValues,
+      },
+    });
     toast({
-      title: t('playground.templateSaved'),
-      description: t('playground.savedAs', { name: data.name }),
-    })
-  }
+      title: t("playground.templateSaved"),
+      description: t("playground.savedAs", { name: data.name }),
+    });
+  };
 
-  // Create tab when navigating to playground (only on initial load)
+  // Create tab when navigating to playground with a specific model (only on initial load)
   useEffect(() => {
-    if (models.length > 0 && tabs.length === 0 && !initialTabCreatedRef.current) {
-      initialTabCreatedRef.current = true
-      if (modelId) {
-        // Try to decode, but use original if decoding fails (for paths with slashes)
-        let decodedId = modelId
-        try {
-          decodedId = decodeURIComponent(modelId)
-        } catch {
-          // Use original modelId if decoding fails
-        }
-        const model = models.find(m => m.model_id === decodedId)
-        createTab(model)
-      } else {
-        // Without modelId: create empty tab
-        createTab()
+    if (
+      models.length > 0 &&
+      tabs.length === 0 &&
+      !initialTabCreatedRef.current &&
+      modelId
+    ) {
+      initialTabCreatedRef.current = true;
+      // Try to decode, but use original if decoding fails (for paths with slashes)
+      let decodedId = modelId;
+      try {
+        decodedId = decodeURIComponent(modelId);
+      } catch {
+        // Use original modelId if decoding fails
       }
+      const model = models.find((m) => m.model_id === decodedId);
+      createTab(model);
     }
-  }, [modelId, models, tabs.length, createTab])
+  }, [modelId, models, tabs.length, createTab]);
 
   // Set model from URL only when the active tab has no model (e.g. initial load or new empty tab).
   // Do NOT overwrite when the tab already has a model, so tab switching never wipes form values
   // (otherwise URL can lag and we'd set the wrong model on the newly active tab and reset its form).
   useEffect(() => {
-    if (!modelId || models.length === 0 || !activeTab || activeTab.selectedModel != null) return
-    let decodedId = modelId
+    if (
+      !modelId ||
+      models.length === 0 ||
+      !activeTab ||
+      activeTab.selectedModel != null
+    )
+      return;
+    let decodedId = modelId;
     try {
-      decodedId = decodeURIComponent(modelId)
+      decodedId = decodeURIComponent(modelId);
     } catch {
       // Use original modelId if decoding fails
     }
-    const model = models.find(m => m.model_id === decodedId)
-    if (model) setSelectedModel(model)
-  }, [modelId, models, activeTab, setSelectedModel])
+    const model = models.find((m) => m.model_id === decodedId);
+    if (model) setSelectedModel(model);
+  }, [modelId, models, activeTab, setSelectedModel]);
 
   const handleModelChange = (modelId: string) => {
-    const model = models.find(m => m.model_id === modelId)
+    const model = models.find((m) => m.model_id === modelId);
     if (model) {
-      setSelectedModel(model)
-      // Use modelId directly in path (supports slashes in model IDs like wavespeed-ai/z-image/turbo)
-      navigate(`/playground/${modelId}`)
+      if (activeTab) {
+        setSelectedModel(model);
+      } else {
+        createTab(model);
+      }
+      navigate(`/playground/${modelId}`, { replace: true });
+      if (rightPanelTab !== "result") {
+        setRightPanelTab("result");
+        sessionStorage.setItem("pg_rightPanelTab", "result");
+      }
     }
-  }
+  };
 
-  const handleSetDefaults = useCallback((defaults: Record<string, unknown>) => {
-    setFormValues(defaults)
-  }, [setFormValues])
+  const handleSetDefaults = useCallback(
+    (defaults: Record<string, unknown>) => {
+      setFormValues(defaults);
+    },
+    [setFormValues],
+  );
 
-  const handleRun = async () => {
-    if (!activeTab) return
+  const handleRun = useCallback(async () => {
+    if (!activeTab) return;
 
     // Switch to output view on mobile when running
-    setMobileView('output')
+    setMobileView("output");
+    // Auto-switch to Result tab so user sees the output
+    switchTab("result");
 
-    const { batchConfig } = activeTab
+    const { batchConfig } = activeTab;
     if (batchConfig.enabled && batchConfig.repeatCount > 1) {
-      await runBatch()
+      await runBatch();
     } else {
-      await runPrediction()
+      await runPrediction();
     }
-  }
+  }, [activeTab, switchTab, runBatch, runPrediction]);
+
+  // Ctrl+Enter / Cmd+Enter to run; Ctrl+W / Cmd+W to close active tab
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        e.preventDefault();
+        if (activeTab?.selectedModel && !activeTab.isRunning) {
+          handleRun();
+        }
+      }
+      if ((e.ctrlKey || e.metaKey) && e.key === "w") {
+        e.preventDefault();
+        if (activeTabId) closeTab(activeTabId);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [activeTab, activeTabId, handleRun, closeTab]);
 
   const handleReset = () => {
-    resetForm()
-    clearBatchResults()
-  }
+    resetForm();
+    clearBatchResults();
+  };
 
   const handleNewTab = () => {
-    const currentModel = activeTab?.selectedModel
-    createTab(currentModel || undefined)
+    const currentModel = activeTab?.selectedModel;
+    createTab(currentModel || undefined);
+    // Stay on result panel, not featured
+    setRightPanelTab("result");
+    sessionStorage.setItem("pg_rightPanelTab", "result");
     if (currentModel) {
-      navigate(`/playground/${currentModel.model_id}`)
+      navigate(`/playground/${currentModel.model_id}`);
     } else {
-      navigate('/playground')
+      navigate("/playground");
     }
-    // Auto-scroll to show the newly created tab
+    // Scroll to show the newest tab
     requestAnimationFrame(() => {
-      if (tabScrollRef.current) {
-        tabScrollRef.current.scrollLeft = tabScrollRef.current.scrollWidth
+      if (pgTabScrollRef.current) {
+        pgTabScrollRef.current.scrollLeft = pgTabScrollRef.current.scrollWidth;
       }
-    })
-  }
+    });
+  };
 
-  const handleCloseTab = (e: React.MouseEvent, tabId: string) => {
-    e.stopPropagation()
-    closeTab(tabId)
-  }
+  // Explore: select a featured model → open in new tab
+  const handleExploreSelectFeatured = useCallback(
+    (primaryVariant: string) => {
+      const model = models.find((m) => m.model_id === primaryVariant);
+      if (model) {
+        createTab(model);
+        navigate(`/playground/${primaryVariant}`);
+        setRightPanelTab("result");
+        sessionStorage.setItem("pg_rightPanelTab", "result");
+      }
+    },
+    [models, createTab, navigate],
+  );
 
-  const handleTabClick = (tabId: string) => {
-    setActiveTab(tabId)
-    const tab = tabs.find(t => t.id === tabId)
-    if (tab?.selectedModel) {
-      navigate(`/playground/${encodeURIComponent(tab.selectedModel.model_id)}`)
-    } else {
-      navigate('/playground')
-    }
-  }
+  // Templates panel: use a template
+  const handleUseTemplateFromPanel = useCallback(
+    (template: import("@/types/template").Template) => {
+      if (template.playgroundData) {
+        flushSync(() => {
+          if (!activeTab) {
+            const model = template.playgroundData!.modelId
+              ? models.find(
+                  (m) => m.model_id === template.playgroundData!.modelId,
+                )
+              : undefined;
+            createTab(model);
+          } else {
+            if (
+              template.playgroundData!.modelId &&
+              activeTab.selectedModel?.model_id !==
+                template.playgroundData!.modelId
+            ) {
+              const model = models.find(
+                (m) => m.model_id === template.playgroundData!.modelId,
+              );
+              if (model) setSelectedModel(model);
+            }
+            setFormValues(template.playgroundData!.values);
+          }
+          setRightPanelTab("result");
+          sessionStorage.setItem("pg_rightPanelTab", "result");
+        });
 
-  const handleViewDocs = () => {
-    if (activeTab?.selectedModel) {
-      // Transform model_id to docs URL format
-      // wavespeed-ai models: "wavespeed-ai/z-image/turbo" -> "wavespeed-ai/z-image-turbo"
-      // other models: "kwaivgi/kling-v2.6-pro/image-to-video" -> "kwaivgi/kwaivgi-kling-v2.6-pro-image-to-video"
-      const modelId = activeTab.selectedModel.model_id
-      const parts = modelId.split('/')
-      let formattedId: string
-      if (parts.length > 1) {
-        const org = parts[0]
-        const rest = parts.slice(1).join('-')
-        if (org === 'wavespeed-ai') {
-          formattedId = `${org}/${rest}`
-        } else {
-          // Non-wavespeed-ai models: prefix rest with org name
-          formattedId = `${org}/${org}-${rest}`
+        if (template.playgroundData.modelId) {
+          navigate(`/playground/${template.playgroundData.modelId}`, {
+            replace: true,
+          });
         }
-      } else {
-        formattedId = modelId
-      }
-      const docsUrl = `https://wavespeed.ai/docs/docs-api/${formattedId}`
-      if (window.electronAPI?.openExternal) {
-        window.electronAPI.openExternal(docsUrl)
-      } else {
-        window.open(docsUrl, '_blank')
-      }
-    }
-  }
 
-  const handleViewWebPage = () => {
-    if (activeTab?.selectedModel) {
-      // Model webpage URL uses the model_id directly
-      const webUrl = `https://wavespeed.ai/models/${activeTab.selectedModel.model_id}`
-      if (window.electronAPI?.openExternal) {
-        window.electronAPI.openExternal(webUrl)
-      } else {
-        window.open(webUrl, '_blank')
+        // For new tab: set form values after tab is active
+        if (!activeTab) {
+          setTimeout(() => {
+            setFormValues(template.playgroundData!.values);
+          }, 0);
+        }
+
+        toast({
+          title: t("playground.templateLoaded"),
+          description: t("playground.loadedTemplate", { name: template.name }),
+        });
       }
-    }
-  }
+    },
+    [
+      activeTab,
+      models,
+      setSelectedModel,
+      setFormValues,
+      createTab,
+      navigate,
+      t,
+    ],
+  );
 
-  const handleLoadTemplate = () => {
-    setShowTemplateDialog(true)
-  }
+  const handleCloseTab = (e: React.MouseEvent, tabId: string) => {
+    e.stopPropagation();
+    closeTab(tabId);
+  };
 
-  // Template dialog state
-  const [showTemplateDialog, setShowTemplateDialog] = useState(false)
+  const handleTabClick = (tabId: string) => {
+    if (tabId === activeTabId && rightPanelTab === "result") return;
+    // Batch zustand + React state updates into a single synchronous commit to prevent flicker
+    flushSync(() => {
+      if (rightPanelTab !== "result") {
+        setRightPanelTab("result");
+        sessionStorage.setItem("pg_rightPanelTab", "result");
+      }
+      setActiveTab(tabId);
+    });
+    // Sync URL without triggering React Router re-render
+    const tab = tabs.find((t) => t.id === tabId);
+    const newUrl = tab?.selectedModel
+      ? `/playground/${encodeURIComponent(tab.selectedModel.model_id)}`
+      : "/playground";
+    window.history.replaceState(null, "", newUrl);
+  };
 
-  // Show loading state while API key is being loaded from storage
-  // Also show loading when models are loading (needed for model selector)
-  if (isLoadingApiKey || !hasAttemptedLoad || (isValidated && models.length === 0)) {
+  // Block render only while the API key is being read from disk.
+  // Once we have the key (or confirmed there's none), show the UI immediately.
+  // Models come from localStorage cache instantly, so no need to wait for network.
+  if (isLoadingApiKey || !hasAttemptedLoad) {
     return (
       <div className="flex h-full items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
   return (
     <div className="flex h-full flex-col md:pt-0">
-      {/* Tab Bar */}
-      <div className="backdrop-blur supports-[backdrop-filter]:bg-transparent">
-        <div className="flex items-center h-12 border-b border-border">
-          <div ref={tabScrollRef} className="flex-1 min-w-0 overflow-x-auto hide-scrollbar">
-            <div className="flex items-center px-2 w-max">
-              {/* Templates button */}
-              <Tooltip delayDuration={0}>
-                <TooltipTrigger asChild>
-                  <button
-                    onClick={handleLoadTemplate}
-                    className={cn(
-                      'h-7 w-7 rounded-md text-xs font-medium transition-colors flex items-center justify-center mr-1 shrink-0',
-                      showTemplateDialog
-                        ? 'bg-primary text-primary-foreground'
-                        : 'text-muted-foreground hover:text-foreground hover:bg-accent'
-                    )}
-                  >
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                      <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/><path d="M13 13h4"/><path d="M13 17h4"/>
-                    </svg>
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="bottom">{t('templates.title', 'Templates')}</TooltipContent>
-              </Tooltip>
-              <div className="w-px h-5 bg-border mr-1 shrink-0" />
-              {tabs.map((tab, index) => (
-                <Fragment key={tab.id}>
-                  {index > 0 && <div className="w-px h-4 bg-border/70 shrink-0 mx-0.5" />}
-                <div
-                  draggable
-                  onDragStart={(e) => handleDragStart(e, index)}
-                  onDragOver={(e) => handleDragOver(e, index)}
-                  onDragEnd={handleDragEnd}
-                  onDragLeave={handleDragLeave}
-                  onClick={() => handleTabClick(tab.id)}
-                  role="tab"
-                  tabIndex={0}
-                  onKeyDown={(e) => e.key === 'Enter' && handleTabClick(tab.id)}
-                  className={cn(
-                    'group relative flex h-8 items-center gap-2 px-3 text-xs transition-all cursor-pointer select-none shrink-0',
-                    'first:rounded-l-md last:rounded-r-md',
-                    'hover:bg-primary/10 dark:hover:bg-muted/60',
-                    tab.id === activeTabId
-                      ? 'bg-primary/15 dark:bg-primary/10 text-foreground font-medium'
-                      : 'bg-primary/[0.06] dark:bg-muted/20 text-muted-foreground',
-                    dragTabIndex === index && 'opacity-40',
-                    dropTargetIndex === index && 'border-primary ring-1 ring-primary/50'
-                  )}
-                >
-                  {tab.isRunning && (
-                    <Loader2 className="h-3 w-3 animate-spin" />
-                  )}
-                  <Tooltip delayDuration={300}>
+      <div className="flex flex-col flex-1 overflow-hidden">
+        {/* Mobile Tab Switcher */}
+        <div className="md:hidden flex border-b bg-background/80 backdrop-blur">
+          <button
+            onClick={() => setMobileView("config")}
+            className={cn(
+              "flex-1 py-3 text-sm font-medium transition-colors",
+              mobileView === "config"
+                ? "text-primary border-b-2 border-primary bg-background"
+                : "text-muted-foreground",
+            )}
+          >
+            Input
+          </button>
+          <button
+            onClick={() => setMobileView("output")}
+            className={cn(
+              "flex-1 py-3 text-sm font-medium transition-colors",
+              mobileView === "output"
+                ? "text-primary border-b-2 border-primary bg-background"
+                : "text-muted-foreground",
+            )}
+          >
+            Output
+          </button>
+        </div>
+
+        <div
+          ref={containerRef}
+          className="flex flex-1 flex-col overflow-hidden md:flex-row"
+        >
+          {/* Left Panel - Configuration (always visible) */}
+          <div
+            className={cn(
+              "w-full md:w-auto flex flex-col min-h-0 border-b bg-card/70 md:overflow-hidden md:border-r md:border-b-0 md:shrink-0 md:grow-0",
+              mobileView === "config"
+                ? "flex flex-1 md:flex-initial"
+                : "hidden md:flex",
+            )}
+            style={{ flexBasis: `${leftPanelWidth}px` }}
+          >
+            {/* Page Title + quick-nav chips */}
+            <div className="px-4 md:px-6 py-4 pt-14 md:pt-4 border-b border-border shrink-0">
+              <div className="flex items-end gap-2">
+                <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2 shrink-0 leading-none">
+                  <PlayCircle className="h-5 w-5 text-primary" />
+                  {t("playground.title")}
+                </h1>
+                <div className="flex items-center gap-1 ml-auto shrink-0 self-end translate-y-0.5">
+                  <Tooltip delayDuration={200}>
                     <TooltipTrigger asChild>
-                      <span className="max-w-[150px] truncate">
-                        {tab.selectedModel?.name || t('playground.tabs.newTab')}
-                      </span>
+                      <button
+                        onClick={() => switchTab("featured")}
+                        className={cn(
+                          "inline-flex items-center justify-center h-7 w-7 rounded-lg transition-all",
+                          rightPanelTab === "featured"
+                            ? "bg-primary text-primary-foreground shadow-sm"
+                            : "text-muted-foreground hover:text-foreground hover:bg-muted border border-transparent hover:border-border",
+                        )}
+                      >
+                        <Compass className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="bottom">
-                      {tab.selectedModel?.name || t('playground.tabs.newTab')}
+                      {t(
+                        "playground.rightPanel.featuredModels",
+                        "Featured Models",
+                      )}
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip delayDuration={200}>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => switchTab("templates")}
+                        className={cn(
+                          "inline-flex items-center justify-center h-7 w-7 rounded-lg transition-all",
+                          rightPanelTab === "templates"
+                            ? "bg-primary text-primary-foreground shadow-sm"
+                            : "text-muted-foreground hover:text-foreground hover:bg-muted border border-transparent hover:border-border",
+                        )}
+                      >
+                        <FolderOpen className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      {t("nav.templates", "Templates")}
                     </TooltipContent>
                   </Tooltip>
-                  <button
-                    onClick={(e) => handleCloseTab(e, tab.id)}
-                    className={cn(
-                      'ml-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-muted',
-                      'group-hover:opacity-100',
-                      tab.id === activeTabId && 'opacity-100'
-                    )}
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
                 </div>
-                </Fragment>
-              ))}
-              {/* + button inside scroll area: visible when tabs don't overflow */}
-              {!tabsOverflow && (
-                <button
-                  onClick={handleNewTab}
-                  className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 mx-1"
-                  title={t('playground.tabs.newTab', 'New tab')}
-                >
-                  <Plus className="h-4 w-4" />
-                </button>
-              )}
+              </div>
             </div>
-          </div>
-          {/* + button fixed outside: visible only when tabs overflow */}
-          {tabsOverflow && (
-            <button
-              onClick={handleNewTab}
-              className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 mx-1"
-              title={t('playground.tabs.newTab', 'New tab')}
-            >
-              <Plus className="h-4 w-4" />
-            </button>
-          )}
-        </div>
-      </div>
 
-      {/* Playground Content */}
-      {activeTab ? (
-        <div className="flex flex-col flex-1 overflow-hidden">
-          {/* Mobile Tab Switcher */}
-          <div className="md:hidden flex border-b bg-background/80 backdrop-blur">
-            <button
-              onClick={() => setMobileView('config')}
-              className={cn(
-                "flex-1 py-3 text-sm font-medium transition-colors",
-                mobileView === 'config'
-                  ? "text-primary border-b-2 border-primary bg-background"
-                  : "text-muted-foreground"
-              )}
-            >
-              Input
-            </button>
-            <button
-              onClick={() => setMobileView('output')}
-              className={cn(
-                "flex-1 py-3 text-sm font-medium transition-colors",
-                mobileView === 'output'
-                  ? "text-primary border-b-2 border-primary bg-background"
-                  : "text-muted-foreground"
-              )}
-            >
-              Output
-            </button>
-          </div>
-
-          <div className="flex flex-1 flex-col overflow-hidden md:flex-row md:gap-3 md:p-3">
-            {/* Left Panel - Configuration */}
-            <div className={cn(
-              "w-full md:w-[430px] md:max-w-[430px] md:flex-none flex flex-col min-h-0 border-b bg-card/70 md:overflow-hidden md:rounded-xl md:border md:shadow-sm",
-              // Mobile: show/hide based on mobileView, full height on mobile
-              mobileView === 'config' ? "flex flex-1" : "hidden md:flex"
-            )}>
             {/* Model Selector */}
-            <div className="border-b bg-background/60 p-4">
-              <div className="mb-2 flex items-center gap-2">
-                <Sparkles className="h-4 w-4 text-primary" />
-                <label className="block text-sm font-semibold text-foreground">{t('history.model')}</label>
-              </div>
+            <div className="px-3 pb-1 shrink-0">
               <ModelSelector
                 models={models}
-                value={activeTab.selectedModel?.model_id}
+                value={activeTab?.selectedModel?.model_id}
                 onChange={handleModelChange}
               />
             </div>
 
-            {/* Parameters — min-h-0 + overflow-y-auto so this panel scrolls on mobile/short viewports */}
-            <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3">
-              {activeTab.selectedModel ? (
+            {/* Parameters */}
+            <div className="flex-1 min-h-0 overflow-y-auto px-3 py-2">
+              {activeTab?.selectedModel ? (
                 <DynamicForm
                   model={activeTab.selectedModel}
                   values={activeTab.formValues}
@@ -570,175 +736,388 @@ export function PlaygroundPage() {
                   scrollable={false}
                 />
               ) : (
-                <div className="h-full flex items-center justify-center text-muted-foreground">
-                  <p>{t('playground.selectModelPrompt')}</p>
+                <div className="h-full flex flex-col items-center justify-center gap-4 px-6 text-center">
+                  <div className="rounded-2xl bg-primary/10 p-4">
+                    <Sparkles className="h-8 w-8 text-primary" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium text-foreground">
+                      {t("playground.selectModelPrompt")}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {t(
+                        "playground.emptyStateHint",
+                        "Pick a featured model or browse all models to get started",
+                      )}
+                    </p>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => switchTab("featured")}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
+                    >
+                      <Compass className="h-3.5 w-3.5" />
+                      {t(
+                        "playground.rightPanel.featuredModels",
+                        "Featured Models",
+                      )}
+                    </button>
+                    <button
+                      onClick={() => navigate("/models")}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                    >
+                      <Layers className="h-3.5 w-3.5" />
+                      {t("playground.rightPanel.models", "All Models")}
+                    </button>
+                  </div>
                 </div>
               )}
             </div>
 
-            {/* Actions */}
-            <div className="border-t bg-background/80 p-4">
-              <div className="flex gap-2">
+            {/* Bottom: Run + actions on same row */}
+            <div className="border-t bg-background/80 px-3 py-3">
+              <div className="flex items-center gap-2">
                 <div className="flex-1">
                   <BatchControls
-                    disabled={!activeTab.selectedModel}
-                    isRunning={activeTab.isRunning}
-                    isUploading={activeTab.uploadingCount > 0}
+                    disabled={!activeTab?.selectedModel}
+                    isRunning={activeTab?.isRunning ?? false}
+                    isUploading={(activeTab?.uploadingCount ?? 0) > 0}
                     onRun={handleRun}
-                    runLabel={t('playground.run')}
+                    runLabel={t("playground.run")}
                     runningLabel={
-                      activeTab.batchState?.isRunning
-                        ? `${t('playground.running')} (${activeTab.batchState.queue.length})`
-                        : t('playground.running')
-                    }
-                    price={
-                      activeTab.selectedModel
-                        ? isPricingLoading
-                          ? '...'
-                          : calculatedPrice != null
-                            ? `$${calculatedPrice.toFixed(4)}`
-                            : activeTab.selectedModel.base_price != null
-                              ? `$${activeTab.selectedModel.base_price.toFixed(4)}`
-                              : undefined
-                        : undefined
+                      activeTab?.batchState?.isRunning
+                        ? `${t("playground.running")} (${activeTab.batchState.queue.length})`
+                        : t("playground.running")
                     }
                   />
                 </div>
-                <Button
-                  variant="outline"
+                <button
                   onClick={handleReset}
-                  disabled={activeTab.isRunning}
-                  title={t('playground.resetForm')}
+                  disabled={!activeTab || activeTab.isRunning}
+                  className="flex items-center justify-center w-8 h-8 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors disabled:opacity-40"
+                  title={t("playground.resetForm")}
                 >
-                  <RotateCcw className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
+                  <RotateCcw className="h-3.5 w-3.5" />
+                </button>
+                <button
                   onClick={() => setShowSaveTemplateDialog(true)}
-                  disabled={!activeTab.selectedModel}
-                  title={t('playground.saveAsTemplate')}
+                  disabled={!activeTab?.selectedModel}
+                  className="flex items-center justify-center w-8 h-8 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors disabled:opacity-40"
+                  title={t("playground.saveAsTemplate")}
                 >
-                  <Save className="h-4 w-4" />
-                </Button>
+                  <Save className="h-3.5 w-3.5" />
+                </button>
               </div>
             </div>
           </div>
 
-          {/* Right Panel - Output */}
-          <div className={cn(
-            "flex-1 flex flex-col min-w-0 overflow-hidden md:rounded-xl md:border md:bg-card/75 md:shadow-sm",
-            // Mobile: show/hide based on mobileView
-            mobileView === 'output' ? "flex" : "hidden md:flex"
-          )}>
-            <div className="flex items-center justify-between border-b bg-background/60 px-4 py-3">
-              <div className="flex items-center gap-2">
-                <h2 className="font-semibold text-lg">{t('playground.output')}</h2>
-                {activeTab.currentPrediction?.timings?.inference != null && (
-                  <span className="text-sm text-muted-foreground">
-                    ({(activeTab.currentPrediction.timings.inference / 1000).toFixed(2)}s)
-                  </span>
+          {/* Resize handle */}
+          <div
+            onMouseDown={handleResizeStart}
+            className="hidden md:flex w-1 cursor-col-resize items-center justify-center hover:bg-primary/20 active:bg-primary/30 transition-colors group shrink-0"
+          >
+            <div className="w-px h-8 bg-border group-hover:bg-primary/50 transition-colors" />
+          </div>
+
+          {/* Right Panel - always visible */}
+          <div
+            className={cn(
+              "flex-1 flex flex-col min-w-0 overflow-hidden",
+              mobileView === "output" ? "flex" : "hidden md:flex",
+            )}
+          >
+            {/* Content Tabs - browser-style tab bar */}
+            <div className="flex items-center border-b border-border pl-0 pr-2 gap-1 h-10 shrink-0">
+              {/* Tab list dropdown button */}
+              <div ref={tabListRef} className="relative shrink-0">
+                <button
+                  onClick={() => setTabListOpen(!tabListOpen)}
+                  className={cn(
+                    "flex items-center justify-center w-7 h-7 rounded-md transition-colors shrink-0",
+                    tabListOpen
+                      ? "bg-primary/15 text-primary"
+                      : "text-muted-foreground hover:text-foreground hover:bg-muted",
+                  )}
+                  title={t("playground.tabs.allTabs", "All Tabs")}
+                >
+                  <ChevronDown
+                    className={cn(
+                      "h-4 w-4 transition-transform",
+                      tabListOpen && "rotate-180",
+                    )}
+                  />
+                </button>
+                {tabListOpen && (
+                  <div className="absolute z-50 mt-1 left-0 min-w-[320px] max-h-[400px] overflow-y-auto rounded-xl border border-border/80 bg-popover shadow-xl animate-in fade-in-0 zoom-in-95">
+                    <div className="p-1.5">
+                      {tabs.length === 0 ? (
+                        <div className="py-4 text-center text-xs text-muted-foreground">
+                          {t("playground.noTabs", "No open tabs")}
+                        </div>
+                      ) : (
+                        tabs.map((tab) => (
+                          <div
+                            key={tab.id}
+                            onClick={() => {
+                              handleTabClick(tab.id);
+                              setTabListOpen(false);
+                            }}
+                            className={cn(
+                              "group flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs transition-colors cursor-pointer",
+                              "hover:bg-accent hover:text-accent-foreground",
+                              tab.id === activeTabId &&
+                                "bg-primary/10 text-foreground font-medium",
+                            )}
+                          >
+                            {tab.isRunning ? (
+                              <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0 text-primary" />
+                            ) : (
+                              <Sparkles className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                            )}
+                            <div className="flex-1 min-w-0">
+                              <div className="truncate font-medium">
+                                {tab.selectedModel?.name
+                                  ? formatModelDisplay(tab.selectedModel.name)
+                                  : t("playground.tabs.newTab")}
+                              </div>
+                              <div className="flex items-center gap-2 text-[10px] text-muted-foreground mt-0.5">
+                                {tab.selectedModel?.type && (
+                                  <span>{tab.selectedModel.type}</span>
+                                )}
+                                <span className="flex items-center gap-0.5">
+                                  <Clock className="h-2.5 w-2.5" />
+                                  {new Date(tab.createdAt).toLocaleTimeString(
+                                    [],
+                                    { hour: "2-digit", minute: "2-digit" },
+                                  )}
+                                </span>
+                              </div>
+                            </div>
+                            {tab.id === activeTabId && (
+                              <span className="text-[9px] bg-primary/20 text-primary rounded px-1 py-0.5 font-medium shrink-0">
+                                active
+                              </span>
+                            )}
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleCloseTab(e, tab.id);
+                              }}
+                              className="rounded p-0.5 opacity-0 group-hover:opacity-100 hover:bg-muted transition-opacity shrink-0 text-muted-foreground hover:text-foreground"
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </div>
+                        ))
+                      )}
+                    </div>
+                    <div className="border-t border-border/60 p-1.5">
+                      <button
+                        onClick={() => {
+                          handleNewTab();
+                          setTabListOpen(false);
+                        }}
+                        className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                      >
+                        <Plus className="h-3.5 w-3.5" />
+                        {t("playground.tabs.newTab", "New Tab")}
+                      </button>
+                    </div>
+                  </div>
                 )}
               </div>
-              {activeTab.selectedModel && (
-                <div className="flex gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleViewWebPage}
-                    className="bg-background/80"
-                  >
-                    <Globe className="mr-2 h-4 w-4" />
-                    {t('playground.webPage')}
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={handleViewDocs}
-                    className="bg-background/80"
+
+              {/* Scrollable session tabs */}
+              <div
+                ref={pgTabScrollRef}
+                className="flex-1 min-w-0 overflow-x-auto hide-scrollbar"
+                onWheel={(e) => {
+                  if (pgTabScrollRef.current && e.deltaY !== 0) {
+                    e.preventDefault();
+                    pgTabScrollRef.current.scrollLeft += e.deltaY;
+                  }
+                }}
+              >
+                <div className="flex items-center gap-1">
+                  {tabs.map((tab) => {
+                    const isActive =
+                      tab.id === activeTabId && rightPanelTab === "result";
+                    return (
+                      <div
+                        key={tab.id}
+                        draggable
+                        onDragStart={(e) => handleTabDragStart(e, tab.id)}
+                        onDragOver={(e) => handleTabDragOver(e, tab.id)}
+                        onDrop={(e) => handleTabDrop(e, tab.id)}
+                        onDragEnd={handleTabDragEnd}
+                        onClick={() => {
+                          handleTabClick(tab.id);
+                        }}
+                        className={cn(
+                          "group relative flex h-8 items-center gap-1.5 px-3 text-xs transition-colors cursor-pointer select-none min-w-[60px] max-w-[180px] hover:bg-primary/10 dark:hover:bg-muted/60",
+                          dragTabId === tab.id && "opacity-40",
+                          isActive
+                            ? "bg-primary/15 dark:bg-primary/10 text-foreground font-medium"
+                            : "bg-primary/[0.06] dark:bg-muted/20 text-muted-foreground",
+                        )}
+                      >
+                        {/* Drop indicator lines */}
+                        {dropIndicator?.tabId === tab.id &&
+                          dropIndicator.side === "left" && (
+                            <div className="absolute -left-px top-1 bottom-1 w-0.5 rounded-full bg-primary" />
+                          )}
+                        {dropIndicator?.tabId === tab.id &&
+                          dropIndicator.side === "right" && (
+                            <div className="absolute -right-px top-1 bottom-1 w-0.5 rounded-full bg-primary" />
+                          )}
+                        {tab.isRunning ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin shrink-0" />
+                        ) : (
+                          <Sparkles className="h-3.5 w-3.5 shrink-0" />
+                        )}
+                        <span className="truncate flex-1">
+                          {tab.selectedModel?.name
+                            ? formatModelDisplay(tab.selectedModel.name)
+                            : t("playground.tabs.newTab")}
+                        </span>
+                        <button
+                          onClick={(e) => handleCloseTab(e, tab.id)}
+                          className={cn(
+                            "ml-1 rounded p-0.5 transition-opacity hover:bg-muted text-muted-foreground hover:text-foreground",
+                            isActive
+                              ? "opacity-70"
+                              : "opacity-0 group-hover:opacity-100",
+                          )}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                  {/* + button inside scroll area, right after last tab */}
+                  <button
+                    onClick={handleNewTab}
+                    className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
+                    title={t("playground.tabs.newTab", "New Tab")}
                   >
-                    <BookOpen className="mr-2 h-4 w-4" />
-                    {t('playground.docs')}
-                  </Button>
+                    <Plus className="h-4 w-4" />
+                  </button>
                 </div>
-              )}
+              </div>
             </div>
-            <div className="flex-1 overflow-hidden flex flex-col md:flex-row">
-              <div className="flex-1 min-w-0 overflow-hidden p-5 md:p-6">
-                {/* Batch Results - shown while running or when completed */}
-                {(activeTab.batchState?.isRunning || activeTab.batchResults.length > 0) ? (
-                  <BatchOutputGrid
-                    results={activeTab.batchResults}
-                    modelId={activeTab.selectedModel?.model_id}
-                    onClear={clearBatchResults}
-                    isRunning={activeTab.batchState?.isRunning}
-                    totalCount={activeTab.batchState?.queue.length}
-                    queue={activeTab.batchState?.queue}
-                  />
-                ) : /* Batch Preview - shown when batch mode is active but not yet run */
-                batchPreviewInputs.length > 0 ? (
-                  <BatchOutputGrid
-                    results={[]}
-                    modelId={activeTab.selectedModel?.model_id}
-                    onClear={() => {}}
-                    isRunning={false}
-                    totalCount={batchPreviewInputs.length}
-                    queue={batchPreviewInputs.map((input, index) => ({
-                      id: `preview-${index}`,
-                      index,
-                      input,
-                      status: 'pending' as const
-                    }))}
-                  />
-                ) : (
-                  /* Single output display - default */
-                  <OutputDisplay
-                    key={activeTabId}
-                    prediction={displayedPrediction}
-                    outputs={displayedOutputs}
-                    error={activeTab.error}
-                    isLoading={activeTab.isRunning}
-                    modelId={activeTab.selectedModel?.model_id}
+
+            {/* Right Panel Content — all panels stacked via absolute positioning, no hidden/show remount */}
+            <div className="flex-1 overflow-hidden relative">
+              {/* Featured panel */}
+              {!isMobile && (
+                <div
+                  className="absolute inset-0 flex flex-col overflow-hidden transition-opacity duration-150"
+                  style={{
+                    opacity: rightPanelTab === "featured" ? 1 : 0,
+                    pointerEvents:
+                      rightPanelTab === "featured" ? "auto" : "none",
+                    visibility:
+                      rightPanelTab === "featured" ? "visible" : "hidden",
+                  }}
+                >
+                  <FeaturedModelsPanel
+                    onSelectFeatured={handleExploreSelectFeatured}
+                    models={models}
                   />
-                )}
-              </div>
-              {/* History Panel - desktop: vertical sidebar, mobile: horizontal strip at bottom */}
-              {activeTab.generationHistory.length >= 1 && (
-                <>
-                  {/* Desktop vertical sidebar */}
-                  <div className="hidden md:flex shrink-0">
-                    <HistoryPanel
-                      history={activeTab.generationHistory}
-                      selectedIndex={activeTab.selectedHistoryIndex}
-                      onSelect={selectHistoryItem}
-                      direction="vertical"
+                </div>
+              )}
+
+              {/* Templates panel */}
+              {!isMobile && (
+                <div
+                  className="absolute inset-0 flex flex-col overflow-hidden transition-opacity duration-150"
+                  style={{
+                    opacity: rightPanelTab === "templates" ? 1 : 0,
+                    pointerEvents:
+                      rightPanelTab === "templates" ? "auto" : "none",
+                    visibility:
+                      rightPanelTab === "templates" ? "visible" : "hidden",
+                  }}
+                >
+                  <TemplatesPanel onUseTemplate={handleUseTemplateFromPanel} />
+                </div>
+              )}
+
+              {/* Result panel */}
+              <div
+                className="absolute inset-0 flex flex-col overflow-hidden transition-opacity duration-150"
+                style={{
+                  opacity: rightPanelTab === "result" ? 1 : 0,
+                  pointerEvents: rightPanelTab === "result" ? "auto" : "none",
+                  visibility: rightPanelTab === "result" ? "visible" : "hidden",
+                }}
+              >
+                {activeTab ? (
+                  <>
+                    <ResultPanel
+                      prediction={displayedPrediction}
+                      outputs={displayedOutputs}
+                      error={activeTab.error}
+                      isLoading={activeTab.isRunning}
+                      modelId={activeTab.selectedModel?.model_id}
+                      batchResults={activeTab.batchResults}
+                      batchIsRunning={activeTab.batchState?.isRunning}
+                      batchTotalCount={activeTab.batchState?.queue.length}
+                      batchQueue={activeTab.batchState?.queue}
+                      onClearBatch={clearBatchResults}
+                      batchPreviewInputs={batchPreviewInputs}
+                      historyIndex={historyIndex}
+                      historyLength={historyLen}
+                      onNavigateHistory={navigateHistory}
                     />
-                  </div>
-                  {/* Mobile horizontal strip */}
-                  <div className="md:hidden">
-                    <HistoryPanel
+                    <HistoryDrawer
                       history={activeTab.generationHistory}
                       selectedIndex={activeTab.selectedHistoryIndex}
                       onSelect={selectHistoryItem}
-                      direction="horizontal"
                     />
+                  </>
+                ) : (
+                  <div className="flex-1 flex flex-col items-center justify-center gap-4 px-6 text-center">
+                    <div className="rounded-2xl bg-primary/10 p-4">
+                      <LayoutGrid className="h-8 w-8 text-primary" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-foreground">
+                        {t("playground.selectModelPrompt")}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {t(
+                          "playground.emptyStateHint",
+                          "Pick a featured model or browse all models to get started",
+                        )}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => switchTab("featured")}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
+                      >
+                        <Compass className="h-3.5 w-3.5" />
+                        {t(
+                          "playground.rightPanel.featuredModels",
+                          "Featured Models",
+                        )}
+                      </button>
+                      <button
+                        onClick={() => navigate("/models")}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                      >
+                        <Layers className="h-3.5 w-3.5" />
+                        {t("playground.rightPanel.models", "All Models")}
+                      </button>
+                    </div>
                   </div>
-                </>
-              )}
+                )}
+              </div>
             </div>
           </div>
         </div>
       </div>
-      ) : (
-        <div className="flex-1 flex items-center justify-center text-muted-foreground">
-          <div className="text-center">
-            <p className="mb-4">{t('playground.noTabs')}</p>
-            <Button onClick={handleNewTab}>
-              <Plus className="mr-2 h-4 w-4" />
-              {t('playground.tabs.newTab')}
-            </Button>
-          </div>
-        </div>
-      )}
 
       {/* Save Template Dialog */}
       <TemplateDialog
@@ -747,32 +1126,6 @@ export function PlaygroundPage() {
         mode="create"
         onSave={handleSaveTemplate}
       />
-
-      {/* Template Picker Dialog */}
-      <TemplatePickerDialog
-        open={showTemplateDialog}
-        onOpenChange={setShowTemplateDialog}
-        templateType="playground"
-        onUseTemplate={(template) => {
-          if (template.playgroundData) {
-            // Switch model if needed
-            if (template.playgroundData.modelId && activeTab?.selectedModel?.model_id !== template.playgroundData.modelId) {
-              const model = models.find(m => m.model_id === template.playgroundData!.modelId)
-              if (model) {
-                setSelectedModel(model)
-                navigate(`/playground/${template.playgroundData.modelId}`)
-              }
-            }
-            // Apply form values
-            setFormValues(template.playgroundData.values)
-            toast({
-              title: t('playground.templateLoaded'),
-              description: t('playground.loadedTemplate', { name: template.name }),
-            })
-          }
-        }}
-      />
-
     </div>
-  )
+  );
 }
diff --git a/src/pages/SegmentAnythingPage.tsx b/src/pages/SegmentAnythingPage.tsx
index 533a914e..87c17755 100644
--- a/src/pages/SegmentAnythingPage.tsx
+++ b/src/pages/SegmentAnythingPage.tsx
@@ -1,22 +1,29 @@
-import { useState, useRef, useCallback, useEffect, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useSegmentAnythingWorker, type MaskResult } from '@/hooks/useSegmentAnythingWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useState, useRef, useCallback, useEffect, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import {
+  useSegmentAnythingWorker,
+  type MaskResult,
+} from "@/hooks/useSegmentAnythingWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,8 +32,8 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
@@ -35,58 +42,68 @@ import {
   Trash2,
   Scissors,
   Star,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { featherMask } from '@/lib/maskUtils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { featherMask } from "@/lib/maskUtils";
 
 // Phase configuration for segment anything
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.progress.downloading', weight: 0.3 },
-  { id: 'process', labelKey: 'freeTools.progress.processing', weight: 0.7 }
-]
+  { id: "download", labelKey: "freeTools.progress.downloading", weight: 0.3 },
+  { id: "process", labelKey: "freeTools.progress.processing", weight: 0.7 },
+];
 
 // Mask overlay color (blue with transparency)
-const MASK_COLOR = { r: 0, g: 114, b: 189, a: 255 }
+const MASK_COLOR = { r: 0, g: 114, b: 189, a: 255 };
 
 interface Point {
-  x: number // Normalized 0-1
-  y: number // Normalized 0-1
-  label: 0 | 1 // 0 = negative, 1 = positive
+  x: number; // Normalized 0-1
+  y: number; // Normalized 0-1
+  label: 0 | 1; // 0 = negative, 1 = positive
 }
 
 export function SegmentAnythingPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const imageContainerRef = useRef<HTMLDivElement>(null)
-  const maskCanvasRef = useRef<HTMLCanvasElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [originalImage, setOriginalImage] = useState<string | null>(null)
-  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDecoding, setIsDecoding] = useState(false)
-  const [isEncoded, setIsEncoded] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [canvasSize, setCanvasSize] = useState({ width: 800, height: 600 })
-  const [originalSize, setOriginalSize] = useState<{ width: number; height: number } | null>(null)
-  const [containerSize, setContainerSize] = useState({ width: 800, height: 600 })
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const imageContainerRef = useRef<HTMLDivElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [originalImage, setOriginalImage] = useState<string | null>(null);
+  const [loadedImage, setLoadedImage] = useState<HTMLImageElement | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDecoding, setIsDecoding] = useState(false);
+  const [isEncoded, setIsEncoded] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({ width: 800, height: 600 });
+  const [originalSize, setOriginalSize] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [containerSize, setContainerSize] = useState({
+    width: 800,
+    height: 600,
+  });
 
   // Multi-mask mode: starts false (hover preview), becomes true after first click
-  const [isMultiMaskMode, setIsMultiMaskMode] = useState(false)
-  const [points, setPoints] = useState<Point[]>([])
-  const lastDecodedPointRef = useRef<{ x: number; y: number } | null>(null)
-  const pendingPointRef = useRef<Point | null>(null)
-  const isHoveringRef = useRef(false)
-
-  const [downloadFormat, setDownloadFormat] = useState<'png' | 'jpeg' | 'webp'>('png')
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
-  const [lastMaskResult, setLastMaskResult] = useState<MaskResult | null>(null)
-  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
+  const [isMultiMaskMode, setIsMultiMaskMode] = useState(false);
+  const [points, setPoints] = useState<Point[]>([]);
+  const lastDecodedPointRef = useRef<{ x: number; y: number } | null>(null);
+  const pendingPointRef = useRef<Point | null>(null);
+  const isHoveringRef = useRef(false);
+
+  const [downloadFormat, setDownloadFormat] = useState<"png" | "jpeg" | "webp">(
+    "png",
+  );
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
+  const [lastMaskResult, setLastMaskResult] = useState<MaskResult | null>(null);
+  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(
+    null,
+  );
 
   // Multi-phase progress tracking
   const {
@@ -95,10 +112,10 @@ export function SegmentAnythingPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null);
 
   const {
     segmentImage,
@@ -107,467 +124,509 @@ export function SegmentAnythingPage() {
     dispose,
     isSegmented,
     retryModel,
-    hasFailed
+    hasFailed,
   } = useSegmentAnythingWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
+      if (phase === "download") {
+        startPhase("download");
+      } else if (phase === "process") {
+        startPhase("process");
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : 'process'
-      updatePhase(phaseId, progressValue, detail)
+      const phaseId = phase === "download" ? "download" : "process";
+      updatePhase(phaseId, progressValue, detail);
     },
     onSegmented: () => {
-      setIsEncoded(true)
-      setIsProcessing(false)
-      completeAllPhases()
+      setIsEncoded(true);
+      setIsProcessing(false);
+      completeAllPhases();
     },
     onReady: () => {
-      setError(null)
+      setError(null);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      setIsDecoding(false)
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      setIsDecoding(false);
+    },
+  });
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      dispose()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      dispose();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, dispose, resetPage, location.pathname, navigate])
+  }, [isProcessing, dispose, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    dispose()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    dispose();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, resetPage, location.pathname, navigate]);
 
   // Measure available container size on mount and window resize
   useEffect(() => {
     const updateContainerSize = () => {
-      const viewportWidth = window.innerWidth
-      const viewportHeight = window.innerHeight
-      const availableWidth = Math.max(500, viewportWidth - 300)
-      const availableHeight = Math.max(400, viewportHeight - 300)
-      setContainerSize({ width: availableWidth, height: availableHeight })
-    }
-
-    updateContainerSize()
-    window.addEventListener('resize', updateContainerSize)
-    return () => window.removeEventListener('resize', updateContainerSize)
-  }, [])
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const availableWidth = Math.max(500, viewportWidth - 300);
+      const availableHeight = Math.max(400, viewportHeight - 300);
+      setContainerSize({ width: availableWidth, height: availableHeight });
+    };
+
+    updateContainerSize();
+    window.addEventListener("resize", updateContainerSize);
+    return () => window.removeEventListener("resize", updateContainerSize);
+  }, []);
 
   // Recalculate canvas size when container or image changes
   useEffect(() => {
-    if (!loadedImage) return
+    if (!loadedImage) return;
 
-    const imgWidth = loadedImage.width
-    const imgHeight = loadedImage.height
+    const imgWidth = loadedImage.width;
+    const imgHeight = loadedImage.height;
 
-    let width = imgWidth
-    let height = imgHeight
+    let width = imgWidth;
+    let height = imgHeight;
 
     // Scale to fit container while maintaining aspect ratio
     if (width > containerSize.width) {
-      height = (height * containerSize.width) / width
-      width = containerSize.width
+      height = (height * containerSize.width) / width;
+      width = containerSize.width;
     }
     if (height > containerSize.height) {
-      width = (width * containerSize.height) / height
-      height = containerSize.height
+      width = (width * containerSize.height) / height;
+      height = containerSize.height;
     }
 
-    setCanvasSize({ width: Math.round(width), height: Math.round(height) })
-  }, [loadedImage, containerSize])
+    setCanvasSize({ width: Math.round(width), height: Math.round(height) });
+  }, [loadedImage, containerSize]);
 
   // Initialize mask canvas when image loads
   useEffect(() => {
-    if (!originalSize || !maskCanvasRef.current) return
+    if (!originalSize || !maskCanvasRef.current) return;
 
-    const maskCanvas = maskCanvasRef.current
-    maskCanvas.width = originalSize.width
-    maskCanvas.height = originalSize.height
+    const maskCanvas = maskCanvasRef.current;
+    maskCanvas.width = originalSize.width;
+    maskCanvas.height = originalSize.height;
 
-    const maskCtx = maskCanvas.getContext('2d', { willReadFrequently: true })
-    if (!maskCtx) return
+    const maskCtx = maskCanvas.getContext("2d", { willReadFrequently: true });
+    if (!maskCtx) return;
 
-    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height)
-  }, [originalSize])
+    maskCtx.clearRect(0, 0, originalSize.width, originalSize.height);
+  }, [originalSize]);
 
   // Draw mask overlay on canvas
   const drawMask = useCallback(
     (result: MaskResult) => {
-      const maskCanvas = maskCanvasRef.current
-      if (!maskCanvas || !originalSize) return
+      const maskCanvas = maskCanvasRef.current;
+      if (!maskCanvas || !originalSize) return;
 
-      const ctx = maskCanvas.getContext('2d', { willReadFrequently: true })
-      if (!ctx) return
+      const ctx = maskCanvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) return;
 
-      ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
+      ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
 
-      const imageData = ctx.createImageData(result.width, result.height)
-      const pixelData = imageData.data
+      const imageData = ctx.createImageData(result.width, result.height);
+      const pixelData = imageData.data;
 
       // Select mask with highest score
-      const numMasks = result.scores.length
-      let bestIndex = 0
+      const numMasks = result.scores.length;
+      let bestIndex = 0;
       for (let i = 1; i < numMasks; i++) {
-        if (result.scores[i] > result.scores[bestIndex]) bestIndex = i
+        if (result.scores[i] > result.scores[bestIndex]) bestIndex = i;
       }
 
-      const pixelsPerMask = result.width * result.height
-      const maskOffset = bestIndex * pixelsPerMask
+      const pixelsPerMask = result.width * result.height;
+      const maskOffset = bestIndex * pixelsPerMask;
 
       for (let i = 0; i < pixelsPerMask; i++) {
         if (result.mask[maskOffset + i] === 1) {
-          const offset = 4 * i
-          pixelData[offset] = MASK_COLOR.r
-          pixelData[offset + 1] = MASK_COLOR.g
-          pixelData[offset + 2] = MASK_COLOR.b
-          pixelData[offset + 3] = MASK_COLOR.a
+          const offset = 4 * i;
+          pixelData[offset] = MASK_COLOR.r;
+          pixelData[offset + 1] = MASK_COLOR.g;
+          pixelData[offset + 2] = MASK_COLOR.b;
+          pixelData[offset + 3] = MASK_COLOR.a;
         }
       }
 
-      ctx.putImageData(imageData, 0, 0)
+      ctx.putImageData(imageData, 0, 0);
     },
-    [originalSize]
-  )
+    [originalSize],
+  );
 
   // Decode mask function
-  const decode = useCallback(async (pointsToUse: Point[], forMultiMask = false) => {
-    if (!isEncoded || pointsToUse.length === 0) return
-    if (isDecoding) {
-      pendingPointRef.current = pointsToUse[0]
-      return
-    }
-
-    setIsDecoding(true)
-    lastDecodedPointRef.current = { x: pointsToUse[0].x, y: pointsToUse[0].y }
-    try {
-      const result = await decodeMask(
-        pointsToUse.map((p) => ({
-          point: [p.x, p.y] as [number, number],
-          label: p.label
-        }))
-      )
-      // Only draw if still hovering (for hover mode) or in multi-mask mode
-      if (forMultiMask || isHoveringRef.current) {
-        setLastMaskResult(result)
-        drawMask(result)
+  const decode = useCallback(
+    async (pointsToUse: Point[], forMultiMask = false) => {
+      if (!isEncoded || pointsToUse.length === 0) return;
+      if (isDecoding) {
+        pendingPointRef.current = pointsToUse[0];
+        return;
       }
-    } catch (error) {
-      console.error('Decode error:', error)
-    } finally {
-      setIsDecoding(false)
-      // Process pending point if cursor moved during decode
-      const pending = pendingPointRef.current
-      if (pending && isHoveringRef.current && (pending.x !== lastDecodedPointRef.current?.x || pending.y !== lastDecodedPointRef.current?.y)) {
-        pendingPointRef.current = null
-        decode([pending])
+
+      setIsDecoding(true);
+      lastDecodedPointRef.current = {
+        x: pointsToUse[0].x,
+        y: pointsToUse[0].y,
+      };
+      try {
+        const result = await decodeMask(
+          pointsToUse.map((p) => ({
+            point: [p.x, p.y] as [number, number],
+            label: p.label,
+          })),
+        );
+        // Only draw if still hovering (for hover mode) or in multi-mask mode
+        if (forMultiMask || isHoveringRef.current) {
+          setLastMaskResult(result);
+          drawMask(result);
+        }
+      } catch (error) {
+        console.error("Decode error:", error);
+      } finally {
+        setIsDecoding(false);
+        // Process pending point if cursor moved during decode
+        const pending = pendingPointRef.current;
+        if (
+          pending &&
+          isHoveringRef.current &&
+          (pending.x !== lastDecodedPointRef.current?.x ||
+            pending.y !== lastDecodedPointRef.current?.y)
+        ) {
+          pendingPointRef.current = null;
+          decode([pending]);
+        }
       }
-    }
-  }, [isEncoded, isDecoding, decodeMask, drawMask])
+    },
+    [isEncoded, isDecoding, decodeMask, drawMask],
+  );
 
   // Clamp value between 0 and 1
-  const clamp = (x: number) => Math.max(0, Math.min(1, x))
+  const clamp = (x: number) => Math.max(0, Math.min(1, x));
 
   // Get normalized coordinates from mouse event
   const getPoint = useCallback(
     (e: React.MouseEvent<HTMLDivElement>): Point | null => {
-      const container = imageContainerRef.current
-      if (!container) return null
+      const container = imageContainerRef.current;
+      if (!container) return null;
 
-      const rect = container.getBoundingClientRect()
-      const x = clamp((e.clientX - rect.left) / rect.width)
-      const y = clamp((e.clientY - rect.top) / rect.height)
+      const rect = container.getBoundingClientRect();
+      const x = clamp((e.clientX - rect.left) / rect.width);
+      const y = clamp((e.clientY - rect.top) / rect.height);
 
       // Right click = negative point (label 0), left click = positive (label 1)
-      const label = e.button === 2 ? 0 : 1
+      const label = e.button === 2 ? 0 : 1;
 
-      return { x, y, label: label as 0 | 1 }
+      return { x, y, label: label as 0 | 1 };
     },
-    []
-  )
+    [],
+  );
 
   // Handle mouse move - hover preview in single point mode
   const handleMouseMove = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      isHoveringRef.current = true
-      const container = imageContainerRef.current
+      isHoveringRef.current = true;
+      const container = imageContainerRef.current;
       if (container) {
-        const rect = container.getBoundingClientRect()
-        setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+        const rect = container.getBoundingClientRect();
+        setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
       }
 
-      if (!isEncoded || isMultiMaskMode) return
+      if (!isEncoded || isMultiMaskMode) return;
 
-      const point = getPoint(e)
-      if (point) decode([point])
+      const point = getPoint(e);
+      if (point) decode([point]);
     },
-    [isEncoded, isMultiMaskMode, getPoint, decode]
-  )
+    [isEncoded, isMultiMaskMode, getPoint, decode],
+  );
 
   // Handle mouse down - add point and switch to multi-mask mode
   const handleMouseDown = useCallback(
     (e: React.MouseEvent<HTMLDivElement>) => {
-      if (e.button !== 0 && e.button !== 2) return // Only left/right click
-      if (!isEncoded) return
+      if (e.button !== 0 && e.button !== 2) return; // Only left/right click
+      if (!isEncoded) return;
 
-      const point = getPoint(e)
-      if (!point) return
+      const point = getPoint(e);
+      if (!point) return;
 
-      const newPoints = isMultiMaskMode ? [...points, point] : [point]
-      if (!isMultiMaskMode) setIsMultiMaskMode(true)
-      setPoints(newPoints)
-      decode(newPoints, true)
+      const newPoints = isMultiMaskMode ? [...points, point] : [point];
+      if (!isMultiMaskMode) setIsMultiMaskMode(true);
+      setPoints(newPoints);
+      decode(newPoints, true);
     },
-    [isEncoded, isMultiMaskMode, points, getPoint, decode]
-  )
+    [isEncoded, isMultiMaskMode, points, getPoint, decode],
+  );
 
   // Handle mouse leave - clear hover preview if not in multi-mask mode
   const handleMouseLeave = useCallback(() => {
-    isHoveringRef.current = false
-    setCursorPos(null)
+    isHoveringRef.current = false;
+    setCursorPos(null);
     if (!isMultiMaskMode) {
-      pendingPointRef.current = null
-      lastDecodedPointRef.current = null
-      setLastMaskResult(null)
+      pendingPointRef.current = null;
+      lastDecodedPointRef.current = null;
+      setLastMaskResult(null);
       if (maskCanvasRef.current) {
-        const ctx = maskCanvasRef.current.getContext('2d')
-        if (ctx) ctx.clearRect(0, 0, maskCanvasRef.current.width, maskCanvasRef.current.height)
+        const ctx = maskCanvasRef.current.getContext("2d");
+        if (ctx)
+          ctx.clearRect(
+            0,
+            0,
+            maskCanvasRef.current.width,
+            maskCanvasRef.current.height,
+          );
       }
     }
-  }, [isMultiMaskMode])
+  }, [isMultiMaskMode]);
 
   // Prevent context menu on right click
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-  }, [])
+    e.preventDefault();
+  }, []);
 
   // Clear all points and reset to hover mode
   const clearPoints = useCallback(() => {
-    setPoints([])
-    setIsMultiMaskMode(false)
-    lastDecodedPointRef.current = null
-    pendingPointRef.current = null
-    setLastMaskResult(null)
-    const maskCanvas = maskCanvasRef.current
+    setPoints([]);
+    setIsMultiMaskMode(false);
+    lastDecodedPointRef.current = null;
+    pendingPointRef.current = null;
+    setLastMaskResult(null);
+    const maskCanvas = maskCanvasRef.current;
     if (maskCanvas) {
-      const ctx = maskCanvas.getContext('2d')
+      const ctx = maskCanvas.getContext("2d");
       if (ctx) {
-        ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height)
+        ctx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
       }
     }
-  }, [])
+  }, []);
 
   // Reset image (load new image)
   const resetImage = useCallback(async () => {
-    setOriginalImage(null)
-    setLoadedImage(null)
-    setError(null)
-    setIsEncoded(false)
-    setIsMultiMaskMode(false)
-    setPoints([])
-    lastDecodedPointRef.current = null
-    pendingPointRef.current = null
-    setLastMaskResult(null)
-    setOriginalSize(null)
-    resetProgress()
+    setOriginalImage(null);
+    setLoadedImage(null);
+    setError(null);
+    setIsEncoded(false);
+    setIsMultiMaskMode(false);
+    setPoints([]);
+    lastDecodedPointRef.current = null;
+    pendingPointRef.current = null;
+    setLastMaskResult(null);
+    setOriginalSize(null);
+    resetProgress();
 
     if (isSegmented()) {
-      await resetWorker()
+      await resetWorker();
     }
-  }, [resetProgress, resetWorker, isSegmented])
+  }, [resetProgress, resetWorker, isSegmented]);
 
   const handleFileSelect = useCallback(
     async (file: File) => {
-      if (!file.type.startsWith('image/')) return
+      if (!file.type.startsWith("image/")) return;
 
       // Reset state
-      await resetImage()
+      await resetImage();
 
-      const reader = new FileReader()
+      const reader = new FileReader();
       reader.onload = async (e) => {
-        const dataUrl = e.target?.result as string
-        setOriginalImage(dataUrl)
+        const dataUrl = e.target?.result as string;
+        setOriginalImage(dataUrl);
 
         // Load image to get dimensions
-        const img = new Image()
+        const img = new Image();
         img.onload = async () => {
-          setOriginalSize({ width: img.width, height: img.height })
-          setLoadedImage(img)
+          setOriginalSize({ width: img.width, height: img.height });
+          setLoadedImage(img);
 
           // Automatically start encoding
-          setIsProcessing(true)
-          resetAndStart('download')
+          setIsProcessing(true);
+          resetAndStart("download");
 
           try {
-            await segmentImage(dataUrl)
+            await segmentImage(dataUrl);
           } catch (error) {
-            console.error('Segmentation failed:', error)
-            setIsProcessing(false)
+            console.error("Segmentation failed:", error);
+            setIsProcessing(false);
           }
-        }
-        img.src = dataUrl
-      }
-      reader.readAsDataURL(file)
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
     },
-    [resetImage, resetAndStart, segmentImage]
-  )
+    [resetImage, resetAndStart, segmentImage],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   // Cut out the masked region
   const handleCutOut = useCallback(async () => {
-    if (!lastMaskResult || !loadedImage || !originalSize) return
+    if (!lastMaskResult || !loadedImage || !originalSize) return;
 
     // Create canvas with original image
-    const imageCanvas = document.createElement('canvas')
-    imageCanvas.width = originalSize.width
-    imageCanvas.height = originalSize.height
-    const imageCtx = imageCanvas.getContext('2d', { willReadFrequently: true })
-    if (!imageCtx) return
-
-    imageCtx.drawImage(loadedImage, 0, 0, originalSize.width, originalSize.height)
-    const imageData = imageCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-    const imagePixels = imageData.data
+    const imageCanvas = document.createElement("canvas");
+    imageCanvas.width = originalSize.width;
+    imageCanvas.height = originalSize.height;
+    const imageCtx = imageCanvas.getContext("2d", { willReadFrequently: true });
+    if (!imageCtx) return;
+
+    imageCtx.drawImage(
+      loadedImage,
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    const imageData = imageCtx.getImageData(
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    const imagePixels = imageData.data;
 
     // Get mask data and apply feathering for smooth edges
-    const maskCanvas = maskCanvasRef.current
-    if (!maskCanvas) return
+    const maskCanvas = maskCanvasRef.current;
+    if (!maskCanvas) return;
 
     // Apply feathering to create smooth edges (4px soft falloff)
-    const featheredMask = featherMask(maskCanvas, 4)
-    const featheredCtx = featheredMask.getContext('2d', { willReadFrequently: true })
-    if (!featheredCtx) return
-    const featheredData = featheredCtx.getImageData(0, 0, originalSize.width, originalSize.height)
-    const featheredPixels = featheredData.data
+    const featheredMask = featherMask(maskCanvas, 4);
+    const featheredCtx = featheredMask.getContext("2d", {
+      willReadFrequently: true,
+    });
+    if (!featheredCtx) return;
+    const featheredData = featheredCtx.getImageData(
+      0,
+      0,
+      originalSize.width,
+      originalSize.height,
+    );
+    const featheredPixels = featheredData.data;
 
     // Create output canvas with transparent background
-    const outputCanvas = document.createElement('canvas')
-    outputCanvas.width = originalSize.width
-    outputCanvas.height = originalSize.height
-    const outputCtx = outputCanvas.getContext('2d')
-    if (!outputCtx) return
-
-    const outputData = outputCtx.createImageData(originalSize.width, originalSize.height)
-    const outputPixels = outputData.data
+    const outputCanvas = document.createElement("canvas");
+    outputCanvas.width = originalSize.width;
+    outputCanvas.height = originalSize.height;
+    const outputCtx = outputCanvas.getContext("2d");
+    if (!outputCtx) return;
+
+    const outputData = outputCtx.createImageData(
+      originalSize.width,
+      originalSize.height,
+    );
+    const outputPixels = outputData.data;
 
     // Copy pixels with feathered alpha for smooth edges
     for (let i = 3; i < featheredPixels.length; i += 4) {
-      const alpha = featheredPixels[i]
+      const alpha = featheredPixels[i];
       if (alpha > 0) {
         // Copy RGB from image to output
-        outputPixels[i - 3] = imagePixels[i - 3] // R
-        outputPixels[i - 2] = imagePixels[i - 2] // G
-        outputPixels[i - 1] = imagePixels[i - 1] // B
-        outputPixels[i] = alpha                   // Use feathered alpha for smooth edges
+        outputPixels[i - 3] = imagePixels[i - 3]; // R
+        outputPixels[i - 2] = imagePixels[i - 2]; // G
+        outputPixels[i - 1] = imagePixels[i - 1]; // B
+        outputPixels[i] = alpha; // Use feathered alpha for smooth edges
       }
     }
 
-    outputCtx.putImageData(outputData, 0, 0)
+    outputCtx.putImageData(outputData, 0, 0);
 
     // Download
-    const mimeType = downloadFormat === 'jpeg' ? 'image/jpeg' : `image/${downloadFormat}`
-    const quality = downloadFormat === 'png' ? undefined : 0.95
+    const mimeType =
+      downloadFormat === "jpeg" ? "image/jpeg" : `image/${downloadFormat}`;
+    const quality = downloadFormat === "png" ? undefined : 0.95;
 
     // For JPEG, we need a white background since it doesn't support transparency
-    if (downloadFormat === 'jpeg') {
-      const jpegCanvas = document.createElement('canvas')
-      jpegCanvas.width = originalSize.width
-      jpegCanvas.height = originalSize.height
-      const jpegCtx = jpegCanvas.getContext('2d')
+    if (downloadFormat === "jpeg") {
+      const jpegCanvas = document.createElement("canvas");
+      jpegCanvas.width = originalSize.width;
+      jpegCanvas.height = originalSize.height;
+      const jpegCtx = jpegCanvas.getContext("2d");
       if (jpegCtx) {
-        jpegCtx.fillStyle = 'white'
-        jpegCtx.fillRect(0, 0, originalSize.width, originalSize.height)
-        jpegCtx.drawImage(outputCanvas, 0, 0)
-        const dataUrl = jpegCanvas.toDataURL(mimeType, quality)
-        downloadImage(dataUrl)
+        jpegCtx.fillStyle = "white";
+        jpegCtx.fillRect(0, 0, originalSize.width, originalSize.height);
+        jpegCtx.drawImage(outputCanvas, 0, 0);
+        const dataUrl = jpegCanvas.toDataURL(mimeType, quality);
+        downloadImage(dataUrl);
       }
     } else {
-      const dataUrl = outputCanvas.toDataURL(mimeType, quality)
-      downloadImage(dataUrl)
+      const dataUrl = outputCanvas.toDataURL(mimeType, quality);
+      downloadImage(dataUrl);
     }
-  }, [lastMaskResult, loadedImage, originalSize, downloadFormat])
+  }, [lastMaskResult, loadedImage, originalSize, downloadFormat]);
 
   const downloadImage = (dataUrl: string) => {
-    const link = document.createElement('a')
-    link.href = dataUrl
-    link.download = generateFreeToolFilename('segment-anything', downloadFormat)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    const link = document.createElement("a");
+    link.href = dataUrl;
+    link.download = generateFreeToolFilename(
+      "segment-anything",
+      downloadFormat,
+    );
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   // Handle retry when model download fails
   const handleRetry = useCallback(async () => {
-    setError(null)
-    setIsProcessing(true)
-    resetAndStart('download')
+    setError(null);
+    setIsProcessing(true);
+    resetAndStart("download");
     try {
-      await retryModel()
+      await retryModel();
       // Re-process the current image if we have one
       if (originalImage) {
-        await segmentImage(originalImage)
+        await segmentImage(originalImage);
       }
     } catch (err) {
-      console.error('Retry failed:', err)
+      console.error("Retry failed:", err);
     }
-  }, [retryModel, resetAndStart, originalImage, segmentImage])
+  }, [retryModel, resetAndStart, originalImage, segmentImage]);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      dispose()
-    }
-  }, [dispose])
+      dispose();
+    };
+  }, [dispose]);
 
-  const canCut = isMultiMaskMode && lastMaskResult !== null
+  const canCut = isMultiMaskMode && lastMaskResult !== null;
 
   return (
     <div
@@ -582,7 +641,9 @@ export function SegmentAnythingPage() {
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.segmentAnything.orDragDrop')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.segmentAnything.orDragDrop")}
+            </p>
           </div>
         </div>
       )}
@@ -593,9 +654,11 @@ export function SegmentAnythingPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-xl font-bold">{t('freeTools.segmentAnything.title')}</h1>
+          <h1 className="text-xl font-bold">
+            {t("freeTools.segmentAnything.title")}
+          </h1>
           <p className="text-muted-foreground text-xs">
-            {t('freeTools.segmentAnything.description')}
+            {t("freeTools.segmentAnything.description")}
           </p>
         </div>
       </div>
@@ -604,10 +667,10 @@ export function SegmentAnythingPage() {
       {!originalImage && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -615,9 +678,11 @@ export function SegmentAnythingPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.segmentAnything.selectImage')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.segmentAnything.selectImage")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.segmentAnything.orDragDrop')}
+              {t("freeTools.segmentAnything.orDragDrop")}
             </p>
           </CardContent>
         </Card>
@@ -629,10 +694,10 @@ export function SegmentAnythingPage() {
         accept="image/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
           // Reset input value so same file can be selected again
-          e.target.value = ''
+          e.target.value = "";
         }}
       />
 
@@ -641,7 +706,12 @@ export function SegmentAnythingPage() {
         <div className="flex flex-col gap-3">
           {/* Progress display */}
           {isProcessing && (
-            <ProcessingProgress progress={progress} showPhases={true} showOverall={true} showEta={true} />
+            <ProcessingProgress
+              progress={progress}
+              showPhases={true}
+              showOverall={true}
+              showEta={true}
+            />
           )}
 
           {/* Error with retry button */}
@@ -650,16 +720,20 @@ export function SegmentAnythingPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
 
           {/* Status */}
           <div className="text-sm text-muted-foreground text-center">
-            {isProcessing && t('freeTools.segmentAnything.processing')}
-            {isEncoded && !isMultiMaskMode && t('freeTools.segmentAnything.hoverToPreview')}
-            {isEncoded && isMultiMaskMode && t('freeTools.segmentAnything.clickToRefine')}
+            {isProcessing && t("freeTools.segmentAnything.processing")}
+            {isEncoded &&
+              !isMultiMaskMode &&
+              t("freeTools.segmentAnything.hoverToPreview")}
+            {isEncoded &&
+              isMultiMaskMode &&
+              t("freeTools.segmentAnything.clickToRefine")}
           </div>
 
           {/* Canvas area */}
@@ -668,12 +742,12 @@ export function SegmentAnythingPage() {
               <div
                 ref={imageContainerRef}
                 className={cn(
-                  'relative mx-auto bg-muted rounded-lg overflow-hidden',
-                  'cursor-none'
+                  "relative mx-auto bg-muted rounded-lg overflow-hidden",
+                  "cursor-none",
                 )}
                 style={{
                   width: canvasSize.width,
-                  height: canvasSize.height
+                  height: canvasSize.height,
                 }}
                 onMouseMove={handleMouseMove}
                 onMouseDown={handleMouseDown}
@@ -696,29 +770,33 @@ export function SegmentAnythingPage() {
                   className="absolute inset-0 pointer-events-none opacity-50"
                   style={{
                     width: canvasSize.width,
-                    height: canvasSize.height
+                    height: canvasSize.height,
                   }}
                 />
 
                 {/* Point markers (only in multi-mask mode) */}
-                {isMultiMaskMode && points.map((point, index) => (
-                  <div
-                    key={index}
-                    className="absolute pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
-                    style={{
-                      left: `${point.x * 100}%`,
-                      top: `${point.y * 100}%`
-                    }}
-                  >
-                    {point.label === 1 ? (
-                      // Positive point: star icon
-                      <Star className="h-5 w-5 text-yellow-400 fill-yellow-400 drop-shadow-lg" />
-                    ) : (
-                      // Negative point: X icon
-                      <X className="h-5 w-5 text-red-500 drop-shadow-lg" strokeWidth={3} />
-                    )}
-                  </div>
-                ))}
+                {isMultiMaskMode &&
+                  points.map((point, index) => (
+                    <div
+                      key={index}
+                      className="absolute pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
+                      style={{
+                        left: `${point.x * 100}%`,
+                        top: `${point.y * 100}%`,
+                      }}
+                    >
+                      {point.label === 1 ? (
+                        // Positive point: star icon
+                        <Star className="h-5 w-5 text-yellow-400 fill-yellow-400 drop-shadow-lg" />
+                      ) : (
+                        // Negative point: X icon
+                        <X
+                          className="h-5 w-5 text-red-500 drop-shadow-lg"
+                          strokeWidth={3}
+                        />
+                      )}
+                    </div>
+                  ))}
 
                 {/* Processing overlay */}
                 {isProcessing && (
@@ -743,8 +821,9 @@ export function SegmentAnythingPage() {
                       top: cursorPos.y,
                       width: 20,
                       height: 20,
-                      transform: 'translate(-50%, -50%)',
-                      boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.3)'
+                      transform: "translate(-50%, -50%)",
+                      boxShadow:
+                        "0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.3)",
                     }}
                   />
                 )}
@@ -760,7 +839,7 @@ export function SegmentAnythingPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.segmentAnything.resetImage')}
+              {t("freeTools.segmentAnything.resetImage")}
             </Button>
 
             <Tooltip>
@@ -771,17 +850,21 @@ export function SegmentAnythingPage() {
                   disabled={!isMultiMaskMode || isProcessing}
                 >
                   <Trash2 className="h-4 w-4 mr-2" />
-                  {t('freeTools.segmentAnything.clearPoints')}
+                  {t("freeTools.segmentAnything.clearPoints")}
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>{t('freeTools.segmentAnything.clearPointsTooltip')}</TooltipContent>
+              <TooltipContent>
+                {t("freeTools.segmentAnything.clearPointsTooltip")}
+              </TooltipContent>
             </Tooltip>
 
             <div className="h-6 w-px bg-border" />
 
             <Select
               value={downloadFormat}
-              onValueChange={(v) => setDownloadFormat(v as 'png' | 'jpeg' | 'webp')}
+              onValueChange={(v) =>
+                setDownloadFormat(v as "png" | "jpeg" | "webp")
+              }
             >
               <SelectTrigger className="h-9 w-24">
                 <SelectValue />
@@ -799,13 +882,13 @@ export function SegmentAnythingPage() {
               className="gradient-bg"
             >
               <Scissors className="h-4 w-4 mr-2" />
-              {t('freeTools.segmentAnything.cutMask')}
+              {t("freeTools.segmentAnything.cutMask")}
             </Button>
           </div>
 
           {/* Instructions */}
           <div className="text-xs text-muted-foreground text-center">
-            {t('freeTools.segmentAnything.hint')}
+            {t("freeTools.segmentAnything.hint")}
           </div>
         </div>
       )}
@@ -839,19 +922,23 @@ export function SegmentAnythingPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index d23c9a61..9028562c 100644
--- a/src/pages/SettingsPage.tsx
+++ b/src/pages/SettingsPage.tsx
@@ -1,641 +1,762 @@
-import { useState, useEffect, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { apiClient } from '@/api/client'
-import { useThemeStore, type Theme } from '@/stores/themeStore'
-import { useAssetsStore } from '@/stores/assetsStore'
-import { useSettingsStore } from '@/stores/settingsStore'
-import { languages } from '@/i18n'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Progress } from '@/components/ui/progress'
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { apiClient } from "@/api/client";
+import { useThemeStore, type Theme } from "@/stores/themeStore";
+import { useAssetsStore } from "@/stores/assetsStore";
+import { useSettingsStore } from "@/stores/settingsStore";
+import { languages } from "@/i18n";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from "@/components/ui/select";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
-} from '@/components/ui/dialog'
-import { toast } from '@/hooks/useToast'
-import { Eye, EyeOff, Check, Loader2, Monitor, Moon, Sun, Download, RefreshCw, Rocket, AlertCircle, Shield, Github, Globe, FolderOpen, FileText, Trash2, Database, ChevronRight, X, Clock, Settings } from 'lucide-react'
-import { Switch } from '@/components/ui/switch'
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { toast } from "@/hooks/useToast";
+import {
+  Eye,
+  EyeOff,
+  Check,
+  Loader2,
+  Monitor,
+  Moon,
+  Sun,
+  Download,
+  RefreshCw,
+  Rocket,
+  AlertCircle,
+  Shield,
+  Github,
+  Globe,
+  FolderOpen,
+  FileText,
+  Trash2,
+  Database,
+  ChevronRight,
+  X,
+  Clock,
+  Settings,
+} from "lucide-react";
+import { Switch } from "@/components/ui/switch";
 
 interface CacheItem {
-  cacheName: string
-  url: string
-  size: number
-  type?: 'browser' | 'sd-model' | 'sd-auxiliary' | 'sd-binary' // browser: browser cache, sd-model: SD models, sd-auxiliary: LLM/VAE, sd-binary: SD binary
-  modelType?: 'llm' | 'vae' // for sd-auxiliary models
+  cacheName: string;
+  url: string;
+  size: number;
+  type?: "browser" | "sd-model" | "sd-auxiliary" | "sd-binary"; // browser: browser cache, sd-model: SD models, sd-auxiliary: LLM/VAE, sd-binary: SD binary
+  modelType?: "llm" | "vae"; // for sd-auxiliary models
 }
 
-type UpdateChannel = 'stable' | 'nightly'
+type UpdateChannel = "stable" | "nightly";
 
 interface UpdateStatus {
-  status: string
-  version?: string
-  releaseNotes?: string | null
-  percent?: number
-  message?: string
+  status: string;
+  version?: string;
+  releaseNotes?: string | null;
+  percent?: number;
+  message?: string;
 }
 
 export function SettingsPage() {
-  const { t, i18n } = useTranslation()
-  const { apiKey, setApiKey, isValidated, isValidating: storeIsValidating, validateApiKey } = useApiKeyStore()
-  const { theme, setTheme } = useThemeStore()
-  const { settings: assetsSettings, loadSettings: loadAssetsSettings, setAutoSave, setAssetsDirectory } = useAssetsStore()
-  const { settings: generalSettings, setDownloadTimeout, initSettings: initGeneralSettings } = useSettingsStore()
-  const [inputKey, setInputKey] = useState(apiKey)
-  const [showKey, setShowKey] = useState(false)
-  const [isSaving, setIsSaving] = useState(false)
+  const { t, i18n } = useTranslation();
+  const {
+    apiKey,
+    setApiKey,
+    isValidated,
+    isValidating: storeIsValidating,
+    validateApiKey,
+  } = useApiKeyStore();
+  const { theme, setTheme } = useThemeStore();
+  const {
+    settings: assetsSettings,
+    loadSettings: loadAssetsSettings,
+    setAutoSave,
+    setAssetsDirectory,
+  } = useAssetsStore();
+  const {
+    settings: generalSettings,
+    setDownloadTimeout,
+    initSettings: initGeneralSettings,
+  } = useSettingsStore();
+  const [inputKey, setInputKey] = useState(apiKey);
+  const [showKey, setShowKey] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
 
   // Sync inputKey when apiKey loads from storage
   useEffect(() => {
-    setInputKey(apiKey)
-  }, [apiKey])
+    setInputKey(apiKey);
+  }, [apiKey]);
 
   // Balance state
-  const [balance, setBalance] = useState<number | null>(null)
-  const [isLoadingBalance, setIsLoadingBalance] = useState(false)
+  const [balance, setBalance] = useState<number | null>(null);
+  const [isLoadingBalance, setIsLoadingBalance] = useState(false);
 
   // Update state
-  const [appVersion, setAppVersion] = useState<string>('')
-  const [updateChannel, setUpdateChannel] = useState<UpdateChannel>('stable')
-  const [autoCheckUpdate, setAutoCheckUpdate] = useState<boolean>(true)
-  const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null)
-  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false)
-  const [isDownloading, setIsDownloading] = useState(false)
+  const [appVersion, setAppVersion] = useState<string>("");
+  const [updateChannel, setUpdateChannel] = useState<UpdateChannel>("stable");
+  const [autoCheckUpdate, setAutoCheckUpdate] = useState<boolean>(true);
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
+  const [isCheckingUpdate, setIsCheckingUpdate] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   // Cache state
-  const [cacheSize, setCacheSize] = useState<number | null>(null)
-  const [isClearingCache, setIsClearingCache] = useState(false)
-  const [cacheItems, setCacheItems] = useState<CacheItem[]>([])
-  const [showCacheDialog, setShowCacheDialog] = useState(false)
-  const [isDeletingItem, setIsDeletingItem] = useState<string | null>(null)
+  const [cacheSize, setCacheSize] = useState<number | null>(null);
+  const [isClearingCache, setIsClearingCache] = useState(false);
+  const [cacheItems, setCacheItems] = useState<CacheItem[]>([]);
+  const [showCacheDialog, setShowCacheDialog] = useState(false);
+  const [isDeletingItem, setIsDeletingItem] = useState<string | null>(null);
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
 
   // Get the saved language preference (including 'auto')
   const [languagePreference, setLanguagePreference] = useState(() => {
-    return localStorage.getItem('wavespeed_language') || 'auto'
-  })
-
-  const handleLanguageChange = useCallback((langCode: string) => {
-    setLanguagePreference(langCode)
-    localStorage.setItem('wavespeed_language', langCode)
-    if (window.electronAPI?.setSettings) {
-      window.electronAPI.setSettings({ language: langCode })
-    }
+    return localStorage.getItem("wavespeed_language") || "auto";
+  });
+
+  const handleLanguageChange = useCallback(
+    (langCode: string) => {
+      setLanguagePreference(langCode);
+      localStorage.setItem("wavespeed_language", langCode);
+      if (window.electronAPI?.setSettings) {
+        window.electronAPI.setSettings({ language: langCode });
+      }
 
-    if (langCode === 'auto') {
-      // Detect browser language
-      const browserLang = navigator.language || 'en'
-      // Find matching language or fallback to 'en'
-      const supportedLangs = ['en', 'zh-CN', 'zh-TW', 'ja', 'ko', 'es', 'fr', 'de', 'it', 'ru', 'pt', 'hi', 'id', 'ms', 'th', 'vi', 'tr', 'ar']
-      const matchedLang = supportedLangs.find(l => browserLang.startsWith(l.split('-')[0])) || 'en'
-      i18n.changeLanguage(matchedLang)
-    } else {
-      i18n.changeLanguage(langCode)
-    }
+      if (langCode === "auto") {
+        // Detect browser language
+        const browserLang = navigator.language || "en";
+        // Find matching language or fallback to 'en'
+        const supportedLangs = [
+          "en",
+          "zh-CN",
+          "zh-TW",
+          "ja",
+          "ko",
+          "es",
+          "fr",
+          "de",
+          "it",
+          "ru",
+          "pt",
+          "hi",
+          "id",
+          "ms",
+          "th",
+          "vi",
+          "tr",
+          "ar",
+        ];
+        const matchedLang =
+          supportedLangs.find((l) => browserLang.startsWith(l.split("-")[0])) ||
+          "en";
+        i18n.changeLanguage(matchedLang);
+      } else {
+        i18n.changeLanguage(langCode);
+      }
 
-    toast({
-      title: t('settings.language.changed'),
-      description: t('settings.language.changedDesc'),
-    })
-  }, [i18n, t])
+      toast({
+        title: t("settings.language.changed"),
+        description: t("settings.language.changedDesc"),
+      });
+    },
+    [i18n, t],
+  );
 
   // Load cache details (browser caches + SD models)
   const loadCacheDetails = useCallback(async () => {
     try {
-      const items: CacheItem[] = []
-      let totalSize = 0
+      const items: CacheItem[] = [];
+      let totalSize = 0;
 
       // 1. Load browser cache (Image Eraser, etc.)
-      const cacheNames = await caches.keys()
+      const cacheNames = await caches.keys();
       for (const name of cacheNames) {
-        const cache = await caches.open(name)
-        const keys = await cache.keys()
+        const cache = await caches.open(name);
+        const keys = await cache.keys();
         for (const request of keys) {
-          const response = await cache.match(request)
+          const response = await cache.match(request);
           if (response) {
-            const blob = await response.blob()
+            const blob = await response.blob();
             items.push({
               cacheName: name,
               url: request.url,
               size: blob.size,
-              type: 'browser'
-            })
-            totalSize += blob.size
+              type: "browser",
+            });
+            totalSize += blob.size;
           }
         }
       }
 
       // 2. Load SD auxiliary models (LLM, VAE)
       if (window.electronAPI?.sdListAuxiliaryModels) {
-        const result = await window.electronAPI.sdListAuxiliaryModels()
+        const result = await window.electronAPI.sdListAuxiliaryModels();
         if (result.success && result.models) {
           for (const model of result.models) {
             items.push({
-              cacheName: 'z-image-auxiliary',
+              cacheName: "z-image-auxiliary",
               url: model.path,
               size: model.size,
-              type: 'sd-auxiliary',
-              modelType: model.type
-            })
-            totalSize += model.size
+              type: "sd-auxiliary",
+              modelType: model.type,
+            });
+            totalSize += model.size;
           }
         }
       }
 
       // 3. Load SD models
       if (window.electronAPI?.sdListModels) {
-        const result = await window.electronAPI.sdListModels()
+        const result = await window.electronAPI.sdListModels();
         if (result.success && result.models) {
           for (const model of result.models) {
             items.push({
-              cacheName: 'z-image-models',
+              cacheName: "z-image-models",
               url: model.path,
               size: model.size,
-              type: 'sd-model'
-            })
-            totalSize += model.size
+              type: "sd-model",
+            });
+            totalSize += model.size;
           }
         }
       }
 
       // 4. Load SD binary
       if (window.electronAPI?.sdGetBinaryPath) {
-        const result = await window.electronAPI.sdGetBinaryPath()
+        const result = await window.electronAPI.sdGetBinaryPath();
         if (result.success && result.path) {
           try {
             // Use Node.js fs to get binary size
             if (window.electronAPI?.getFileSize) {
-              const size = await window.electronAPI.getFileSize(result.path)
+              const size = await window.electronAPI.getFileSize(result.path);
               items.push({
-                cacheName: 'z-image-binary',
+                cacheName: "z-image-binary",
                 url: result.path,
                 size: size,
-                type: 'sd-binary'
-              })
-              totalSize += size
+                type: "sd-binary",
+              });
+              totalSize += size;
             }
           } catch (error) {
-            console.error('Failed to get SD binary size:', error)
+            console.error("Failed to get SD binary size:", error);
           }
         }
       }
 
-      setCacheItems(items)
-      setCacheSize(totalSize)
+      setCacheItems(items);
+      setCacheSize(totalSize);
     } catch (error) {
-      console.error('Failed to load cache details:', error)
-      setCacheItems([])
-      setCacheSize(0)
+      console.error("Failed to load cache details:", error);
+      setCacheItems([]);
+      setCacheSize(0);
     }
-  }, [])
+  }, []);
 
   // Calculate cache size (calls loadCacheDetails)
   const calculateCacheSize = useCallback(async () => {
-    await loadCacheDetails()
-  }, [loadCacheDetails])
+    await loadCacheDetails();
+  }, [loadCacheDetails]);
 
   // Fetch account balance
   const fetchBalance = useCallback(async () => {
-    if (!isValidated) return
-    setIsLoadingBalance(true)
+    if (!isValidated) return;
+    setIsLoadingBalance(true);
     try {
-      const bal = await apiClient.getBalance()
-      setBalance(bal)
+      const bal = await apiClient.getBalance();
+      setBalance(bal);
     } catch {
       toast({
-        title: t('common.error'),
-        description: t('settings.balance.refreshFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description: t("settings.balance.refreshFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsLoadingBalance(false)
+      setIsLoadingBalance(false);
     }
-  }, [isValidated, t])
+  }, [isValidated, t]);
 
   // Delete a single cache item
-  const handleDeleteCacheItem = useCallback(async (item: CacheItem) => {
-    setIsDeletingItem(item.url)
-    try {
-      if (item.type === 'browser') {
-        // Delete from browser cache
-        const cache = await caches.open(item.cacheName)
-        await cache.delete(item.url)
-      } else if (item.type === 'sd-auxiliary' && item.modelType) {
-        // Delete SD auxiliary model (LLM or VAE)
-        if (window.electronAPI?.sdDeleteAuxiliaryModel) {
-          const result = await window.electronAPI.sdDeleteAuxiliaryModel(item.modelType)
-          if (!result.success) {
-            throw new Error(result.error || 'Failed to delete model')
+  const handleDeleteCacheItem = useCallback(
+    async (item: CacheItem) => {
+      setIsDeletingItem(item.url);
+      try {
+        if (item.type === "browser") {
+          // Delete from browser cache
+          const cache = await caches.open(item.cacheName);
+          await cache.delete(item.url);
+        } else if (item.type === "sd-auxiliary" && item.modelType) {
+          // Delete SD auxiliary model (LLM or VAE)
+          if (window.electronAPI?.sdDeleteAuxiliaryModel) {
+            const result = await window.electronAPI.sdDeleteAuxiliaryModel(
+              item.modelType,
+            );
+            if (!result.success) {
+              throw new Error(result.error || "Failed to delete model");
+            }
           }
-        }
-      } else if (item.type === 'sd-model') {
-        // Delete SD model
-        if (window.electronAPI?.sdDeleteModel) {
-          const result = await window.electronAPI.sdDeleteModel(item.url)
-          if (!result.success) {
-            throw new Error(result.error || 'Failed to delete model')
+        } else if (item.type === "sd-model") {
+          // Delete SD model
+          if (window.electronAPI?.sdDeleteModel) {
+            const result = await window.electronAPI.sdDeleteModel(item.url);
+            if (!result.success) {
+              throw new Error(result.error || "Failed to delete model");
+            }
           }
-        }
-      } else if (item.type === 'sd-binary') {
-        // Delete SD binary
-        if (window.electronAPI?.sdDeleteBinary) {
-          const result = await window.electronAPI.sdDeleteBinary()
-          if (!result.success) {
-            throw new Error(result.error || 'Failed to delete binary')
+        } else if (item.type === "sd-binary") {
+          // Delete SD binary
+          if (window.electronAPI?.sdDeleteBinary) {
+            const result = await window.electronAPI.sdDeleteBinary();
+            if (!result.success) {
+              throw new Error(result.error || "Failed to delete binary");
+            }
           }
         }
-      }
 
-      await loadCacheDetails()
-      toast({
-        title: t('common.success'),
-        description: t('settings.cache.itemDeleted'),
-      })
-    } catch (error) {
-      toast({
-        title: t('common.error'),
-        description: (error as Error).message || t('settings.cache.clearFailed'),
-        variant: 'destructive',
-      })
-    } finally {
-      setIsDeletingItem(null)
-    }
-  }, [loadCacheDetails, t])
+        await loadCacheDetails();
+        toast({
+          title: t("common.success"),
+          description: t("settings.cache.itemDeleted"),
+        });
+      } catch (error) {
+        toast({
+          title: t("common.error"),
+          description:
+            (error as Error).message || t("settings.cache.clearFailed"),
+          variant: "destructive",
+        });
+      } finally {
+        setIsDeletingItem(null);
+      }
+    },
+    [loadCacheDetails, t],
+  );
 
   // Clear all caches
   const handleClearCache = useCallback(async () => {
-    setIsClearingCache(true)
+    setIsClearingCache(true);
     try {
       // 1. Clear browser caches
-      const cacheNames = await caches.keys()
-      await Promise.all(cacheNames.map((name) => caches.delete(name)))
+      const cacheNames = await caches.keys();
+      await Promise.all(cacheNames.map((name) => caches.delete(name)));
 
       // 2. Clear SD auxiliary models (LLM, VAE)
       if (window.electronAPI?.sdDeleteAuxiliaryModel) {
-        await window.electronAPI.sdDeleteAuxiliaryModel('llm').catch(console.error)
-        await window.electronAPI.sdDeleteAuxiliaryModel('vae').catch(console.error)
+        await window.electronAPI
+          .sdDeleteAuxiliaryModel("llm")
+          .catch(console.error);
+        await window.electronAPI
+          .sdDeleteAuxiliaryModel("vae")
+          .catch(console.error);
       }
 
       // 3. Clear SD models
-      const electronApi = window.electronAPI
+      const electronApi = window.electronAPI;
       if (electronApi?.sdListModels && electronApi?.sdDeleteModel) {
-        const result = await electronApi.sdListModels()
+        const result = await electronApi.sdListModels();
         if (result.success && result.models) {
           await Promise.all(
             result.models.map((model) =>
-              electronApi.sdDeleteModel(model.path).catch(console.error)
-            )
-          )
+              electronApi.sdDeleteModel(model.path).catch(console.error),
+            ),
+          );
         }
       }
 
       // 4. Clear SD binary
       if (window.electronAPI?.sdDeleteBinary) {
-        await window.electronAPI.sdDeleteBinary().catch(console.error)
+        await window.electronAPI.sdDeleteBinary().catch(console.error);
       }
 
-      setCacheSize(0)
-      setCacheItems([])
-      setShowCacheDialog(false)
+      setCacheSize(0);
+      setCacheItems([]);
+      setShowCacheDialog(false);
       toast({
-        title: t('settings.cache.cleared'),
-        description: t('settings.cache.clearedDesc'),
-      })
+        title: t("settings.cache.cleared"),
+        description: t("settings.cache.clearedDesc"),
+      });
     } catch {
       toast({
-        title: t('common.error'),
-        description: t('settings.cache.clearFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description: t("settings.cache.clearFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsClearingCache(false)
+      setIsClearingCache(false);
     }
-  }, [t])
+  }, [t]);
 
   // Format file size
   const formatSize = (bytes: number) => {
-    if (bytes < 1024) return `${bytes} B`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
-  }
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  };
 
   // Get display name from cache item
   const getDisplayName = (item: CacheItem) => {
-    if (item.type === 'sd-auxiliary') {
-      return item.modelType === 'llm' ? 'Qwen3-4B LLM (2.4 GB)' : 'Z-Image VAE (335 MB)'
-    } else if (item.type === 'sd-model') {
+    if (item.type === "sd-auxiliary") {
+      return item.modelType === "llm"
+        ? "Qwen3-4B LLM (2.4 GB)"
+        : "Z-Image VAE (335 MB)";
+    } else if (item.type === "sd-model") {
       // Extract filename from path
-      const filename = item.url.split(/[\\/]/).pop() || item.url
-      return filename.replace('.gguf', '')
-    } else if (item.type === 'sd-binary') {
+      const filename = item.url.split(/[\\/]/).pop() || item.url;
+      return filename.replace(".gguf", "");
+    } else if (item.type === "sd-binary") {
       // SD binary
-      return 'stable-diffusion (SD Binary)'
+      return "stable-diffusion (SD Binary)";
     } else {
       // Browser cache
       try {
-        const urlObj = new URL(item.url)
-        const path = urlObj.pathname
-        const filename = path.split('/').pop() || path
-        return filename.length > 40 ? filename.slice(0, 37) + '...' : filename
+        const urlObj = new URL(item.url);
+        const path = urlObj.pathname;
+        const filename = path.split("/").pop() || path;
+        return filename.length > 40 ? filename.slice(0, 37) + "..." : filename;
       } catch {
-        return item.url.slice(0, 40)
+        return item.url.slice(0, 40);
       }
     }
-  }
+  };
 
   // Load settings on mount
   useEffect(() => {
     const loadSettings = async () => {
       if (window.electronAPI) {
-        const version = await window.electronAPI.getAppVersion()
-        setAppVersion(version)
+        const version = await window.electronAPI.getAppVersion();
+        setAppVersion(version);
 
-        const settings = await window.electronAPI.getSettings()
-        setUpdateChannel(settings.updateChannel || 'stable')
-        setAutoCheckUpdate(settings.autoCheckUpdate !== false)
+        const settings = await window.electronAPI.getSettings();
+        setUpdateChannel(settings.updateChannel || "stable");
+        setAutoCheckUpdate(settings.autoCheckUpdate !== false);
         if (settings.language) {
-          setLanguagePreference(settings.language)
-          localStorage.setItem('wavespeed_language', settings.language)
+          setLanguagePreference(settings.language);
+          localStorage.setItem("wavespeed_language", settings.language);
         }
       }
       // Load assets settings
-      loadAssetsSettings()
+      loadAssetsSettings();
       // Load general settings
-      initGeneralSettings()
+      initGeneralSettings();
       // Calculate cache size
-      calculateCacheSize()
-    }
-    loadSettings()
-  }, [loadAssetsSettings, initGeneralSettings, calculateCacheSize])
+      calculateCacheSize();
+    };
+    loadSettings();
+  }, [loadAssetsSettings, initGeneralSettings, calculateCacheSize]);
 
   // Fetch balance when authenticated
   useEffect(() => {
     if (isValidated) {
-      fetchBalance()
+      fetchBalance();
     } else {
-      setBalance(null)
+      setBalance(null);
     }
-  }, [isValidated, fetchBalance])
+  }, [isValidated, fetchBalance]);
 
   // Subscribe to update status events
   useEffect(() => {
-    if (!window.electronAPI?.onUpdateStatus) return
+    if (!window.electronAPI?.onUpdateStatus) return;
 
     const unsubscribe = window.electronAPI.onUpdateStatus((status) => {
-      setUpdateStatus(status)
+      setUpdateStatus(status);
 
-      if (status.status === 'checking') {
-        setIsCheckingUpdate(true)
+      if (status.status === "checking") {
+        setIsCheckingUpdate(true);
       } else {
-        setIsCheckingUpdate(false)
+        setIsCheckingUpdate(false);
       }
 
-      if (status.status === 'downloading') {
-        setIsDownloading(true)
-      } else if (status.status === 'downloaded' || status.status === 'error') {
-        setIsDownloading(false)
+      if (status.status === "downloading") {
+        setIsDownloading(true);
+      } else if (status.status === "downloaded" || status.status === "error") {
+        setIsDownloading(false);
       }
-    })
+    });
 
-    return unsubscribe
-  }, [])
+    return unsubscribe;
+  }, []);
 
   const handleSave = async () => {
-    setIsSaving(true)
+    setIsSaving(true);
     try {
-      await setApiKey(inputKey)
-      const isValid = await validateApiKey()
+      await setApiKey(inputKey);
+      const isValid = await validateApiKey();
       if (isValid) {
         toast({
-          title: t('settings.apiKey.saved'),
-          description: t('settings.apiKey.savedDesc'),
-        })
+          title: t("settings.apiKey.saved"),
+          description: t("settings.apiKey.savedDesc"),
+        });
       } else {
         toast({
-          title: t('settings.apiKey.invalid'),
-          description: t('settings.apiKey.invalidDesc'),
-          variant: 'destructive',
-        })
+          title: t("settings.apiKey.invalid"),
+          description: t("settings.apiKey.invalidDesc"),
+          variant: "destructive",
+        });
       }
     } catch {
       toast({
-        title: t('settings.apiKey.error'),
-        description: t('settings.apiKey.errorDesc'),
-        variant: 'destructive',
-      })
+        title: t("settings.apiKey.error"),
+        description: t("settings.apiKey.errorDesc"),
+        variant: "destructive",
+      });
     } finally {
-      setIsSaving(false)
+      setIsSaving(false);
     }
-  }
+  };
 
   const handleClear = async () => {
-    setInputKey('')
-    await setApiKey('')
+    setInputKey("");
+    await setApiKey("");
     toast({
-      title: t('settings.apiKey.cleared'),
-      description: t('settings.apiKey.clearedDesc'),
-    })
-  }
-
-  const handleChannelChange = useCallback(async (channel: UpdateChannel) => {
-    setUpdateChannel(channel)
-    setUpdateStatus(null)
-    if (window.electronAPI?.setUpdateChannel) {
-      await window.electronAPI.setUpdateChannel(channel)
-      toast({
-        title: t('settings.updates.channelChanged'),
-        description: t('settings.updates.channelChangedDesc', { channel }),
-      })
-    }
-  }, [t])
+      title: t("settings.apiKey.cleared"),
+      description: t("settings.apiKey.clearedDesc"),
+    });
+  };
+
+  const handleChannelChange = useCallback(
+    async (channel: UpdateChannel) => {
+      setUpdateChannel(channel);
+      setUpdateStatus(null);
+      if (window.electronAPI?.setUpdateChannel) {
+        await window.electronAPI.setUpdateChannel(channel);
+        toast({
+          title: t("settings.updates.channelChanged"),
+          description: t("settings.updates.channelChangedDesc", { channel }),
+        });
+      }
+    },
+    [t],
+  );
 
   const handleAutoCheckUpdateChange = useCallback(async (checked: boolean) => {
-    setAutoCheckUpdate(checked)
+    setAutoCheckUpdate(checked);
     if (window.electronAPI?.setSettings) {
-      await window.electronAPI.setSettings({ autoCheckUpdate: checked })
+      await window.electronAPI.setSettings({ autoCheckUpdate: checked });
     }
-  }, [])
+  }, []);
 
-  const handleAutoSaveAssetsChange = useCallback(async (checked: boolean) => {
-    await setAutoSave(checked)
-    toast({
-      title: checked ? t('settings.assets.autoSaveEnabled') : t('settings.assets.autoSaveDisabled'),
-      description: checked ? t('settings.assets.autoSaveEnabledDesc') : t('settings.assets.autoSaveDisabledDesc'),
-    })
-  }, [setAutoSave, t])
+  const handleAutoSaveAssetsChange = useCallback(
+    async (checked: boolean) => {
+      await setAutoSave(checked);
+      toast({
+        title: checked
+          ? t("settings.assets.autoSaveEnabled")
+          : t("settings.assets.autoSaveDisabled"),
+        description: checked
+          ? t("settings.assets.autoSaveEnabledDesc")
+          : t("settings.assets.autoSaveDisabledDesc"),
+      });
+    },
+    [setAutoSave, t],
+  );
 
   const handleSelectAssetsDirectory = useCallback(async () => {
     if (!window.electronAPI?.selectDirectory) {
       toast({
-        title: t('common.error'),
-        description: t('settings.assets.desktopOnly'),
-        variant: 'destructive',
-      })
-      return
+        title: t("common.error"),
+        description: t("settings.assets.desktopOnly"),
+        variant: "destructive",
+      });
+      return;
     }
 
-    const result = await window.electronAPI.selectDirectory()
+    const result = await window.electronAPI.selectDirectory();
     if (result.success && result.path) {
-      await setAssetsDirectory(result.path)
+      await setAssetsDirectory(result.path);
       toast({
-        title: t('settings.assets.directoryChanged'),
-        description: t('settings.assets.directoryChangedDesc', { path: result.path }),
-      })
+        title: t("settings.assets.directoryChanged"),
+        description: t("settings.assets.directoryChangedDesc", {
+          path: result.path,
+        }),
+      });
     }
-  }, [setAssetsDirectory, t])
+  }, [setAssetsDirectory, t]);
 
   const handleCheckForUpdates = useCallback(async () => {
     if (!window.electronAPI?.checkForUpdates) {
       toast({
-        title: t('settings.updates.devMode'),
-        description: t('settings.updates.notAvailableInDev'),
-        variant: 'destructive',
-      })
-      return
+        title: t("settings.updates.devMode"),
+        description: t("settings.updates.notAvailableInDev"),
+        variant: "destructive",
+      });
+      return;
     }
 
-    setIsCheckingUpdate(true)
-    setUpdateStatus(null)
+    setIsCheckingUpdate(true);
+    setUpdateStatus(null);
 
     try {
-      const result = await window.electronAPI.checkForUpdates()
-      if (result.status === 'dev-mode') {
+      const result = await window.electronAPI.checkForUpdates();
+      if (result.status === "dev-mode") {
         toast({
-          title: t('settings.updates.devMode'),
-          description: t('settings.updates.devModeDesc'),
-        })
-      } else if (result.status === 'error') {
+          title: t("settings.updates.devMode"),
+          description: t("settings.updates.devModeDesc"),
+        });
+      } else if (result.status === "error") {
         toast({
-          title: t('settings.updates.checkFailed'),
-          description: result.message || t('settings.updates.checkFailed'),
-          variant: 'destructive',
-        })
+          title: t("settings.updates.checkFailed"),
+          description: result.message || t("settings.updates.checkFailed"),
+          variant: "destructive",
+        });
       }
     } catch {
       toast({
-        title: t('common.error'),
-        description: t('settings.updates.checkFailed'),
-        variant: 'destructive',
-      })
+        title: t("common.error"),
+        description: t("settings.updates.checkFailed"),
+        variant: "destructive",
+      });
     } finally {
-      setIsCheckingUpdate(false)
+      setIsCheckingUpdate(false);
     }
-  }, [t])
+  }, [t]);
 
   const handleDownloadUpdate = useCallback(async () => {
-    if (!window.electronAPI?.downloadUpdate) return
+    if (!window.electronAPI?.downloadUpdate) return;
 
-    setIsDownloading(true)
+    setIsDownloading(true);
     try {
-      await window.electronAPI.downloadUpdate()
+      await window.electronAPI.downloadUpdate();
     } catch {
       toast({
-        title: t('settings.updates.downloadFailed'),
-        description: t('settings.updates.downloadFailedDesc'),
-        variant: 'destructive',
-      })
-      setIsDownloading(false)
+        title: t("settings.updates.downloadFailed"),
+        description: t("settings.updates.downloadFailedDesc"),
+        variant: "destructive",
+      });
+      setIsDownloading(false);
     }
-  }, [t])
+  }, [t]);
 
   const handleInstallUpdate = useCallback(() => {
     if (window.electronAPI?.installUpdate) {
-      window.electronAPI.installUpdate()
+      window.electronAPI.installUpdate();
     }
-  }, [])
+  }, []);
 
   const renderUpdateStatus = () => {
-    if (!updateStatus) return null
+    if (!updateStatus) return null;
 
     switch (updateStatus.status) {
-      case 'checking':
+      case "checking":
         return (
           <div className="flex items-center gap-2 text-muted-foreground">
             <Loader2 className="h-4 w-4 animate-spin" />
-            <span>{t('settings.updates.checking')}</span>
+            <span>{t("settings.updates.checking")}</span>
           </div>
-        )
+        );
 
-      case 'available':
+      case "available":
         return (
           <div className="space-y-3">
             <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
               <Download className="h-4 w-4" />
-              <span>{t('settings.updates.available', { version: updateStatus.version })}</span>
+              <span>
+                {t("settings.updates.available", {
+                  version: updateStatus.version,
+                })}
+              </span>
             </div>
             <Button onClick={handleDownloadUpdate} disabled={isDownloading}>
               <Download className="mr-2 h-4 w-4" />
-              {t('settings.updates.downloadUpdate')}
+              {t("settings.updates.downloadUpdate")}
             </Button>
           </div>
-        )
+        );
 
-      case 'not-available':
+      case "not-available":
         return (
           <div className="flex items-center gap-2 text-muted-foreground">
             <Check className="h-4 w-4" />
-            <span>{t('settings.updates.notAvailable', { version: updateStatus.version })}</span>
+            <span>
+              {t("settings.updates.notAvailable", {
+                version: updateStatus.version,
+              })}
+            </span>
           </div>
-        )
+        );
 
-      case 'downloading':
+      case "downloading":
         return (
           <div className="space-y-2">
             <div className="flex items-center gap-2 text-muted-foreground">
               <Loader2 className="h-4 w-4 animate-spin" />
-              <span>{t('settings.updates.downloading', { percent: Math.round(updateStatus.percent || 0) })}</span>
+              <span>
+                {t("settings.updates.downloading", {
+                  percent: Math.round(updateStatus.percent || 0),
+                })}
+              </span>
             </div>
             <Progress value={updateStatus.percent || 0} />
           </div>
-        )
+        );
 
-      case 'downloaded':
+      case "downloaded":
         return (
           <div className="space-y-3">
             <div className="flex items-center gap-2 text-green-600 dark:text-green-400">
               <Check className="h-4 w-4" />
-              <span>{t('settings.updates.downloaded', { version: updateStatus.version })}</span>
+              <span>
+                {t("settings.updates.downloaded", {
+                  version: updateStatus.version,
+                })}
+              </span>
             </div>
             <Button onClick={handleInstallUpdate}>
               <Rocket className="mr-2 h-4 w-4" />
-              {t('settings.updates.restartInstall')}
+              {t("settings.updates.restartInstall")}
             </Button>
           </div>
-        )
+        );
 
-      case 'error':
+      case "error":
         return (
           <div className="flex items-center gap-2 text-destructive">
             <AlertCircle className="h-4 w-4" />
-            <span>{t('settings.updates.error', { message: updateStatus.message })}</span>
+            <span>
+              {t("settings.updates.error", { message: updateStatus.message })}
+            </span>
           </div>
-        )
+        );
 
       default:
-        return null
+        return null;
     }
-  }
+  };
 
   return (
     <div className="container max-w-2xl px-4 md:px-6 py-6 md:py-8 pt-14 md:pt-4">
       <div className="mb-6 md:mb-8">
         <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
           <Settings className="h-5 w-5 text-primary" />
-          {t('settings.title')}
+          {t("settings.title")}
         </h1>
         <p className="text-muted-foreground text-sm md:text-base mt-2">
-          {t('settings.description')}
+          {t("settings.description")}
         </p>
       </div>
 
@@ -643,34 +764,35 @@ export function SettingsPage() {
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle>{t('settings.apiKey.title')}</CardTitle>
+              <CardTitle>{t("settings.apiKey.title")}</CardTitle>
               <CardDescription>
-                {t('settings.apiKey.description')}
+                {t("settings.apiKey.description")}
               </CardDescription>
             </div>
             {apiKey && storeIsValidating && (
               <Badge variant="secondary">
-                <Loader2 className="mr-1 h-3 w-3 animate-spin" /> {t('settings.apiKey.validating')}
+                <Loader2 className="mr-1 h-3 w-3 animate-spin" />{" "}
+                {t("settings.apiKey.validating")}
               </Badge>
             )}
             {apiKey && !storeIsValidating && isValidated && (
               <Badge variant="success">
-                <Check className="mr-1 h-3 w-3" /> {t('settings.apiKey.valid')}
+                <Check className="mr-1 h-3 w-3" /> {t("settings.apiKey.valid")}
               </Badge>
             )}
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="apiKey">{t('settings.apiKey.label')}</Label>
+            <Label htmlFor="apiKey">{t("settings.apiKey.label")}</Label>
             <div className="flex gap-2">
               <div className="relative flex-1">
                 <Input
                   id="apiKey"
-                  type={showKey ? 'text' : 'password'}
+                  type={showKey ? "text" : "password"}
                   value={inputKey}
                   onChange={(e) => setInputKey(e.target.value)}
-                  placeholder={t('settings.apiKey.placeholder')}
+                  placeholder={t("settings.apiKey.placeholder")}
                   className="pr-10"
                 />
                 <Button
@@ -689,7 +811,7 @@ export function SettingsPage() {
               </div>
             </div>
             <p className="text-xs text-muted-foreground">
-              {t('settings.apiKey.getKey')}{' '}
+              {t("settings.apiKey.getKey")}{" "}
               <a
                 href="https://wavespeed.ai/accesskey"
                 target="_blank"
@@ -706,14 +828,14 @@ export function SettingsPage() {
               {isSaving ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('settings.apiKey.validating')}
+                  {t("settings.apiKey.validating")}
                 </>
               ) : (
-                t('settings.apiKey.save')
+                t("settings.apiKey.save")
               )}
             </Button>
             <Button variant="outline" onClick={handleClear} disabled={!apiKey}>
-              {t('common.clear')}
+              {t("common.clear")}
             </Button>
           </div>
         </CardContent>
@@ -724,9 +846,9 @@ export function SettingsPage() {
           <CardHeader>
             <div className="flex items-center justify-between">
               <div>
-                <CardTitle>{t('settings.balance.title')}</CardTitle>
+                <CardTitle>{t("settings.balance.title")}</CardTitle>
                 <CardDescription>
-                  {t('settings.balance.description')}
+                  {t("settings.balance.description")}
                 </CardDescription>
               </div>
               <Button
@@ -735,7 +857,9 @@ export function SettingsPage() {
                 onClick={fetchBalance}
                 disabled={isLoadingBalance}
               >
-                <RefreshCw className={`h-4 w-4 ${isLoadingBalance ? 'animate-spin' : ''}`} />
+                <RefreshCw
+                  className={`h-4 w-4 ${isLoadingBalance ? "animate-spin" : ""}`}
+                />
               </Button>
             </div>
           </CardHeader>
@@ -747,7 +871,7 @@ export function SettingsPage() {
                 ) : balance !== null ? (
                   `$${balance.toFixed(2)}`
                 ) : (
-                  '—'
+                  "—"
                 )}
               </span>
             </div>
@@ -757,41 +881,44 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.appearance.title')}</CardTitle>
+          <CardTitle>{t("settings.appearance.title")}</CardTitle>
           <CardDescription>
-            {t('settings.appearance.description')}
+            {t("settings.appearance.description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="theme">{t('settings.appearance.theme')}</Label>
-            <Select value={theme} onValueChange={(value) => setTheme(value as Theme)}>
+            <Label htmlFor="theme">{t("settings.appearance.theme")}</Label>
+            <Select
+              value={theme}
+              onValueChange={(value) => setTheme(value as Theme)}
+            >
               <SelectTrigger id="theme" className="w-[200px]">
-                <SelectValue placeholder={t('settings.appearance.theme')} />
+                <SelectValue placeholder={t("settings.appearance.theme")} />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="auto">
                   <div className="flex items-center gap-2">
                     <Monitor className="h-4 w-4" />
-                    <span>{t('settings.appearance.themeAuto')}</span>
+                    <span>{t("settings.appearance.themeAuto")}</span>
                   </div>
                 </SelectItem>
                 <SelectItem value="light">
                   <div className="flex items-center gap-2">
                     <Sun className="h-4 w-4" />
-                    <span>{t('settings.appearance.themeLight')}</span>
+                    <span>{t("settings.appearance.themeLight")}</span>
                   </div>
                 </SelectItem>
                 <SelectItem value="dark">
                   <div className="flex items-center gap-2">
                     <Moon className="h-4 w-4" />
-                    <span>{t('settings.appearance.themeDark')}</span>
+                    <span>{t("settings.appearance.themeDark")}</span>
                   </div>
                 </SelectItem>
               </SelectContent>
             </Select>
             <p className="text-xs text-muted-foreground">
-              {t('settings.appearance.themeDesc')}
+              {t("settings.appearance.themeDesc")}
             </p>
           </div>
         </CardContent>
@@ -799,24 +926,31 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.language.title')}</CardTitle>
+          <CardTitle>{t("settings.language.title")}</CardTitle>
           <CardDescription>
-            {t('settings.language.description')}
+            {t("settings.language.description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="language">{t('settings.language.label')}</Label>
-            <Select value={languagePreference} onValueChange={handleLanguageChange}>
+            <Label htmlFor="language">{t("settings.language.label")}</Label>
+            <Select
+              value={languagePreference}
+              onValueChange={handleLanguageChange}
+            >
               <SelectTrigger id="language" className="w-[200px]">
-                <SelectValue placeholder={t('settings.language.label')} />
+                <SelectValue placeholder={t("settings.language.label")} />
               </SelectTrigger>
               <SelectContent>
                 {languages.map((lang) => (
                   <SelectItem key={lang.code} value={lang.code}>
                     <div className="flex items-center gap-2">
                       <Globe className="h-4 w-4" />
-                      <span>{lang.code === 'auto' ? t('settings.language.auto') : lang.nativeName}</span>
+                      <span>
+                        {lang.code === "auto"
+                          ? t("settings.language.auto")
+                          : lang.nativeName}
+                      </span>
                     </div>
                   </SelectItem>
                 ))}
@@ -828,17 +962,17 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.assets.title')}</CardTitle>
-          <CardDescription>
-            {t('settings.assets.description')}
-          </CardDescription>
+          <CardTitle>{t("settings.assets.title")}</CardTitle>
+          <CardDescription>{t("settings.assets.description")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
-              <Label htmlFor="autoSaveAssets">{t('settings.assets.autoSave')}</Label>
+              <Label htmlFor="autoSaveAssets">
+                {t("settings.assets.autoSave")}
+              </Label>
               <p className="text-xs text-muted-foreground">
-                {t('settings.assets.autoSaveDesc')}
+                {t("settings.assets.autoSaveDesc")}
               </p>
             </div>
             <Switch
@@ -849,20 +983,23 @@ export function SettingsPage() {
           </div>
 
           <div className="space-y-2">
-            <Label>{t('settings.assets.directory')}</Label>
+            <Label>{t("settings.assets.directory")}</Label>
             <div className="flex gap-2">
               <Input
-                value={assetsSettings.assetsDirectory || t('settings.assets.defaultDirectory')}
+                value={
+                  assetsSettings.assetsDirectory ||
+                  t("settings.assets.defaultDirectory")
+                }
                 readOnly
                 className="flex-1"
               />
               <Button variant="outline" onClick={handleSelectAssetsDirectory}>
                 <FolderOpen className="mr-2 h-4 w-4" />
-                {t('settings.assets.browse')}
+                {t("settings.assets.browse")}
               </Button>
             </div>
             <p className="text-xs text-muted-foreground">
-              {t('settings.assets.directoryDesc')}
+              {t("settings.assets.directoryDesc")}
             </p>
           </div>
         </CardContent>
@@ -870,37 +1007,51 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.downloads.title')}</CardTitle>
+          <CardTitle>{t("settings.downloads.title")}</CardTitle>
           <CardDescription>
-            {t('settings.downloads.description')}
+            {t("settings.downloads.description")}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <div className="flex items-center gap-2">
               <Clock className="h-4 w-4 text-muted-foreground" />
-              <Label>{t('settings.downloads.downloadTimeout')}</Label>
+              <Label>{t("settings.downloads.downloadTimeout")}</Label>
             </div>
             <div className="flex items-center gap-3">
               <Select
                 value={String(generalSettings.downloadTimeout)}
-                onValueChange={(value) => setDownloadTimeout(parseInt(value, 10))}
+                onValueChange={(value) =>
+                  setDownloadTimeout(parseInt(value, 10))
+                }
               >
                 <SelectTrigger className="w-40">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="120">2 {t('settings.downloads.minutes')}</SelectItem>
-                  <SelectItem value="300">5 {t('settings.downloads.minutes')}</SelectItem>
-                  <SelectItem value="600">10 {t('settings.downloads.minutes')}</SelectItem>
-                  <SelectItem value="900">15 {t('settings.downloads.minutes')}</SelectItem>
-                  <SelectItem value="1800">30 {t('settings.downloads.minutes')}</SelectItem>
-                  <SelectItem value="3600">60 {t('settings.downloads.minutes')}</SelectItem>
+                  <SelectItem value="120">
+                    2 {t("settings.downloads.minutes")}
+                  </SelectItem>
+                  <SelectItem value="300">
+                    5 {t("settings.downloads.minutes")}
+                  </SelectItem>
+                  <SelectItem value="600">
+                    10 {t("settings.downloads.minutes")}
+                  </SelectItem>
+                  <SelectItem value="900">
+                    15 {t("settings.downloads.minutes")}
+                  </SelectItem>
+                  <SelectItem value="1800">
+                    30 {t("settings.downloads.minutes")}
+                  </SelectItem>
+                  <SelectItem value="3600">
+                    60 {t("settings.downloads.minutes")}
+                  </SelectItem>
                 </SelectContent>
               </Select>
             </div>
             <p className="text-xs text-muted-foreground">
-              {t('settings.downloads.downloadTimeoutDesc')}
+              {t("settings.downloads.downloadTimeoutDesc")}
             </p>
           </div>
         </CardContent>
@@ -908,10 +1059,8 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.cache.title')}</CardTitle>
-          <CardDescription>
-            {t('settings.cache.description')}
-          </CardDescription>
+          <CardTitle>{t("settings.cache.title")}</CardTitle>
+          <CardDescription>{t("settings.cache.description")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="flex items-center justify-between">
@@ -923,10 +1072,12 @@ export function SettingsPage() {
               <div className="space-y-0.5">
                 <div className="flex items-center gap-2">
                   <Database className="h-4 w-4 text-muted-foreground" />
-                  <Label className="cursor-pointer">{t('settings.cache.aiModels')}</Label>
+                  <Label className="cursor-pointer">
+                    {t("settings.cache.aiModels")}
+                  </Label>
                 </div>
                 <p className="text-xs text-muted-foreground">
-                  {t('settings.cache.aiModelsDesc')}
+                  {t("settings.cache.aiModelsDesc")}
                 </p>
               </div>
               {cacheSize !== null && cacheSize > 0 && (
@@ -938,13 +1089,13 @@ export function SettingsPage() {
                 {cacheSize !== null
                   ? cacheSize > 0
                     ? formatSize(cacheSize)
-                    : t('settings.cache.empty')
-                  : t('settings.cache.calculating')}
+                    : t("settings.cache.empty")
+                  : t("settings.cache.calculating")}
               </span>
               <Button
                 variant="destructive"
                 size="sm"
-                onClick={handleClearCache}
+                onClick={() => setShowClearConfirm(true)}
                 disabled={isClearingCache || cacheSize === 0}
               >
                 {isClearingCache ? (
@@ -952,7 +1103,7 @@ export function SettingsPage() {
                 ) : (
                   <>
                     <Trash2 className="mr-2 h-4 w-4" />
-                    {t('settings.cache.clear')}
+                    {t("settings.cache.clear")}
                   </>
                 )}
               </Button>
@@ -966,7 +1117,7 @@ export function SettingsPage() {
         <DialogContent className="max-w-lg max-h-[80vh] flex flex-col">
           <DialogHeader>
             <DialogTitle className="flex items-center justify-between">
-              <span>{t('settings.cache.title')}</span>
+              <span>{t("settings.cache.title")}</span>
               <span className="text-sm font-normal text-muted-foreground">
                 {formatSize(cacheSize || 0)}
               </span>
@@ -975,7 +1126,7 @@ export function SettingsPage() {
           <div className="flex-1 overflow-auto -mx-6 px-6">
             {cacheItems.length === 0 ? (
               <p className="text-sm text-muted-foreground text-center py-8">
-                {t('settings.cache.empty')}
+                {t("settings.cache.empty")}
               </p>
             ) : (
               <div className="space-y-2">
@@ -985,10 +1136,16 @@ export function SettingsPage() {
                     className="flex items-center justify-between gap-3 p-2 rounded-md bg-muted/50 group"
                   >
                     <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium truncate" title={item.url}>
+                      <p
+                        className="text-sm font-medium truncate"
+                        title={item.url}
+                      >
                         {getDisplayName(item)}
                       </p>
-                      <p className="text-xs text-muted-foreground truncate" title={item.cacheName}>
+                      <p
+                        className="text-xs text-muted-foreground truncate"
+                        title={item.cacheName}
+                      >
                         {item.cacheName}
                       </p>
                     </div>
@@ -1020,7 +1177,7 @@ export function SettingsPage() {
               <Button
                 variant="destructive"
                 size="sm"
-                onClick={handleClearCache}
+                onClick={() => setShowClearConfirm(true)}
                 disabled={isClearingCache}
               >
                 {isClearingCache ? (
@@ -1028,61 +1185,92 @@ export function SettingsPage() {
                 ) : (
                   <Trash2 className="h-4 w-4 mr-2" />
                 )}
-                {t('settings.cache.clear')}
+                {t("settings.cache.clear")}
               </Button>
             </div>
           )}
         </DialogContent>
       </Dialog>
 
+      {/* Clear Cache Confirmation */}
+      <AlertDialog open={showClearConfirm} onOpenChange={setShowClearConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("settings.cache.clear")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {cacheSize > 0
+                ? `This will delete ${formatSize(cacheSize)} of cached data including SD models and browser cache. Downloaded models will need to be re-downloaded. This cannot be undone.`
+                : "This will clear all cached data. This cannot be undone."}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={handleClearCache}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              {t("settings.cache.clear")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
       <Card className="mt-6">
         <CardHeader>
           <div className="flex items-center justify-between">
             <div>
-              <CardTitle>{t('settings.updates.title')}</CardTitle>
+              <CardTitle>{t("settings.updates.title")}</CardTitle>
               <CardDescription>
-                {t('settings.updates.description')}
+                {t("settings.updates.description")}
               </CardDescription>
             </div>
-            {appVersion && (
-              <Badge variant="outline">v{appVersion}</Badge>
-            )}
+            {appVersion && <Badge variant="outline">v{appVersion}</Badge>}
           </div>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="updateChannel">{t('settings.updates.channel')}</Label>
-            <Select value={updateChannel} onValueChange={(value) => handleChannelChange(value as UpdateChannel)}>
+            <Label htmlFor="updateChannel">
+              {t("settings.updates.channel")}
+            </Label>
+            <Select
+              value={updateChannel}
+              onValueChange={(value) =>
+                handleChannelChange(value as UpdateChannel)
+              }
+            >
               <SelectTrigger id="updateChannel" className="w-[200px]">
-                <SelectValue placeholder={t('settings.updates.channel')} />
+                <SelectValue placeholder={t("settings.updates.channel")} />
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="stable">
                   <div className="flex items-center gap-2">
                     <Shield className="h-4 w-4" />
-                    <span>{t('settings.updates.stable')}</span>
+                    <span>{t("settings.updates.stable")}</span>
                   </div>
                 </SelectItem>
                 <SelectItem value="nightly">
                   <div className="flex items-center gap-2">
                     <Rocket className="h-4 w-4" />
-                    <span>{t('settings.updates.nightly')}</span>
+                    <span>{t("settings.updates.nightly")}</span>
                   </div>
                 </SelectItem>
               </SelectContent>
             </Select>
             <p className="text-xs text-muted-foreground">
-              {updateChannel === 'stable'
-                ? t('settings.updates.stableDesc')
-                : t('settings.updates.nightlyDesc')}
+              {updateChannel === "stable"
+                ? t("settings.updates.stableDesc")
+                : t("settings.updates.nightlyDesc")}
             </p>
           </div>
 
           <div className="flex items-center justify-between">
             <div className="space-y-0.5">
-              <Label htmlFor="autoCheckUpdate">{t('settings.updates.autoCheck')}</Label>
+              <Label htmlFor="autoCheckUpdate">
+                {t("settings.updates.autoCheck")}
+              </Label>
               <p className="text-xs text-muted-foreground">
-                {t('settings.updates.autoCheckDesc')}
+                {t("settings.updates.autoCheckDesc")}
               </p>
             </div>
             <Switch
@@ -1101,12 +1289,12 @@ export function SettingsPage() {
               {isCheckingUpdate ? (
                 <>
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  {t('settings.updates.checking')}
+                  {t("settings.updates.checking")}
                 </>
               ) : (
                 <>
                   <RefreshCw className="mr-2 h-4 w-4" />
-                  {t('settings.updates.checkForUpdates')}
+                  {t("settings.updates.checkForUpdates")}
                 </>
               )}
             </Button>
@@ -1127,7 +1315,8 @@ export function SettingsPage() {
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <p className="text-sm text-muted-foreground">
-              Application logs are automatically saved to help diagnose issues. You can view the log file or open the logs directory.
+              Application logs are automatically saved to help diagnose issues.
+              You can view the log file or open the logs directory.
             </p>
             <div className="flex gap-2">
               <Button
@@ -1135,12 +1324,12 @@ export function SettingsPage() {
                 size="sm"
                 onClick={async () => {
                   if (window.electronAPI) {
-                    const logPath = await window.electronAPI.getLogFilePath()
-                    navigator.clipboard.writeText(logPath)
+                    const logPath = await window.electronAPI.getLogFilePath();
+                    navigator.clipboard.writeText(logPath);
                     toast({
-                      title: 'Log path copied',
-                      description: 'Log file path has been copied to clipboard'
-                    })
+                      title: "Log path copied",
+                      description: "Log file path has been copied to clipboard",
+                    });
                   }
                 }}
               >
@@ -1152,7 +1341,7 @@ export function SettingsPage() {
                 size="sm"
                 onClick={async () => {
                   if (window.electronAPI) {
-                    await window.electronAPI.openLogDirectory()
+                    await window.electronAPI.openLogDirectory();
                   }
                 }}
               >
@@ -1161,9 +1350,20 @@ export function SettingsPage() {
               </Button>
             </div>
             <p className="text-xs text-muted-foreground mt-2">
-              Windows: <code className="text-xs bg-muted px-1 py-0.5 rounded">%APPDATA%\wavespeed-desktop\logs\main.log</code><br />
-              macOS: <code className="text-xs bg-muted px-1 py-0.5 rounded">~/Library/Logs/wavespeed-desktop/main.log</code><br />
-              Linux: <code className="text-xs bg-muted px-1 py-0.5 rounded">~/.config/wavespeed-desktop/logs/main.log</code>
+              Windows:{" "}
+              <code className="text-xs bg-muted px-1 py-0.5 rounded">
+                %APPDATA%\wavespeed-desktop\logs\main.log
+              </code>
+              <br />
+              macOS:{" "}
+              <code className="text-xs bg-muted px-1 py-0.5 rounded">
+                ~/Library/Logs/wavespeed-desktop/main.log
+              </code>
+              <br />
+              Linux:{" "}
+              <code className="text-xs bg-muted px-1 py-0.5 rounded">
+                ~/.config/wavespeed-desktop/logs/main.log
+              </code>
             </p>
           </div>
         </CardContent>
@@ -1171,24 +1371,27 @@ export function SettingsPage() {
 
       <Card className="mt-6">
         <CardHeader>
-          <CardTitle>{t('settings.about.title')}</CardTitle>
-          <CardDescription>
-            {t('settings.about.description')}
-          </CardDescription>
+          <CardTitle>{t("settings.about.title")}</CardTitle>
+          <CardDescription>{t("settings.about.description")}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <p className="text-sm text-muted-foreground">
-            {t('settings.about.aboutText')}
+            {t("settings.about.aboutText")}
           </p>
           <Button
             variant="outline"
-            onClick={() => window.open('https://github.com/WaveSpeedAI/wavespeed-desktop', '_blank')}
+            onClick={() =>
+              window.open(
+                "https://github.com/WaveSpeedAI/wavespeed-desktop",
+                "_blank",
+              )
+            }
           >
             <Github className="mr-2 h-4 w-4" />
-            {t('settings.about.viewOnGitHub')}
+            {t("settings.about.viewOnGitHub")}
           </Button>
         </CardContent>
       </Card>
     </div>
-  )
+  );
 }
diff --git a/src/pages/SmartPlaygroundPage.tsx b/src/pages/SmartPlaygroundPage.tsx
index e6630bad..0b4afdef 100644
--- a/src/pages/SmartPlaygroundPage.tsx
+++ b/src/pages/SmartPlaygroundPage.tsx
@@ -1,432 +1,506 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { apiClient } from '@/api/client'
-import { findFamilyById, SMART_FORM_FAMILIES } from '@/lib/smartFormConfig'
-import { schemaToFormFields, getDefaultValues, type FormFieldConfig } from '@/lib/schemaToForm'
-import type { SchemaProperty } from '@/types/model'
-import type { Model } from '@/types/model'
-import type { PredictionResult } from '@/types/prediction'
-import { FormField } from '@/components/playground/FormField'
-import { OutputDisplay } from '@/components/playground/OutputDisplay'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Switch } from '@/components/ui/switch'
-import { Slider } from '@/components/ui/slider'
-import { Label } from '@/components/ui/label'
+import { useState, useEffect, useMemo, useCallback, useRef } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useModelsStore } from "@/stores/modelsStore";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { apiClient } from "@/api/client";
+import { findFamilyById, SMART_FORM_FAMILIES } from "@/lib/smartFormConfig";
+import {
+  schemaToFormFields,
+  getDefaultValues,
+  type FormFieldConfig,
+} from "@/lib/schemaToForm";
+import type { SchemaProperty } from "@/types/model";
+import type { Model } from "@/types/model";
+import type { PredictionResult } from "@/types/prediction";
+import { FormField } from "@/components/playground/FormField";
+import { OutputDisplay } from "@/components/playground/OutputDisplay";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Switch } from "@/components/ui/switch";
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { ArrowLeft, Loader2, Play, ChevronDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { toast } from '@/hooks/useToast'
+} from "@/components/ui/dropdown-menu";
+import { ArrowLeft, Loader2, Play, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "@/hooks/useToast";
 
-function getCategoryAccent(category: 'image' | 'video' | 'other') {
+function getCategoryAccent(category: "image" | "video" | "other") {
   switch (category) {
-    case 'video':
-      return 'from-purple-500 to-violet-500'
-    case 'image':
-      return 'from-sky-400 to-blue-500'
+    case "video":
+      return "from-purple-500 to-violet-500";
+    case "image":
+      return "from-sky-400 to-blue-500";
     default:
-      return 'from-emerald-400 to-teal-500'
+      return "from-emerald-400 to-teal-500";
   }
 }
 
 // Extract schema fields from a model object
-function extractModelFields(model: Model): { fields: FormFieldConfig[]; orderProps?: string[] } {
+function extractModelFields(model: Model): {
+  fields: FormFieldConfig[];
+  orderProps?: string[];
+} {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const apiSchemas = (model.api_schema as any)?.api_schemas as Array<{
-    type: string
-    request_schema?: {
-      properties?: Record<string, unknown>
-      required?: string[]
-      'x-order-properties'?: string[]
-    }
-  }> | undefined
-
-  const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
+  const apiSchemas = (model.api_schema as any)?.api_schemas as
+    | Array<{
+        type: string;
+        request_schema?: {
+          properties?: Record<string, unknown>;
+          required?: string[];
+          "x-order-properties"?: string[];
+        };
+      }>
+    | undefined;
+
+  const requestSchema = apiSchemas?.find(
+    (s) => s.type === "model_run",
+  )?.request_schema;
   if (!requestSchema?.properties) {
-    return { fields: [] }
+    return { fields: [] };
   }
   const fields = schemaToFormFields(
     requestSchema.properties as Record<string, SchemaProperty>,
     requestSchema.required || [],
-    requestSchema['x-order-properties']
-  )
-  return { fields, orderProps: requestSchema['x-order-properties'] }
+    requestSchema["x-order-properties"],
+  );
+  return { fields, orderProps: requestSchema["x-order-properties"] };
 }
 
 // Merge fields from multiple variants into one unified field list
 function mergeVariantFields(
   variants: Model[],
-  primaryVariant: string
+  primaryVariant: string,
 ): FormFieldConfig[] {
-  const fieldMap = new Map<string, FormFieldConfig>()
-  const primaryModel = variants.find(v => v.model_id === primaryVariant)
+  const fieldMap = new Map<string, FormFieldConfig>();
+  const primaryModel = variants.find((v) => v.model_id === primaryVariant);
 
   // Get primary variant's order
-  let primaryOrder: string[] | undefined
+  let primaryOrder: string[] | undefined;
   if (primaryModel) {
-    const { fields, orderProps } = extractModelFields(primaryModel)
-    primaryOrder = orderProps
+    const { fields, orderProps } = extractModelFields(primaryModel);
+    primaryOrder = orderProps;
     for (const f of fields) {
-      fieldMap.set(f.name, { ...f, required: false })
+      fieldMap.set(f.name, { ...f, required: false });
     }
   }
 
   // Merge fields from other variants (add new fields, don't overwrite existing)
   for (const variant of variants) {
-    if (variant.model_id === primaryVariant) continue
-    const { fields } = extractModelFields(variant)
+    if (variant.model_id === primaryVariant) continue;
+    const { fields } = extractModelFields(variant);
     for (const f of fields) {
       if (!fieldMap.has(f.name)) {
-        fieldMap.set(f.name, { ...f, required: false })
+        fieldMap.set(f.name, { ...f, required: false });
       }
     }
   }
 
-  const allFields = Array.from(fieldMap.values())
+  const allFields = Array.from(fieldMap.values());
 
   // Sort by primary variant's order, extras at end
   if (primaryOrder && primaryOrder.length > 0) {
     allFields.sort((a, b) => {
-      const idxA = primaryOrder!.indexOf(a.name)
-      const idxB = primaryOrder!.indexOf(b.name)
-      const orderA = idxA === -1 ? Infinity : idxA
-      const orderB = idxB === -1 ? Infinity : idxB
-      if (orderA !== orderB) return orderA - orderB
+      const idxA = primaryOrder!.indexOf(a.name);
+      const idxB = primaryOrder!.indexOf(b.name);
+      const orderA = idxA === -1 ? Infinity : idxA;
+      const orderB = idxB === -1 ? Infinity : idxB;
+      if (orderA !== orderB) return orderA - orderB;
       // For unordered fields, put prompt-like fields first
-      if (a.name === 'prompt') return -1
-      if (b.name === 'prompt') return 1
-      return a.name.localeCompare(b.name)
-    })
+      if (a.name === "prompt") return -1;
+      if (b.name === "prompt") return 1;
+      return a.name.localeCompare(b.name);
+    });
   }
 
-  return allFields
+  return allFields;
 }
 
 // Get which field names a variant accepts
 function getVariantFieldNames(model: Model): Set<string> {
-  const { fields } = extractModelFields(model)
-  return new Set(fields.map(f => f.name))
+  const { fields } = extractModelFields(model);
+  return new Set(fields.map((f) => f.name));
 }
 
 // Media field names for tracking last uploaded type
-const IMAGE_FIELD_NAMES = ['image', 'images', 'image_url', 'image_urls', 'input_image']
-const VIDEO_FIELD_NAMES = ['video', 'videos', 'video_url', 'video_urls', 'input_video']
+const IMAGE_FIELD_NAMES = [
+  "image",
+  "images",
+  "image_url",
+  "image_urls",
+  "input_image",
+];
+const VIDEO_FIELD_NAMES = [
+  "video",
+  "videos",
+  "video_url",
+  "video_urls",
+  "input_video",
+];
 
 export function SmartPlaygroundPage() {
-  const { t } = useTranslation()
-  const { familyId } = useParams<{ familyId: string }>()
-  const navigate = useNavigate()
-  const { models, fetchModels } = useModelsStore()
-  const { isValidated } = useApiKeyStore()
+  const { t } = useTranslation();
+  const { familyId } = useParams<{ familyId: string }>();
+  const navigate = useNavigate();
+  const { models, fetchModels } = useModelsStore();
+  const { isValidated } = useApiKeyStore();
 
   // Local state
-  const [toggleValues, setToggleValues] = useState<Record<string, string>>({})
-  const [formValues, setFormValues] = useState<Record<string, unknown>>({})
-  const [isRunning, setIsRunning] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [outputs, setOutputs] = useState<(string | Record<string, unknown>)[]>([])
-  const [prediction, setPrediction] = useState<PredictionResult | null>(null)
-  const [mobileView, setMobileView] = useState<'input' | 'output'>('input')
-  const [isUploading, setIsUploading] = useState(false)
-  const [calculatedPrice, setCalculatedPrice] = useState<number | null>(null)
-  const [batchEnabled, setBatchEnabled] = useState(false)
-  const [batchCount, setBatchCount] = useState(2)
-  const [batchRandomizeSeed, setBatchRandomizeSeed] = useState(true)
-  const [batchProgress, setBatchProgress] = useState<{ current: number; total: number } | null>(null)
-  const [lastMediaType, setLastMediaType] = useState<'image' | 'video' | null>(null)
-  const pricingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const defaultsInitializedRef = useRef<string | null>(null)
+  const [toggleValues, setToggleValues] = useState<Record<string, string>>({});
+  const [formValues, setFormValues] = useState<Record<string, unknown>>({});
+  const [isRunning, setIsRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [outputs, setOutputs] = useState<(string | Record<string, unknown>)[]>(
+    [],
+  );
+  const [prediction, setPrediction] = useState<PredictionResult | null>(null);
+  const [mobileView, setMobileView] = useState<"input" | "output">("input");
+  const [isUploading, setIsUploading] = useState(false);
+  const [calculatedPrice, setCalculatedPrice] = useState<number | null>(null);
+  const [batchEnabled, setBatchEnabled] = useState(false);
+  const [batchCount, setBatchCount] = useState(2);
+  const [batchRandomizeSeed, setBatchRandomizeSeed] = useState(true);
+  const [batchProgress, setBatchProgress] = useState<{
+    current: number;
+    total: number;
+  } | null>(null);
+  const [lastMediaType, setLastMediaType] = useState<"image" | "video" | null>(
+    null,
+  );
+  const pricingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const defaultsInitializedRef = useRef<string | null>(null);
 
   // Find family config (SMART_FORM_FAMILIES in deps ensures HMR updates propagate)
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const family = useMemo(() => findFamilyById(familyId || ''), [familyId, SMART_FORM_FAMILIES])
+  const family = useMemo(
+    () => findFamilyById(familyId || ""),
+    [familyId, SMART_FORM_FAMILIES],
+  );
 
   // Ensure models are fetched
   useEffect(() => {
     if (isValidated) {
-      fetchModels()
+      fetchModels();
     }
-  }, [isValidated, fetchModels])
+  }, [isValidated, fetchModels]);
 
   // Initialize toggle defaults
   useEffect(() => {
-    if (!family) return
-    const defaults: Record<string, string> = {}
+    if (!family) return;
+    const defaults: Record<string, string> = {};
     for (const toggle of family.toggles) {
-      defaults[toggle.key] = toggle.default
+      defaults[toggle.key] = toggle.default;
     }
-    setToggleValues(defaults)
-  }, [family])
+    setToggleValues(defaults);
+  }, [family]);
 
   // Get variant models
   const variantModels = useMemo(() => {
-    if (!family) return []
+    if (!family) return [];
     return family.variantIds
-      .map(id => models.find(m => m.model_id === id))
-      .filter((m): m is Model => !!m)
-  }, [family, models])
+      .map((id) => models.find((m) => m.model_id === id))
+      .filter((m): m is Model => !!m);
+  }, [family, models]);
 
   // Merged fields
   const mergedFields = useMemo(() => {
-    if (variantModels.length === 0 || !family) return []
-    const fields = mergeVariantFields(variantModels, family.primaryVariant)
+    if (variantModels.length === 0 || !family) return [];
+    const fields = mergeVariantFields(variantModels, family.primaryVariant);
     if (family.excludeFields?.length) {
-      const excluded = new Set(family.excludeFields)
-      return fields.filter(f => !excluded.has(f.name))
+      const excluded = new Set(family.excludeFields);
+      return fields.filter((f) => !excluded.has(f.name));
     }
-    return fields
-  }, [variantModels, family])
+    return fields;
+  }, [variantModels, family]);
 
   // Initialize form defaults
   useEffect(() => {
-    if (mergedFields.length === 0 || !family) return
-    if (defaultsInitializedRef.current === family.id) return
-    defaultsInitializedRef.current = family.id
-    const defaults = getDefaultValues(mergedFields)
-    setFormValues(defaults)
-  }, [mergedFields, family])
+    if (mergedFields.length === 0 || !family) return;
+    if (defaultsInitializedRef.current === family.id) return;
+    defaultsInitializedRef.current = family.id;
+    const defaults = getDefaultValues(mergedFields);
+    setFormValues(defaults);
+  }, [mergedFields, family]);
 
   // Compute filled fields (for variant resolution)
   // When both image and video are filled, only keep the last uploaded type
   const filledFields = useMemo(() => {
-    const filled = new Set<string>()
+    const filled = new Set<string>();
     for (const [key, value] of Object.entries(formValues)) {
-      if (value === undefined || value === null || value === '') continue
-      if (Array.isArray(value) && value.length === 0) continue
-      filled.add(key)
+      if (value === undefined || value === null || value === "") continue;
+      if (Array.isArray(value) && value.length === 0) continue;
+      filled.add(key);
     }
 
     // Conflict resolution: if both image and video fields are filled, remove the earlier one
-    const hasImage = IMAGE_FIELD_NAMES.some(n => filled.has(n))
-    const hasVideo = VIDEO_FIELD_NAMES.some(n => filled.has(n))
+    const hasImage = IMAGE_FIELD_NAMES.some((n) => filled.has(n));
+    const hasVideo = VIDEO_FIELD_NAMES.some((n) => filled.has(n));
     if (hasImage && hasVideo && lastMediaType) {
-      const toRemove = lastMediaType === 'video' ? IMAGE_FIELD_NAMES : VIDEO_FIELD_NAMES
-      for (const name of toRemove) filled.delete(name)
+      const toRemove =
+        lastMediaType === "video" ? IMAGE_FIELD_NAMES : VIDEO_FIELD_NAMES;
+      for (const name of toRemove) filled.delete(name);
     }
 
     // Debug: log filled fields for variant resolution
     if (filled.size > 0) {
-      console.log('[SmartPlayground] filledFields:', [...filled])
+      console.log("[SmartPlayground] filledFields:", [...filled]);
     }
-    return filled
-  }, [formValues, lastMediaType])
+    return filled;
+  }, [formValues, lastMediaType]);
 
   // Resolve variant
   const resolvedVariantId = useMemo(() => {
-    if (!family) return ''
-    const result = family.resolveVariant(filledFields, toggleValues)
-    console.log('[SmartPlayground] resolvedVariant:', result, 'filledFields:', [...filledFields])
-    return result
-  }, [family, filledFields, toggleValues])
+    if (!family) return "";
+    const result = family.resolveVariant(filledFields, toggleValues);
+    console.log("[SmartPlayground] resolvedVariant:", result, "filledFields:", [
+      ...filledFields,
+    ]);
+    return result;
+  }, [family, filledFields, toggleValues]);
 
   const resolvedModel = useMemo(() => {
-    return models.find(m => m.model_id === resolvedVariantId)
-  }, [models, resolvedVariantId])
+    return models.find((m) => m.model_id === resolvedVariantId);
+  }, [models, resolvedVariantId]);
 
   // Fields that the resolved variant accepts (for dynamic show/hide)
   const resolvedVariantFieldNames = useMemo(() => {
-    if (!resolvedModel) return new Set<string>()
-    return getVariantFieldNames(resolvedModel)
-  }, [resolvedModel])
+    if (!resolvedModel) return new Set<string>();
+    return getVariantFieldNames(resolvedModel);
+  }, [resolvedModel]);
 
   // Use resolved variant's own field configs (with its specific options/ranges),
   // plus always show trigger fields (file/loras) from merged set for variant switching
   const visibleFields = useMemo(() => {
-    if (!resolvedModel || resolvedVariantFieldNames.size === 0) return mergedFields
-    const triggerTypes = new Set(['file', 'file-array', 'loras'])
+    if (!resolvedModel || resolvedVariantFieldNames.size === 0)
+      return mergedFields;
+    const triggerTypes = new Set(["file", "file-array", "loras"]);
 
     // Get actual field configs from the resolved variant
-    const { fields: resolvedFields } = extractModelFields(resolvedModel)
-    const resolvedFieldMap = new Map(resolvedFields.map(f => [f.name, { ...f, required: false }]))
+    const { fields: resolvedFields } = extractModelFields(resolvedModel);
+    const resolvedFieldMap = new Map(
+      resolvedFields.map((f) => [f.name, { ...f, required: false }]),
+    );
 
     // Build visible fields: resolved variant's fields (with its own config) + trigger fields from merged
-    const result: FormFieldConfig[] = []
-    const added = new Set<string>()
+    const result: FormFieldConfig[] = [];
+    const added = new Set<string>();
 
     // First add fields in merged order (preserves nice ordering)
     for (const mf of mergedFields) {
       if (resolvedFieldMap.has(mf.name)) {
         // Use resolved variant's config (has correct select options, ranges, etc.)
-        result.push(resolvedFieldMap.get(mf.name)!)
-        added.add(mf.name)
+        result.push(resolvedFieldMap.get(mf.name)!);
+        added.add(mf.name);
       } else if (triggerTypes.has(mf.type)) {
         // Trigger field not in resolved variant — keep from merged for switching
-        result.push(mf)
-        added.add(mf.name)
+        result.push(mf);
+        added.add(mf.name);
       }
     }
 
-    return result
-  }, [mergedFields, resolvedModel, resolvedVariantFieldNames])
+    return result;
+  }, [mergedFields, resolvedModel, resolvedVariantFieldNames]);
 
   // Auto-disable batch when resolved variant has native max_images (e.g. sequential)
   useEffect(() => {
-    if (resolvedVariantFieldNames.has('max_images')) {
-      setBatchEnabled(false)
+    if (resolvedVariantFieldNames.has("max_images")) {
+      setBatchEnabled(false);
     }
-  }, [resolvedVariantFieldNames])
+  }, [resolvedVariantFieldNames]);
 
   // Clean up invalid select values when variant changes (e.g. 480p not available in fast)
   useEffect(() => {
-    if (visibleFields.length === 0) return
-    setFormValues(prev => {
-      const next = { ...prev }
-      let changed = false
+    if (visibleFields.length === 0) return;
+    setFormValues((prev) => {
+      const next = { ...prev };
+      let changed = false;
       for (const field of visibleFields) {
-        if (field.type === 'select' && field.options && prev[field.name] !== undefined) {
-          const currentVal = prev[field.name]
+        if (
+          field.type === "select" &&
+          field.options &&
+          prev[field.name] !== undefined
+        ) {
+          const currentVal = prev[field.name];
           if (!field.options.includes(currentVal as string | number)) {
             // Current value not in new options — reset to default or first option
-            next[field.name] = field.default ?? field.options[0]
-            changed = true
+            next[field.name] = field.default ?? field.options[0];
+            changed = true;
           }
         }
       }
-      return changed ? next : prev
-    })
-  }, [visibleFields])
+      return changed ? next : prev;
+    });
+  }, [visibleFields]);
 
   // Dynamic pricing with debounce
   useEffect(() => {
     if (!resolvedVariantId || !resolvedModel) {
-      setCalculatedPrice(null)
-      return
+      setCalculatedPrice(null);
+      return;
     }
 
     if (pricingTimeoutRef.current) {
-      clearTimeout(pricingTimeoutRef.current)
+      clearTimeout(pricingTimeoutRef.current);
     }
 
     pricingTimeoutRef.current = setTimeout(async () => {
       try {
-        const variantFieldNames = getVariantFieldNames(resolvedModel)
-        const filteredValues: Record<string, unknown> = {}
+        const variantFieldNames = getVariantFieldNames(resolvedModel);
+        const filteredValues: Record<string, unknown> = {};
         for (const [key, value] of Object.entries(formValues)) {
-          if (!variantFieldNames.has(key)) continue
-          if (value === undefined || value === null || value === '') continue
-          if (Array.isArray(value) && value.length === 0) continue
-          filteredValues[key] = value
+          if (!variantFieldNames.has(key)) continue;
+          if (value === undefined || value === null || value === "") continue;
+          if (Array.isArray(value) && value.length === 0) continue;
+          filteredValues[key] = value;
         }
-        const price = await apiClient.calculatePricing(resolvedVariantId, filteredValues)
-        setCalculatedPrice(price)
+        const price = await apiClient.calculatePricing(
+          resolvedVariantId,
+          filteredValues,
+        );
+        setCalculatedPrice(price);
       } catch {
         // Pricing calculation failed silently
       }
-    }, 500)
+    }, 500);
 
     return () => {
       if (pricingTimeoutRef.current) {
-        clearTimeout(pricingTimeoutRef.current)
+        clearTimeout(pricingTimeoutRef.current);
       }
-    }
-  }, [resolvedVariantId, resolvedModel, formValues])
+    };
+  }, [resolvedVariantId, resolvedModel, formValues]);
 
   // Handle form value change
-  const handleFieldChange = useCallback((key: string, value: unknown) => {
-    setFormValues(prev => ({ ...prev, [key]: value }))
-
-    // Track last uploaded media type
-    const isFilled = value !== undefined && value !== null && value !== '' &&
-      !(Array.isArray(value) && value.length === 0)
-    if (isFilled) {
-      if (IMAGE_FIELD_NAMES.includes(key)) setLastMediaType('image')
-      else if (VIDEO_FIELD_NAMES.includes(key)) setLastMediaType('video')
-    } else {
-      // Cleared — reset if it was this type
-      if (IMAGE_FIELD_NAMES.includes(key) && lastMediaType === 'image') setLastMediaType(null)
-      else if (VIDEO_FIELD_NAMES.includes(key) && lastMediaType === 'video') setLastMediaType(null)
-    }
-  }, [lastMediaType])
+  const handleFieldChange = useCallback(
+    (key: string, value: unknown) => {
+      setFormValues((prev) => ({ ...prev, [key]: value }));
+
+      // Track last uploaded media type
+      const isFilled =
+        value !== undefined &&
+        value !== null &&
+        value !== "" &&
+        !(Array.isArray(value) && value.length === 0);
+      if (isFilled) {
+        if (IMAGE_FIELD_NAMES.includes(key)) setLastMediaType("image");
+        else if (VIDEO_FIELD_NAMES.includes(key)) setLastMediaType("video");
+      } else {
+        // Cleared — reset if it was this type
+        if (IMAGE_FIELD_NAMES.includes(key) && lastMediaType === "image")
+          setLastMediaType(null);
+        else if (VIDEO_FIELD_NAMES.includes(key) && lastMediaType === "video")
+          setLastMediaType(null);
+      }
+    },
+    [lastMediaType],
+  );
 
   // Handle toggle change
   const handleToggleChange = useCallback((key: string, value: string) => {
-    setToggleValues(prev => ({ ...prev, [key]: value }))
-  }, [])
+    setToggleValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
 
   // Build cleaned values for the resolved variant
   const buildCleanedValues = useCallback(() => {
-    if (!resolvedModel) return {}
+    if (!resolvedModel) return {};
     // Apply family-level value mapping first (e.g. left_audio → audio for InfiniteTalk)
     const mappedValues = family?.mapValues
       ? family.mapValues({ ...formValues }, resolvedVariantId)
-      : formValues
-    const variantFieldNames = getVariantFieldNames(resolvedModel)
-    const integerFields = new Set(visibleFields.filter(f => f.schemaType === 'integer').map(f => f.name))
-    const cleanedValues: Record<string, unknown> = {}
+      : formValues;
+    const variantFieldNames = getVariantFieldNames(resolvedModel);
+    const integerFields = new Set(
+      visibleFields
+        .filter((f) => f.schemaType === "integer")
+        .map((f) => f.name),
+    );
+    const cleanedValues: Record<string, unknown> = {};
     for (const [key, value] of Object.entries(mappedValues)) {
-      if (!variantFieldNames.has(key)) continue
-      if (value === undefined || value === null || value === '') continue
-      if (Array.isArray(value) && value.length === 0) continue
+      if (!variantFieldNames.has(key)) continue;
+      if (value === undefined || value === null || value === "") continue;
+      if (Array.isArray(value) && value.length === 0) continue;
       // Ensure integer fields are sent as integers (API rejects non-integer values)
-      cleanedValues[key] = integerFields.has(key) && typeof value === 'number'
-        ? Math.round(value)
-        : value
+      cleanedValues[key] =
+        integerFields.has(key) && typeof value === "number"
+          ? Math.round(value)
+          : value;
     }
-    return cleanedValues
-  }, [resolvedModel, formValues, family, resolvedVariantId, visibleFields])
+    return cleanedValues;
+  }, [resolvedModel, formValues, family, resolvedVariantId, visibleFields]);
 
   // Run prediction (single or batch)
   const handleRun = useCallback(async () => {
-    if (!resolvedVariantId || !resolvedModel || isRunning) return
+    if (!resolvedVariantId || !resolvedModel || isRunning) return;
 
-    setIsRunning(true)
-    setError(null)
-    setOutputs([])
-    setPrediction(null)
-    setMobileView('output')
-    setBatchProgress(null)
+    setIsRunning(true);
+    setError(null);
+    setOutputs([]);
+    setPrediction(null);
+    setMobileView("output");
+    setBatchProgress(null);
 
     try {
-      const cleanedValues = buildCleanedValues()
-      const runCount = batchEnabled ? batchCount : 1
+      const cleanedValues = buildCleanedValues();
+      const runCount = batchEnabled ? batchCount : 1;
 
-      const allOutputs: (string | Record<string, unknown>)[] = []
-      let lastPrediction: PredictionResult | null = null
+      const allOutputs: (string | Record<string, unknown>)[] = [];
+      let lastPrediction: PredictionResult | null = null;
 
       for (let i = 0; i < runCount; i++) {
         if (runCount > 1) {
-          setBatchProgress({ current: i + 1, total: runCount })
+          setBatchProgress({ current: i + 1, total: runCount });
         }
 
-        const runValues = { ...cleanedValues }
+        const runValues = { ...cleanedValues };
         // Randomize seed for batch runs (skip first run to keep original seed)
-        if (batchEnabled && batchRandomizeSeed && i > 0 && 'seed' in runValues) {
-          runValues.seed = Math.floor(Math.random() * 65536)
+        if (
+          batchEnabled &&
+          batchRandomizeSeed &&
+          i > 0 &&
+          "seed" in runValues
+        ) {
+          runValues.seed = Math.floor(Math.random() * 65536);
         }
 
-        const result = await apiClient.run(resolvedVariantId, runValues)
-        lastPrediction = result
+        const result = await apiClient.run(resolvedVariantId, runValues);
+        lastPrediction = result;
         if (result.outputs) {
-          allOutputs.push(...result.outputs)
+          allOutputs.push(...result.outputs);
         }
         // Update outputs progressively
-        setOutputs([...allOutputs])
-        setPrediction(result)
+        setOutputs([...allOutputs]);
+        setPrediction(result);
       }
 
-      setPrediction(lastPrediction)
-      setOutputs(allOutputs)
+      setPrediction(lastPrediction);
+      setOutputs(allOutputs);
     } catch (err) {
-      const message = err instanceof Error ? err.message : 'Prediction failed'
-      setError(message)
+      const message = err instanceof Error ? err.message : "Prediction failed";
+      setError(message);
       toast({
-        title: t('common.error'),
+        title: t("common.error"),
         description: message,
-        variant: 'destructive',
-      })
+        variant: "destructive",
+      });
     } finally {
-      setIsRunning(false)
-      setBatchProgress(null)
+      setIsRunning(false);
+      setBatchProgress(null);
     }
-  }, [resolvedVariantId, resolvedModel, formValues, isRunning, batchEnabled, batchCount, batchRandomizeSeed, buildCleanedValues, t])
+  }, [
+    resolvedVariantId,
+    resolvedModel,
+    formValues,
+    isRunning,
+    batchEnabled,
+    batchCount,
+    batchRandomizeSeed,
+    buildCleanedValues,
+    t,
+  ]);
 
   // Not found
   if (!family) {
@@ -434,13 +508,13 @@ export function SmartPlaygroundPage() {
       <div className="flex h-full items-center justify-center">
         <div className="text-center space-y-2">
           <p className="text-muted-foreground">Family not found</p>
-          <Button variant="outline" onClick={() => navigate('/featured-models')}>
+          <Button variant="outline" onClick={() => navigate("/playground")}>
             <ArrowLeft className="h-4 w-4 mr-2" />
-            {t('smartPlayground.back')}
+            {t("smartPlayground.back")}
           </Button>
         </div>
       </div>
-    )
+    );
   }
 
   // Loading state
@@ -449,17 +523,23 @@ export function SmartPlaygroundPage() {
       <div className="flex h-full items-center justify-center">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
-    )
+    );
   }
 
-  const shortVariantId = resolvedVariantId.split('/').slice(-1)[0] || resolvedVariantId
+  const shortVariantId =
+    resolvedVariantId.split("/").slice(-1)[0] || resolvedVariantId;
 
   return (
     <div className="flex h-full flex-col overflow-hidden">
       {/* Header */}
       <div className="shrink-0 border-b px-4 py-3">
         <div className="flex items-center gap-3">
-          <Button variant="ghost" size="sm" className="h-8 w-8 p-0" onClick={() => navigate('/featured-models')}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => navigate("/playground")}
+          >
             <ArrowLeft className="h-4 w-4" />
           </Button>
           <DropdownMenu>
@@ -475,7 +555,7 @@ export function SmartPlaygroundPage() {
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="w-56">
-              {SMART_FORM_FAMILIES.map(sf => (
+              {SMART_FORM_FAMILIES.map((sf) => (
                 <button
                   key={sf.id}
                   onClick={() => navigate(`/featured-models/${sf.id}`)}
@@ -483,10 +563,14 @@ export function SmartPlaygroundPage() {
                     "flex items-center gap-2.5 w-full px-3 py-2 text-sm rounded-md transition-colors text-left",
                     sf.id === family.id
                       ? "bg-primary/10 text-primary font-medium"
-                      : "hover:bg-muted text-foreground"
+                      : "hover:bg-muted text-foreground",
                   )}
                 >
-                  <img src={sf.poster} alt={sf.name} className="h-6 w-6 rounded object-cover shrink-0" />
+                  <img
+                    src={sf.poster}
+                    alt={sf.name}
+                    className="h-6 w-6 rounded object-cover shrink-0"
+                  />
                   <span className="truncate">{sf.name}</span>
                 </button>
               ))}
@@ -494,11 +578,16 @@ export function SmartPlaygroundPage() {
           </DropdownMenu>
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2">
-              <Badge variant="outline" className="text-[10px] px-1.5 py-0 font-mono truncate max-w-[200px]">
+              <Badge
+                variant="outline"
+                className="text-[10px] px-1.5 py-0 font-mono truncate max-w-[200px]"
+              >
                 {shortVariantId}
               </Badge>
               {calculatedPrice !== null && (
-                <span className="text-[10px] text-muted-foreground font-medium">${calculatedPrice.toFixed(4)}</span>
+                <span className="text-[10px] text-muted-foreground font-medium">
+                  ${calculatedPrice.toFixed(4)}
+                </span>
               )}
             </div>
           </div>
@@ -507,20 +596,24 @@ export function SmartPlaygroundPage() {
         {/* Toggles */}
         {family.toggles.length > 0 && (
           <div className="flex items-center gap-3 mt-2">
-            {family.toggles.map(toggle => (
+            {family.toggles.map((toggle) => (
               <div key={toggle.key} className="flex items-center gap-1.5">
-                <span className="text-xs text-muted-foreground">{t(toggle.labelKey)}:</span>
+                <span className="text-xs text-muted-foreground">
+                  {t(toggle.labelKey)}:
+                </span>
                 <div className="flex rounded-md border p-0.5 bg-muted/50">
-                  {toggle.options.map(option => (
+                  {toggle.options.map((option) => (
                     <button
                       key={option.value}
                       className={cn(
                         "px-2.5 py-1 text-xs font-medium rounded transition-colors",
                         toggleValues[toggle.key] === option.value
                           ? "bg-background shadow-sm text-foreground"
-                          : "text-muted-foreground hover:text-foreground"
+                          : "text-muted-foreground hover:text-foreground",
                       )}
-                      onClick={() => handleToggleChange(toggle.key, option.value)}
+                      onClick={() =>
+                        handleToggleChange(toggle.key, option.value)
+                      }
                     >
                       {t(option.labelKey)}
                     </button>
@@ -537,48 +630,59 @@ export function SmartPlaygroundPage() {
         <button
           className={cn(
             "flex-1 py-2 text-sm font-medium text-center transition-colors border-b-2",
-            mobileView === 'input'
+            mobileView === "input"
               ? "border-primary text-primary"
-              : "border-transparent text-muted-foreground"
+              : "border-transparent text-muted-foreground",
           )}
-          onClick={() => setMobileView('input')}
+          onClick={() => setMobileView("input")}
         >
-          {t('smartPlayground.input')}
+          {t("smartPlayground.input")}
         </button>
         <button
           className={cn(
             "flex-1 py-2 text-sm font-medium text-center transition-colors border-b-2",
-            mobileView === 'output'
+            mobileView === "output"
               ? "border-primary text-primary"
-              : "border-transparent text-muted-foreground"
+              : "border-transparent text-muted-foreground",
           )}
-          onClick={() => setMobileView('output')}
+          onClick={() => setMobileView("output")}
         >
-          {t('smartPlayground.output')}
+          {t("smartPlayground.output")}
         </button>
       </div>
 
       {/* Main Content */}
       <div className="flex-1 min-h-0 flex">
         {/* Left Panel: Form (desktop always visible, mobile conditional) */}
-        <div className={cn(
-          "flex flex-col border-r",
-          "md:w-[400px] md:flex",
-          mobileView === 'input' ? "flex w-full" : "hidden"
-        )}>
+        <div
+          className={cn(
+            "flex flex-col border-r",
+            "md:w-[400px] md:flex",
+            mobileView === "input" ? "flex w-full" : "hidden",
+          )}
+        >
           {/* Variant indicator */}
           <div className="shrink-0 px-4 py-2 border-b bg-muted/30">
             <div className="flex items-center gap-1.5 text-xs">
-              <div className={cn("w-2 h-2 shrink-0 rounded-full bg-gradient-to-r", getCategoryAccent(family.category))} />
-              <span className="text-muted-foreground shrink-0">{t('smartPlayground.willCall')}:</span>
+              <div
+                className={cn(
+                  "w-2 h-2 shrink-0 rounded-full bg-gradient-to-r",
+                  getCategoryAccent(family.category),
+                )}
+              />
+              <span className="text-muted-foreground shrink-0">
+                {t("smartPlayground.willCall")}:
+              </span>
             </div>
-            <p className="font-mono text-xs font-medium mt-0.5 break-all">{resolvedVariantId}</p>
+            <p className="font-mono text-xs font-medium mt-0.5 break-all">
+              {resolvedVariantId}
+            </p>
           </div>
 
           {/* Form Fields */}
           <ScrollArea className="flex-1">
             <div className="space-y-4 p-4">
-              {visibleFields.map(field => {
+              {visibleFields.map((field) => {
                 if (field.hidden) {
                   return (
                     <HiddenFieldToggle
@@ -590,7 +694,7 @@ export function SmartPlaygroundPage() {
                       formValues={formValues}
                       onUploadingChange={setIsUploading}
                     />
-                  )
+                  );
                 }
                 return (
                   <FormField
@@ -601,7 +705,7 @@ export function SmartPlaygroundPage() {
                     formValues={formValues}
                     onUploadingChange={setIsUploading}
                   />
-                )
+                );
               })}
             </div>
           </ScrollArea>
@@ -618,20 +722,25 @@ export function SmartPlaygroundPage() {
                   <>
                     <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                     {batchProgress
-                      ? t('playground.batch.running', { current: batchProgress.current, total: batchProgress.total })
-                      : t('smartPlayground.running')
-                    }
+                      ? t("playground.batch.running", {
+                          current: batchProgress.current,
+                          total: batchProgress.total,
+                        })
+                      : t("smartPlayground.running")}
                   </>
                 ) : (
                   <>
                     <Play className="h-4 w-4 mr-2" />
                     {batchEnabled && batchCount > 1
-                      ? `${t('smartPlayground.run')} (${batchCount})`
-                      : t('smartPlayground.run')
-                    }
+                      ? `${t("smartPlayground.run")} (${batchCount})`
+                      : t("smartPlayground.run")}
                     {calculatedPrice !== null && (
                       <span className="ml-1 opacity-70">
-                        (${(calculatedPrice * (batchEnabled ? batchCount : 1)).toFixed(4)})
+                        ($
+                        {(
+                          calculatedPrice * (batchEnabled ? batchCount : 1)
+                        ).toFixed(4)}
+                        )
                       </span>
                     )}
                   </>
@@ -648,13 +757,19 @@ export function SmartPlaygroundPage() {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-64 p-4">
                   <div className="space-y-4">
-                    <div className="font-medium text-sm">{t('playground.batch.settings')}</div>
+                    <div className="font-medium text-sm">
+                      {t("playground.batch.settings")}
+                    </div>
                     {batchEnabled && (
                       <>
                         <div className="space-y-2">
                           <div className="flex items-center justify-between">
-                            <Label className="text-sm">{t('playground.batch.repeatCount')}</Label>
-                            <span className="text-sm font-medium">{batchCount}</span>
+                            <Label className="text-sm">
+                              {t("playground.batch.repeatCount")}
+                            </Label>
+                            <span className="text-sm font-medium">
+                              {batchCount}
+                            </span>
                           </div>
                           <Slider
                             value={[batchCount]}
@@ -666,7 +781,9 @@ export function SmartPlaygroundPage() {
                           />
                         </div>
                         <div className="flex items-center justify-between">
-                          <Label className="text-sm cursor-pointer">{t('playground.batch.randomizeSeed')}</Label>
+                          <Label className="text-sm cursor-pointer">
+                            {t("playground.batch.randomizeSeed")}
+                          </Label>
                           <Switch
                             checked={batchRandomizeSeed}
                             onCheckedChange={setBatchRandomizeSeed}
@@ -675,7 +792,9 @@ export function SmartPlaygroundPage() {
                       </>
                     )}
                     <div className="flex items-center justify-between pt-2 border-t">
-                      <Label className="text-sm cursor-pointer">{t('playground.batch.enable')}</Label>
+                      <Label className="text-sm cursor-pointer">
+                        {t("playground.batch.enable")}
+                      </Label>
                       <Switch
                         checked={batchEnabled}
                         onCheckedChange={setBatchEnabled}
@@ -689,11 +808,13 @@ export function SmartPlaygroundPage() {
         </div>
 
         {/* Right Panel: Output */}
-        <div className={cn(
-          "flex-1 min-w-0",
-          "md:flex",
-          mobileView === 'output' ? "flex" : "hidden md:flex"
-        )}>
+        <div
+          className={cn(
+            "flex-1 min-w-0",
+            "md:flex",
+            mobileView === "output" ? "flex" : "hidden md:flex",
+          )}
+        >
           <div className="flex-1 p-4">
             <OutputDisplay
               prediction={prediction}
@@ -707,7 +828,7 @@ export function SmartPlaygroundPage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 // Hidden field toggle component (mirrors DynamicForm pattern)
@@ -719,21 +840,21 @@ function HiddenFieldToggle({
   formValues,
   onUploadingChange,
 }: {
-  field: FormFieldConfig
-  value: unknown
-  onChange: (value: unknown) => void
-  disabled: boolean
-  formValues: Record<string, unknown>
-  onUploadingChange?: (isUploading: boolean) => void
+  field: FormFieldConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled: boolean;
+  formValues: Record<string, unknown>;
+  onUploadingChange?: (isUploading: boolean) => void;
 }) {
-  const [isEnabled, setIsEnabled] = useState(false)
+  const [isEnabled, setIsEnabled] = useState(false);
 
   const handleToggle = () => {
     if (isEnabled) {
-      onChange(undefined)
+      onChange(undefined);
     }
-    setIsEnabled(!isEnabled)
-  }
+    setIsEnabled(!isEnabled);
+  };
 
   return (
     <div className="space-y-2">
@@ -746,13 +867,17 @@ function HiddenFieldToggle({
           "border shadow-sm",
           isEnabled
             ? "bg-primary text-primary-foreground border-primary"
-            : "bg-background hover:bg-muted border-input"
+            : "bg-background hover:bg-muted border-input",
         )}
       >
-        <div className={cn(
-          "w-3 h-3 rounded-full border-2 transition-colors",
-          isEnabled ? "bg-primary-foreground border-primary-foreground" : "border-muted-foreground"
-        )} />
+        <div
+          className={cn(
+            "w-3 h-3 rounded-full border-2 transition-colors",
+            isEnabled
+              ? "bg-primary-foreground border-primary-foreground"
+              : "border-muted-foreground",
+          )}
+        />
         {field.label}
       </button>
       {field.description && !isEnabled && (
@@ -772,5 +897,5 @@ function HiddenFieldToggle({
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/pages/TemplatesPage.tsx b/src/pages/TemplatesPage.tsx
index 2bceb88b..7d48a44c 100644
--- a/src/pages/TemplatesPage.tsx
+++ b/src/pages/TemplatesPage.tsx
@@ -1,10 +1,13 @@
-import { useState, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { useTemplateStore } from '@/stores/templateStore'
-import { TemplateBrowser } from '@/components/templates/TemplateBrowser'
-import { TemplateDialog, type TemplateFormData } from '@/components/templates/TemplateDialog'
-import { Button } from '@/components/ui/button'
+import { useState, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useTemplateStore } from "@/stores/templateStore";
+import { TemplateBrowser } from "@/components/templates/TemplateBrowser";
+import {
+  TemplateDialog,
+  type TemplateFormData,
+} from "@/components/templates/TemplateDialog";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -12,49 +15,67 @@ import {
   DialogTitle,
   DialogDescription,
   DialogFooter,
-} from '@/components/ui/dialog'
-import { Label } from '@/components/ui/label'
-import { toast } from '@/hooks/useToast'
-import { Upload, GitBranch, PlayCircle, LayoutTemplate, FolderOpen } from 'lucide-react'
-import type { Template } from '@/types/template'
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { toast } from "@/hooks/useToast";
+import {
+  Upload,
+  GitBranch,
+  PlayCircle,
+  LayoutTemplate,
+  FolderOpen,
+} from "lucide-react";
+import type { Template } from "@/types/template";
 
 export function TemplatesPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const { updateTemplate, deleteTemplate, exportTemplates, importTemplates, useTemplate } = useTemplateStore()
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const {
+    updateTemplate,
+    deleteTemplate,
+    exportTemplates,
+    importTemplates,
+    useTemplate,
+  } = useTemplateStore();
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   // Edit dialog state
-  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null)
+  const [editingTemplate, setEditingTemplate] = useState<Template | null>(null);
 
   // Delete confirmation state
-  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(null)
+  const [deletingTemplate, setDeletingTemplate] = useState<Template | null>(
+    null,
+  );
 
   // Import dialog state
-  const [importFile, setImportFile] = useState<File | null>(null)
-  const [importMode, setImportMode] = useState<'merge' | 'replace'>('merge')
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importMode, setImportMode] = useState<"merge" | "replace">("merge");
 
   // Template type filter (for top tabs)
-  const [templateType, setTemplateType] = useState<'playground' | 'workflow'>('playground')
+  const [templateType, setTemplateType] = useState<"playground" | "workflow">(
+    "playground",
+  );
 
   const handleUseTemplate = async (template: Template) => {
     if (template.playgroundData) {
       // Increment use count
-      await useTemplate(template.id)
+      await useTemplate(template.id);
       // Navigate to playground with the template's model
-      navigate(`/playground/${encodeURIComponent(template.playgroundData.modelId)}?template=${template.id}`)
+      navigate(
+        `/playground/${encodeURIComponent(template.playgroundData.modelId)}?template=${template.id}`,
+      );
     } else if (template.workflowData) {
       // Navigate to workflow editor with template
-      navigate(`/workflow?template=${template.id}`)
+      navigate(`/workflow?template=${template.id}`);
     }
-  }
+  };
 
   const handleEditTemplate = (template: Template) => {
-    setEditingTemplate(template)
-  }
+    setEditingTemplate(template);
+  };
 
   const handleSaveEdit = async (data: TemplateFormData) => {
-    if (!editingTemplate) return
+    if (!editingTemplate) return;
 
     try {
       await updateTemplate(editingTemplate.id, {
@@ -62,85 +83,88 @@ export function TemplatesPage() {
         description: data.description,
         tags: data.tags,
         thumbnail: data.thumbnail ?? null,
-      })
+      });
       toast({
-        title: t('templates.templateUpdated'),
-        description: t('templates.updatedSuccessfully', { name: data.name }),
-      })
-      setEditingTemplate(null)
+        title: t("templates.templateUpdated"),
+        description: t("templates.updatedSuccessfully", { name: data.name }),
+      });
+      setEditingTemplate(null);
     } catch (error) {
       toast({
-        title: t('common.error'),
+        title: t("common.error"),
         description: (error as Error).message,
-        variant: 'destructive'
-      })
+        variant: "destructive",
+      });
     }
-  }
+  };
 
   const handleDeleteTemplate = async () => {
-    if (!deletingTemplate) return
+    if (!deletingTemplate) return;
 
     try {
-      await deleteTemplate(deletingTemplate.id)
+      await deleteTemplate(deletingTemplate.id);
       toast({
-        title: t('templates.templateDeleted'),
-        description: t('templates.deletedSuccessfully', { name: deletingTemplate.name }),
-      })
-      setDeletingTemplate(null)
+        title: t("templates.templateDeleted"),
+        description: t("templates.deletedSuccessfully", {
+          name: deletingTemplate.name,
+        }),
+      });
+      setDeletingTemplate(null);
     } catch (error) {
       toast({
-        title: t('common.error'),
+        title: t("common.error"),
         description: (error as Error).message,
-        variant: 'destructive'
-      })
+        variant: "destructive",
+      });
     }
-  }
+  };
 
   const handleExportTemplate = async (template: Template) => {
     try {
-      await exportTemplates([template.id])
+      await exportTemplates([template.id]);
       toast({
-        title: t('templates.templateExported'),
-        description: t('templates.exportedSuccessfully', { name: template.name }),
-      })
+        title: t("templates.templateExported"),
+        description: t("templates.exportedSuccessfully", {
+          name: template.name,
+        }),
+      });
     } catch (error) {
       toast({
-        title: t('common.error'),
+        title: t("common.error"),
         description: (error as Error).message,
-        variant: 'destructive'
-      })
+        variant: "destructive",
+      });
     }
-  }
-
+  };
 
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-    setImportFile(file)
-    e.target.value = ''
-  }
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setImportFile(file);
+    e.target.value = "";
+  };
 
   const handleImportConfirm = async () => {
-    if (!importFile) return
+    if (!importFile) return;
 
     try {
-      const result = await importTemplates(importFile, importMode)
+      const result = await importTemplates(importFile, importMode);
       toast({
-        title: t('templates.templatesImported'),
-        description: t('templates.importedSuccessfully', { 
-          imported: result.imported, 
-          skipped: result.skipped 
+        title: t("templates.templatesImported"),
+        description: t("templates.importedSuccessfully", {
+          imported: result.imported,
+          skipped: result.skipped,
         }),
-      })
-      setImportFile(null)
+      });
+      setImportFile(null);
     } catch (err) {
       toast({
-        title: t('templates.importFailed'),
-        description: err instanceof Error ? err.message : t('common.error'),
-        variant: 'destructive',
-      })
+        title: t("templates.importFailed"),
+        description: err instanceof Error ? err.message : t("common.error"),
+        variant: "destructive",
+      });
     }
-  }
+  };
 
   return (
     <div className="h-full flex flex-col">
@@ -148,7 +172,7 @@ export function TemplatesPage() {
       <div className="px-4 md:px-6 py-4 pt-14 md:pt-4">
         <h1 className="text-xl md:text-2xl font-bold tracking-tight mb-5 flex items-center gap-2">
           <FolderOpen className="h-5 w-5 text-primary" />
-          {t('templates.title')}
+          {t("templates.title")}
         </h1>
 
         {/* Top Bar: Template Type + Actions in one row */}
@@ -156,26 +180,26 @@ export function TemplatesPage() {
           {/* Template Type Buttons */}
           <div className="flex items-center gap-1">
             <button
-              onClick={() => setTemplateType('playground')}
+              onClick={() => setTemplateType("playground")}
               className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
-                templateType === 'playground'
-                  ? 'bg-primary/10 text-primary'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                templateType === "playground"
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
               }`}
             >
               <PlayCircle className="h-4 w-4" />
-              {t('templates.playground')}
+              {t("templates.playground")}
             </button>
             <button
-              onClick={() => setTemplateType('workflow')}
+              onClick={() => setTemplateType("workflow")}
               className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${
-                templateType === 'workflow'
-                  ? 'bg-primary/10 text-primary'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+                templateType === "workflow"
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
               }`}
             >
               <GitBranch className="h-4 w-4" />
-              {t('templates.workflow')}
+              {t("templates.workflow")}
             </button>
           </div>
 
@@ -213,51 +237,55 @@ export function TemplatesPage() {
       />
 
       {/* Delete Confirmation Dialog */}
-      <Dialog open={!!deletingTemplate} onOpenChange={(open) => !open && setDeletingTemplate(null)}>
+      <Dialog
+        open={!!deletingTemplate}
+        onOpenChange={(open) => !open && setDeletingTemplate(null)}
+      >
         <DialogContent className="max-w-sm">
           <DialogHeader>
-            <DialogTitle>{t('templates.deleteTemplate')}</DialogTitle>
+            <DialogTitle>{t("templates.deleteTemplate")}</DialogTitle>
             <DialogDescription>
-              {t('templates.deleteConfirm', { name: deletingTemplate?.name })}
+              {t("templates.deleteConfirm", { name: deletingTemplate?.name })}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
             <Button variant="outline" onClick={() => setDeletingTemplate(null)}>
-              {t('common.cancel')}
+              {t("common.cancel")}
             </Button>
             <Button variant="destructive" onClick={handleDeleteTemplate}>
-              {t('common.delete')}
+              {t("common.delete")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* Import Dialog */}
-      <Dialog open={!!importFile} onOpenChange={(open) => !open && setImportFile(null)}>
+      <Dialog
+        open={!!importFile}
+        onOpenChange={(open) => !open && setImportFile(null)}
+      >
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>{t('templates.importTemplates')}</DialogTitle>
-            <DialogDescription>
-              {t('templates.importDesc')}
-            </DialogDescription>
+            <DialogTitle>{t("templates.importTemplates")}</DialogTitle>
+            <DialogDescription>{t("templates.importDesc")}</DialogDescription>
           </DialogHeader>
           <div className="space-y-4">
             <div className="space-y-3">
-              <Label>{t('templates.importMode')}</Label>
+              <Label>{t("templates.importMode")}</Label>
               <div className="space-y-2">
                 <label className="flex items-start gap-3 p-3 border rounded-lg cursor-pointer hover:bg-muted/50">
                   <input
                     type="radio"
                     name="importMode"
                     value="merge"
-                    checked={importMode === 'merge'}
-                    onChange={() => setImportMode('merge')}
+                    checked={importMode === "merge"}
+                    onChange={() => setImportMode("merge")}
                     className="mt-0.5"
                   />
                   <div>
-                    <div className="font-medium">{t('templates.merge')}</div>
+                    <div className="font-medium">{t("templates.merge")}</div>
                     <div className="text-sm text-muted-foreground">
-                      {t('templates.mergeDesc')}
+                      {t("templates.mergeDesc")}
                     </div>
                   </div>
                 </label>
@@ -266,14 +294,16 @@ export function TemplatesPage() {
                     type="radio"
                     name="importMode"
                     value="replace"
-                    checked={importMode === 'replace'}
-                    onChange={() => setImportMode('replace')}
+                    checked={importMode === "replace"}
+                    onChange={() => setImportMode("replace")}
                     className="mt-0.5"
                   />
                   <div>
-                    <div className="font-medium">{t('templates.replaceAll')}</div>
+                    <div className="font-medium">
+                      {t("templates.replaceAll")}
+                    </div>
                     <div className="text-sm text-muted-foreground">
-                      {t('templates.replaceAllDesc')}
+                      {t("templates.replaceAllDesc")}
                     </div>
                   </div>
                 </label>
@@ -282,15 +312,15 @@ export function TemplatesPage() {
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={() => setImportFile(null)}>
-              {t('common.cancel')}
+              {t("common.cancel")}
             </Button>
             <Button onClick={handleImportConfirm}>
               <Upload className="mr-2 h-4 w-4" />
-              {t('templates.import')}
+              {t("templates.import")}
             </Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/VideoConverterPage.tsx b/src/pages/VideoConverterPage.tsx
index 6f658094..43e20a6f 100644
--- a/src/pages/VideoConverterPage.tsx
+++ b/src/pages/VideoConverterPage.tsx
@@ -1,26 +1,26 @@
-import { useState, useRef, useCallback, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { useFFmpegWorker } from '@/hooks/useFFmpegWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
+import { useState, useRef, useCallback, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { useFFmpegWorker } from "@/hooks/useFFmpegWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
 import {
   VIDEO_FORMATS,
   QUALITY_PRESETS,
   RESOLUTION_PRESETS,
-  getVideoFormat
-} from '@/lib/ffmpegFormats'
-import { formatBytes } from '@/types/progress'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+  getVideoFormat,
+} from "@/lib/ffmpegFormats";
+import { formatBytes } from "@/types/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
+  SelectValue,
+} from "@/components/ui/select";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -29,49 +29,49 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   ArrowLeft,
   Upload,
   Download,
   Loader2,
   FileVideo,
-  RefreshCw
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Phase configuration for video converter
 const PHASES = [
-  { id: 'download', labelKey: 'freeTools.ffmpeg.loading', weight: 0.1 },
-  { id: 'process', labelKey: 'freeTools.ffmpeg.converting', weight: 0.9 }
-]
+  { id: "download", labelKey: "freeTools.ffmpeg.loading", weight: 0.1 },
+  { id: "process", labelKey: "freeTools.ffmpeg.converting", weight: 0.9 },
+];
 
 export function VideoConverterPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const dragCounterRef = useRef(0)
-
-  const [videoFile, setVideoFile] = useState<File | null>(null)
-  const [videoUrl, setVideoUrl] = useState<string | null>(null)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const dragCounterRef = useRef(0);
+
+  const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [videoUrl, setVideoUrl] = useState<string | null>(null);
   const [videoInfo, setVideoInfo] = useState<{
-    duration: number
-    width: number
-    height: number
-  } | null>(null)
-  const [convertedUrl, setConvertedUrl] = useState<string | null>(null)
-  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [outputFormat, setOutputFormat] = useState('mp4-h264')
-  const [quality, setQuality] = useState('medium')
-  const [resolution, setResolution] = useState('original')
-  const [error, setError] = useState<string | null>(null)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+    duration: number;
+    width: number;
+    height: number;
+  } | null>(null);
+  const [convertedUrl, setConvertedUrl] = useState<string | null>(null);
+  const [convertedBlob, setConvertedBlob] = useState<Blob | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [outputFormat, setOutputFormat] = useState("mp4-h264");
+  const [quality, setQuality] = useState("medium");
+  const [resolution, setResolution] = useState("original");
+  const [error, setError] = useState<string | null>(null);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -80,172 +80,186 @@ export function VideoConverterPage() {
     updatePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
 
   const { convert, hasFailed, retryWorker } = useFFmpegWorker({
     onPhase: (phase) => {
-      if (phase === 'download') {
-        startPhase('download')
-      } else if (phase === 'process') {
-        startPhase('process')
+      if (phase === "download") {
+        startPhase("download");
+      } else if (phase === "process") {
+        startPhase("process");
       }
     },
     onProgress: (phase, progressValue, detail) => {
-      const phaseId = phase === 'download' ? 'download' : 'process'
-      updatePhase(phaseId, progressValue, detail)
+      const phaseId = phase === "download" ? "download" : "process";
+      updatePhase(phaseId, progressValue, detail);
     },
     onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-      resetProgress()
-    }
-  })
+      console.error("Worker error:", err);
+      setError(err);
+      setIsProcessing(false);
+      resetProgress();
+    },
+  });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, resetPage, location.pathname, navigate])
+  }, [isProcessing, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [resetPage, location.pathname, navigate]);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('video/') && !file.name.match(/\.(mp4|webm|mov|avi|mkv|m4v|wmv|flv)$/i)) {
-        return
+      if (
+        !file.type.startsWith("video/") &&
+        !file.name.match(/\.(mp4|webm|mov|avi|mkv|m4v|wmv|flv)$/i)
+      ) {
+        return;
       }
 
-      setError(null)
+      setError(null);
       // Clean up previous URLs
-      if (videoUrl) URL.revokeObjectURL(videoUrl)
-      if (convertedUrl) URL.revokeObjectURL(convertedUrl)
+      if (videoUrl) URL.revokeObjectURL(videoUrl);
+      if (convertedUrl) URL.revokeObjectURL(convertedUrl);
 
-      const url = URL.createObjectURL(file)
-      setVideoFile(file)
-      setVideoUrl(url)
-      setConvertedUrl(null)
-      setConvertedBlob(null)
-      resetProgress()
+      const url = URL.createObjectURL(file);
+      setVideoFile(file);
+      setVideoUrl(url);
+      setConvertedUrl(null);
+      setConvertedBlob(null);
+      resetProgress();
 
       // Get video info
-      const video = document.createElement('video')
-      video.addEventListener('loadedmetadata', () => {
+      const video = document.createElement("video");
+      video.addEventListener("loadedmetadata", () => {
         setVideoInfo({
           duration: video.duration,
           width: video.videoWidth,
-          height: video.videoHeight
-        })
-      })
-      video.src = url
+          height: video.videoHeight,
+        });
+      });
+      video.src = url;
     },
-    [videoUrl, convertedUrl, resetProgress]
-  )
+    [videoUrl, convertedUrl, resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const handleConvert = async () => {
-    if (!videoFile) return
+    if (!videoFile) return;
 
-    setIsProcessing(true)
-    setError(null)
-    setConvertedUrl(null)
-    setConvertedBlob(null)
-    resetAndStart('download')
+    setIsProcessing(true);
+    setError(null);
+    setConvertedUrl(null);
+    setConvertedBlob(null);
+    resetAndStart("download");
 
-    const format = getVideoFormat(outputFormat)
-    if (!format) return
+    const format = getVideoFormat(outputFormat);
+    if (!format) return;
 
-    const qualityPreset = QUALITY_PRESETS.find((q) => q.id === quality)
-    const resolutionPreset = RESOLUTION_PRESETS.find((r) => r.id === resolution)
+    const qualityPreset = QUALITY_PRESETS.find((q) => q.id === quality);
+    const resolutionPreset = RESOLUTION_PRESETS.find(
+      (r) => r.id === resolution,
+    );
 
     try {
       // Read file as ArrayBuffer
-      const arrayBuffer = await videoFile.arrayBuffer()
+      const arrayBuffer = await videoFile.arrayBuffer();
 
       // Convert using FFmpeg worker
-      const result = await convert(arrayBuffer, videoFile.name, outputFormat, format.ext, {
-        videoCodec: format.codec,
-        videoBitrate: qualityPreset?.videoBitrate,
-        audioBitrate: qualityPreset?.audioBitrate,
-        resolution: resolutionPreset?.value
-      })
+      const result = await convert(
+        arrayBuffer,
+        videoFile.name,
+        outputFormat,
+        format.ext,
+        {
+          videoCodec: format.codec,
+          videoBitrate: qualityPreset?.videoBitrate,
+          audioBitrate: qualityPreset?.audioBitrate,
+          resolution: resolutionPreset?.value,
+        },
+      );
 
       // Create blob and URL
-      const blob = new Blob([result.data], { type: format.mimeType })
-      const url = URL.createObjectURL(blob)
+      const blob = new Blob([result.data], { type: format.mimeType });
+      const url = URL.createObjectURL(blob);
 
-      setConvertedBlob(blob)
-      setConvertedUrl(url)
-      completeAllPhases()
+      setConvertedBlob(blob);
+      setConvertedUrl(url);
+      completeAllPhases();
     } catch (err) {
-      console.error('Conversion failed:', err)
-      setError(err instanceof Error ? err.message : 'Conversion failed')
+      console.error("Conversion failed:", err);
+      setError(err instanceof Error ? err.message : "Conversion failed");
     } finally {
-      setIsProcessing(false)
+      setIsProcessing(false);
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!convertedUrl || !convertedBlob || !videoFile) return
-
-    const format = getVideoFormat(outputFormat)
-    const filename = videoFile.name.replace(/\.[^.]+$/, `.${format?.ext || 'mp4'}`)
-
-    const link = document.createElement('a')
-    link.href = convertedUrl
-    link.download = filename
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+    if (!convertedUrl || !convertedBlob || !videoFile) return;
+
+    const format = getVideoFormat(outputFormat);
+    const filename = videoFile.name.replace(
+      /\.[^.]+$/,
+      `.${format?.ext || "mp4"}`,
+    );
+
+    const link = document.createElement("a");
+    link.href = convertedUrl;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <div
@@ -260,7 +274,9 @@ export function VideoConverterPage() {
         <div className="absolute inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center border-2 border-dashed border-primary rounded-lg m-4">
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
-            <p className="text-lg font-medium">{t('freeTools.videoConverter.dropToReplace')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.videoConverter.dropToReplace")}
+            </p>
           </div>
         </div>
       )}
@@ -271,9 +287,11 @@ export function VideoConverterPage() {
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
-          <h1 className="text-2xl font-bold">{t('freeTools.videoConverter.title')}</h1>
+          <h1 className="text-2xl font-bold">
+            {t("freeTools.videoConverter.title")}
+          </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.videoConverter.description')}
+            {t("freeTools.videoConverter.description")}
           </p>
         </div>
       </div>
@@ -282,10 +300,10 @@ export function VideoConverterPage() {
       {!videoFile && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
         >
@@ -293,12 +311,14 @@ export function VideoConverterPage() {
             <div className="p-4 rounded-full bg-muted mb-4">
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
-            <p className="text-lg font-medium">{t('freeTools.videoConverter.selectVideo')}</p>
+            <p className="text-lg font-medium">
+              {t("freeTools.videoConverter.selectVideo")}
+            </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.videoConverter.orDragDrop')}
+              {t("freeTools.videoConverter.orDragDrop")}
             </p>
             <p className="text-xs text-muted-foreground mt-2">
-              {t('freeTools.videoConverter.supportedFormats')}
+              {t("freeTools.videoConverter.supportedFormats")}
             </p>
           </CardContent>
         </Card>
@@ -310,9 +330,9 @@ export function VideoConverterPage() {
         accept="video/*,.mp4,.webm,.mov,.avi,.mkv,.m4v,.wmv,.flv"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
-          e.target.value = ''
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
+          e.target.value = "";
         }}
       />
 
@@ -327,10 +347,14 @@ export function VideoConverterPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.videoConverter.selectVideo')}
+              {t("freeTools.videoConverter.selectVideo")}
             </Button>
 
-            <Select value={outputFormat} onValueChange={setOutputFormat} disabled={isProcessing}>
+            <Select
+              value={outputFormat}
+              onValueChange={setOutputFormat}
+              disabled={isProcessing}
+            >
               <SelectTrigger className="w-44">
                 <SelectValue />
               </SelectTrigger>
@@ -343,7 +367,11 @@ export function VideoConverterPage() {
               </SelectContent>
             </Select>
 
-            <Select value={quality} onValueChange={setQuality} disabled={isProcessing}>
+            <Select
+              value={quality}
+              onValueChange={setQuality}
+              disabled={isProcessing}
+            >
               <SelectTrigger className="w-36">
                 <SelectValue />
               </SelectTrigger>
@@ -356,7 +384,11 @@ export function VideoConverterPage() {
               </SelectContent>
             </Select>
 
-            <Select value={resolution} onValueChange={setResolution} disabled={isProcessing}>
+            <Select
+              value={resolution}
+              onValueChange={setResolution}
+              disabled={isProcessing}
+            >
               <SelectTrigger className="w-44">
                 <SelectValue />
               </SelectTrigger>
@@ -369,16 +401,20 @@ export function VideoConverterPage() {
               </SelectContent>
             </Select>
 
-            <Button onClick={handleConvert} disabled={isProcessing} className="gradient-bg">
+            <Button
+              onClick={handleConvert}
+              disabled={isProcessing}
+              className="gradient-bg"
+            >
               {isProcessing ? (
                 <>
                   <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                  {t('freeTools.videoConverter.converting')}
+                  {t("freeTools.videoConverter.converting")}
                 </>
               ) : (
                 <>
                   <FileVideo className="h-4 w-4 mr-2" />
-                  {t('freeTools.videoConverter.convert')}
+                  {t("freeTools.videoConverter.convert")}
                 </>
               )}
             </Button>
@@ -386,7 +422,7 @@ export function VideoConverterPage() {
             {convertedUrl && (
               <Button variant="outline" onClick={handleDownload}>
                 <Download className="h-4 w-4 mr-2" />
-                {t('common.download')}
+                {t("common.download")}
               </Button>
             )}
           </div>
@@ -405,7 +441,7 @@ export function VideoConverterPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -417,11 +453,12 @@ export function VideoConverterPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.videoConverter.original')}
+                    {t("freeTools.videoConverter.original")}
                   </span>
                   {videoInfo && (
                     <span className="text-xs text-muted-foreground">
-                      {videoInfo.width}x{videoInfo.height} • {formatBytes(videoFile.size)}
+                      {videoInfo.width}x{videoInfo.height} •{" "}
+                      {formatBytes(videoFile.size)}
                     </span>
                   )}
                 </div>
@@ -442,7 +479,7 @@ export function VideoConverterPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.videoConverter.converted')}
+                    {t("freeTools.videoConverter.converted")}
                   </span>
                   {convertedBlob && (
                     <span className="text-xs text-green-600 dark:text-green-400">
@@ -461,10 +498,24 @@ export function VideoConverterPage() {
                   ) : (
                     <div className="flex flex-col items-center justify-center text-muted-foreground">
                       <FileVideo className="h-10 w-10 mb-2 opacity-30" />
-                      <span className="text-sm">{t('freeTools.videoConverter.outputSettings')}</span>
+                      <span className="text-sm">
+                        {t("freeTools.videoConverter.outputSettings")}
+                      </span>
                       <div className="text-xs mt-2 space-y-1 text-center">
-                        <div>{VIDEO_FORMATS.find((f) => f.id === outputFormat)?.label}</div>
-                        <div>{QUALITY_PRESETS.find((q) => q.id === quality)?.label} • {RESOLUTION_PRESETS.find((r) => r.id === resolution)?.label}</div>
+                        <div>
+                          {
+                            VIDEO_FORMATS.find((f) => f.id === outputFormat)
+                              ?.label
+                          }
+                        </div>
+                        <div>
+                          {QUALITY_PRESETS.find((q) => q.id === quality)?.label}{" "}
+                          •{" "}
+                          {
+                            RESOLUTION_PRESETS.find((r) => r.id === resolution)
+                              ?.label
+                          }
+                        </div>
                       </div>
                     </div>
                   )}
@@ -479,19 +530,23 @@ export function VideoConverterPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/VideoEnhancerPage.tsx b/src/pages/VideoEnhancerPage.tsx
index 1cc235b3..42d7846c 100644
--- a/src/pages/VideoEnhancerPage.tsx
+++ b/src/pages/VideoEnhancerPage.tsx
@@ -1,22 +1,22 @@
-import { useState, useRef, useCallback, useEffect, useContext } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { PageResetContext } from '@/components/layout/PageResetContext'
-import { useTranslation } from 'react-i18next'
-import { generateFreeToolFilename } from '@/stores/assetsStore'
-import { useUpscalerWorker } from '@/hooks/useUpscalerWorker'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { ProcessingProgress } from '@/components/shared/ProcessingProgress'
-import { Muxer, ArrayBufferTarget } from 'webm-muxer'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
+import { useState, useRef, useCallback, useEffect, useContext } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { PageResetContext } from "@/components/layout/PageResetContext";
+import { useTranslation } from "react-i18next";
+import { generateFreeToolFilename } from "@/stores/assetsStore";
+import { useUpscalerWorker } from "@/hooks/useUpscalerWorker";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import { ProcessingProgress } from "@/components/shared/ProcessingProgress";
+import { Muxer, ArrayBufferTarget } from "webm-muxer";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue
-} from '@/components/ui/select'
-import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+  SelectValue,
+} from "@/components/ui/select";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,47 +25,59 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { ArrowLeft, Upload, Download, Play, Square, X, RefreshCw } from 'lucide-react'
-import { cn } from '@/lib/utils'
-
-type ModelType = 'slim' | 'medium' | 'thick'
-type ScaleType = '2x' | '3x' | '4x'
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  ArrowLeft,
+  Upload,
+  Download,
+  Play,
+  Square,
+  X,
+  RefreshCw,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type ModelType = "slim" | "medium" | "thick";
+type ScaleType = "2x" | "3x" | "4x";
 
 // Phase configuration for video enhancer (model loading is cached by browser)
 const PHASES = [
-  { id: 'process', labelKey: 'freeTools.progress.processingFrames', weight: 0.9 },
-  { id: 'encode', labelKey: 'freeTools.progress.encoding', weight: 0.08 },
-  { id: 'finalize', labelKey: 'freeTools.progress.finalizing', weight: 0.02 }
-]
+  {
+    id: "process",
+    labelKey: "freeTools.progress.processingFrames",
+    weight: 0.9,
+  },
+  { id: "encode", labelKey: "freeTools.progress.encoding", weight: 0.08 },
+  { id: "finalize", labelKey: "freeTools.progress.finalizing", weight: 0.02 },
+];
 
 export function VideoEnhancerPage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { resetPage } = useContext(PageResetContext)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const outputVideoRef = useRef<HTMLVideoElement>(null)
-  const abortRef = useRef(false)
-  const dragCounterRef = useRef(0)
-
-  const [_videoFile, setVideoFile] = useState<File | null>(null)
-  const [videoUrl, setVideoUrl] = useState<string | null>(null)
-  const [isProcessing, setIsProcessing] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [model, setModel] = useState<ModelType>('slim')
-  const [scale, setScale] = useState<ScaleType>('2x')
-  const [downloadFormat, setDownloadFormat] = useState<'webm' | 'mp4'>('mp4')
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { resetPage } = useContext(PageResetContext);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const outputVideoRef = useRef<HTMLVideoElement>(null);
+  const abortRef = useRef(false);
+  const dragCounterRef = useRef(0);
+
+  const [_videoFile, setVideoFile] = useState<File | null>(null);
+  const [videoUrl, setVideoUrl] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [model, setModel] = useState<ModelType>("slim");
+  const [scale, setScale] = useState<ScaleType>("2x");
+  const [downloadFormat, setDownloadFormat] = useState<"webm" | "mp4">("mp4");
   const [supportedFormats, setSupportedFormats] = useState<{
-    webm: boolean
-    mp4: boolean
-  }>({ webm: true, mp4: false })
-  const [downloadUrl, setDownloadUrl] = useState<string | null>(null)
-  const [showPreview, setShowPreview] = useState(false)
-  const [showBackWarning, setShowBackWarning] = useState(false)
+    webm: boolean;
+    mp4: boolean;
+  }>({ webm: true, mp4: false });
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showBackWarning, setShowBackWarning] = useState(false);
 
   // Multi-phase progress tracking
   const {
@@ -75,347 +87,350 @@ export function VideoEnhancerPage() {
     completePhase,
     reset: resetProgress,
     resetAndStart,
-    complete: completeAllPhases
-  } = useMultiPhaseProgress({ phases: PHASES })
-
-  const [error, setError] = useState<string | null>(null)
-
-  const { loadModel, upscale, dispose, hasFailed, retryWorker } = useUpscalerWorker({
-    onPhase: () => {
-      // Model loading phases ignored - handled by browser caching
-    },
-    onProgress: () => {
-      // Model loading progress ignored - handled by browser caching
-    },
-    onError: (err) => {
-      console.error('Worker error:', err)
-      setError(err)
-      setIsProcessing(false)
-    }
-  })
+    complete: completeAllPhases,
+  } = useMultiPhaseProgress({ phases: PHASES });
+
+  const [error, setError] = useState<string | null>(null);
+
+  const { loadModel, upscale, dispose, hasFailed, retryWorker } =
+    useUpscalerWorker({
+      onPhase: () => {
+        // Model loading phases ignored - handled by browser caching
+      },
+      onProgress: () => {
+        // Model loading progress ignored - handled by browser caching
+      },
+      onError: (err) => {
+        console.error("Worker error:", err);
+        setError(err);
+        setIsProcessing(false);
+      },
+    });
 
   const handleRetry = useCallback(() => {
-    setError(null)
-    retryWorker()
-  }, [retryWorker])
+    setError(null);
+    retryWorker();
+  }, [retryWorker]);
 
   const handleBack = useCallback(() => {
     if (isProcessing) {
-      setShowBackWarning(true)
+      setShowBackWarning(true);
     } else {
-      abortRef.current = true
-      dispose()
-      resetPage(location.pathname)
-      navigate('/free-tools')
+      abortRef.current = true;
+      dispose();
+      resetPage(location.pathname);
+      navigate("/free-tools");
     }
-  }, [isProcessing, dispose, resetPage, location.pathname, navigate])
+  }, [isProcessing, dispose, resetPage, location.pathname, navigate]);
 
   const handleConfirmBack = useCallback(() => {
-    setShowBackWarning(false)
-    abortRef.current = true
-    dispose()
-    resetPage(location.pathname)
-    navigate('/free-tools')
-  }, [dispose, resetPage, location.pathname, navigate])
+    setShowBackWarning(false);
+    abortRef.current = true;
+    dispose();
+    resetPage(location.pathname);
+    navigate("/free-tools");
+  }, [dispose, resetPage, location.pathname, navigate]);
 
   // Check supported video formats
   useEffect(() => {
-    const webmSupported = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+    const webmSupported = MediaRecorder.isTypeSupported(
+      "video/webm;codecs=vp9",
+    );
     const mp4Supported =
-      MediaRecorder.isTypeSupported('video/mp4;codecs=avc1') ||
-      MediaRecorder.isTypeSupported('video/mp4')
-    setSupportedFormats({ webm: webmSupported, mp4: mp4Supported })
+      MediaRecorder.isTypeSupported("video/mp4;codecs=avc1") ||
+      MediaRecorder.isTypeSupported("video/mp4");
+    setSupportedFormats({ webm: webmSupported, mp4: mp4Supported });
     // Fallback to webm if mp4 is not supported (default is mp4)
     if (!mp4Supported) {
-      setDownloadFormat('webm')
+      setDownloadFormat("webm");
     }
-  }, [])
+  }, []);
 
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      if (videoUrl) URL.revokeObjectURL(videoUrl)
-      if (downloadUrl) URL.revokeObjectURL(downloadUrl)
-      abortRef.current = true
-    }
+      if (videoUrl) URL.revokeObjectURL(videoUrl);
+      if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+      abortRef.current = true;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   const handleFileSelect = useCallback(
     (file: File) => {
-      if (!file.type.startsWith('video/')) return
+      if (!file.type.startsWith("video/")) return;
 
-      setError(null)
+      setError(null);
       // Cleanup previous
-      if (videoUrl) URL.revokeObjectURL(videoUrl)
-      if (downloadUrl) URL.revokeObjectURL(downloadUrl)
-      abortRef.current = true
+      if (videoUrl) URL.revokeObjectURL(videoUrl);
+      if (downloadUrl) URL.revokeObjectURL(downloadUrl);
+      abortRef.current = true;
 
-      const url = URL.createObjectURL(file)
-      setVideoFile(file)
-      setVideoUrl(url)
-      setDownloadUrl(null)
-      resetProgress()
+      const url = URL.createObjectURL(file);
+      setVideoFile(file);
+      setVideoUrl(url);
+      setDownloadUrl(null);
+      resetProgress();
 
       // Force video to show first frame on mobile
       // Wait for video element to be ready, then seek to show preview
       setTimeout(() => {
         if (videoRef.current) {
-          videoRef.current.currentTime = 0.001
+          videoRef.current.currentTime = 0.001;
         }
-      }, 100)
+      }, 100);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     },
-    [videoUrl, downloadUrl, resetProgress]
-  )
+    [videoUrl, downloadUrl, resetProgress],
+  );
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      dragCounterRef.current = 0
-      setIsDragging(false)
-      if (isProcessing) return
-      const file = e.dataTransfer.files[0]
-      if (file) handleFileSelect(file)
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (isProcessing) return;
+      const file = e.dataTransfer.files[0];
+      if (file) handleFileSelect(file);
     },
-    [handleFileSelect, isProcessing]
-  )
+    [handleFileSelect, isProcessing],
+  );
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current++
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current++;
     if (dragCounterRef.current === 1) {
-      setIsDragging(true)
+      setIsDragging(true);
     }
-  }, [])
+  }, []);
 
   const handleDragLeave = useCallback((e: React.DragEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    dragCounterRef.current--
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current--;
     if (dragCounterRef.current === 0) {
-      setIsDragging(false)
+      setIsDragging(false);
     }
-  }, [])
+  }, []);
 
   const startProcessing = async () => {
-    if (!videoRef.current || !canvasRef.current) return
+    if (!videoRef.current || !canvasRef.current) return;
 
-    abortRef.current = false
-    setIsProcessing(true)
-    resetAndStart('process')
-    setDownloadUrl(null)
+    abortRef.current = false;
+    setIsProcessing(true);
+    resetAndStart("process");
+    setDownloadUrl(null);
 
     try {
       // Load the selected model in worker (cached by browser after first download)
-      await loadModel(model, scale)
+      await loadModel(model, scale);
 
-      const video = videoRef.current
-      const outputCanvas = canvasRef.current
+      const video = videoRef.current;
+      const outputCanvas = canvasRef.current;
 
       // Wait for video metadata
       await new Promise<void>((resolve) => {
         if (video.readyState >= 1) {
-          resolve()
+          resolve();
         } else {
-          video.onloadedmetadata = () => resolve()
+          video.onloadedmetadata = () => resolve();
         }
-      })
+      });
 
       // Get scale multiplier
-      const scaleMultiplier = parseInt(scale.replace('x', ''))
+      const scaleMultiplier = parseInt(scale.replace("x", ""));
 
       // Setup output canvas size
-      outputCanvas.width = video.videoWidth * scaleMultiplier
-      outputCanvas.height = video.videoHeight * scaleMultiplier
-      const outputCtx = outputCanvas.getContext('2d')!
+      outputCanvas.width = video.videoWidth * scaleMultiplier;
+      outputCanvas.height = video.videoHeight * scaleMultiplier;
+      const outputCtx = outputCanvas.getContext("2d")!;
 
       // Create source canvas for extracting frames
-      const sourceCanvas = document.createElement('canvas')
-      sourceCanvas.width = video.videoWidth
-      sourceCanvas.height = video.videoHeight
-      const sourceCtx = sourceCanvas.getContext('2d')!
+      const sourceCanvas = document.createElement("canvas");
+      sourceCanvas.width = video.videoWidth;
+      sourceCanvas.height = video.videoHeight;
+      const sourceCtx = sourceCanvas.getContext("2d")!;
 
-      const duration = video.duration
-      const targetFps = 30
-      const frameInterval = 1 / targetFps
-      const totalFrames = Math.ceil(duration * targetFps)
+      const duration = video.duration;
+      const targetFps = 30;
+      const frameInterval = 1 / targetFps;
+      const totalFrames = Math.ceil(duration * targetFps);
 
-      video.pause()
-      video.muted = true
+      video.pause();
+      video.muted = true;
 
       // Setup muxer
-      const muxerTarget = new ArrayBufferTarget()
+      const muxerTarget = new ArrayBufferTarget();
       const muxer = new Muxer({
         target: muxerTarget,
         video: {
-          codec: 'V_VP9',
+          codec: "V_VP9",
           width: outputCanvas.width,
           height: outputCanvas.height,
-          frameRate: targetFps
+          frameRate: targetFps,
         },
-        firstTimestampBehavior: 'offset'
-      })
+        firstTimestampBehavior: "offset",
+      });
 
       // Setup encoder
-      let encodedFrames = 0
+      let encodedFrames = 0;
       const encoder = new VideoEncoder({
         output: (chunk, meta) => {
-          encodedFrames++
-          muxer.addVideoChunk(chunk, meta)
+          encodedFrames++;
+          muxer.addVideoChunk(chunk, meta);
         },
-        error: (e) => console.error('Encoder error:', e)
-      })
+        error: (e) => console.error("Encoder error:", e),
+      });
 
       encoder.configure({
-        codec: 'vp09.00.10.08',
+        codec: "vp09.00.10.08",
         width: outputCanvas.width,
         height: outputCanvas.height,
         bitrate: 8_000_000,
-        framerate: targetFps
-      })
+        framerate: targetFps,
+      });
 
-      console.log('Processing', totalFrames, 'frames at', targetFps, 'fps')
+      console.log("Processing", totalFrames, "frames at", targetFps, "fps");
 
       // Process each frame
       for (let frameIndex = 0; frameIndex < totalFrames; frameIndex++) {
         if (abortRef.current) {
-          throw new Error('Aborted')
+          throw new Error("Aborted");
         }
 
-        const currentTime = frameIndex * frameInterval
+        const currentTime = frameIndex * frameInterval;
 
         // Seek to frame position
-        video.currentTime = currentTime
+        video.currentTime = currentTime;
         await new Promise<void>((resolve) => {
-          video.onseeked = () => resolve()
-        })
+          video.onseeked = () => resolve();
+        });
 
         // Draw video frame to source canvas
-        sourceCtx.drawImage(video, 0, 0)
+        sourceCtx.drawImage(video, 0, 0);
 
         // Get ImageData for worker
         const imageData = sourceCtx.getImageData(
           0,
           0,
           video.videoWidth,
-          video.videoHeight
-        )
+          video.videoHeight,
+        );
 
         // Upscale with worker
-        const upscaledDataUrl = await upscale(imageData)
+        const upscaledDataUrl = await upscale(imageData);
 
         // Draw upscaled result to output canvas
-        const upscaledImg = new Image()
+        const upscaledImg = new Image();
         await new Promise<void>((resolve) => {
           upscaledImg.onload = () => {
-            outputCtx.drawImage(upscaledImg, 0, 0)
-            resolve()
-          }
-          upscaledImg.src = upscaledDataUrl
-        })
+            outputCtx.drawImage(upscaledImg, 0, 0);
+            resolve();
+          };
+          upscaledImg.src = upscaledDataUrl;
+        });
 
         // Create video frame with correct timestamp
-        const timestamp = Math.round(currentTime * 1_000_000) // microseconds
-        const frame = new VideoFrame(outputCanvas, { timestamp })
-        encoder.encode(frame, { keyFrame: frameIndex % 30 === 0 })
-        frame.close()
+        const timestamp = Math.round(currentTime * 1_000_000); // microseconds
+        const frame = new VideoFrame(outputCanvas, { timestamp });
+        encoder.encode(frame, { keyFrame: frameIndex % 30 === 0 });
+        frame.close();
 
         // Update progress with frame detail
-        const frameProgress = ((frameIndex + 1) / totalFrames) * 100
-        updatePhase('process', frameProgress, {
+        const frameProgress = ((frameIndex + 1) / totalFrames) * 100;
+        updatePhase("process", frameProgress, {
           current: frameIndex + 1,
           total: totalFrames,
-          unit: 'frames'
-        })
+          unit: "frames",
+        });
 
         if (frameIndex % 30 === 0) {
-          console.log(`Frame ${frameIndex + 1}/${totalFrames}`)
+          console.log(`Frame ${frameIndex + 1}/${totalFrames}`);
         }
       }
 
-      console.log('All frames processed:', encodedFrames)
+      console.log("All frames processed:", encodedFrames);
 
-      video.currentTime = 0
-      completePhase('process')
+      video.currentTime = 0;
+      completePhase("process");
 
       // Encoding phase
-      startPhase('encode')
-      await encoder.flush()
-      encoder.close()
-      completePhase('encode')
+      startPhase("encode");
+      await encoder.flush();
+      encoder.close();
+      completePhase("encode");
 
       // Finalize phase
-      startPhase('finalize')
-      muxer.finalize()
-      const buffer = muxerTarget.buffer
+      startPhase("finalize");
+      muxer.finalize();
+      const buffer = muxerTarget.buffer;
 
       if (!buffer || buffer.byteLength === 0) {
-        throw new Error('Encoder produced no output')
+        throw new Error("Encoder produced no output");
       }
 
-      const finalBlob = new Blob([buffer], { type: 'video/webm' })
+      const finalBlob = new Blob([buffer], { type: "video/webm" });
       console.log(
-        'Final video size:',
+        "Final video size:",
         finalBlob.size,
-        'bytes, frames:',
-        encodedFrames
-      )
+        "bytes, frames:",
+        encodedFrames,
+      );
 
-      const url = URL.createObjectURL(finalBlob)
-      console.log('Created blob URL:', url)
-      setDownloadUrl(url)
-      completeAllPhases()
-      setIsProcessing(false)
+      const url = URL.createObjectURL(finalBlob);
+      console.log("Created blob URL:", url);
+      setDownloadUrl(url);
+      completeAllPhases();
+      setIsProcessing(false);
 
       // Show output video
       if (outputVideoRef.current) {
-        outputVideoRef.current.src = url
-        outputVideoRef.current.load()
+        outputVideoRef.current.src = url;
+        outputVideoRef.current.load();
       }
     } catch (error) {
-      if ((error as Error).message !== 'Aborted') {
-        console.error('Failed to process video:', error)
+      if ((error as Error).message !== "Aborted") {
+        console.error("Failed to process video:", error);
       }
-      setIsProcessing(false)
+      setIsProcessing(false);
       // Reset video state on error
       if (videoRef.current) {
-        videoRef.current.playbackRate = 1
-        videoRef.current.pause()
+        videoRef.current.playbackRate = 1;
+        videoRef.current.pause();
       }
     }
-  }
+  };
 
   const stopProcessing = () => {
-    abortRef.current = true
-    setIsProcessing(false)
-    resetProgress()
+    abortRef.current = true;
+    setIsProcessing(false);
+    resetProgress();
     if (videoRef.current) {
-      videoRef.current.pause()
-      videoRef.current.playbackRate = 1
-      videoRef.current.currentTime = 0
+      videoRef.current.pause();
+      videoRef.current.playbackRate = 1;
+      videoRef.current.currentTime = 0;
     }
-  }
+  };
 
   const handleDownload = () => {
-    if (!downloadUrl) return
+    if (!downloadUrl) return;
 
     const extension =
-      downloadFormat === 'mp4' && supportedFormats.mp4 ? 'mp4' : 'webm'
-    const link = document.createElement('a')
-    link.href = downloadUrl
-    link.download = generateFreeToolFilename('video-enhancer', extension)
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  }
+      downloadFormat === "mp4" && supportedFormats.mp4 ? "mp4" : "webm";
+    const link = document.createElement("a");
+    link.href = downloadUrl;
+    link.download = generateFreeToolFilename("video-enhancer", extension);
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <div
@@ -431,26 +446,22 @@ export function VideoEnhancerPage() {
           <div className="text-center">
             <Upload className="h-12 w-12 text-primary mx-auto mb-2" />
             <p className="text-lg font-medium">
-              {t('freeTools.videoEnhancer.orDragDrop')}
+              {t("freeTools.videoEnhancer.orDragDrop")}
             </p>
           </div>
         </div>
       )}
       {/* Header - hidden on mobile (MobileHeader already shows title) */}
       <div className="hidden md:flex items-center gap-4 mb-8">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={handleBack}
-        >
+        <Button variant="ghost" size="icon" onClick={handleBack}>
           <ArrowLeft className="h-5 w-5" />
         </Button>
         <div>
           <h1 className="text-2xl font-bold">
-            {t('freeTools.videoEnhancer.title')}
+            {t("freeTools.videoEnhancer.title")}
           </h1>
           <p className="text-muted-foreground text-sm">
-            {t('freeTools.videoEnhancer.description')}
+            {t("freeTools.videoEnhancer.description")}
           </p>
         </div>
       </div>
@@ -468,10 +479,10 @@ export function VideoEnhancerPage() {
       {!videoUrl && (
         <Card
           className={cn(
-            'border-2 border-dashed cursor-pointer transition-colors',
+            "border-2 border-dashed cursor-pointer transition-colors",
             isDragging
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-primary/50'
+              ? "border-primary bg-primary/5"
+              : "border-muted-foreground/25 hover:border-primary/50",
           )}
           onClick={() => fileInputRef.current?.click()}
           onDrop={handleDrop}
@@ -484,10 +495,10 @@ export function VideoEnhancerPage() {
               <Upload className="h-8 w-8 text-muted-foreground" />
             </div>
             <p className="text-lg font-medium">
-              {t('freeTools.videoEnhancer.selectVideo')}
+              {t("freeTools.videoEnhancer.selectVideo")}
             </p>
             <p className="text-sm text-muted-foreground">
-              {t('freeTools.videoEnhancer.orDragDrop')}
+              {t("freeTools.videoEnhancer.orDragDrop")}
             </p>
           </CardContent>
         </Card>
@@ -499,8 +510,8 @@ export function VideoEnhancerPage() {
         accept="video/*"
         className="hidden"
         onChange={(e) => {
-          const file = e.target.files?.[0]
-          if (file) handleFileSelect(file)
+          const file = e.target.files?.[0];
+          if (file) handleFileSelect(file);
         }}
       />
 
@@ -515,7 +526,7 @@ export function VideoEnhancerPage() {
               disabled={isProcessing}
             >
               <Upload className="h-4 w-4 mr-2" />
-              {t('freeTools.videoEnhancer.selectVideo')}
+              {t("freeTools.videoEnhancer.selectVideo")}
             </Button>
 
             <Select
@@ -528,13 +539,13 @@ export function VideoEnhancerPage() {
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="slim">
-                  {t('freeTools.videoEnhancer.modelFast')}
+                  {t("freeTools.videoEnhancer.modelFast")}
                 </SelectItem>
                 <SelectItem value="medium">
-                  {t('freeTools.videoEnhancer.modelBalanced')}
+                  {t("freeTools.videoEnhancer.modelBalanced")}
                 </SelectItem>
                 <SelectItem value="thick">
-                  {t('freeTools.videoEnhancer.modelQuality')}
+                  {t("freeTools.videoEnhancer.modelQuality")}
                 </SelectItem>
               </SelectContent>
             </Select>
@@ -557,12 +568,12 @@ export function VideoEnhancerPage() {
             {!isProcessing ? (
               <Button onClick={startProcessing} className="gradient-bg">
                 <Play className="h-4 w-4 mr-2" />
-                {t('freeTools.videoEnhancer.start')}
+                {t("freeTools.videoEnhancer.start")}
               </Button>
             ) : (
               <Button variant="destructive" onClick={stopProcessing}>
                 <Square className="h-4 w-4 mr-2" />
-                {t('freeTools.videoEnhancer.stop')}
+                {t("freeTools.videoEnhancer.stop")}
               </Button>
             )}
 
@@ -570,7 +581,7 @@ export function VideoEnhancerPage() {
               <>
                 <Select
                   value={downloadFormat}
-                  onValueChange={(v) => setDownloadFormat(v as 'webm' | 'mp4')}
+                  onValueChange={(v) => setDownloadFormat(v as "webm" | "mp4")}
                 >
                   <SelectTrigger className="w-28">
                     <SelectValue />
@@ -584,7 +595,7 @@ export function VideoEnhancerPage() {
                 </Select>
                 <Button variant="outline" onClick={handleDownload}>
                   <Download className="h-4 w-4 mr-2" />
-                  {t('freeTools.videoEnhancer.download')}
+                  {t("freeTools.videoEnhancer.download")}
                 </Button>
               </>
             )}
@@ -604,7 +615,7 @@ export function VideoEnhancerPage() {
               <span className="text-sm text-destructive">{error}</span>
               <Button variant="outline" size="sm" onClick={handleRetry}>
                 <RefreshCw className="h-4 w-4 mr-2" />
-                {t('common.retry')}
+                {t("common.retry")}
               </Button>
             </div>
           )}
@@ -616,7 +627,7 @@ export function VideoEnhancerPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.videoEnhancer.original')}
+                    {t("freeTools.videoEnhancer.original")}
                   </span>
                 </div>
                 <div className="relative aspect-video bg-black rounded-lg overflow-hidden">
@@ -630,8 +641,11 @@ export function VideoEnhancerPage() {
                     preload="metadata"
                     onLoadedMetadata={() => {
                       // Force show first frame on mobile
-                      if (videoRef.current && videoRef.current.currentTime === 0) {
-                        videoRef.current.currentTime = 0.001
+                      if (
+                        videoRef.current &&
+                        videoRef.current.currentTime === 0
+                      ) {
+                        videoRef.current.currentTime = 0.001;
                       }
                     }}
                   />
@@ -644,13 +658,13 @@ export function VideoEnhancerPage() {
               <CardContent className="p-4">
                 <div className="flex items-center justify-between mb-3">
                   <span className="text-sm font-medium">
-                    {t('freeTools.videoEnhancer.enhanced')}
+                    {t("freeTools.videoEnhancer.enhanced")}
                   </span>
                 </div>
                 <div
                   className={cn(
-                    'relative aspect-video bg-black rounded-lg overflow-hidden flex items-center justify-center',
-                    downloadUrl && 'cursor-pointer'
+                    "relative aspect-video bg-black rounded-lg overflow-hidden flex items-center justify-center",
+                    downloadUrl && "cursor-pointer",
                   )}
                   onClick={() => downloadUrl && setShowPreview(true)}
                 >
@@ -676,8 +690,8 @@ export function VideoEnhancerPage() {
                     ref={canvasRef}
                     className={cn(
                       isProcessing
-                        ? 'w-full h-full object-contain'
-                        : 'absolute -left-[9999px] -top-[9999px]'
+                        ? "w-full h-full object-contain"
+                        : "absolute -left-[9999px] -top-[9999px]",
                     )}
                   />
                 </div>
@@ -717,19 +731,23 @@ export function VideoEnhancerPage() {
       <AlertDialog open={showBackWarning} onOpenChange={setShowBackWarning}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>{t('freeTools.backWarning.title')}</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("freeTools.backWarning.title")}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              {t('freeTools.backWarning.description')}
+              {t("freeTools.backWarning.description")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>{t('freeTools.backWarning.cancel')}</AlertDialogCancel>
+            <AlertDialogCancel>
+              {t("freeTools.backWarning.cancel")}
+            </AlertDialogCancel>
             <AlertDialogAction onClick={handleConfirmBack}>
-              {t('freeTools.backWarning.confirm')}
+              {t("freeTools.backWarning.confirm")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
     </div>
-  )
+  );
 }
diff --git a/src/pages/WelcomePage.tsx b/src/pages/WelcomePage.tsx
index 9dffbb4c..6ebfe39a 100644
--- a/src/pages/WelcomePage.tsx
+++ b/src/pages/WelcomePage.tsx
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-import { Button } from '@/components/ui/button'
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";
 import {
   Boxes,
   FlaskConical,
@@ -12,44 +12,60 @@ import {
   GitBranch,
   ArrowRight,
   Sparkles,
-  Star
-} from 'lucide-react'
-import { cn } from '@/lib/utils'
+  Star,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 
 // Check if running in Capacitor native environment
 const isCapacitorNative = () => {
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return !!(window as any).Capacitor?.isNativePlatform?.()
+    return !!(window as any).Capacitor?.isNativePlatform?.();
   } catch {
-    return false
+    return false;
   }
-}
+};
 
 interface FeatureCardProps {
-  icon: React.ReactNode
-  title: string
-  description: string
-  gradient: string
-  shapeGradient: string
-  href: string
-  badge?: string
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  gradient: string;
+  shapeGradient: string;
+  href: string;
+  badge?: string;
+  onClick?: () => void;
 }
 
-function FeatureCard({ icon, title, description, gradient, shapeGradient, href, badge }: FeatureCardProps) {
-  const navigate = useNavigate()
-  const { t } = useTranslation()
-  const isNewFeature = href === '/workflow'
+function FeatureCard({
+  icon,
+  title,
+  description,
+  gradient,
+  shapeGradient,
+  href,
+  badge,
+  onClick,
+}: FeatureCardProps) {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const isNewFeature = href === "/workflow";
 
   return (
     <div
       className={cn(
         "relative group cursor-pointer overflow-hidden rounded-2xl border bg-card/50 backdrop-blur-sm transition-all duration-300 hover:scale-[1.02] hover:shadow-lg",
-        isNewFeature 
-          ? "border-blue-500/30 ring-2 ring-blue-500/10 hover:ring-blue-500/20" 
-          : "border-border/50 hover:border-border"
+        isNewFeature
+          ? "border-blue-500/30 ring-2 ring-blue-500/10 hover:ring-blue-500/20"
+          : "border-border/50 hover:border-border",
       )}
-      onClick={() => navigate(href)}
+      onClick={() => {
+        if (onClick) {
+          onClick();
+        } else {
+          navigate(href);
+        }
+      }}
     >
       {/* Enhanced glow for new feature */}
       {isNewFeature && (
@@ -64,28 +80,33 @@ function FeatureCard({ icon, title, description, gradient, shapeGradient, href,
       )}
 
       {/* Gradient background */}
-      <div className={cn(
-        "absolute inset-0 opacity-20 transition-opacity duration-300 group-hover:opacity-30",
-        gradient
-      )} />
+      <div
+        className={cn(
+          "absolute inset-0 opacity-20 transition-opacity duration-300 group-hover:opacity-30",
+          gradient,
+        )}
+      />
 
       {/* Floating geometric shape */}
-      <div className={cn(
-        "absolute -top-4 -right-4 w-24 h-24 rounded-2xl rotate-12 opacity-30 transition-all duration-500 group-hover:rotate-45 group-hover:opacity-50",
-        shapeGradient
-      )} />
-      <div className={cn(
-        "absolute -bottom-6 -left-6 w-20 h-20 rounded-full opacity-20 transition-all duration-500 group-hover:scale-125 group-hover:opacity-40",
-        shapeGradient
-      )} />
+      <div
+        className={cn(
+          "absolute -top-4 -right-4 w-24 h-24 rounded-2xl rotate-12 opacity-30 transition-all duration-500 group-hover:rotate-45 group-hover:opacity-50",
+          shapeGradient,
+        )}
+      />
+      <div
+        className={cn(
+          "absolute -bottom-6 -left-6 w-20 h-20 rounded-full opacity-20 transition-all duration-500 group-hover:scale-125 group-hover:opacity-40",
+          shapeGradient,
+        )}
+      />
 
       {/* Content */}
       <div className="relative z-10 p-3">
         <div className="flex items-start justify-between mb-2">
-          <div className={cn(
-            "p-2 rounded-lg bg-gradient-to-br",
-            shapeGradient
-          )}>
+          <div
+            className={cn("p-2 rounded-lg bg-gradient-to-br", shapeGradient)}
+          >
             {icon}
           </div>
           {badge && !isNewFeature && (
@@ -97,101 +118,136 @@ function FeatureCard({ icon, title, description, gradient, shapeGradient, href,
         <h3 className="text-base font-semibold mb-1">{title}</h3>
         <p className="text-sm text-muted-foreground mb-2">{description}</p>
         <div className="flex items-center text-sm font-medium text-primary opacity-0 translate-x-[-8px] transition-all duration-300 group-hover:opacity-100 group-hover:translate-x-0">
-          {t('welcome.explore')} <ArrowRight className="ml-1 h-4 w-4" />
+          {t("welcome.explore")} <ArrowRight className="ml-1 h-4 w-4" />
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export function WelcomePage() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const isMobile = isCapacitorNative()
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const isMobile = isCapacitorNative();
 
   const features: FeatureCardProps[] = [
     {
       icon: <Star className="h-6 w-6 text-amber-600 dark:text-amber-400" />,
-      title: t('welcome.featuredModels.title'),
-      description: t('welcome.featuredModels.description'),
-      gradient: 'bg-gradient-to-br from-amber-500/40 via-orange-500/20 to-transparent',
-      shapeGradient: 'from-amber-500/40 to-orange-500/30',
-      href: '/featured-models',
-      badge: t('welcome.featuredModels.badge')
+      title: t("welcome.featuredModels.title"),
+      description: t("welcome.featuredModels.description"),
+      gradient:
+        "bg-gradient-to-br from-amber-500/40 via-orange-500/20 to-transparent",
+      shapeGradient: "from-amber-500/40 to-orange-500/30",
+      href: "/playground",
+      badge: t("welcome.featuredModels.badge"),
+      onClick: () => {
+        sessionStorage.setItem("pg_rightPanelTab", "featured");
+        navigate("/playground");
+      },
     },
     {
       icon: <Boxes className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
-      title: t('welcome.features.models.title'),
-      description: t('welcome.features.models.description'),
-      gradient: 'bg-gradient-to-br from-blue-500/40 via-cyan-500/20 to-transparent',
-      shapeGradient: 'from-blue-500/40 to-cyan-500/30',
-      href: '/models',
-      badge: '500+'
+      title: t("welcome.features.models.title"),
+      description: t("welcome.features.models.description"),
+      gradient:
+        "bg-gradient-to-br from-blue-500/40 via-cyan-500/20 to-transparent",
+      shapeGradient: "from-blue-500/40 to-cyan-500/30",
+      href: "/models",
+      badge: "500+",
     },
     {
-      icon: <FlaskConical className="h-6 w-6 text-purple-600 dark:text-purple-400" />,
-      title: t('welcome.features.playground.title'),
-      description: t('welcome.features.playground.description'),
-      gradient: 'bg-gradient-to-br from-purple-500/40 via-violet-500/20 to-transparent',
-      shapeGradient: 'from-purple-500/40 to-violet-500/30',
-      href: '/playground'
+      icon: (
+        <FlaskConical className="h-6 w-6 text-purple-600 dark:text-purple-400" />
+      ),
+      title: t("welcome.features.playground.title"),
+      description: t("welcome.features.playground.description"),
+      gradient:
+        "bg-gradient-to-br from-purple-500/40 via-violet-500/20 to-transparent",
+      shapeGradient: "from-purple-500/40 to-violet-500/30",
+      href: "/playground",
     },
     {
       icon: <FileText className="h-6 w-6 text-pink-600 dark:text-pink-400" />,
-      title: t('welcome.features.templates.title'),
-      description: t('welcome.features.templates.description'),
-      gradient: 'bg-gradient-to-br from-pink-500/40 via-rose-500/20 to-transparent',
-      shapeGradient: 'from-pink-500/40 to-rose-500/30',
-      href: '/templates'
+      title: t("welcome.features.templates.title"),
+      description: t("welcome.features.templates.description"),
+      gradient:
+        "bg-gradient-to-br from-pink-500/40 via-rose-500/20 to-transparent",
+      shapeGradient: "from-pink-500/40 to-rose-500/30",
+      href: "/templates",
     },
     {
-      icon: <History className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />,
-      title: t('welcome.features.history.title'),
-      description: t('welcome.features.history.description'),
-      gradient: 'bg-gradient-to-br from-emerald-500/40 via-green-500/20 to-transparent',
-      shapeGradient: 'from-emerald-500/40 to-green-500/30',
-      href: '/history'
+      icon: (
+        <History className="h-6 w-6 text-emerald-600 dark:text-emerald-400" />
+      ),
+      title: t("welcome.features.history.title"),
+      description: t("welcome.features.history.description"),
+      gradient:
+        "bg-gradient-to-br from-emerald-500/40 via-green-500/20 to-transparent",
+      shapeGradient: "from-emerald-500/40 to-green-500/30",
+      href: "/history",
     },
     // Assets: hidden on mobile (mobile downloads directly to device)
-    ...(!isMobile ? [{
-      icon: <FolderHeart className="h-6 w-6 text-teal-600 dark:text-teal-400" />,
-      title: t('welcome.features.assets.title'),
-      description: t('welcome.features.assets.description'),
-      gradient: 'bg-gradient-to-br from-teal-500/40 via-cyan-500/20 to-transparent',
-      shapeGradient: 'from-teal-500/40 to-cyan-500/30',
-      href: '/assets'
-    }] : []),
+    ...(!isMobile
+      ? [
+          {
+            icon: (
+              <FolderHeart className="h-6 w-6 text-teal-600 dark:text-teal-400" />
+            ),
+            title: t("welcome.features.assets.title"),
+            description: t("welcome.features.assets.description"),
+            gradient:
+              "bg-gradient-to-br from-teal-500/40 via-cyan-500/20 to-transparent",
+            shapeGradient: "from-teal-500/40 to-cyan-500/30",
+            href: "/assets",
+          },
+        ]
+      : []),
     // Workflow: desktop only
-    ...(!isMobile ? [{
-      icon: <GitBranch className="h-6 w-6 text-blue-600 dark:text-blue-400" />,
-      title: t('welcome.features.workflow.title'),
-      description: t('welcome.features.workflow.description'),
-      gradient: 'bg-gradient-to-br from-blue-500/40 via-indigo-500/20 to-transparent',
-      shapeGradient: 'from-blue-500/40 to-indigo-500/30',
-      href: '/workflow',
-      badge: t('welcome.features.workflow.badge')
-    }] : []),
+    ...(!isMobile
+      ? [
+          {
+            icon: (
+              <GitBranch className="h-6 w-6 text-blue-600 dark:text-blue-400" />
+            ),
+            title: t("welcome.features.workflow.title"),
+            description: t("welcome.features.workflow.description"),
+            gradient:
+              "bg-gradient-to-br from-blue-500/40 via-indigo-500/20 to-transparent",
+            shapeGradient: "from-blue-500/40 to-indigo-500/30",
+            href: "/workflow",
+            badge: t("welcome.features.workflow.badge"),
+          },
+        ]
+      : []),
 
     {
       icon: <Wand2 className="h-6 w-6 text-orange-600 dark:text-orange-400" />,
-      title: t('welcome.features.freeTools.title'),
-      description: t('welcome.features.freeTools.description'),
-      gradient: 'bg-gradient-to-br from-orange-500/40 via-amber-500/20 to-transparent',
-      shapeGradient: 'from-orange-500/40 to-amber-500/30',
-      href: '/free-tools',
-      badge: t('welcome.features.freeTools.badge')
+      title: t("welcome.features.freeTools.title"),
+      description: t("welcome.features.freeTools.description"),
+      gradient:
+        "bg-gradient-to-br from-orange-500/40 via-amber-500/20 to-transparent",
+      shapeGradient: "from-orange-500/40 to-amber-500/30",
+      href: "/free-tools",
+      badge: t("welcome.features.freeTools.badge"),
     },
     // Z-Image: hidden on mobile (no local SD model support)
-    ...(!isMobile ? [{
-      icon: <Zap className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />,
-      title: t('welcome.features.zImage.title'),
-      description: t('welcome.features.zImage.description'),
-      gradient: 'bg-gradient-to-br from-yellow-500/40 via-amber-500/20 to-transparent',
-      shapeGradient: 'from-yellow-500/40 to-amber-500/30',
-      href: '/z-image',
-      badge: t('welcome.features.zImage.badge')
-    }] : [])
-  ]
+    ...(!isMobile
+      ? [
+          {
+            icon: (
+              <Zap className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
+            ),
+            title: t("welcome.features.zImage.title"),
+            description: t("welcome.features.zImage.description"),
+            gradient:
+              "bg-gradient-to-br from-yellow-500/40 via-amber-500/20 to-transparent",
+            shapeGradient: "from-yellow-500/40 to-amber-500/30",
+            href: "/z-image",
+            badge: t("welcome.features.zImage.badge"),
+          },
+        ]
+      : []),
+  ];
 
   return (
     <div className="min-h-full flex flex-col bg-background">
@@ -205,11 +261,15 @@ export function WelcomePage() {
               <Sparkles className="relative h-9 w-9 text-primary" />
             </div>
             <h1 className="text-2xl font-bold bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
-              {isMobile ? 'WaveSpeed Mobile' : navigator.userAgent.toLowerCase().includes('electron') ? 'WaveSpeed Desktop' : 'WaveSpeedAI Studio'}
+              {isMobile
+                ? "WaveSpeed Mobile"
+                : navigator.userAgent.toLowerCase().includes("electron")
+                  ? "WaveSpeed Desktop"
+                  : "WaveSpeedAI Studio"}
             </h1>
           </div>
           <p className="text-base text-muted-foreground max-w-lg mx-auto">
-            {t('welcome.tagline')}
+            {t("welcome.tagline")}
           </p>
         </div>
 
@@ -226,20 +286,20 @@ export function WelcomePage() {
         <div className="flex flex-wrap items-center justify-center gap-2.5">
           <Button
             size="default"
-            onClick={() => navigate('/models')}
+            onClick={() => navigate("/models")}
             className="gap-2"
           >
-            {t('welcome.getStarted')}
+            {t("welcome.getStarted")}
             <ArrowRight className="h-4 w-4" />
           </Button>
           <Button
             size="default"
             variant="outline"
-            onClick={() => navigate('/free-tools')}
+            onClick={() => navigate("/free-tools")}
             className="gap-2"
           >
             <Wand2 className="h-4 w-4" />
-            {t('welcome.tryFreeTools')}
+            {t("welcome.tryFreeTools")}
           </Button>
         </div>
       </div>
@@ -256,5 +316,5 @@ export function WelcomePage() {
         </a>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/pages/ZImagePage.tsx b/src/pages/ZImagePage.tsx
index 3a5a4165..560074cc 100644
--- a/src/pages/ZImagePage.tsx
+++ b/src/pages/ZImagePage.tsx
@@ -1,74 +1,101 @@
 // Z-Image: Local AI Image Generation using Playground components
 
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Zap, AlertCircle } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Progress } from '@/components/ui/progress'
-import { DynamicForm } from '@/components/playground/DynamicForm'
-import { OutputDisplay } from '@/components/playground/OutputDisplay'
-import { LogConsole } from '@/components/shared/LogConsole'
-import { useSDModelsStore } from '@/stores/sdModelsStore'
-import { useAssetsStore } from '@/stores/assetsStore'
-import { getDownloadTimeoutMs } from '@/stores/settingsStore'
-import { useZImage } from '@/hooks/useZImage'
-import { useMultiPhaseProgress } from '@/hooks/useMultiPhaseProgress'
-import { createZImageModel, ZIMAGE_DEFAULT_NEGATIVE_PROMPT } from '@/lib/zImageModel'
-import { schemaToFormFields, validateFormValues } from '@/lib/schemaToForm'
-import { PREDEFINED_MODELS } from '@/types/stable-diffusion'
-import { ChunkedDownloader } from '@/lib/chunkedDownloader'
-import { formatBytes } from '@/types/progress'
-import type { PredictionResult } from '@/types/prediction'
-import type { SamplingMethod, Scheduler } from '@/types/stable-diffusion'
-import type { ProgressDetail } from '@/types/progress'
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Zap, AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Progress } from "@/components/ui/progress";
+import { DynamicForm } from "@/components/playground/DynamicForm";
+import { OutputDisplay } from "@/components/playground/OutputDisplay";
+import { LogConsole } from "@/components/shared/LogConsole";
+import { useSDModelsStore } from "@/stores/sdModelsStore";
+import { useAssetsStore } from "@/stores/assetsStore";
+import { getDownloadTimeoutMs } from "@/stores/settingsStore";
+import { useZImage } from "@/hooks/useZImage";
+import { useMultiPhaseProgress } from "@/hooks/useMultiPhaseProgress";
+import {
+  createZImageModel,
+  ZIMAGE_DEFAULT_NEGATIVE_PROMPT,
+} from "@/lib/zImageModel";
+import { schemaToFormFields, validateFormValues } from "@/lib/schemaToForm";
+import { PREDEFINED_MODELS } from "@/types/stable-diffusion";
+import { ChunkedDownloader } from "@/lib/chunkedDownloader";
+import { formatBytes } from "@/types/progress";
+import type { PredictionResult } from "@/types/prediction";
+import type { SamplingMethod, Scheduler } from "@/types/stable-diffusion";
+import type { ProgressDetail } from "@/types/progress";
 
 // Check if running in Electron environment (not web polyfill)
 function isElectronAvailable(): boolean {
-  return typeof window !== 'undefined' &&
-    navigator.userAgent.toLowerCase().includes('electron') &&
+  return (
+    typeof window !== "undefined" &&
+    navigator.userAgent.toLowerCase().includes("electron") &&
     !!window.electronAPI?.sdListModels
+  );
 }
 
 const PHASES = [
-  { id: 'download-sd', labelKey: 'Downloading SD', weight: 0.125 },
-  { id: 'download-vae', labelKey: 'Downloading VAE', weight: 0.125 },
-  { id: 'download-llm', labelKey: 'Downloading LLM', weight: 0.25 },
-  { id: 'download-model', labelKey: 'Downloading Model', weight: 0.25 },
-  { id: 'generate', labelKey: 'Generating', weight: 0.25 }
-]
+  { id: "download-sd", labelKey: "Downloading SD", weight: 0.125 },
+  { id: "download-vae", labelKey: "Downloading VAE", weight: 0.125 },
+  { id: "download-llm", labelKey: "Downloading LLM", weight: 0.25 },
+  { id: "download-model", labelKey: "Downloading Model", weight: 0.25 },
+  { id: "generate", labelKey: "Generating", weight: 0.25 },
+];
 
 export function ZImagePage() {
-  const { t } = useTranslation()
-  const electronAvailable = isElectronAvailable()
+  const { t } = useTranslation();
+  const electronAvailable = isElectronAvailable();
 
   // Mobile view state for tab switching
-  const [mobileView, setMobileView] = useState<'config' | 'output'>('config')
+  const [mobileView, setMobileView] = useState<"config" | "output">("config");
 
   // Create ZImage model for DynamicForm
-  const [zImageModel] = useState(() => createZImageModel())
+  const [zImageModel] = useState(() => createZImageModel());
   const zImageFields = useMemo(() => {
-    const apiSchemas = (zImageModel.api_schema as { api_schemas?: Array<{ type: string; request_schema?: { properties?: Record<string, unknown>; required?: string[]; 'x-order-properties'?: string[] } }> })?.api_schemas
-    const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
-    if (!requestSchema?.properties) return []
+    const apiSchemas = (
+      zImageModel.api_schema as {
+        api_schemas?: Array<{
+          type: string;
+          request_schema?: {
+            properties?: Record<string, unknown>;
+            required?: string[];
+            "x-order-properties"?: string[];
+          };
+        }>;
+      }
+    )?.api_schemas;
+    const requestSchema = apiSchemas?.find(
+      (s) => s.type === "model_run",
+    )?.request_schema;
+    if (!requestSchema?.properties) return [];
     return schemaToFormFields(
-      requestSchema.properties as Record<string, import('@/types/model').SchemaProperty>,
+      requestSchema.properties as Record<
+        string,
+        import("@/types/model").SchemaProperty
+      >,
       requestSchema.required || [],
-      requestSchema['x-order-properties']
-    )
-  }, [zImageModel])
+      requestSchema["x-order-properties"],
+    );
+  }, [zImageModel]);
 
   // Form state
-  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({})
+  const [validationErrors, setValidationErrors] = useState<
+    Record<string, string>
+  >({});
 
   // Generation state
-  const [error, setError] = useState<string | null>(null)
-  const [prediction, setPrediction] = useState<PredictionResult | null>(null)
-  const [outputs, setOutputs] = useState<string[]>([])
-  const [usedSeed, setUsedSeed] = useState<number | null>(null)
-  const [metalWarning, setMetalWarning] = useState<string | null>(null)
-  const [accelerationInfo, setAccelerationInfo] = useState<{ platform: string; arch: string; acceleration: string } | null>(null)
-  const [vramMb, setVramMb] = useState<number | null>(null)
+  const [error, setError] = useState<string | null>(null);
+  const [prediction, setPrediction] = useState<PredictionResult | null>(null);
+  const [outputs, setOutputs] = useState<string[]>([]);
+  const [usedSeed, setUsedSeed] = useState<number | null>(null);
+  const [metalWarning, setMetalWarning] = useState<string | null>(null);
+  const [accelerationInfo, setAccelerationInfo] = useState<{
+    platform: string;
+    arch: string;
+    acceleration: string;
+  } | null>(null);
+  const [vramMb, setVramMb] = useState<number | null>(null);
 
   // Stores
   const {
@@ -83,14 +110,15 @@ export function ZImagePage() {
     setZImageFormValue,
     setZImageFormValues,
     isGenerating,
-    setIsGenerating
-  } = useSDModelsStore()
+    setIsGenerating,
+  } = useSDModelsStore();
 
   // Assets store for auto-registration
-  const { registerLocalAsset } = useAssetsStore()
+  const { registerLocalAsset } = useAssetsStore();
 
   // Progress tracking
-  const { progress, startPhase, updatePhase, completePhase, complete, reset } = useMultiPhaseProgress({ phases: PHASES })
+  const { progress, startPhase, updatePhase, completePhase, complete, reset } =
+    useMultiPhaseProgress({ phases: PHASES });
 
   // useZImage hook for downloads and generation
   const {
@@ -98,275 +126,325 @@ export function ZImagePage() {
     downloadVae,
     downloadBinary,
     generate: generateZImage,
-    cancelDownload
+    cancelDownload,
   } = useZImage({
     onPhase: (phase) => {
-      if (phase === 'download-binary') startPhase('download-sd')
-      else if (phase === 'download-vae') startPhase('download-vae')
-      else if (phase === 'download-llm') startPhase('download-llm')
-      else startPhase(phase)
+      if (phase === "download-binary") startPhase("download-sd");
+      else if (phase === "download-vae") startPhase("download-vae");
+      else if (phase === "download-llm") startPhase("download-llm");
+      else startPhase(phase);
     },
     onProgress: (phase, prog, detail) => {
-      const progressDetail = detail as ProgressDetail | undefined
-      if (phase === 'download-binary') {
-        updatePhase('download-sd', prog, progressDetail)
-      } else if (phase === 'download-vae') {
-        updatePhase('download-vae', prog, progressDetail)
-      } else if (phase === 'download-llm') {
-        updatePhase('download-llm', prog, progressDetail)
+      const progressDetail = detail as ProgressDetail | undefined;
+      if (phase === "download-binary") {
+        updatePhase("download-sd", prog, progressDetail);
+      } else if (phase === "download-vae") {
+        updatePhase("download-vae", prog, progressDetail);
+      } else if (phase === "download-llm") {
+        updatePhase("download-llm", prog, progressDetail);
       } else {
-        updatePhase(phase, prog, progressDetail)
+        updatePhase(phase, prog, progressDetail);
       }
     },
-    onError: (err) => setError(err)
-  })
+    onError: (err) => setError(err),
+  });
 
   // Refs for cancellation
-  const modelDownloaderRef = useRef<ChunkedDownloader | null>(null)
-  const isCancelledRef = useRef(false)
+  const modelDownloaderRef = useRef<ChunkedDownloader | null>(null);
+  const isCancelledRef = useRef(false);
 
   // Initialize on mount
   useEffect(() => {
     if (electronAvailable) {
-      fetchSDModels()
-      checkAuxiliaryModels()
+      fetchSDModels();
+      checkAuxiliaryModels();
     }
-  }, [electronAvailable, fetchSDModels, checkAuxiliaryModels])
+  }, [electronAvailable, fetchSDModels, checkAuxiliaryModels]);
 
   // Detect hardware acceleration for local generation
   useEffect(() => {
-    let active = true
+    let active = true;
     if (!electronAvailable || !window.electronAPI?.sdGetSystemInfo) {
-      return
+      return;
     }
 
-    window.electronAPI.sdGetSystemInfo().then((info) => {
-      if (!active || !info) return
-      setAccelerationInfo({ platform: info.platform, arch: info.arch, acceleration: info.acceleration })
-    }).catch(() => {
-      // Ignore acceleration detection failures
-    })
+    window.electronAPI
+      .sdGetSystemInfo()
+      .then((info) => {
+        if (!active || !info) return;
+        setAccelerationInfo({
+          platform: info.platform,
+          arch: info.arch,
+          acceleration: info.acceleration,
+        });
+      })
+      .catch(() => {
+        // Ignore acceleration detection failures
+      });
 
     return () => {
-      active = false
-    }
-  }, [electronAvailable])
+      active = false;
+    };
+  }, [electronAvailable]);
 
   // Detect GPU VRAM for auto-toggling low VRAM settings
   useEffect(() => {
-    let active = true
+    let active = true;
     if (!electronAvailable || !window.electronAPI?.sdGetGpuVramMb) {
-      return
+      return;
     }
 
-    window.electronAPI.sdGetGpuVramMb().then((result) => {
-      if (!active) return
-      if (result?.success && Number.isFinite(result.vramMb)) {
-        setVramMb(result.vramMb)
-      } else {
-        setVramMb(null)
-      }
-    }).catch(() => {
-      // Ignore VRAM detection failures
-    })
+    window.electronAPI
+      .sdGetGpuVramMb()
+      .then((result) => {
+        if (!active) return;
+        if (result?.success && Number.isFinite(result.vramMb)) {
+          setVramMb(result.vramMb);
+        } else {
+          setVramMb(null);
+        }
+      })
+      .catch(() => {
+        // Ignore VRAM detection failures
+      });
 
     return () => {
-      active = false
-    }
-  }, [electronAvailable])
+      active = false;
+    };
+  }, [electronAvailable]);
 
-  const isLowVramGpu = vramMb !== null && vramMb < 16000
-  const hasWindowsGpu = accelerationInfo?.platform === 'win32' && accelerationInfo.arch === 'x64' && (accelerationInfo.acceleration !== 'CPU' || vramMb !== null)
+  const isLowVramGpu = vramMb !== null && vramMb < 16000;
+  const hasWindowsGpu =
+    accelerationInfo?.platform === "win32" &&
+    accelerationInfo.arch === "x64" &&
+    (accelerationInfo.acceleration !== "CPU" || vramMb !== null);
 
   useEffect(() => {
-    if (!isLowVramGpu) return
-    setZImageFormValue('low_vram_mode', true)
-    setZImageFormValue('vae_tiling', true)
-  }, [isLowVramGpu, setZImageFormValue])
+    if (!isLowVramGpu) return;
+    setZImageFormValue("low_vram_mode", true);
+    setZImageFormValue("vae_tiling", true);
+  }, [isLowVramGpu, setZImageFormValue]);
 
   // Listen for generation progress from sd.cpp
   useEffect(() => {
     if (!electronAvailable || !window.electronAPI?.onSdProgress) {
-      return
+      return;
     }
 
     const unsubscribe = window.electronAPI.onSdProgress((data) => {
-      if (data.phase !== 'generate') return
-      const detail = data.detail as ProgressDetail | undefined
-      updatePhase('generate', data.progress, detail)
-    })
+      if (data.phase !== "generate") return;
+      const detail = data.detail as ProgressDetail | undefined;
+      updatePhase("generate", data.progress, detail);
+    });
 
     return () => {
-      unsubscribe()
-    }
-  }, [electronAvailable, updatePhase])
+      unsubscribe();
+    };
+  }, [electronAvailable, updatePhase]);
 
   // Listen for Metal fallback errors during generation
   useEffect(() => {
     if (!electronAvailable || !isGenerating || !window.electronAPI?.onSdLog) {
-      return
+      return;
     }
 
     const removeListener = window.electronAPI.onSdLog((data) => {
-      if (metalWarning) return
-      const msg = data.message || ''
-      if (/ggml_metal_init: error|ggml_backend_metal_init: error|failed to create command queue/i.test(msg)) {
-        setMetalWarning(t('zImage.warnings.metalFallback', 'Metal initialization failed, falling back to CPU. Generation will be much slower.'))
+      if (metalWarning) return;
+      const msg = data.message || "";
+      if (
+        /ggml_metal_init: error|ggml_backend_metal_init: error|failed to create command queue/i.test(
+          msg,
+        )
+      ) {
+        setMetalWarning(
+          t(
+            "zImage.warnings.metalFallback",
+            "Metal initialization failed, falling back to CPU. Generation will be much slower.",
+          ),
+        );
       }
-    })
+    });
 
     return () => {
-      removeListener()
-    }
-  }, [electronAvailable, isGenerating, metalWarning, t])
+      removeListener();
+    };
+  }, [electronAvailable, isGenerating, metalWarning, t]);
 
   // Form handlers
-  const handleFormChange = useCallback((key: string, value: unknown) => {
-    if (isLowVramGpu && (key === 'low_vram_mode' || key === 'vae_tiling') && value === false) {
-      setZImageFormValue(key, true)
-      return
-    }
-    setZImageFormValue(key, value)
-    if (validationErrors[key]) {
-      setValidationErrors(prev => ({ ...prev, [key]: '' }))
-    }
-  }, [isLowVramGpu, setZImageFormValue, validationErrors])
+  const handleFormChange = useCallback(
+    (key: string, value: unknown) => {
+      if (
+        isLowVramGpu &&
+        (key === "low_vram_mode" || key === "vae_tiling") &&
+        value === false
+      ) {
+        setZImageFormValue(key, true);
+        return;
+      }
+      setZImageFormValue(key, value);
+      if (validationErrors[key]) {
+        setValidationErrors((prev) => ({ ...prev, [key]: "" }));
+      }
+    },
+    [isLowVramGpu, setZImageFormValue, validationErrors],
+  );
 
-  const handleSetDefaults = useCallback((defaults: Record<string, unknown>) => {
-    setZImageFormValues(defaults)
-  }, [setZImageFormValues])
+  const handleSetDefaults = useCallback(
+    (defaults: Record<string, unknown>) => {
+      setZImageFormValues(defaults);
+    },
+    [setZImageFormValues],
+  );
 
   // Main generation handler
   const handleGenerate = async () => {
-    setError(null)
-    setPrediction(null)
-    setOutputs([])
-    setUsedSeed(null)
-    setMetalWarning(null)
-    isCancelledRef.current = false
-    setValidationErrors({})
+    setError(null);
+    setPrediction(null);
+    setOutputs([]);
+    setUsedSeed(null);
+    setMetalWarning(null);
+    isCancelledRef.current = false;
+    setValidationErrors({});
 
     // Check Electron availability
     if (!electronAvailable) {
-      setError(t('zImage.errors.desktopRequired', 'This feature requires the desktop app. Please download WaveSpeed Desktop or try the online version.'))
-      return
+      setError(
+        t(
+          "zImage.errors.desktopRequired",
+          "This feature requires the desktop app. Please download WaveSpeed Desktop or try the online version.",
+        ),
+      );
+      return;
     }
 
     // Get selected SD model
-    const sdModelId = (zImageFormValues.model as string) || 'z-image-turbo-q4-k'
-    const sdModel = PREDEFINED_MODELS.find(m => m.id === sdModelId)
-    const sdModelState = sdModels.find(m => m.id === sdModelId)
+    const sdModelId =
+      (zImageFormValues.model as string) || "z-image-turbo-q4-k";
+    const sdModel = PREDEFINED_MODELS.find((m) => m.id === sdModelId);
+    const sdModelState = sdModels.find((m) => m.id === sdModelId);
 
     if (!sdModel) {
-      setError('Selected model not found')
-      return
+      setError("Selected model not found");
+      return;
     }
 
-    setIsGenerating(true)
-    reset()
-    setMobileView('output') // Auto-switch to output on mobile
+    setIsGenerating(true);
+    reset();
+    setMobileView("output"); // Auto-switch to output on mobile
 
-    let modelPath = sdModelState?.isDownloaded ? sdModelState.localPath : null
+    let modelPath = sdModelState?.isDownloaded ? sdModelState.localPath : null;
 
     try {
       // 1. Download SD binary if needed
       if (!binaryStatus.downloaded) {
-        await downloadBinary()
-        if (isCancelledRef.current) throw new Error('Cancelled')
+        await downloadBinary();
+        if (isCancelledRef.current) throw new Error("Cancelled");
       } else {
-        completePhase('download-sd')
+        completePhase("download-sd");
       }
 
       // 2. Download VAE if needed
       if (!vaeStatus.downloaded) {
-        await downloadVae()
-        if (isCancelledRef.current) throw new Error('Cancelled')
+        await downloadVae();
+        if (isCancelledRef.current) throw new Error("Cancelled");
       } else {
-        completePhase('download-vae')
+        completePhase("download-vae");
       }
 
       // 3. Download LLM if needed
       if (!llmStatus.downloaded) {
-        await downloadLlm()
-        if (isCancelledRef.current) throw new Error('Cancelled')
+        await downloadLlm();
+        if (isCancelledRef.current) throw new Error("Cancelled");
       } else {
-        completePhase('download-llm')
+        completePhase("download-llm");
       }
 
       // 4. Download model if needed
       if (!sdModelState?.isDownloaded) {
-        startPhase('download-model')
-        updateModelDownloadStatus({ downloading: true, progress: 0 })
+        startPhase("download-model");
+        updateModelDownloadStatus({ downloading: true, progress: 0 });
 
-        const modelsResult = await window.electronAPI?.sdGetModelsDir()
+        const modelsResult = await window.electronAPI?.sdGetModelsDir();
         if (!modelsResult?.success || !modelsResult.path) {
-          throw new Error('Failed to get models directory')
+          throw new Error("Failed to get models directory");
         }
 
-        const destPath = `${modelsResult.path}/${sdModel.name}`
-        const downloader = new ChunkedDownloader()
-        modelDownloaderRef.current = downloader
+        const destPath = `${modelsResult.path}/${sdModel.name}`;
+        const downloader = new ChunkedDownloader();
+        modelDownloaderRef.current = downloader;
 
         const result = await downloader.download({
           url: sdModel.downloadUrl,
           destPath,
           onProgress: (prog) => {
-            updatePhase('download-model', prog.progress, prog.detail)
-            updateModelDownloadStatus({ progress: prog.progress, detail: prog.detail })
+            updatePhase("download-model", prog.progress, prog.detail);
+            updateModelDownloadStatus({
+              progress: prog.progress,
+              detail: prog.detail,
+            });
           },
           chunkSize: 10 * 1024 * 1024,
           minValidSize: 500 * 1024 * 1024,
-          timeout: getDownloadTimeoutMs()
-        })
+          timeout: getDownloadTimeoutMs(),
+        });
 
-        modelDownloaderRef.current = null
+        modelDownloaderRef.current = null;
 
         if (!result.success) {
-          updateModelDownloadStatus({ downloading: false, error: result.error })
-          throw new Error(result.error || 'Download failed')
+          updateModelDownloadStatus({
+            downloading: false,
+            error: result.error,
+          });
+          throw new Error(result.error || "Download failed");
         }
 
-        updateModelDownloadStatus({ downloading: false, downloaded: true, progress: 100 })
-        completePhase('download-model')
-        modelPath = result.filePath
-        await fetchSDModels()
+        updateModelDownloadStatus({
+          downloading: false,
+          downloaded: true,
+          progress: 100,
+        });
+        completePhase("download-model");
+        modelPath = result.filePath;
+        await fetchSDModels();
 
-        if (isCancelledRef.current) throw new Error('Cancelled')
+        if (isCancelledRef.current) throw new Error("Cancelled");
       } else {
-        completePhase('download-model')
+        completePhase("download-model");
       }
 
       if (!modelPath) {
-        throw new Error('Model path not available')
+        throw new Error("Model path not available");
       }
 
       // 5. Generate image using useZImage hook
-      startPhase('generate')
+      startPhase("generate");
 
-      const validation = validateFormValues(zImageFields, zImageFormValues)
+      const validation = validateFormValues(zImageFields, zImageFormValues);
       if (Object.keys(validation).length > 0) {
-        setValidationErrors(validation)
-        reset()
-        setIsGenerating(false)
-        return
+        setValidationErrors(validation);
+        reset();
+        setIsGenerating(false);
+        return;
       }
 
-      const prompt = ((zImageFormValues.prompt as string) || '').trim()
-      const negativePrompt = ((zImageFormValues.negative_prompt as string) || '').trim() || ZIMAGE_DEFAULT_NEGATIVE_PROMPT
+      const prompt = ((zImageFormValues.prompt as string) || "").trim();
+      const negativePrompt =
+        ((zImageFormValues.negative_prompt as string) || "").trim() ||
+        ZIMAGE_DEFAULT_NEGATIVE_PROMPT;
 
-      let seed = zImageFormValues.seed as number
+      let seed = zImageFormValues.seed as number;
       if (seed === undefined || seed === -1) {
-        seed = Math.floor(Math.random() * 2147483647)
+        seed = Math.floor(Math.random() * 2147483647);
       }
 
-      const sizeStr = (zImageFormValues.size as string) || '1024*1024'
-      const sizeParts = sizeStr.split('*')
-      const width = parseInt(sizeParts[0], 10) || 1024
-      const height = parseInt(sizeParts[1], 10) || 1024
-      const steps = (zImageFormValues.steps as number) || 4
-      const cfgScale = (zImageFormValues.cfg_scale as number) || 1
-      const lowVramMode = Boolean(zImageFormValues.low_vram_mode)
-      const vaeTiling = Boolean(zImageFormValues.vae_tiling) || lowVramMode
+      const sizeStr = (zImageFormValues.size as string) || "1024*1024";
+      const sizeParts = sizeStr.split("*");
+      const width = parseInt(sizeParts[0], 10) || 1024;
+      const height = parseInt(sizeParts[1], 10) || 1024;
+      const steps = (zImageFormValues.steps as number) || 4;
+      const cfgScale = (zImageFormValues.cfg_scale as number) || 1;
+      const lowVramMode = Boolean(zImageFormValues.low_vram_mode);
+      const vaeTiling = Boolean(zImageFormValues.vae_tiling) || lowVramMode;
 
       const result = await generateZImage({
         modelPath,
@@ -379,64 +457,67 @@ export function ZImagePage() {
         seed,
         lowVramMode,
         vaeTiling,
-        samplingMethod: ((zImageFormValues.sampling_method as string) || 'euler') as SamplingMethod,
-        scheduler: ((zImageFormValues.scheduler as string) || 'simple') as Scheduler
-      })
+        samplingMethod: ((zImageFormValues.sampling_method as string) ||
+          "euler") as SamplingMethod,
+        scheduler: ((zImageFormValues.scheduler as string) ||
+          "simple") as Scheduler,
+      });
 
       if (!result.success || !result.outputPath) {
-        throw new Error(result.error || 'Generation failed')
+        throw new Error(result.error || "Generation failed");
       }
 
-      const imageUrl = `local-asset://${encodeURIComponent(result.outputPath)}`
-      const predictionId = `local-${Date.now()}`
+      const imageUrl = `local-asset://${encodeURIComponent(result.outputPath)}`;
+      const predictionId = `local-${Date.now()}`;
 
-      complete()
+      complete();
       setPrediction({
         id: predictionId,
-        model: 'local/z-image',
-        status: 'completed',
+        model: "local/z-image",
+        status: "completed",
         outputs: [imageUrl],
-        created_at: new Date().toISOString()
-      })
-      setOutputs([imageUrl])
-      setUsedSeed(seed)
+        created_at: new Date().toISOString(),
+      });
+      setOutputs([imageUrl]);
+      setUsedSeed(seed);
 
       // Auto-register to assets
-      await registerLocalAsset(result.outputPath, 'image', {
-        modelId: 'local/z-image',
+      await registerLocalAsset(result.outputPath, "image", {
+        modelId: "local/z-image",
         predictionId,
         originalUrl: imageUrl,
         resultIndex: 0,
-        source: 'z-image'
-      })
-
+        source: "z-image",
+      });
     } catch (err) {
-      const msg = (err as Error).message
-      if (msg === 'Cancelled') {
-        setError(t('zImage.errors.generationCancelled', 'Generation cancelled'))
+      const msg = (err as Error).message;
+      if (msg === "Cancelled") {
+        setError(
+          t("zImage.errors.generationCancelled", "Generation cancelled"),
+        );
       } else {
-        setError(msg)
+        setError(msg);
       }
-      reset()
+      reset();
     } finally {
-      setIsGenerating(false)
+      setIsGenerating(false);
     }
-  }
+  };
 
   // Cancel handler
   const handleCancel = async () => {
-    isCancelledRef.current = true
-    modelDownloaderRef.current?.cancel()
-    cancelDownload()
+    isCancelledRef.current = true;
+    modelDownloaderRef.current?.cancel();
+    cancelDownload();
     if (window.electronAPI?.sdCancelGeneration) {
-      await window.electronAPI.sdCancelGeneration().catch(console.error)
+      await window.electronAPI.sdCancelGeneration().catch(console.error);
     }
-    setIsGenerating(false)
-    reset()
-  }
+    setIsGenerating(false);
+    reset();
+  };
 
   // Get current phase info for progress display
-  const currentPhase = progress.phases[progress.currentPhaseIndex]
+  const currentPhase = progress.phases[progress.currentPhaseIndex];
 
   return (
     <div className="flex h-full flex-col">
@@ -445,30 +526,32 @@ export function ZImagePage() {
         <div className="flex flex-col gap-1.5 md:flex-row md:items-baseline md:gap-3">
           <h1 className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2">
             <Zap className="h-5 w-5 text-primary" />
-            {t('zImage.title')}
+            {t("zImage.title")}
           </h1>
-          <span className="hidden md:inline text-xs md:text-sm text-muted-foreground">{t('zImage.subtitle')}</span>
+          <span className="hidden md:inline text-xs md:text-sm text-muted-foreground">
+            {t("zImage.subtitle")}
+          </span>
         </div>
       </div>
 
       {/* Mobile Tab Switcher */}
       <div className="md:hidden flex border-b bg-muted/30">
         <button
-          onClick={() => setMobileView('config')}
+          onClick={() => setMobileView("config")}
           className={`flex-1 py-2 text-sm font-medium transition-colors ${
-            mobileView === 'config'
-              ? 'border-b-2 border-primary text-primary'
-              : 'text-muted-foreground'
+            mobileView === "config"
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground"
           }`}
         >
           Input
         </button>
         <button
-          onClick={() => setMobileView('output')}
+          onClick={() => setMobileView("output")}
           className={`flex-1 py-2 text-sm font-medium transition-colors ${
-            mobileView === 'output'
-              ? 'border-b-2 border-primary text-primary'
-              : 'text-muted-foreground'
+            mobileView === "output"
+              ? "border-b-2 border-primary text-primary"
+              : "text-muted-foreground"
           }`}
         >
           Output
@@ -478,61 +561,71 @@ export function ZImagePage() {
       {/* Content - Two Column Layout (Desktop) / Single Column (Mobile) */}
       <div className="flex flex-1 overflow-hidden">
         {/* Left Panel - Form */}
-        <div className={`w-full md:w-[420px] flex flex-col md:border-r bg-muted/30 ${mobileView === 'config' ? 'flex' : 'hidden md:flex'}`}>
+        <div
+          className={`w-full md:w-[420px] flex flex-col md:border-r bg-muted/30 ${mobileView === "config" ? "flex" : "hidden md:flex"}`}
+        >
           <div className="flex-1 overflow-auto p-4">
-            {accelerationInfo?.platform === 'darwin' && accelerationInfo.arch !== 'arm64' && (
-              <Alert variant="destructive" className="mb-3">
-                <AlertCircle className="h-4 w-4" />
-                <AlertDescription className="text-sm">
-                  {t('zImage.tips.intelMacUnsupported')}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {accelerationInfo?.platform === 'linux' && accelerationInfo.arch !== 'x64' && (
-              <Alert variant="destructive" className="mb-3">
-                <AlertCircle className="h-4 w-4" />
-                <AlertDescription className="text-sm">
-                  {t('zImage.tips.linuxArmUnsupported')}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {accelerationInfo?.platform === 'win32' && accelerationInfo.arch !== 'x64' && (
-              <Alert variant="destructive" className="mb-3">
-                <AlertCircle className="h-4 w-4" />
-                <AlertDescription className="text-sm">
-                  {t('zImage.tips.windowsArmUnsupported')}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {accelerationInfo?.platform === 'linux' && accelerationInfo.arch === 'x64' && (
-              <Alert className="mb-3">
-                <AlertCircle className="h-4 w-4 text-yellow-500" />
-                <AlertDescription className="text-sm">
-                  {t('zImage.tips.linuxCpuOnly')}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {accelerationInfo?.platform === 'win32' && accelerationInfo.arch === 'x64' && !hasWindowsGpu && (
-              <Alert className="mb-3">
-                <AlertCircle className="h-4 w-4 text-yellow-500" />
-                <AlertDescription className="text-sm">
-                  {t('zImage.tips.windowsVulkanRequired')}
-                </AlertDescription>
-              </Alert>
-            )}
-
-            {accelerationInfo?.platform === 'darwin' && accelerationInfo.arch === 'arm64' && accelerationInfo.acceleration === 'CPU' && (
-              <Alert className="mb-3">
-                <AlertCircle className="h-4 w-4 text-yellow-500" />
-                <AlertDescription className="text-sm">
-                  {t('zImage.tips.slowWithoutMetal')}
-                </AlertDescription>
-              </Alert>
-            )}
+            {accelerationInfo?.platform === "darwin" &&
+              accelerationInfo.arch !== "arm64" && (
+                <Alert variant="destructive" className="mb-3">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription className="text-sm">
+                    {t("zImage.tips.intelMacUnsupported")}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+            {accelerationInfo?.platform === "linux" &&
+              accelerationInfo.arch !== "x64" && (
+                <Alert variant="destructive" className="mb-3">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription className="text-sm">
+                    {t("zImage.tips.linuxArmUnsupported")}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+            {accelerationInfo?.platform === "win32" &&
+              accelerationInfo.arch !== "x64" && (
+                <Alert variant="destructive" className="mb-3">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription className="text-sm">
+                    {t("zImage.tips.windowsArmUnsupported")}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+            {accelerationInfo?.platform === "linux" &&
+              accelerationInfo.arch === "x64" && (
+                <Alert className="mb-3">
+                  <AlertCircle className="h-4 w-4 text-yellow-500" />
+                  <AlertDescription className="text-sm">
+                    {t("zImage.tips.linuxCpuOnly")}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+            {accelerationInfo?.platform === "win32" &&
+              accelerationInfo.arch === "x64" &&
+              !hasWindowsGpu && (
+                <Alert className="mb-3">
+                  <AlertCircle className="h-4 w-4 text-yellow-500" />
+                  <AlertDescription className="text-sm">
+                    {t("zImage.tips.windowsVulkanRequired")}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+            {accelerationInfo?.platform === "darwin" &&
+              accelerationInfo.arch === "arm64" &&
+              accelerationInfo.acceleration === "CPU" && (
+                <Alert className="mb-3">
+                  <AlertCircle className="h-4 w-4 text-yellow-500" />
+                  <AlertDescription className="text-sm">
+                    {t("zImage.tips.slowWithoutMetal")}
+                  </AlertDescription>
+                </Alert>
+              )}
             <DynamicForm
               model={zImageModel}
               values={zImageFormValues}
@@ -556,7 +649,9 @@ export function ZImagePage() {
             {metalWarning && (
               <Alert>
                 <AlertCircle className="h-4 w-4 text-yellow-500" />
-                <AlertDescription className="text-sm">{metalWarning}</AlertDescription>
+                <AlertDescription className="text-sm">
+                  {metalWarning}
+                </AlertDescription>
               </Alert>
             )}
 
@@ -565,27 +660,37 @@ export function ZImagePage() {
               <div className="space-y-2">
                 <div className="flex items-center justify-between text-xs">
                   <span>
-                    {currentPhase.id === 'download-sd' && t('zImage.downloadingSd')}
-                    {currentPhase.id === 'download-vae' && t('zImage.downloadingVae')}
-                    {currentPhase.id === 'download-llm' && t('zImage.downloadingLlm')}
-                    {currentPhase.id === 'download-model' && t('zImage.downloadingZImage')}
-                    {currentPhase.id === 'generate' && t('zImage.generating')}
+                    {currentPhase.id === "download-sd" &&
+                      t("zImage.downloadingSd")}
+                    {currentPhase.id === "download-vae" &&
+                      t("zImage.downloadingVae")}
+                    {currentPhase.id === "download-llm" &&
+                      t("zImage.downloadingLlm")}
+                    {currentPhase.id === "download-model" &&
+                      t("zImage.downloadingZImage")}
+                    {currentPhase.id === "generate" && t("zImage.generating")}
                   </span>
                   <span>{Math.round(currentPhase.progress || 0)}%</span>
                 </div>
                 <Progress value={currentPhase.progress || 0} />
-                {currentPhase.detail && currentPhase.id.startsWith('download-') && (
-                  <div className="text-xs text-muted-foreground">
-                    {formatBytes(currentPhase.detail.current || 0)} / {formatBytes(currentPhase.detail.total || 0)}
-                  </div>
-                )}
+                {currentPhase.detail &&
+                  currentPhase.id.startsWith("download-") && (
+                    <div className="text-xs text-muted-foreground">
+                      {formatBytes(currentPhase.detail.current || 0)} /{" "}
+                      {formatBytes(currentPhase.detail.total || 0)}
+                    </div>
+                  )}
               </div>
             )}
 
             {/* Generate Button */}
             {isGenerating ? (
-              <Button className="w-full" variant="destructive" onClick={handleCancel}>
-                {t('zImage.stopGeneration')}
+              <Button
+                className="w-full"
+                variant="destructive"
+                onClick={handleCancel}
+              >
+                {t("zImage.stopGeneration")}
               </Button>
             ) : (
               <Button
@@ -593,7 +698,7 @@ export function ZImagePage() {
                 onClick={handleGenerate}
               >
                 <Zap className="mr-2 h-4 w-4" />
-                {t('zImage.generateImage')}
+                {t("zImage.generateImage")}
               </Button>
             )}
 
@@ -602,7 +707,9 @@ export function ZImagePage() {
         </div>
 
         {/* Right Panel - Output */}
-        <div className={`flex-1 min-w-0 flex-col ${mobileView === 'output' ? 'flex' : 'hidden md:flex'}`}>
+        <div
+          className={`flex-1 min-w-0 flex-col ${mobileView === "output" ? "flex" : "hidden md:flex"}`}
+        >
           <OutputDisplay
             prediction={prediction}
             outputs={outputs}
@@ -618,5 +725,5 @@ export function ZImagePage() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/stores/apiKeyStore.ts b/src/stores/apiKeyStore.ts
index daf8c3d5..0414e283 100644
--- a/src/stores/apiKeyStore.ts
+++ b/src/stores/apiKeyStore.ts
@@ -1,93 +1,93 @@
-import { create } from 'zustand'
-import { apiClient } from '@/api/client'
+import { create } from "zustand";
+import { apiClient } from "@/api/client";
+import { useModelsStore } from "@/stores/modelsStore";
 
-const API_KEY_STORAGE_KEY = 'wavespeed_api_key'
+const API_KEY_STORAGE_KEY = "wavespeed_api_key";
 
 interface ApiKeyState {
-  apiKey: string
-  isLoading: boolean
-  isValidating: boolean
-  isValidated: boolean
-  hasAttemptedLoad: boolean
-  setApiKey: (apiKey: string) => Promise<void>
-  loadApiKey: (force?: boolean) => Promise<void>
-  validateApiKey: () => Promise<boolean>
+  apiKey: string;
+  isLoading: boolean;
+  isValidating: boolean;
+  isValidated: boolean;
+  hasAttemptedLoad: boolean;
+  setApiKey: (apiKey: string) => Promise<void>;
+  loadApiKey: (force?: boolean) => Promise<void>;
+  validateApiKey: () => Promise<boolean>;
 }
 
 // Helper to save API key (electron-store or localStorage fallback)
 async function saveApiKey(apiKey: string): Promise<void> {
   if (window.electronAPI) {
-    await window.electronAPI.setApiKey(apiKey)
+    await window.electronAPI.setApiKey(apiKey);
   } else {
     // Fallback to localStorage for browser/dev mode
-    localStorage.setItem(API_KEY_STORAGE_KEY, apiKey)
+    localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
   }
 }
 
 // Helper to load API key (electron-store or localStorage fallback)
 async function loadStoredApiKey(): Promise<string | null> {
   if (window.electronAPI) {
-    return await window.electronAPI.getApiKey()
+    return await window.electronAPI.getApiKey();
   } else {
     // Fallback to localStorage for browser/dev mode
-    return localStorage.getItem(API_KEY_STORAGE_KEY)
+    return localStorage.getItem(API_KEY_STORAGE_KEY);
   }
 }
 
 export const useApiKeyStore = create<ApiKeyState>((set, get) => ({
-  apiKey: '',
+  apiKey: "",
   isLoading: false,
   isValidating: false,
   isValidated: false,
   hasAttemptedLoad: false,
 
   setApiKey: async (apiKey: string) => {
-    apiClient.setApiKey(apiKey)
-    set({ apiKey, isValidated: false })
+    apiClient.setApiKey(apiKey);
+    set({ apiKey, isValidated: false });
 
     // Save to storage
-    await saveApiKey(apiKey)
+    await saveApiKey(apiKey);
 
     // Validate the new key
-    await get().validateApiKey()
+    await get().validateApiKey();
   },
 
   loadApiKey: async (force?: boolean) => {
-    // Skip if already attempted (unless forced)
-    if (get().hasAttemptedLoad && !force) {
-      return
-    }
-    set({ isLoading: true, hasAttemptedLoad: true })
+    if (get().hasAttemptedLoad && !force) return;
+    set({ isLoading: true, hasAttemptedLoad: true });
     try {
-      const storedKey = await loadStoredApiKey()
+      const storedKey = await loadStoredApiKey();
       if (storedKey) {
-        apiClient.setApiKey(storedKey)
-        set({ apiKey: storedKey })
-        await get().validateApiKey()
+        apiClient.setApiKey(storedKey);
+        set({ apiKey: storedKey });
+        // Fire validate + fetchModels in parallel — don't block UI on either
+        get().validateApiKey(); // intentionally not awaited
+        useModelsStore.getState().fetchModels(); // start immediately, don't wait for validate
       }
     } catch (error) {
-      console.error('Failed to load API key:', error)
+      console.error("Failed to load API key:", error);
     } finally {
-      set({ isLoading: false })
+      set({ isLoading: false });
     }
   },
 
   validateApiKey: async () => {
-    const { apiKey } = get()
+    const { apiKey } = get();
     if (!apiKey) {
-      set({ isValidated: false, isValidating: false })
-      return false
+      set({ isValidated: false, isValidating: false });
+      return false;
     }
 
-    set({ isValidating: true })
+    set({ isValidating: true });
     try {
       // Check account balance to validate the key (lighter than listing models)
-      await apiClient.getBalance()
-      set({ isValidated: true, isValidating: false })
-      return true
+      await apiClient.getBalance();
+      set({ isValidated: true, isValidating: false });
+      return true;
     } catch {
-      set({ isValidated: false, isValidating: false })
-      return false
+      set({ isValidated: false, isValidating: false });
+      return false;
     }
-  }
-}))
+  },
+}));
diff --git a/src/stores/assetsStore.ts b/src/stores/assetsStore.ts
index 7ccf8628..f1bc19d3 100644
--- a/src/stores/assetsStore.ts
+++ b/src/stores/assetsStore.ts
@@ -1,92 +1,130 @@
-import { create } from 'zustand'
-import type { AssetMetadata, AssetType, AssetsFilter, AssetsSaveOptions, AssetsSettings } from '@/types/asset'
-
-const METADATA_STORAGE_KEY = 'wavespeed_assets_metadata'
-const SETTINGS_STORAGE_KEY = 'wavespeed_assets_settings'
+import { create } from "zustand";
+import type {
+  AssetMetadata,
+  AssetType,
+  AssetsFilter,
+  AssetsSaveOptions,
+  AssetsSettings,
+} from "@/types/asset";
+
+const METADATA_STORAGE_KEY = "wavespeed_assets_metadata";
+const SETTINGS_STORAGE_KEY = "wavespeed_assets_settings";
 
 // Track whether we've subscribed to the IPC event for new assets from workflow executor
-let assetsIpcListenerRegistered = false
+let assetsIpcListenerRegistered = false;
 
 // Helper to generate unique ID
 function generateId(): string {
-  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8)
+  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
 }
 
 // Helper to get file extension from URL
 function getExtensionFromUrl(url: string): string | null {
-  const match = url.match(/\.([a-zA-Z0-9]+)(\?.*)?$/)
-  return match ? match[1].toLowerCase() : null
+  const match = url.match(/\.([a-zA-Z0-9]+)(\?.*)?$/);
+  return match ? match[1].toLowerCase() : null;
 }
 
 // Helper to get default extension for asset type
 function getDefaultExtension(type: AssetType): string {
   switch (type) {
-    case 'image': return 'png'
-    case 'video': return 'mp4'
-    case 'audio': return 'mp3'
-    case 'text': return 'txt'
-    case 'json': return 'json'
+    case "image":
+      return "png";
+    case "video":
+      return "mp4";
+    case "audio":
+      return "mp3";
+    case "text":
+      return "txt";
+    case "json":
+      return "json";
   }
 }
 
 // Helper to get subdirectory for asset type
 function getSubDir(type: AssetType): string {
   switch (type) {
-    case 'image': return 'images'
-    case 'video': return 'videos'
-    case 'audio': return 'audio'
-    case 'text':
-    case 'json': return 'text'
+    case "image":
+      return "images";
+    case "video":
+      return "videos";
+    case "audio":
+      return "audio";
+    case "text":
+    case "json":
+      return "text";
   }
 }
 
 // Helper to detect asset type from URL
 export function detectAssetType(url: string): AssetType | null {
-  const ext = getExtensionFromUrl(url)
-  if (!ext) return null
+  const ext = getExtensionFromUrl(url);
+  if (!ext) return null;
 
-  const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg']
-  const videoExts = ['mp4', 'webm', 'mov', 'avi', 'mkv']
-  const audioExts = ['mp3', 'wav', 'ogg', 'flac', 'aac', 'm4a', 'wma']
+  const imageExts = ["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"];
+  const videoExts = ["mp4", "webm", "mov", "avi", "mkv"];
+  const audioExts = ["mp3", "wav", "ogg", "flac", "aac", "m4a", "wma"];
 
-  if (imageExts.includes(ext)) return 'image'
-  if (videoExts.includes(ext)) return 'video'
-  if (audioExts.includes(ext)) return 'audio'
+  if (imageExts.includes(ext)) return "image";
+  if (videoExts.includes(ext)) return "video";
+  if (audioExts.includes(ext)) return "audio";
 
-  return null
+  return null;
 }
 
 // Helper to generate filename: model_predictionid_resultindex.ext
-function generateFileName(modelId: string, type: AssetType, url: string, predictionId?: string, resultIndex: number = 0): string {
+function generateFileName(
+  modelId: string,
+  type: AssetType,
+  url: string,
+  predictionId?: string,
+  resultIndex: number = 0,
+): string {
   // Replace / with _, other special chars with -, then clean up
-  const slug = modelId.replace(/\//g, '_').replace(/[^a-zA-Z0-9_]/g, '-').toLowerCase().replace(/-+/g, '-')
-  const id = predictionId || (Date.now().toString(36) + Math.random().toString(36).substring(2, 6))
-  const ext = getExtensionFromUrl(url) || getDefaultExtension(type)
-  return `${slug}_${id}_${resultIndex}.${ext}`
+  const slug = modelId
+    .replace(/\//g, "_")
+    .replace(/[^a-zA-Z0-9_]/g, "-")
+    .toLowerCase()
+    .replace(/-+/g, "-");
+  const id =
+    predictionId ||
+    Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
+  const ext = getExtensionFromUrl(url) || getDefaultExtension(type);
+  return `${slug}_${id}_${resultIndex}.${ext}`;
 }
 
 // Exported version for downloads - uses same naming convention as saved assets
 export function generateDownloadFilename(options: {
-  modelId?: string
-  url: string
-  predictionId?: string
-  resultIndex?: number
+  modelId?: string;
+  url: string;
+  predictionId?: string;
+  resultIndex?: number;
 }): string {
-  const { modelId, url, predictionId, resultIndex = 0 } = options
+  const { modelId, url, predictionId, resultIndex = 0 } = options;
   const slug = modelId
-    ? modelId.replace(/\//g, '_').replace(/[^a-zA-Z0-9_]/g, '-').toLowerCase().replace(/-+/g, '-')
-    : 'output'
-  const id = predictionId || (Date.now().toString(36) + Math.random().toString(36).substring(2, 6))
-  const ext = getExtensionFromUrl(url) || 'png'
-  return `${slug}_${id}_${resultIndex}.${ext}`
+    ? modelId
+        .replace(/\//g, "_")
+        .replace(/[^a-zA-Z0-9_]/g, "-")
+        .toLowerCase()
+        .replace(/-+/g, "-")
+    : "output";
+  const id =
+    predictionId ||
+    Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
+  const ext = getExtensionFromUrl(url) || "png";
+  return `${slug}_${id}_${resultIndex}.${ext}`;
 }
 
 // Generate filename for free tools - format: free-tools_{tool-name}_{id}_{resultIndex}.{ext}
-export function generateFreeToolFilename(toolName: string, extension: string, suffix?: string): string {
-  const id = Date.now().toString(36) + Math.random().toString(36).substring(2, 6)
-  const toolSlug = toolName.replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()
-  const suffixPart = suffix ? `-${suffix}` : ''
-  return `free-tools_${toolSlug}${suffixPart}_${id}_0.${extension}`
+export function generateFreeToolFilename(
+  toolName: string,
+  extension: string,
+  suffix?: string,
+): string {
+  const id =
+    Date.now().toString(36) + Math.random().toString(36).substring(2, 6);
+  const toolSlug = toolName.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase();
+  const suffixPart = suffix ? `-${suffix}` : "";
+  return `free-tools_${toolSlug}${suffixPart}_${id}_0.${extension}`;
 }
 
 // Helper to extract model ID from filename
@@ -97,57 +135,68 @@ export function generateFreeToolFilename(toolName: string, extension: string, su
 //           "local_z-image_2024-12-21_0.png" -> "local/z-image"
 function extractModelId(fileName: string): string {
   // Remove extension
-  const nameWithoutExt = fileName.replace(/\.[^.]+$/, '')
-  const parts = nameWithoutExt.split('_')
+  const nameWithoutExt = fileName.replace(/\.[^.]+$/, "");
+  const parts = nameWithoutExt.split("_");
 
   // Need at least 3 parts: model (1+), predictionId, resultIndex
   if (parts.length >= 3) {
     // Last part is resultIndex, second to last is predictionId
     // Everything before is the model slug (joined with /)
-    const modelParts = parts.slice(0, -2)
-    return modelParts.join('/')
+    const modelParts = parts.slice(0, -2);
+    return modelParts.join("/");
   }
 
   if (parts.length > 0 && parts[0]) {
-    return parts[0]
+    return parts[0];
   }
-  return 'unknown'
+  return "unknown";
 }
 
 interface AssetsState {
-  assets: AssetMetadata[]
-  isLoaded: boolean
-  isLoading: boolean
-  settings: AssetsSettings
+  assets: AssetMetadata[];
+  isLoaded: boolean;
+  isLoading: boolean;
+  settings: AssetsSettings;
 
   // Data loading
-  loadAssets: () => Promise<void>
-  loadSettings: () => Promise<void>
+  loadAssets: () => Promise<void>;
+  loadSettings: () => Promise<void>;
 
   // Asset operations
-  saveAsset: (url: string, type: AssetType, options: AssetsSaveOptions) => Promise<AssetMetadata | null>
-  registerLocalAsset: (filePath: string, type: AssetType, options: AssetsSaveOptions) => Promise<AssetMetadata | null>
-  deleteAsset: (id: string) => Promise<boolean>
-  deleteAssets: (ids: string[]) => Promise<number>
-  updateAsset: (id: string, updates: Partial<Pick<AssetMetadata, 'tags' | 'favorite'>>) => Promise<void>
+  saveAsset: (
+    url: string,
+    type: AssetType,
+    options: AssetsSaveOptions,
+  ) => Promise<AssetMetadata | null>;
+  registerLocalAsset: (
+    filePath: string,
+    type: AssetType,
+    options: AssetsSaveOptions,
+  ) => Promise<AssetMetadata | null>;
+  deleteAsset: (id: string) => Promise<boolean>;
+  deleteAssets: (ids: string[]) => Promise<number>;
+  updateAsset: (
+    id: string,
+    updates: Partial<Pick<AssetMetadata, "tags" | "favorite">>,
+  ) => Promise<void>;
 
   // Filtering
-  getFilteredAssets: (filter: AssetsFilter) => AssetMetadata[]
+  getFilteredAssets: (filter: AssetsFilter) => AssetMetadata[];
 
   // Tag operations
-  getAllTags: () => string[]
-  getAllModels: () => string[]
+  getAllTags: () => string[];
+  getAllModels: () => string[];
 
   // Settings
-  setAutoSave: (enabled: boolean) => Promise<void>
-  setAssetsDirectory: (path: string) => Promise<void>
+  setAutoSave: (enabled: boolean) => Promise<void>;
+  setAssetsDirectory: (path: string) => Promise<void>;
 
   // Utilities
-  openAssetLocation: (id: string) => Promise<void>
-  getAssetById: (id: string) => AssetMetadata | undefined
-  hasAssetForPrediction: (predictionId: string) => boolean
-  hasAssetForExecution: (executionId: string) => boolean
-  validateAssets: () => Promise<void>
+  openAssetLocation: (id: string) => Promise<void>;
+  getAssetById: (id: string) => AssetMetadata | undefined;
+  hasAssetForPrediction: (predictionId: string) => boolean;
+  hasAssetForExecution: (executionId: string) => boolean;
+  validateAssets: () => Promise<void>;
 }
 
 export const useAssetsStore = create<AssetsState>((set, get) => ({
@@ -156,26 +205,26 @@ export const useAssetsStore = create<AssetsState>((set, get) => ({
   isLoading: false,
   settings: {
     autoSaveAssets: true,
-    assetsDirectory: ''
+    assetsDirectory: "",
   },
 
   loadAssets: async () => {
     // Prevent duplicate loading
-    if (get().isLoading) return
+    if (get().isLoading) return;
 
-    set({ isLoading: true })
+    set({ isLoading: true });
 
     // Subscribe to new assets pushed from the workflow executor (Electron only, once)
     if (!assetsIpcListenerRegistered && window.electronAPI?.onAssetsNewAsset) {
-      assetsIpcListenerRegistered = true
+      assetsIpcListenerRegistered = true;
       window.electronAPI.onAssetsNewAsset((raw) => {
-        const asset = raw as AssetMetadata
-        if (!asset?.id) return
+        const asset = raw as AssetMetadata;
+        if (!asset?.id) return;
         // Avoid duplicates
-        const { assets } = useAssetsStore.getState()
-        if (assets.some(a => a.id === asset.id)) return
-        useAssetsStore.setState({ assets: [asset, ...assets] })
-      })
+        const { assets } = useAssetsStore.getState();
+        if (assets.some((a) => a.id === asset.id)) return;
+        useAssetsStore.setState({ assets: [asset, ...assets] });
+      });
     }
 
     try {
@@ -183,20 +232,22 @@ export const useAssetsStore = create<AssetsState>((set, get) => ({
         // Scan actual files on disk (async, non-blocking)
         const [files, existingMetadata] = await Promise.all([
           window.electronAPI.scanAssetsDirectory(),
-          window.electronAPI.getAssetsMetadata?.() || Promise.resolve([])
-        ])
+          window.electronAPI.getAssetsMetadata?.() || Promise.resolve([]),
+        ]);
 
         // Process in next tick to avoid blocking UI
-        await new Promise(resolve => setTimeout(resolve, 0))
+        await new Promise((resolve) => setTimeout(resolve, 0));
 
-        const metadataByPath = new Map(existingMetadata.map(m => [m.filePath, m]))
+        const metadataByPath = new Map(
+          existingMetadata.map((m) => [m.filePath, m]),
+        );
 
         // Build asset list from actual files, enriching with metadata if available
-        const assets: AssetMetadata[] = files.map(file => {
-          const existing = metadataByPath.get(file.filePath)
+        const assets: AssetMetadata[] = files.map((file) => {
+          const existing = metadataByPath.get(file.filePath);
           if (existing) {
             // Use existing metadata but update file size (in case it changed)
-            return { ...existing, fileSize: file.fileSize }
+            return { ...existing, fileSize: file.fileSize };
           }
           // Create new metadata from file info
           return {
@@ -208,62 +259,80 @@ export const useAssetsStore = create<AssetsState>((set, get) => ({
             createdAt: file.createdAt,
             fileSize: file.fileSize,
             tags: [],
-            favorite: false
-          }
-        })
+            favorite: false,
+          };
+        });
 
         // Sort by creation date (newest first)
-        assets.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+        assets.sort(
+          (a, b) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+        );
 
-        set({ assets, isLoaded: true, isLoading: false })
+        set({ assets, isLoaded: true, isLoading: false });
 
         // Save merged metadata in background (don't await)
         if (window.electronAPI?.saveAssetsMetadata) {
-          window.electronAPI.saveAssetsMetadata(assets as Parameters<typeof window.electronAPI.saveAssetsMetadata>[0])
+          window.electronAPI.saveAssetsMetadata(
+            assets as Parameters<
+              typeof window.electronAPI.saveAssetsMetadata
+            >[0],
+          );
         }
       } else {
         // Browser fallback - limited functionality
-        const stored = localStorage.getItem(METADATA_STORAGE_KEY)
+        const stored = localStorage.getItem(METADATA_STORAGE_KEY);
         set({
           assets: stored ? JSON.parse(stored) : [],
           isLoaded: true,
-          isLoading: false
-        })
+          isLoading: false,
+        });
       }
     } catch (error) {
-      console.error('Failed to load assets:', error)
-      set({ isLoaded: true, isLoading: false })
+      console.error("Failed to load assets:", error);
+      set({ isLoaded: true, isLoading: false });
     }
   },
 
   loadSettings: async () => {
     if (window.electronAPI?.getAssetsSettings) {
-      const settings = await window.electronAPI.getAssetsSettings()
-      set({ settings })
+      const settings = await window.electronAPI.getAssetsSettings();
+      set({ settings });
     } else {
       // Browser fallback
-      const stored = localStorage.getItem(SETTINGS_STORAGE_KEY)
+      const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
       if (stored) {
-        set({ settings: JSON.parse(stored) })
+        set({ settings: JSON.parse(stored) });
       }
     }
   },
 
   saveAsset: async (url, type, options) => {
-    const fileName = generateFileName(options.modelId, type, url, options.predictionId, options.resultIndex ?? 0)
+    const fileName = generateFileName(
+      options.modelId,
+      type,
+      url,
+      options.predictionId,
+      options.resultIndex ?? 0,
+    );
 
     // Build optional workflow/source fields
-    const extraFields: Partial<AssetMetadata> = {}
-    if (options.source) extraFields.source = options.source
-    if (options.workflowId) extraFields.workflowId = options.workflowId
-    if (options.workflowName) extraFields.workflowName = options.workflowName
-    if (options.nodeId) extraFields.nodeId = options.nodeId
-    if (options.executionId) extraFields.executionId = options.executionId
+    const extraFields: Partial<AssetMetadata> = {};
+    if (options.source) extraFields.source = options.source;
+    if (options.workflowId) extraFields.workflowId = options.workflowId;
+    if (options.workflowName) extraFields.workflowName = options.workflowName;
+    if (options.nodeId) extraFields.nodeId = options.nodeId;
+    if (options.executionId) extraFields.executionId = options.executionId;
 
     // Desktop mode: save file to disk
     if (window.electronAPI?.saveAsset) {
-      const subDir = getSubDir(type)
-      const result = await window.electronAPI.saveAsset(url, type, fileName, subDir)
+      const subDir = getSubDir(type);
+      const result = await window.electronAPI.saveAsset(
+        url,
+        type,
+        fileName,
+        subDir,
+      );
 
       if (result.success && result.filePath) {
         const metadata: AssetMetadata = {
@@ -278,26 +347,30 @@ export const useAssetsStore = create<AssetsState>((set, get) => ({
           favorite: false,
           predictionId: options.predictionId,
           originalUrl: url,
-          ...extraFields
-        }
+          ...extraFields,
+        };
 
-        set(state => {
-          const newAssets = [metadata, ...state.assets]
+        set((state) => {
+          const newAssets = [metadata, ...state.assets];
           if (window.electronAPI?.saveAssetsMetadata) {
-            window.electronAPI.saveAssetsMetadata(newAssets as Parameters<typeof window.electronAPI.saveAssetsMetadata>[0])
+            window.electronAPI.saveAssetsMetadata(
+              newAssets as Parameters<
+                typeof window.electronAPI.saveAssetsMetadata
+              >[0],
+            );
           }
-          return { assets: newAssets }
-        })
+          return { assets: newAssets };
+        });
 
-        return metadata
+        return metadata;
       }
-      return null
+      return null;
     }
 
     // Browser fallback: store URL reference only
     const metadata: AssetMetadata = {
       id: generateId(),
-      filePath: '', // No local file in browser mode
+      filePath: "", // No local file in browser mode
       fileName,
       type,
       modelId: options.modelId,
@@ -307,29 +380,29 @@ export const useAssetsStore = create<AssetsState>((set, get) => ({
       favorite: false,
       predictionId: options.predictionId,
       originalUrl: url,
-      ...extraFields
-    }
+      ...extraFields,
+    };
 
-    set(state => {
-      const newAssets = [metadata, ...state.assets]
-      localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets))
-      return { assets: newAssets }
-    })
+    set((state) => {
+      const newAssets = [metadata, ...state.assets];
+      localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets));
+      return { assets: newAssets };
+    });
 
-    return metadata
+    return metadata;
   },
 
   registerLocalAsset: async (filePath, type, options) => {
     // Extract filename from path
-    const fileName = filePath.split(/[/\\]/).pop() || 'unknown'
+    const fileName = filePath.split(/[/\\]/).pop() || "unknown";
 
     // Get file size if in Electron
-    let fileSize = 0
+    let fileSize = 0;
     if (window.electronAPI?.checkFileExists) {
-      const exists = await window.electronAPI.checkFileExists(filePath)
+      const exists = await window.electronAPI.checkFileExists(filePath);
       if (!exists) {
-        console.error('File does not exist:', filePath)
-        return null
+        console.error("File does not exist:", filePath);
+        return null;
       }
     }
 
@@ -345,217 +418,240 @@ export const useAssetsStore = create<AssetsState>((set, get) => ({
       favorite: false,
       predictionId: options.predictionId,
       originalUrl: options.originalUrl,
-      source: options.source
-    }
+      source: options.source,
+    };
 
-    set(state => {
-      const newAssets = [metadata, ...state.assets]
+    set((state) => {
+      const newAssets = [metadata, ...state.assets];
       if (window.electronAPI?.saveAssetsMetadata) {
-        window.electronAPI.saveAssetsMetadata(newAssets as Parameters<typeof window.electronAPI.saveAssetsMetadata>[0])
+        window.electronAPI.saveAssetsMetadata(
+          newAssets as Parameters<
+            typeof window.electronAPI.saveAssetsMetadata
+          >[0],
+        );
       } else {
-        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets))
+        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets));
       }
-      return { assets: newAssets }
-    })
+      return { assets: newAssets };
+    });
 
-    return metadata
+    return metadata;
   },
 
   deleteAsset: async (id) => {
-    const { assets } = get()
-    const asset = assets.find(a => a.id === id)
-    if (!asset) return false
+    const { assets } = get();
+    const asset = assets.find((a) => a.id === id);
+    if (!asset) return false;
 
     if (window.electronAPI?.deleteAsset) {
-      const result = await window.electronAPI.deleteAsset(asset.filePath)
+      const result = await window.electronAPI.deleteAsset(asset.filePath);
       if (!result.success) {
-        console.error('Failed to delete asset file:', result.error)
+        console.error("Failed to delete asset file:", result.error);
       }
     }
 
-    set(state => {
-      const newAssets = state.assets.filter(a => a.id !== id)
+    set((state) => {
+      const newAssets = state.assets.filter((a) => a.id !== id);
       if (window.electronAPI?.saveAssetsMetadata) {
-        window.electronAPI.saveAssetsMetadata(newAssets as Parameters<typeof window.electronAPI.saveAssetsMetadata>[0])
+        window.electronAPI.saveAssetsMetadata(
+          newAssets as Parameters<
+            typeof window.electronAPI.saveAssetsMetadata
+          >[0],
+        );
       } else {
-        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets))
+        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets));
       }
-      return { assets: newAssets }
-    })
+      return { assets: newAssets };
+    });
 
-    return true
+    return true;
   },
 
   deleteAssets: async (ids) => {
-    const { assets } = get()
-    const toDelete = assets.filter(a => ids.includes(a.id))
+    const { assets } = get();
+    const toDelete = assets.filter((a) => ids.includes(a.id));
 
     if (window.electronAPI?.deleteAssetsBulk) {
-      const filePaths = toDelete.map(a => a.filePath)
-      await window.electronAPI.deleteAssetsBulk(filePaths)
+      const filePaths = toDelete.map((a) => a.filePath);
+      await window.electronAPI.deleteAssetsBulk(filePaths);
     }
 
-    set(state => {
-      const newAssets = state.assets.filter(a => !ids.includes(a.id))
+    set((state) => {
+      const newAssets = state.assets.filter((a) => !ids.includes(a.id));
       if (window.electronAPI?.saveAssetsMetadata) {
-        window.electronAPI.saveAssetsMetadata(newAssets as Parameters<typeof window.electronAPI.saveAssetsMetadata>[0])
+        window.electronAPI.saveAssetsMetadata(
+          newAssets as Parameters<
+            typeof window.electronAPI.saveAssetsMetadata
+          >[0],
+        );
       } else {
-        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets))
+        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets));
       }
-      return { assets: newAssets }
-    })
+      return { assets: newAssets };
+    });
 
-    return toDelete.length
+    return toDelete.length;
   },
 
   updateAsset: async (id, updates) => {
-    set(state => {
-      const newAssets = state.assets.map(a =>
-        a.id === id ? { ...a, ...updates } : a
-      )
+    set((state) => {
+      const newAssets = state.assets.map((a) =>
+        a.id === id ? { ...a, ...updates } : a,
+      );
       if (window.electronAPI?.saveAssetsMetadata) {
-        window.electronAPI.saveAssetsMetadata(newAssets as Parameters<typeof window.electronAPI.saveAssetsMetadata>[0])
+        window.electronAPI.saveAssetsMetadata(
+          newAssets as Parameters<
+            typeof window.electronAPI.saveAssetsMetadata
+          >[0],
+        );
       } else {
-        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets))
+        localStorage.setItem(METADATA_STORAGE_KEY, JSON.stringify(newAssets));
       }
-      return { assets: newAssets }
-    })
+      return { assets: newAssets };
+    });
   },
 
   getFilteredAssets: (filter) => {
-    const { assets } = get()
-    let filtered = [...assets]
+    const { assets } = get();
+    let filtered = [...assets];
 
     // Filter by types
     if (filter.types && filter.types.length > 0) {
-      filtered = filtered.filter(a => filter.types!.includes(a.type))
+      filtered = filtered.filter((a) => filter.types!.includes(a.type));
     }
 
     // Filter by models
     if (filter.models && filter.models.length > 0) {
-      filtered = filtered.filter(a => filter.models!.includes(a.modelId))
+      filtered = filtered.filter((a) => filter.models!.includes(a.modelId));
     }
 
     // Filter by source
     if (filter.sources && filter.sources.length > 0) {
-      filtered = filtered.filter(a => {
-        const source = a.source ?? (a.modelId === 'local/z-image' ? 'z-image' : 'playground')
-        return filter.sources!.includes(source)
-      })
+      filtered = filtered.filter((a) => {
+        const source =
+          a.source ??
+          (a.modelId === "local/z-image" ? "z-image" : "playground");
+        return filter.sources!.includes(source);
+      });
     }
 
     // Filter by date range
     if (filter.dateFrom) {
-      const from = new Date(filter.dateFrom)
-      filtered = filtered.filter(a => new Date(a.createdAt) >= from)
+      const from = new Date(filter.dateFrom);
+      filtered = filtered.filter((a) => new Date(a.createdAt) >= from);
     }
     if (filter.dateTo) {
-      const to = new Date(filter.dateTo)
-      to.setHours(23, 59, 59, 999)
-      filtered = filtered.filter(a => new Date(a.createdAt) <= to)
+      const to = new Date(filter.dateTo);
+      to.setHours(23, 59, 59, 999);
+      filtered = filtered.filter((a) => new Date(a.createdAt) <= to);
     }
 
     // Filter by tags
     if (filter.tags && filter.tags.length > 0) {
-      filtered = filtered.filter(a =>
-        filter.tags!.some(tag => a.tags.includes(tag))
-      )
+      filtered = filtered.filter((a) =>
+        filter.tags!.some((tag) => a.tags.includes(tag)),
+      );
     }
 
     // Filter favorites only
     if (filter.favoritesOnly) {
-      filtered = filtered.filter(a => a.favorite)
+      filtered = filtered.filter((a) => a.favorite);
     }
 
     // Search
     if (filter.search && filter.search.trim()) {
-      const search = filter.search.toLowerCase()
-      filtered = filtered.filter(a =>
-        a.fileName.toLowerCase().includes(search) ||
-        a.modelId.toLowerCase().includes(search) ||
-        a.tags.some(t => t.toLowerCase().includes(search))
-      )
+      const search = filter.search.toLowerCase();
+      filtered = filtered.filter(
+        (a) =>
+          a.fileName.toLowerCase().includes(search) ||
+          a.modelId.toLowerCase().includes(search) ||
+          a.tags.some((t) => t.toLowerCase().includes(search)),
+      );
     }
 
     // Sort
-    const sortBy = filter.sortBy || 'date-desc'
+    const sortBy = filter.sortBy || "date-desc";
     filtered.sort((a, b) => {
       switch (sortBy) {
-        case 'date-desc':
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-        case 'date-asc':
-          return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
-        case 'name-asc':
-          return a.fileName.localeCompare(b.fileName)
-        case 'name-desc':
-          return b.fileName.localeCompare(a.fileName)
-        case 'size-desc':
-          return b.fileSize - a.fileSize
-        case 'size-asc':
-          return a.fileSize - b.fileSize
+        case "date-desc":
+          return (
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+          );
+        case "date-asc":
+          return (
+            new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+          );
+        case "name-asc":
+          return a.fileName.localeCompare(b.fileName);
+        case "name-desc":
+          return b.fileName.localeCompare(a.fileName);
+        case "size-desc":
+          return b.fileSize - a.fileSize;
+        case "size-asc":
+          return a.fileSize - b.fileSize;
         default:
-          return 0
+          return 0;
       }
-    })
+    });
 
-    return filtered
+    return filtered;
   },
 
   getAllTags: () => {
-    const { assets } = get()
-    const tagsSet = new Set<string>()
-    assets.forEach(a => a.tags.forEach(t => tagsSet.add(t)))
-    return Array.from(tagsSet).sort()
+    const { assets } = get();
+    const tagsSet = new Set<string>();
+    assets.forEach((a) => a.tags.forEach((t) => tagsSet.add(t)));
+    return Array.from(tagsSet).sort();
   },
 
   getAllModels: () => {
-    const { assets } = get()
-    const modelIds = new Set<string>()
-    assets.forEach(a => modelIds.add(a.modelId))
-    return Array.from(modelIds).sort()
+    const { assets } = get();
+    const modelIds = new Set<string>();
+    assets.forEach((a) => modelIds.add(a.modelId));
+    return Array.from(modelIds).sort();
   },
 
   setAutoSave: async (enabled) => {
-    const newSettings = { ...get().settings, autoSaveAssets: enabled }
+    const newSettings = { ...get().settings, autoSaveAssets: enabled };
     if (window.electronAPI?.setAssetsSettings) {
-      await window.electronAPI.setAssetsSettings({ autoSaveAssets: enabled })
+      await window.electronAPI.setAssetsSettings({ autoSaveAssets: enabled });
     } else {
-      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(newSettings))
+      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(newSettings));
     }
-    set({ settings: newSettings })
+    set({ settings: newSettings });
   },
 
   setAssetsDirectory: async (path) => {
-    const newSettings = { ...get().settings, assetsDirectory: path }
+    const newSettings = { ...get().settings, assetsDirectory: path };
     if (window.electronAPI?.setAssetsSettings) {
-      await window.electronAPI.setAssetsSettings({ assetsDirectory: path })
+      await window.electronAPI.setAssetsSettings({ assetsDirectory: path });
     } else {
-      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(newSettings))
+      localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(newSettings));
     }
-    set({ settings: newSettings })
+    set({ settings: newSettings });
   },
 
   openAssetLocation: async (id) => {
-    const asset = get().assets.find(a => a.id === id)
+    const asset = get().assets.find((a) => a.id === id);
     if (asset && window.electronAPI?.openFileLocation) {
-      await window.electronAPI.openFileLocation(asset.filePath)
+      await window.electronAPI.openFileLocation(asset.filePath);
     }
   },
 
   getAssetById: (id) => {
-    return get().assets.find(a => a.id === id)
+    return get().assets.find((a) => a.id === id);
   },
 
   hasAssetForPrediction: (predictionId: string) => {
-    return get().assets.some(a => a.predictionId === predictionId)
+    return get().assets.some((a) => a.predictionId === predictionId);
   },
 
   hasAssetForExecution: (executionId: string) => {
-    return get().assets.some(a => a.executionId === executionId)
+    return get().assets.some((a) => a.executionId === executionId);
   },
 
   validateAssets: async () => {
     // No-op: assets are now loaded directly from disk scan, so validation is not needed
     // The loadAssets function scans actual files and merges with metadata
-  }
-}))
+  },
+}));
diff --git a/src/stores/modelsStore.ts b/src/stores/modelsStore.ts
index 2eb2fd93..6e844dd3 100644
--- a/src/stores/modelsStore.ts
+++ b/src/stores/modelsStore.ts
@@ -1,137 +1,164 @@
-import { create } from 'zustand'
-import { apiClient } from '@/api/client'
-import type { Model } from '@/types/model'
-import { fuzzySearch } from '@/lib/fuzzySearch'
+import { create } from "zustand";
+import { apiClient } from "@/api/client";
+import type { Model } from "@/types/model";
+import { fuzzySearch } from "@/lib/fuzzySearch";
 
-export type SortBy = 'name' | 'price' | 'type' | 'sort_order'
-export type SortOrder = 'asc' | 'desc'
+export type SortBy = "name" | "price" | "type" | "sort_order";
+export type SortOrder = "asc" | "desc";
 
-const FAVORITES_STORAGE_KEY = 'wavespeed_favorites'
+const FAVORITES_STORAGE_KEY = "wavespeed_favorites";
+const MODELS_CACHE_KEY = "wavespeed_models_cache_v1";
 
 function loadFavorites(): Set<string> {
   try {
-    const stored = localStorage.getItem(FAVORITES_STORAGE_KEY)
-    if (stored) {
-      return new Set(JSON.parse(stored))
-    }
+    const stored = localStorage.getItem(FAVORITES_STORAGE_KEY);
+    if (stored) return new Set(JSON.parse(stored));
   } catch (e) {
-    console.error('Failed to load favorites:', e)
+    console.error("Failed to load favorites:", e);
   }
-  return new Set()
+  return new Set();
 }
 
 function saveFavorites(favorites: Set<string>) {
   try {
-    localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify([...favorites]))
+    localStorage.setItem(FAVORITES_STORAGE_KEY, JSON.stringify([...favorites]));
   } catch (e) {
-    console.error('Failed to save favorites:', e)
+    console.error("Failed to save favorites:", e);
   }
 }
 
+/** Load cached models synchronously from localStorage for instant first render */
+function loadCachedModels(): Model[] {
+  try {
+    const raw = localStorage.getItem(MODELS_CACHE_KEY);
+    if (raw) return JSON.parse(raw) as Model[];
+  } catch {}
+  return [];
+}
+
+function saveCachedModels(models: Model[]) {
+  try {
+    localStorage.setItem(MODELS_CACHE_KEY, JSON.stringify(models));
+  } catch {}
+}
+
 interface ModelsState {
-  models: Model[]
-  isLoading: boolean
-  error: string | null
-  searchQuery: string
-  selectedType: string | null
-  sortBy: SortBy
-  sortOrder: SortOrder
-  favorites: Set<string>
-  showFavoritesOnly: boolean
-  hasFetched: boolean
-  fetchModels: (force?: boolean) => Promise<void>
-  setSearchQuery: (query: string) => void
-  setSelectedType: (type: string | null) => void
-  setSortBy: (sortBy: SortBy) => void
-  setSortOrder: (sortOrder: SortOrder) => void
-  toggleSortOrder: () => void
-  toggleFavorite: (modelId: string) => void
-  isFavorite: (modelId: string) => boolean
-  setShowFavoritesOnly: (show: boolean) => void
-  getFilteredModels: () => Model[]
-  getModelById: (modelId: string) => Model | undefined
+  models: Model[];
+  isLoading: boolean;
+  error: string | null;
+  searchQuery: string;
+  selectedType: string | null;
+  sortBy: SortBy;
+  sortOrder: SortOrder;
+  favorites: Set<string>;
+  showFavoritesOnly: boolean;
+  hasFetched: boolean;
+  fetchModels: (force?: boolean) => Promise<void>;
+  setSearchQuery: (query: string) => void;
+  setSelectedType: (type: string | null) => void;
+  setSortBy: (sortBy: SortBy) => void;
+  setSortOrder: (sortOrder: SortOrder) => void;
+  toggleSortOrder: () => void;
+  toggleFavorite: (modelId: string) => void;
+  isFavorite: (modelId: string) => boolean;
+  setShowFavoritesOnly: (show: boolean) => void;
+  getFilteredModels: () => Model[];
+  getModelById: (modelId: string) => Model | undefined;
 }
 
 export const useModelsStore = create<ModelsState>((set, get) => ({
-  models: [],
+  models: loadCachedModels(), // instant: pre-populate from localStorage cache
   isLoading: false,
   error: null,
-  searchQuery: '',
+  searchQuery: "",
   selectedType: null,
-  sortBy: 'sort_order',
-  sortOrder: 'desc',
+  sortBy: "sort_order",
+  sortOrder: "desc",
   favorites: loadFavorites(),
   showFavoritesOnly: false,
   hasFetched: false,
 
   fetchModels: async (force = false) => {
-    // Skip if already fetched (unless forced)
-    if (get().hasFetched && !force) {
-      return
-    }
-    set({ isLoading: true, error: null })
+    if (get().hasFetched && !force) return;
+    set({ isLoading: true, error: null });
     try {
-      const models = await apiClient.listModels()
-      set({ models, isLoading: false, hasFetched: true })
+      const raw = await apiClient.listModels();
+      const seen = new Set<string>();
+      const models = raw.filter((m) => {
+        if (seen.has(m.model_id)) return false;
+        seen.add(m.model_id);
+        return true;
+      });
+      saveCachedModels(models); // persist for next cold start
+      set({ models, isLoading: false, hasFetched: true });
     } catch (error) {
       set({
-        error: error instanceof Error ? error.message : 'Failed to fetch models',
-        isLoading: false
-      })
+        error:
+          error instanceof Error ? error.message : "Failed to fetch models",
+        isLoading: false,
+      });
     }
   },
 
   setSearchQuery: (query: string) => {
-    set({ searchQuery: query })
+    set({ searchQuery: query });
   },
 
   setSelectedType: (type: string | null) => {
-    set({ selectedType: type })
+    set({ selectedType: type });
   },
 
   setSortBy: (sortBy: SortBy) => {
-    set({ sortBy })
+    set({ sortBy });
   },
 
   setSortOrder: (sortOrder: SortOrder) => {
-    set({ sortOrder })
+    set({ sortOrder });
   },
 
   toggleSortOrder: () => {
-    set((state) => ({ sortOrder: state.sortOrder === 'asc' ? 'desc' : 'asc' }))
+    set((state) => ({ sortOrder: state.sortOrder === "asc" ? "desc" : "asc" }));
   },
 
   toggleFavorite: (modelId: string) => {
-    const { favorites } = get()
-    const newFavorites = new Set(favorites)
+    const { favorites } = get();
+    const newFavorites = new Set(favorites);
     if (newFavorites.has(modelId)) {
-      newFavorites.delete(modelId)
+      newFavorites.delete(modelId);
     } else {
-      newFavorites.add(modelId)
+      newFavorites.add(modelId);
     }
-    saveFavorites(newFavorites)
-    set({ favorites: newFavorites })
+    saveFavorites(newFavorites);
+    set({ favorites: newFavorites });
   },
 
   isFavorite: (modelId: string) => {
-    return get().favorites.has(modelId)
+    return get().favorites.has(modelId);
   },
 
   setShowFavoritesOnly: (show: boolean) => {
-    set({ showFavoritesOnly: show })
+    set({ showFavoritesOnly: show });
   },
 
   getFilteredModels: () => {
-    const { models, searchQuery, selectedType, sortBy, sortOrder, favorites, showFavoritesOnly } = get()
+    const {
+      models,
+      searchQuery,
+      selectedType,
+      sortBy,
+      sortOrder,
+      favorites,
+      showFavoritesOnly,
+    } = get();
 
     // First filter by favorites if enabled
     let filtered = showFavoritesOnly
-      ? models.filter(m => favorites.has(m.model_id))
-      : [...models]
+      ? models.filter((m) => favorites.has(m.model_id))
+      : [...models];
 
     // Then filter by type if selected
     if (selectedType) {
-      filtered = filtered.filter(m => m.type === selectedType)
+      filtered = filtered.filter((m) => m.type === selectedType);
     }
 
     // Then apply fuzzy search
@@ -139,37 +166,37 @@ export const useModelsStore = create<ModelsState>((set, get) => ({
       const results = fuzzySearch(filtered, searchQuery, (model) => [
         model.name,
         model.model_id,
-        model.description || '',
-        model.type || ''
-      ])
+        model.description || "",
+        model.type || "",
+      ]);
       // Return results sorted by match relevance (fuzzySearch already sorts by score)
-      return results.map(r => r.item)
+      return results.map((r) => r.item);
     }
 
     // Apply sorting only when not searching
     const sorted = [...filtered].sort((a, b) => {
-      let comparison = 0
+      let comparison = 0;
       switch (sortBy) {
-        case 'name':
-          comparison = a.name.localeCompare(b.name)
-          break
-        case 'price':
-          comparison = (a.base_price ?? 0) - (b.base_price ?? 0)
-          break
-        case 'type':
-          comparison = (a.type || '').localeCompare(b.type || '')
-          break
-        case 'sort_order':
-          comparison = (a.sort_order ?? 0) - (b.sort_order ?? 0)
-          break
+        case "name":
+          comparison = a.name.localeCompare(b.name);
+          break;
+        case "price":
+          comparison = (a.base_price ?? 0) - (b.base_price ?? 0);
+          break;
+        case "type":
+          comparison = (a.type || "").localeCompare(b.type || "");
+          break;
+        case "sort_order":
+          comparison = (a.sort_order ?? 0) - (b.sort_order ?? 0);
+          break;
       }
-      return sortOrder === 'asc' ? comparison : -comparison
-    })
+      return sortOrder === "asc" ? comparison : -comparison;
+    });
 
-    return sorted
+    return sorted;
   },
 
   getModelById: (modelId: string) => {
-    return get().models.find(m => m.model_id === modelId)
-  }
-}))
+    return get().models.find((m) => m.model_id === modelId);
+  },
+}));
diff --git a/src/stores/playgroundStore.ts b/src/stores/playgroundStore.ts
index a208871f..c5329350 100644
--- a/src/stores/playgroundStore.ts
+++ b/src/stores/playgroundStore.ts
@@ -1,88 +1,110 @@
-import { create } from 'zustand'
-import { apiClient } from '@/api/client'
-import type { Model } from '@/types/model'
-import type { PredictionResult, GenerationHistoryItem } from '@/types/prediction'
-import type { FormFieldConfig } from '@/lib/schemaToForm'
-import { normalizePayloadArrays } from '@/lib/schemaToForm'
-import type { BatchConfig, BatchState, BatchResult } from '@/types/batch'
-import { DEFAULT_BATCH_CONFIG } from '@/types/batch'
-import { persistentStorage } from '@/lib/storage'
-import { isImageUrl, isVideoUrl } from '@/lib/mediaUtils'
+import { create } from "zustand";
+import { apiClient } from "@/api/client";
+import type { Model } from "@/types/model";
+import type {
+  PredictionResult,
+  GenerationHistoryItem,
+} from "@/types/prediction";
+import type { FormFieldConfig } from "@/lib/schemaToForm";
+import { normalizePayloadArrays } from "@/lib/schemaToForm";
+import type { BatchConfig, BatchState, BatchResult } from "@/types/batch";
+import { DEFAULT_BATCH_CONFIG } from "@/types/batch";
+import { persistentStorage } from "@/lib/storage";
+import { isImageUrl, isVideoUrl } from "@/lib/mediaUtils";
 
 /* ── Playground session persistence ───────────────────────────────────── */
 
-const PLAYGROUND_SESSION_KEY = 'wavespeed_playground_session_v1'
+const PLAYGROUND_SESSION_KEY = "wavespeed_playground_session_v1";
 
 interface PersistedPlaygroundTab {
-  id: string
-  selectedModel: Model | null
-  formValues: Record<string, unknown>
-  formFields: FormFieldConfig[]
-  batchConfig: BatchConfig
-  batchResults: BatchResult[]
+  id: string;
+  createdAt?: number;
+  selectedModel: Model | null;
+  formValues: Record<string, unknown>;
+  formFields: FormFieldConfig[];
+  batchConfig: BatchConfig;
+  batchResults: BatchResult[];
 }
 
 interface PersistedPlaygroundSession {
-  version: 1
-  activeTabId: string | null
-  tabCounter: number
-  tabs: PersistedPlaygroundTab[]
+  version: 1;
+  activeTabId: string | null;
+  tabCounter: number;
+  tabs: PersistedPlaygroundTab[];
 }
 
 function parseTabCounter(tabId: string): number {
-  const m = /^tab-(\d+)$/.exec(tabId)
-  return m ? Number(m[1]) : 0
+  const m = /^tab-(\d+)$/.exec(tabId);
+  return m ? Number(m[1]) : 0;
 }
 
-function parsePlaygroundSession(raw: unknown): { tabs: PlaygroundTab[]; activeTabId: string; tabCounter: number } | null {
+function parsePlaygroundSession(
+  raw: unknown,
+): { tabs: PlaygroundTab[]; activeTabId: string; tabCounter: number } | null {
   try {
-    if (!raw) return null
-    const parsed = (typeof raw === 'string' ? JSON.parse(raw) : raw) as Partial<PersistedPlaygroundSession>
-    if (parsed.version !== 1 || !Array.isArray(parsed.tabs) || parsed.tabs.length === 0) return null
-    const tabs: PlaygroundTab[] = parsed.tabs.map((t: PersistedPlaygroundTab) => ({
-      id: t.id,
-      selectedModel: t.selectedModel ?? null,
-      formValues: t.formValues ?? {},
-      formFields: t.formFields ?? [],
-      validationErrors: {},
-      isRunning: false,
-      currentPrediction: null,
-      error: null,
-      outputs: [],
-      batchConfig: t.batchConfig ?? { ...DEFAULT_BATCH_CONFIG },
-      batchState: null,
-      batchResults: t.batchResults ?? [],
-      uploadingCount: 0,
-      generationHistory: [],
-      selectedHistoryIndex: null
-    }))
-    const activeTabId = typeof parsed.activeTabId === 'string' && tabs.some(tab => tab.id === parsed.activeTabId)
-      ? parsed.activeTabId
-      : tabs[0].id
-    const tabCounter = typeof parsed.tabCounter === 'number' ? parsed.tabCounter : Math.max(1, ...tabs.map(t => parseTabCounter(t.id)))
-    return { tabs, activeTabId, tabCounter }
+    if (!raw) return null;
+    const parsed = (
+      typeof raw === "string" ? JSON.parse(raw) : raw
+    ) as Partial<PersistedPlaygroundSession>;
+    if (
+      parsed.version !== 1 ||
+      !Array.isArray(parsed.tabs) ||
+      parsed.tabs.length === 0
+    )
+      return null;
+    const tabs: PlaygroundTab[] = parsed.tabs.map(
+      (t: PersistedPlaygroundTab) => ({
+        id: t.id,
+        createdAt: t.createdAt ?? Date.now(),
+        selectedModel: t.selectedModel ?? null,
+        formValues: t.formValues ?? {},
+        formFields: t.formFields ?? [],
+        validationErrors: {},
+        isRunning: false,
+        currentPrediction: null,
+        error: null,
+        outputs: [],
+        batchConfig: t.batchConfig ?? { ...DEFAULT_BATCH_CONFIG },
+        batchState: null,
+        batchResults: t.batchResults ?? [],
+        uploadingCount: 0,
+        generationHistory: [],
+        selectedHistoryIndex: null,
+      }),
+    );
+    const activeTabId =
+      typeof parsed.activeTabId === "string" &&
+      tabs.some((tab) => tab.id === parsed.activeTabId)
+        ? parsed.activeTabId
+        : tabs[0].id;
+    const tabCounter =
+      typeof parsed.tabCounter === "number"
+        ? parsed.tabCounter
+        : Math.max(1, ...tabs.map((t) => parseTabCounter(t.id)));
+    return { tabs, activeTabId, tabCounter };
   } catch {
-    return null
+    return null;
   }
 }
 
 export function persistPlaygroundSession(): void {
   try {
-    const state = usePlaygroundStore.getState()
+    const state = usePlaygroundStore.getState();
     const payload: PersistedPlaygroundSession = {
       version: 1,
       activeTabId: state.activeTabId,
       tabCounter,
-      tabs: state.tabs.map(tab => ({
+      tabs: state.tabs.map((tab) => ({
         id: tab.id,
+        createdAt: tab.createdAt,
         selectedModel: tab.selectedModel,
         formValues: tab.formValues,
         formFields: tab.formFields,
         batchConfig: tab.batchConfig,
-        batchResults: tab.batchResults
-      }))
-    }
-    persistentStorage.set(PLAYGROUND_SESSION_KEY, payload)
+        batchResults: tab.batchResults,
+      })),
+    };
+    persistentStorage.set(PLAYGROUND_SESSION_KEY, payload);
   } catch {
     // ignore
   }
@@ -91,88 +113,93 @@ export function persistPlaygroundSession(): void {
 /** Hydrate playground session from persistent storage (async). */
 export async function hydratePlaygroundSession(): Promise<void> {
   try {
-    const stored = await persistentStorage.get(PLAYGROUND_SESSION_KEY)
-    if (!stored) return
-    const session = parsePlaygroundSession(stored)
-    if (!session) return
-    const current = usePlaygroundStore.getState()
-    if (current.tabs.length > 0) return
-    tabCounter = session.tabCounter
-    usePlaygroundStore.setState({ tabs: session.tabs, activeTabId: session.activeTabId })
+    const stored = await persistentStorage.get(PLAYGROUND_SESSION_KEY);
+    if (!stored) return;
+    const session = parsePlaygroundSession(stored);
+    if (!session) return;
+    const current = usePlaygroundStore.getState();
+    if (current.tabs.length > 0) return;
+    tabCounter = session.tabCounter;
+    usePlaygroundStore.setState({
+      tabs: session.tabs,
+      activeTabId: session.activeTabId,
+    });
   } catch {
     // ignore
   }
 }
 
 interface PlaygroundTab {
-  id: string
-  selectedModel: Model | null
-  formValues: Record<string, unknown>
-  formFields: FormFieldConfig[]
-  validationErrors: Record<string, string>
-  isRunning: boolean
-  currentPrediction: PredictionResult | null
-  error: string | null
-  outputs: (string | Record<string, unknown>)[]
+  id: string;
+  createdAt: number;
+  selectedModel: Model | null;
+  formValues: Record<string, unknown>;
+  formFields: FormFieldConfig[];
+  validationErrors: Record<string, string>;
+  isRunning: boolean;
+  currentPrediction: PredictionResult | null;
+  error: string | null;
+  outputs: (string | Record<string, unknown>)[];
   // Batch processing
-  batchConfig: BatchConfig
-  batchState: BatchState | null
-  batchResults: BatchResult[]
+  batchConfig: BatchConfig;
+  batchState: BatchState | null;
+  batchResults: BatchResult[];
   // File upload tracking
-  uploadingCount: number
+  uploadingCount: number;
   // Generation history (multi-output splitting)
-  generationHistory: GenerationHistoryItem[]
-  selectedHistoryIndex: number | null
+  generationHistory: GenerationHistoryItem[];
+  selectedHistoryIndex: number | null;
 }
 
 interface PlaygroundState {
-  tabs: PlaygroundTab[]
-  activeTabId: string | null
+  tabs: PlaygroundTab[];
+  activeTabId: string | null;
 
   // Tab management
-  createTab: (model?: Model) => string
-  closeTab: (tabId: string) => void
-  setActiveTab: (tabId: string) => void
-  reorderTab: (fromIndex: number, toIndex: number) => void
+  createTab: (model?: Model) => string;
+  closeTab: (tabId: string) => void;
+  setActiveTab: (tabId: string) => void;
+  reorderTab: (fromIndex: number, toIndex: number) => void;
 
   // Current tab accessors (for convenience)
-  getActiveTab: () => PlaygroundTab | null
+  getActiveTab: () => PlaygroundTab | null;
 
   // Actions on active tab
-  setSelectedModel: (model: Model | null) => void
-  setFormValue: (key: string, value: unknown) => void
-  setFormValues: (values: Record<string, unknown>) => void
-  setFormFields: (fields: FormFieldConfig[]) => void
-  validateForm: () => boolean
-  clearValidationError: (key: string) => void
-  resetForm: () => void
-  runPrediction: () => Promise<void>
-  clearOutput: () => void
+  setSelectedModel: (model: Model | null) => void;
+  setFormValue: (key: string, value: unknown) => void;
+  setFormValues: (values: Record<string, unknown>) => void;
+  setFormFields: (fields: FormFieldConfig[]) => void;
+  validateForm: () => boolean;
+  clearValidationError: (key: string) => void;
+  resetForm: () => void;
+  runPrediction: () => Promise<void>;
+  clearOutput: () => void;
 
   // Batch processing actions
-  setBatchConfig: (config: Partial<BatchConfig>) => void
-  runBatch: () => Promise<void>
-  cancelBatch: () => void
-  clearBatchResults: () => void
-  generateBatchInputs: () => Record<string, unknown>[]
+  setBatchConfig: (config: Partial<BatchConfig>) => void;
+  runBatch: () => Promise<void>;
+  cancelBatch: () => void;
+  clearBatchResults: () => void;
+  generateBatchInputs: () => Record<string, unknown>[];
 
   // File upload tracking
-  setUploading: (isUploading: boolean) => void
+  setUploading: (isUploading: boolean) => void;
 
   // History selection
-  selectHistoryItem: (index: number | null) => void
+  selectHistoryItem: (index: number | null) => void;
 }
 
 // Check if a value is considered "empty"
 function isEmpty(value: unknown): boolean {
-  if (value === undefined || value === null || value === '') return true
-  if (Array.isArray(value) && value.length === 0) return true
-  return false
+  if (value === undefined || value === null || value === "") return true;
+  if (Array.isArray(value) && value.length === 0) return true;
+  return false;
 }
 
 function createEmptyTab(id: string, model?: Model): PlaygroundTab {
   return {
     id,
+    createdAt: Date.now(),
     selectedModel: model || null,
     formValues: {},
     formFields: [],
@@ -189,15 +216,17 @@ function createEmptyTab(id: string, model?: Model): PlaygroundTab {
     uploadingCount: 0,
     // Generation history
     generationHistory: [],
-    selectedHistoryIndex: null
-  }
+    selectedHistoryIndex: null,
+  };
 }
 
-let tabCounter = 0
+let tabCounter = 0;
 
-const initialSession = parsePlaygroundSession(persistentStorage.getSync(PLAYGROUND_SESSION_KEY))
+const initialSession = parsePlaygroundSession(
+  persistentStorage.getSync(PLAYGROUND_SESSION_KEY),
+);
 if (initialSession) {
-  tabCounter = initialSession.tabCounter
+  tabCounter = initialSession.tabCounter;
 }
 
 export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
@@ -205,58 +234,58 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
   activeTabId: initialSession?.activeTabId ?? null,
 
   createTab: (model?: Model) => {
-    const id = `tab-${++tabCounter}`
-    const newTab = createEmptyTab(id, model)
-    set(state => ({
+    const id = `tab-${++tabCounter}`;
+    const newTab = createEmptyTab(id, model);
+    set((state) => ({
       tabs: [...state.tabs, newTab],
-      activeTabId: id
-    }))
-    return id
+      activeTabId: id,
+    }));
+    return id;
   },
 
   closeTab: (tabId: string) => {
-    set(state => {
-      const newTabs = state.tabs.filter(t => t.id !== tabId)
-      let newActiveTabId = state.activeTabId
+    set((state) => {
+      const newTabs = state.tabs.filter((t) => t.id !== tabId);
+      let newActiveTabId = state.activeTabId;
 
       // If we're closing the active tab, switch to another
       if (state.activeTabId === tabId) {
-        const closedIndex = state.tabs.findIndex(t => t.id === tabId)
+        const closedIndex = state.tabs.findIndex((t) => t.id === tabId);
         if (newTabs.length > 0) {
           // Try to select the tab to the left, or the first one
-          const newIndex = Math.min(closedIndex, newTabs.length - 1)
-          newActiveTabId = newTabs[newIndex].id
+          const newIndex = Math.min(closedIndex, newTabs.length - 1);
+          newActiveTabId = newTabs[newIndex].id;
         } else {
-          newActiveTabId = null
+          newActiveTabId = null;
         }
       }
 
-      return { tabs: newTabs, activeTabId: newActiveTabId }
-    })
+      return { tabs: newTabs, activeTabId: newActiveTabId };
+    });
   },
 
   setActiveTab: (tabId: string) => {
-    set({ activeTabId: tabId })
+    set({ activeTabId: tabId });
   },
 
   reorderTab: (fromIndex: number, toIndex: number) => {
-    set(state => {
-      if (fromIndex === toIndex) return state
-      const newTabs = [...state.tabs]
-      const [moved] = newTabs.splice(fromIndex, 1)
-      newTabs.splice(toIndex, 0, moved)
-      return { tabs: newTabs }
-    })
+    set((state) => {
+      if (fromIndex === toIndex) return state;
+      const newTabs = [...state.tabs];
+      const [moved] = newTabs.splice(fromIndex, 1);
+      newTabs.splice(toIndex, 0, moved);
+      return { tabs: newTabs };
+    });
   },
 
   getActiveTab: () => {
-    const { tabs, activeTabId } = get()
-    return tabs.find(t => t.id === activeTabId) || null
+    const { tabs, activeTabId } = get();
+    return tabs.find((t) => t.id === activeTabId) || null;
   },
 
   setSelectedModel: (model: Model | null) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? tab.selectedModel?.model_id === model?.model_id
             ? tab
@@ -270,85 +299,83 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
                 error: null,
                 outputs: [],
                 generationHistory: [],
-                selectedHistoryIndex: null
+                selectedHistoryIndex: null,
               }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   setFormValue: (key: string, value: unknown) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? {
               ...tab,
               formValues: { ...tab.formValues, [key]: value },
-              validationErrors: { ...tab.validationErrors, [key]: '' }
+              validationErrors: { ...tab.validationErrors, [key]: "" },
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   setFormValues: (values: Record<string, unknown>) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? { ...tab, formValues: values, validationErrors: {} }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   setFormFields: (fields: FormFieldConfig[]) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
-        tab.id === state.activeTabId
-          ? { ...tab, formFields: fields }
-          : tab
-      )
-    }))
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
+        tab.id === state.activeTabId ? { ...tab, formFields: fields } : tab,
+      ),
+    }));
   },
 
   validateForm: () => {
-    const activeTab = get().getActiveTab()
-    if (!activeTab) return false
+    const activeTab = get().getActiveTab();
+    if (!activeTab) return false;
 
-    const errors: Record<string, string> = {}
-    let isValid = true
+    const errors: Record<string, string> = {};
+    let isValid = true;
 
     for (const field of activeTab.formFields) {
       if (field.required && isEmpty(activeTab.formValues[field.name])) {
-        errors[field.name] = `${field.label} is required`
-        isValid = false
+        errors[field.name] = `${field.label} is required`;
+        isValid = false;
       }
     }
 
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? { ...tab, validationErrors: errors }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
 
-    return isValid
+    return isValid;
   },
 
   clearValidationError: (key: string) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
-          ? { ...tab, validationErrors: { ...tab.validationErrors, [key]: '' } }
-          : tab
-      )
-    }))
+          ? { ...tab, validationErrors: { ...tab.validationErrors, [key]: "" } }
+          : tab,
+      ),
+    }));
   },
 
   resetForm: () => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? {
               ...tab,
@@ -358,214 +385,250 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
               error: null,
               outputs: [],
               generationHistory: [],
-              selectedHistoryIndex: null
+              selectedHistoryIndex: null,
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   runPrediction: async () => {
-    const activeTab = get().getActiveTab()
-    if (!activeTab) return
+    const activeTab = get().getActiveTab();
+    if (!activeTab) return;
 
-    const { selectedModel, formValues, formFields } = activeTab
+    const { selectedModel, formValues, formFields } = activeTab;
     if (!selectedModel) {
-      set(state => ({
-        tabs: state.tabs.map(tab =>
+      set((state) => ({
+        tabs: state.tabs.map((tab) =>
           tab.id === state.activeTabId
-            ? { ...tab, error: 'No model selected' }
-            : tab
-        )
-      }))
-      return
+            ? { ...tab, error: "No model selected" }
+            : tab,
+        ),
+      }));
+      return;
     }
 
     // Validate required fields
     if (!get().validateForm()) {
-      return
+      return;
     }
 
     // Set running state and clear batch results (switching to single mode)
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
-          ? { ...tab, isRunning: true, error: null, currentPrediction: null, outputs: [], batchState: null, batchResults: [] }
-          : tab
-      )
-    }))
+          ? {
+              ...tab,
+              isRunning: true,
+              error: null,
+              currentPrediction: null,
+              outputs: [],
+              selectedHistoryIndex: null,
+              batchState: null,
+              batchResults: [],
+            }
+          : tab,
+      ),
+    }));
 
-    const tabId = get().activeTabId
+    const tabId = get().activeTabId;
 
     try {
       // Clean up form values - remove empty strings and undefined
-      const cleanedInput: Record<string, unknown> = {}
-      const integerFields = new Set(formFields.filter(f => f.schemaType === 'integer').map(f => f.name))
+      const cleanedInput: Record<string, unknown> = {};
+      const integerFields = new Set(
+        formFields.filter((f) => f.schemaType === "integer").map((f) => f.name),
+      );
       for (const [key, value] of Object.entries(formValues)) {
-        if (value !== '' && value !== undefined && value !== null) {
+        if (value !== "" && value !== undefined && value !== null) {
           // Ensure integer fields are sent as integers (API rejects non-integer values)
-          cleanedInput[key] = integerFields.has(key) && typeof value === 'number'
-            ? Math.round(value)
-            : value
+          cleanedInput[key] =
+            integerFields.has(key) && typeof value === "number"
+              ? Math.round(value)
+              : value;
         }
       }
-      const normalizedInput = normalizePayloadArrays(cleanedInput, formFields)
+      const normalizedInput = normalizePayloadArrays(cleanedInput, formFields);
 
-      const result = await apiClient.run(selectedModel.model_id, normalizedInput, {
-        enableSyncMode: normalizedInput.enable_sync_mode as boolean
-      })
+      const result = await apiClient.run(
+        selectedModel.model_id,
+        normalizedInput,
+        {
+          enableSyncMode: normalizedInput.enable_sync_mode as boolean,
+        },
+      );
 
       // Build history items — split multi-media outputs into individual entries
-      const outputs = result.outputs || []
-      const historyItems: GenerationHistoryItem[] = []
+      const outputs = result.outputs || [];
+      const historyItems: GenerationHistoryItem[] = [];
 
-      const mediaEntries: { output: string; type: 'image' | 'video' }[] = []
+      const mediaEntries: { output: string; type: "image" | "video" }[] = [];
       for (const output of outputs) {
-        if (typeof output === 'string') {
-          if (isImageUrl(output)) mediaEntries.push({ output, type: 'image' })
-          else if (isVideoUrl(output)) mediaEntries.push({ output, type: 'video' })
+        if (typeof output === "string") {
+          if (isImageUrl(output)) mediaEntries.push({ output, type: "image" });
+          else if (isVideoUrl(output))
+            mediaEntries.push({ output, type: "video" });
         }
       }
 
+      // Snapshot form values for history recall
+      const snapshotValues = { ...formValues };
+
       if (mediaEntries.length >= 2) {
         // Split: one history item per media output (newest/first at index 0)
-        const baseId = result.id || `gen-${Date.now()}`
+        const baseId = result.id || `gen-${Date.now()}`;
         for (let i = 0; i < mediaEntries.length; i++) {
-          const { output, type } = mediaEntries[i]
+          const { output, type } = mediaEntries[i];
           historyItems.push({
             id: `${baseId}-${i}`,
             prediction: result,
             outputs: [output],
+            formValues: snapshotValues,
             addedAt: Date.now() + i,
             thumbnailUrl: output,
-            thumbnailType: type
-          })
+            thumbnailType: type,
+          });
         }
       } else {
         // Single or no media: keep as one history item
-        const thumbnailUrl = mediaEntries[0]?.output ?? null
-        const thumbnailType = mediaEntries[0]?.type ?? null
+        const thumbnailUrl = mediaEntries[0]?.output ?? null;
+        const thumbnailType = mediaEntries[0]?.type ?? null;
         historyItems.push({
           id: result.id || `gen-${Date.now()}`,
           prediction: result,
           outputs,
+          formValues: snapshotValues,
           addedAt: Date.now(),
           thumbnailUrl,
-          thumbnailType
-        })
+          thumbnailType,
+        });
       }
 
       // Update the specific tab (it might not be active anymore)
-      set(state => ({
-        tabs: state.tabs.map(tab =>
+      set((state) => ({
+        tabs: state.tabs.map((tab) =>
           tab.id === tabId
             ? {
                 ...tab,
                 currentPrediction: result,
                 outputs,
                 isRunning: false,
-                generationHistory: [...historyItems, ...tab.generationHistory].slice(0, 50),
-                selectedHistoryIndex: null
+                generationHistory: [
+                  ...historyItems,
+                  ...tab.generationHistory,
+                ].slice(0, 50),
+                selectedHistoryIndex: null,
               }
-            : tab
-        )
-      }))
+            : tab,
+        ),
+      }));
     } catch (error) {
-      set(state => ({
-        tabs: state.tabs.map(tab =>
+      set((state) => ({
+        tabs: state.tabs.map((tab) =>
           tab.id === tabId
             ? {
                 ...tab,
-                error: error instanceof Error ? error.message : 'Failed to run prediction',
-                isRunning: false
+                error:
+                  error instanceof Error
+                    ? error.message
+                    : "Failed to run prediction",
+                isRunning: false,
               }
-            : tab
-        )
-      }))
+            : tab,
+        ),
+      }));
     }
   },
 
   clearOutput: () => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? { ...tab, currentPrediction: null, outputs: [], error: null }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   // Batch processing actions
   setBatchConfig: (config: Partial<BatchConfig>) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? { ...tab, batchConfig: { ...tab.batchConfig, ...config } }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   generateBatchInputs: () => {
-    const activeTab = get().getActiveTab()
-    if (!activeTab) return []
+    const activeTab = get().getActiveTab();
+    if (!activeTab) return [];
 
-    const { formValues, formFields, batchConfig } = activeTab
-    const count = batchConfig.repeatCount
+    const { formValues, formFields, batchConfig } = activeTab;
+    const count = batchConfig.repeatCount;
     // Only randomize seed if the field exists and is a number type
-    const hasSeedField = formFields.some(f => f.name.toLowerCase() === 'seed' && f.type === 'number')
+    const hasSeedField = formFields.some(
+      (f) => f.name.toLowerCase() === "seed" && f.type === "number",
+    );
 
     // Clean input values
-    const cleanedBase: Record<string, unknown> = {}
-    const integerFields = new Set(formFields.filter(f => f.schemaType === 'integer').map(f => f.name))
+    const cleanedBase: Record<string, unknown> = {};
+    const integerFields = new Set(
+      formFields.filter((f) => f.schemaType === "integer").map((f) => f.name),
+    );
     for (const [key, value] of Object.entries(formValues)) {
-      if (value !== '' && value !== undefined && value !== null) {
-        cleanedBase[key] = integerFields.has(key) && typeof value === 'number'
-          ? Math.round(value)
-          : value
+      if (value !== "" && value !== undefined && value !== null) {
+        cleanedBase[key] =
+          integerFields.has(key) && typeof value === "number"
+            ? Math.round(value)
+            : value;
       }
     }
 
     // Generate inputs with incremental seeds
-    const inputs: Record<string, unknown>[] = []
-    const baseSeed = Math.floor(Math.random() * 65536)
+    const inputs: Record<string, unknown>[] = [];
+    const baseSeed = Math.floor(Math.random() * 65536);
 
     for (let i = 0; i < count; i++) {
-      const input = { ...cleanedBase }
+      const input = { ...cleanedBase };
       if (batchConfig.randomizeSeed && hasSeedField) {
-        input.seed = (baseSeed + i) % 65536
+        input.seed = (baseSeed + i) % 65536;
       }
-      inputs.push(input)
+      inputs.push(input);
     }
 
-    return inputs
+    return inputs;
   },
 
   runBatch: async () => {
-    const activeTab = get().getActiveTab()
-    if (!activeTab) return
+    const activeTab = get().getActiveTab();
+    if (!activeTab) return;
 
-    const { selectedModel, formFields } = activeTab
+    const { selectedModel, formFields, formValues } = activeTab;
     if (!selectedModel) {
-      set(state => ({
-        tabs: state.tabs.map(tab =>
+      set((state) => ({
+        tabs: state.tabs.map((tab) =>
           tab.id === state.activeTabId
-            ? { ...tab, error: 'No model selected' }
-            : tab
-        )
-      }))
-      return
+            ? { ...tab, error: "No model selected" }
+            : tab,
+        ),
+      }));
+      return;
     }
 
     // Validate required fields first
     if (!get().validateForm()) {
-      return
+      return;
     }
 
+    // Snapshot form values for history recall
+    const batchSnapshotValues = { ...formValues };
+
     // Generate batch inputs
-    const inputs = get().generateBatchInputs()
+    const inputs = get().generateBatchInputs();
     if (inputs.length === 0) {
-      return
+      return;
     }
 
     // Initialize batch state
@@ -573,58 +636,66 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
       id: `batch-${index}`,
       index,
       input,
-      status: 'pending' as const
-    }))
+      status: "pending" as const,
+    }));
 
-    const tabId = get().activeTabId
+    const tabId = get().activeTabId;
 
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === tabId
           ? {
               ...tab,
               isRunning: true,
               error: null,
+              selectedHistoryIndex: null,
               batchState: {
                 isRunning: true,
                 queue,
                 currentIndex: 0,
                 completedCount: 0,
                 failedCount: 0,
-                cancelRequested: false
+                cancelRequested: false,
               },
-              batchResults: []
+              batchResults: [],
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
 
     // Set all items to running status
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === tabId && tab.batchState
           ? {
               ...tab,
               batchState: {
                 ...tab.batchState,
-                queue: tab.batchState.queue.map(item => ({ ...item, status: 'running' as const }))
-              }
+                queue: tab.batchState.queue.map((item) => ({
+                  ...item,
+                  status: "running" as const,
+                })),
+              },
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
 
     // Process all requests concurrently
-    const results: BatchResult[] = new Array(inputs.length)
+    const results: BatchResult[] = new Array(inputs.length);
 
     const promises = inputs.map(async (input, i) => {
-      const startTime = Date.now()
-      const normalizedInput = normalizePayloadArrays(input, formFields)
+      const startTime = Date.now();
+      const normalizedInput = normalizePayloadArrays(input, formFields);
       try {
-        const result = await apiClient.run(selectedModel.model_id, normalizedInput, {
-          enableSyncMode: normalizedInput.enable_sync_mode as boolean
-        })
-        const timing = Date.now() - startTime
+        const result = await apiClient.run(
+          selectedModel.model_id,
+          normalizedInput,
+          {
+            enableSyncMode: normalizedInput.enable_sync_mode as boolean,
+          },
+        );
+        const timing = Date.now() - startTime;
 
         results[i] = {
           id: queue[i].id,
@@ -633,32 +704,35 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
           prediction: result,
           outputs: result.outputs || [],
           error: null,
-          timing
-        }
+          timing,
+        };
 
         // Build history items for this single batch result
-        const itemHistoryEntries: GenerationHistoryItem[] = []
-        for (const output of (result.outputs || [])) {
-          if (typeof output === 'string') {
-            const mType = isImageUrl(output) ? 'image' as const
-              : isVideoUrl(output) ? 'video' as const
-              : null
+        const itemHistoryEntries: GenerationHistoryItem[] = [];
+        for (const output of result.outputs || []) {
+          if (typeof output === "string") {
+            const mType = isImageUrl(output)
+              ? ("image" as const)
+              : isVideoUrl(output)
+                ? ("video" as const)
+                : null;
             if (mType) {
               itemHistoryEntries.push({
                 id: `${result.id || queue[i].id}-${itemHistoryEntries.length}`,
                 prediction: result,
                 outputs: [output],
+                formValues: batchSnapshotValues,
                 addedAt: Date.now() + itemHistoryEntries.length,
                 thumbnailUrl: output,
-                thumbnailType: mType
-              })
+                thumbnailType: mType,
+              });
             }
           }
         }
 
         // Update state for this completed item + add to history immediately
-        set(state => ({
-          tabs: state.tabs.map(tab =>
+        set((state) => ({
+          tabs: state.tabs.map((tab) =>
             tab.id === tabId && tab.batchState
               ? {
                   ...tab,
@@ -666,18 +740,24 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
                     ...tab.batchState,
                     completedCount: tab.batchState.completedCount + 1,
                     queue: tab.batchState.queue.map((item, idx) =>
-                      idx === i ? { ...item, status: 'completed' as const, result } : item
-                    )
+                      idx === i
+                        ? { ...item, status: "completed" as const, result }
+                        : item,
+                    ),
                   },
                   batchResults: results.filter(Boolean),
-                  generationHistory: [...itemHistoryEntries, ...tab.generationHistory].slice(0, 200)
+                  generationHistory: [
+                    ...itemHistoryEntries,
+                    ...tab.generationHistory,
+                  ].slice(0, 200),
                 }
-              : tab
-          )
-        }))
+              : tab,
+          ),
+        }));
       } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : 'Failed to run prediction'
-        const timing = Date.now() - startTime
+        const errorMessage =
+          error instanceof Error ? error.message : "Failed to run prediction";
+        const timing = Date.now() - startTime;
 
         results[i] = {
           id: queue[i].id,
@@ -686,12 +766,12 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
           prediction: null,
           outputs: [],
           error: errorMessage,
-          timing
-        }
+          timing,
+        };
 
         // Update state for this failed item
-        set(state => ({
-          tabs: state.tabs.map(tab =>
+        set((state) => ({
+          tabs: state.tabs.map((tab) =>
             tab.id === tabId && tab.batchState
               ? {
                   ...tab,
@@ -699,23 +779,29 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
                     ...tab.batchState,
                     failedCount: tab.batchState.failedCount + 1,
                     queue: tab.batchState.queue.map((item, idx) =>
-                      idx === i ? { ...item, status: 'failed' as const, error: errorMessage } : item
-                    )
+                      idx === i
+                        ? {
+                            ...item,
+                            status: "failed" as const,
+                            error: errorMessage,
+                          }
+                        : item,
+                    ),
                   },
-                  batchResults: results.filter(Boolean)
+                  batchResults: results.filter(Boolean),
                 }
-              : tab
-          )
-        }))
+              : tab,
+          ),
+        }));
       }
-    })
+    });
 
     // Wait for all to complete
-    await Promise.all(promises)
+    await Promise.all(promises);
 
     // Finalize batch (history already updated per-item above)
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === tabId
           ? {
               ...tab,
@@ -723,61 +809,78 @@ export const usePlaygroundStore = create<PlaygroundState>((set, get) => ({
               batchState: tab.batchState
                 ? { ...tab.batchState, isRunning: false }
                 : null,
-              batchResults: results
+              batchResults: results,
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   cancelBatch: () => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId && tab.batchState
           ? {
               ...tab,
-              batchState: { ...tab.batchState, cancelRequested: true }
+              batchState: { ...tab.batchState, cancelRequested: true },
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   clearBatchResults: () => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? {
               ...tab,
               batchState: null,
               batchResults: [],
-              error: null
+              error: null,
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   setUploading: (isUploading: boolean) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
+    set((state) => ({
+      tabs: state.tabs.map((tab) =>
         tab.id === state.activeTabId
           ? {
               ...tab,
-              uploadingCount: Math.max(0, tab.uploadingCount + (isUploading ? 1 : -1))
+              uploadingCount: Math.max(
+                0,
+                tab.uploadingCount + (isUploading ? 1 : -1),
+              ),
             }
-          : tab
-      )
-    }))
+          : tab,
+      ),
+    }));
   },
 
   selectHistoryItem: (index: number | null) => {
-    set(state => ({
-      tabs: state.tabs.map(tab =>
-        tab.id === state.activeTabId
-          ? { ...tab, selectedHistoryIndex: index, batchState: null, batchResults: [] }
-          : tab
-      )
-    }))
-  }
-}))
+    set((state) => {
+      const activeTab = state.tabs.find((t) => t.id === state.activeTabId);
+      const historyItem =
+        activeTab && index !== null ? activeTab.generationHistory[index] : null;
+      // Restore form values from history if available
+      const restoredValues = historyItem?.formValues;
+
+      return {
+        tabs: state.tabs.map((tab) =>
+          tab.id === state.activeTabId
+            ? {
+                ...tab,
+                selectedHistoryIndex: index,
+                batchState: null,
+                batchResults: [],
+                ...(restoredValues ? { formValues: restoredValues } : {}),
+              }
+            : tab,
+        ),
+      };
+    });
+  },
+}));
diff --git a/src/stores/sdModelsStore.ts b/src/stores/sdModelsStore.ts
index 6929303d..f7cfe95f 100644
--- a/src/stores/sdModelsStore.ts
+++ b/src/stores/sdModelsStore.ts
@@ -1,63 +1,63 @@
 // Stable Diffusion model management store
 
-import { create } from 'zustand'
-import type { SDModel } from '@/types/stable-diffusion'
-import { PREDEFINED_MODELS } from '@/types/stable-diffusion'
-import { formatBytes, type ProgressDetail } from '@/types/progress'
+import { create } from "zustand";
+import type { SDModel } from "@/types/stable-diffusion";
+import { PREDEFINED_MODELS } from "@/types/stable-diffusion";
+import { formatBytes, type ProgressDetail } from "@/types/progress";
 
 interface AuxiliaryModelStatus {
-  downloaded: boolean
-  downloading: boolean
-  progress: number
-  error: string | null
-  detail?: ProgressDetail
+  downloaded: boolean;
+  downloading: boolean;
+  progress: number;
+  error: string | null;
+  detail?: ProgressDetail;
 }
 
 export interface SDLogEntry {
-  id: number
-  type: 'stdout' | 'stderr'
-  message: string
-  timestamp: Date
+  id: number;
+  type: "stdout" | "stderr";
+  message: string;
+  timestamp: Date;
 }
 
 interface SDModelsState {
   // State
-  models: SDModel[]
-  selectedModelId: string | null
-  isLoading: boolean
-  error: string | null
+  models: SDModel[];
+  selectedModelId: string | null;
+  isLoading: boolean;
+  error: string | null;
 
   // Auxiliary models status
-  binaryStatus: AuxiliaryModelStatus
-  vaeStatus: AuxiliaryModelStatus
-  llmStatus: AuxiliaryModelStatus
-  modelDownloadStatus: AuxiliaryModelStatus  // Track main model (z-image-turbo) download
-  isGenerating: boolean
+  binaryStatus: AuxiliaryModelStatus;
+  vaeStatus: AuxiliaryModelStatus;
+  llmStatus: AuxiliaryModelStatus;
+  modelDownloadStatus: AuxiliaryModelStatus; // Track main model (z-image-turbo) download
+  isGenerating: boolean;
 
   // SD Process logs
-  sdLogs: SDLogEntry[]
-  addSdLog: (log: Omit<SDLogEntry, 'id'>) => void
-  clearSdLogs: () => void
+  sdLogs: SDLogEntry[];
+  addSdLog: (log: Omit<SDLogEntry, "id">) => void;
+  clearSdLogs: () => void;
 
   // Z-Image form state (persist across navigation)
-  zImageFormValues: Record<string, unknown>
-  setZImageFormValue: (key: string, value: unknown) => void
-  setZImageFormValues: (values: Record<string, unknown>) => void
+  zImageFormValues: Record<string, unknown>;
+  setZImageFormValue: (key: string, value: unknown) => void;
+  setZImageFormValues: (values: Record<string, unknown>) => void;
 
   // Actions
-  fetchModels: () => Promise<void>
-  selectModel: (modelId: string) => void
-  importCustomModel: (filePath: string) => Promise<void>
-  setError: (error: string | null) => void
-  clearError: () => void
+  fetchModels: () => Promise<void>;
+  selectModel: (modelId: string) => void;
+  importCustomModel: (filePath: string) => Promise<void>;
+  setError: (error: string | null) => void;
+  clearError: () => void;
 
   // Auxiliary model actions
-  updateBinaryStatus: (status: Partial<AuxiliaryModelStatus>) => void
-  updateVaeStatus: (status: Partial<AuxiliaryModelStatus>) => void
-  updateLlmStatus: (status: Partial<AuxiliaryModelStatus>) => void
-  updateModelDownloadStatus: (status: Partial<AuxiliaryModelStatus>) => void
-  setIsGenerating: (isGenerating: boolean) => void
-  checkAuxiliaryModels: () => Promise<void>
+  updateBinaryStatus: (status: Partial<AuxiliaryModelStatus>) => void;
+  updateVaeStatus: (status: Partial<AuxiliaryModelStatus>) => void;
+  updateLlmStatus: (status: Partial<AuxiliaryModelStatus>) => void;
+  updateModelDownloadStatus: (status: Partial<AuxiliaryModelStatus>) => void;
+  setIsGenerating: (isGenerating: boolean) => void;
+  checkAuxiliaryModels: () => Promise<void>;
 }
 
 /**
@@ -71,17 +71,37 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
     isDownloaded: false,
     isDownloading: false,
     downloadProgress: 0,
-    downloadFailed: false
+    downloadFailed: false,
   })),
-  selectedModelId: 'z-image-turbo-q4-k', // Default: Z-Image-Turbo Q4_K (recommended)
+  selectedModelId: "z-image-turbo-q4-k", // Default: Z-Image-Turbo Q4_K (recommended)
   isLoading: false,
   error: null,
 
   // Auxiliary models initial state
-  binaryStatus: { downloaded: false, downloading: false, progress: 0, error: null },
-  vaeStatus: { downloaded: false, downloading: false, progress: 0, error: null },
-  llmStatus: { downloaded: false, downloading: false, progress: 0, error: null },
-  modelDownloadStatus: { downloaded: false, downloading: false, progress: 0, error: null },
+  binaryStatus: {
+    downloaded: false,
+    downloading: false,
+    progress: 0,
+    error: null,
+  },
+  vaeStatus: {
+    downloaded: false,
+    downloading: false,
+    progress: 0,
+    error: null,
+  },
+  llmStatus: {
+    downloaded: false,
+    downloading: false,
+    progress: 0,
+    error: null,
+  },
+  modelDownloadStatus: {
+    downloaded: false,
+    downloading: false,
+    progress: 0,
+    error: null,
+  },
   isGenerating: false,
 
   // SD Process logs initial state
@@ -93,12 +113,12 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
     set((state) => ({
       zImageFormValues: {
         ...state.zImageFormValues,
-        [key]: value
-      }
-    }))
+        [key]: value,
+      },
+    }));
   },
   setZImageFormValues: (values: Record<string, unknown>) => {
-    set({ zImageFormValues: values })
+    set({ zImageFormValues: values });
   },
 
   /**
@@ -107,39 +127,40 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
   fetchModels: async () => {
     // Check if Electron API is available - silently return in browser mode
     if (!window.electronAPI?.sdListModels) {
-      set({ isLoading: false })
-      return
+      set({ isLoading: false });
+      return;
     }
 
-    set({ isLoading: true, error: null })
+    set({ isLoading: true, error: null });
 
     try {
-
       // Get downloaded models list
-      const result = await window.electronAPI.sdListModels()
+      const result = await window.electronAPI.sdListModels();
 
       if (!result.success) {
-        throw new Error(result.error || 'Failed to fetch model list')
+        throw new Error(result.error || "Failed to fetch model list");
       }
 
-      const downloadedModels = result.models || []
-      const downloadedPaths = new Set(downloadedModels.map((m) => m.path))
-      const downloadedNames = new Map(downloadedModels.map((m) => [m.name, m.path]))
+      const downloadedModels = result.models || [];
+      const downloadedPaths = new Set(downloadedModels.map((m) => m.path));
+      const downloadedNames = new Map(
+        downloadedModels.map((m) => [m.name, m.path]),
+      );
 
       // Update model state
       set((state) => ({
         models: state.models.map((model) => {
           // Check if model exists by localPath or by filename
-          let isDownloaded = false
-          let actualPath = model.localPath
+          let isDownloaded = false;
+          let actualPath = model.localPath;
 
           if (model.localPath && downloadedPaths.has(model.localPath)) {
             // Model exists at stored path
-            isDownloaded = true
+            isDownloaded = true;
           } else if (downloadedNames.has(model.name)) {
             // Model exists with matching filename (manually copied)
-            isDownloaded = true
-            actualPath = downloadedNames.get(model.name)
+            isDownloaded = true;
+            actualPath = downloadedNames.get(model.name);
           }
 
           return {
@@ -148,17 +169,17 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
             localPath: actualPath,
             // If previously marked as downloading but now complete, reset state
             isDownloading: isDownloaded ? false : model.isDownloading,
-            downloadProgress: isDownloaded ? 100 : model.downloadProgress
-          }
+            downloadProgress: isDownloaded ? 100 : model.downloadProgress,
+          };
         }),
-        isLoading: false
-      }))
+        isLoading: false,
+      }));
     } catch (error) {
-      console.error('Failed to fetch models:', error)
+      console.error("Failed to fetch models:", error);
       set({
         error: (error as Error).message,
-        isLoading: false
-      })
+        isLoading: false,
+      });
     }
   },
 
@@ -166,15 +187,15 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
    * Select model
    */
   selectModel: (modelId: string) => {
-    const model = get().models.find((m) => m.id === modelId)
+    const model = get().models.find((m) => m.id === modelId);
 
     if (!model) {
-      set({ error: 'Model does not exist' })
-      return
+      set({ error: "Model does not exist" });
+      return;
     }
 
     // Allow selecting any model (even if not downloaded)
-    set({ selectedModelId: modelId, error: null })
+    set({ selectedModelId: modelId, error: null });
   },
 
   /**
@@ -183,43 +204,42 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
   importCustomModel: async (filePath: string) => {
     // Check if Electron API is available - silently return in browser mode
     if (!window.electronAPI?.sdListModels) {
-      set({ error: 'This feature requires the desktop app' })
-      return
+      set({ error: "This feature requires the desktop app" });
+      return;
     }
 
     try {
-
       // Validate file is .gguf format
-      if (!filePath.toLowerCase().endsWith('.gguf')) {
-        throw new Error('Only .gguf format model files are supported')
+      if (!filePath.toLowerCase().endsWith(".gguf")) {
+        throw new Error("Only .gguf format model files are supported");
       }
 
       // Extract filename
-      const fileName = filePath.split(/[\\/]/).pop() || 'custom-model.gguf'
+      const fileName = filePath.split(/[\\/]/).pop() || "custom-model.gguf";
 
       // Create custom model entry
       const customModel: SDModel = {
         id: `custom-${Date.now()}`,
         name: fileName,
-        displayName: fileName.replace('.gguf', ''),
-        description: 'Custom imported model',
+        displayName: fileName.replace(".gguf", ""),
+        description: "Custom imported model",
         size: 0, // Size unknown
-        quantization: 'Unknown',
-        downloadUrl: '',
+        quantization: "Unknown",
+        downloadUrl: "",
         localPath: filePath,
         isDownloaded: true,
         isDownloading: false,
-        downloadProgress: 100
-      }
+        downloadProgress: 100,
+      };
 
       // Add to model list
       set((state) => ({
         models: [...state.models, customModel],
-        selectedModelId: customModel.id
-      }))
+        selectedModelId: customModel.id,
+      }));
     } catch (error) {
-      console.error('Failed to import custom model:', error)
-      set({ error: `Import failed: ${(error as Error).message}` })
+      console.error("Failed to import custom model:", error);
+      set({ error: `Import failed: ${(error as Error).message}` });
     }
   },
 
@@ -227,14 +247,14 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
    * Set error
    */
   setError: (error: string | null) => {
-    set({ error })
+    set({ error });
   },
 
   /**
    * Clear error
    */
   clearError: () => {
-    set({ error: null })
+    set({ error: null });
   },
 
   /**
@@ -242,8 +262,8 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
    */
   updateBinaryStatus: (status: Partial<AuxiliaryModelStatus>) => {
     set((state) => ({
-      binaryStatus: { ...state.binaryStatus, ...status }
-    }))
+      binaryStatus: { ...state.binaryStatus, ...status },
+    }));
   },
 
   /**
@@ -251,8 +271,8 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
    */
   updateVaeStatus: (status: Partial<AuxiliaryModelStatus>) => {
     set((state) => ({
-      vaeStatus: { ...state.vaeStatus, ...status }
-    }))
+      vaeStatus: { ...state.vaeStatus, ...status },
+    }));
   },
 
   /**
@@ -260,8 +280,8 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
    */
   updateLlmStatus: (status: Partial<AuxiliaryModelStatus>) => {
     set((state) => ({
-      llmStatus: { ...state.llmStatus, ...status }
-    }))
+      llmStatus: { ...state.llmStatus, ...status },
+    }));
   },
 
   /**
@@ -269,15 +289,15 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
    */
   updateModelDownloadStatus: (status: Partial<AuxiliaryModelStatus>) => {
     set((state) => ({
-      modelDownloadStatus: { ...state.modelDownloadStatus, ...status }
-    }))
+      modelDownloadStatus: { ...state.modelDownloadStatus, ...status },
+    }));
   },
 
   /**
    * Set generating status
    */
   setIsGenerating: (isGenerating: boolean) => {
-    set({ isGenerating })
+    set({ isGenerating });
   },
 
   /**
@@ -287,91 +307,94 @@ export const useSDModelsStore = create<SDModelsState>((set, get) => ({
     try {
       // Check auxiliary models (LLM and VAE)
       if (window.electronAPI?.sdCheckAuxiliaryModels) {
-        const result = await window.electronAPI.sdCheckAuxiliaryModels()
+        const result = await window.electronAPI.sdCheckAuxiliaryModels();
         if (result.success) {
           set((state) => ({
             llmStatus: { ...state.llmStatus, downloaded: result.llmExists },
-            vaeStatus: { ...state.vaeStatus, downloaded: result.vaeExists }
-          }))
+            vaeStatus: { ...state.vaeStatus, downloaded: result.vaeExists },
+          }));
         }
       }
 
       // Check SD binary
       if (window.electronAPI?.sdGetBinaryPath) {
-        const result = await window.electronAPI.sdGetBinaryPath()
+        const result = await window.electronAPI.sdGetBinaryPath();
         set((state) => ({
-          binaryStatus: { ...state.binaryStatus, downloaded: result.success }
-        }))
+          binaryStatus: { ...state.binaryStatus, downloaded: result.success },
+        }));
       }
     } catch (error) {
-      console.error('Failed to check auxiliary models:', error)
+      console.error("Failed to check auxiliary models:", error);
     }
   },
 
   /**
    * Add SD log entry
    */
-  addSdLog: (log: Omit<SDLogEntry, 'id'>) => {
+  addSdLog: (log: Omit<SDLogEntry, "id">) => {
     set((state) => {
-      const MAX_LOGS = 1000
+      const MAX_LOGS = 1000;
       const newLog: SDLogEntry = {
         ...log,
-        id: state.sdLogs.length > 0 ? state.sdLogs[state.sdLogs.length - 1].id + 1 : 0
-      }
+        id:
+          state.sdLogs.length > 0
+            ? state.sdLogs[state.sdLogs.length - 1].id + 1
+            : 0,
+      };
 
-      const updatedLogs = [...state.sdLogs, newLog]
+      const updatedLogs = [...state.sdLogs, newLog];
       // Keep only last MAX_LOGS entries
       if (updatedLogs.length > MAX_LOGS) {
-        return { sdLogs: updatedLogs.slice(-MAX_LOGS) }
+        return { sdLogs: updatedLogs.slice(-MAX_LOGS) };
       }
-      return { sdLogs: updatedLogs }
-    })
+      return { sdLogs: updatedLogs };
+    });
   },
 
   /**
    * Clear SD logs
    */
   clearSdLogs: () => {
-    set({ sdLogs: [] })
-  }
-}))
+    set({ sdLogs: [] });
+  },
+}));
 
 /**
  * Helper function: Get selected model
  */
 export function useSelectedModel(): SDModel | null {
-  const { models, selectedModelId } = useSDModelsStore()
-  return models.find((m) => m.id === selectedModelId) || null
+  const { models, selectedModelId } = useSDModelsStore();
+  return models.find((m) => m.id === selectedModelId) || null;
 }
 
 /**
  * Helper function: Get downloaded models list
  */
 export function useDownloadedModels(): SDModel[] {
-  const { models } = useSDModelsStore()
-  return models.filter((m) => m.isDownloaded)
+  const { models } = useSDModelsStore();
+  return models.filter((m) => m.isDownloaded);
 }
 
 /**
  * Helper function: Get available models list
  */
 export function useAvailableModels(): SDModel[] {
-  const { models } = useSDModelsStore()
-  return models.filter((m) => !m.isDownloaded && !m.isDownloading)
+  const { models } = useSDModelsStore();
+  return models.filter((m) => !m.isDownloaded && !m.isDownloading);
 }
 
 /**
  * Helper function: Check if any model is downloading
  */
 export function useHasDownloadingModel(): boolean {
-  const { models } = useSDModelsStore()
-  return models.some((m) => m.isDownloading)
+  const { models } = useSDModelsStore();
+  return models.some((m) => m.isDownloading);
 }
 
 /**
  * Helper function: Format model display information
  */
 export function formatModelDisplay(model: SDModel): string {
-  const sizeStr = formatBytes(model.size)
-  return `${model.displayName} (${model.quantization}, ${sizeStr})`
+  const sizeStr = formatBytes(model.size);
+  return `${model.displayName} (${model.quantization}, ${sizeStr})`;
 }
diff --git a/src/stores/settingsStore.ts b/src/stores/settingsStore.ts
index 39a5d5c8..4a14d710 100644
--- a/src/stores/settingsStore.ts
+++ b/src/stores/settingsStore.ts
@@ -1,64 +1,66 @@
-import { create } from 'zustand'
+import { create } from "zustand";
 
-const SETTINGS_STORAGE_KEY = 'wavespeed_settings'
+const SETTINGS_STORAGE_KEY = "wavespeed_settings";
 
 export interface Settings {
-  downloadTimeout: number // in seconds
+  downloadTimeout: number; // in seconds
 }
 
 const DEFAULT_SETTINGS: Settings = {
   downloadTimeout: 3600, // 60 minutes
-}
+};
 
 function getStoredSettings(): Settings {
-  if (typeof window === 'undefined') return DEFAULT_SETTINGS
+  if (typeof window === "undefined") return DEFAULT_SETTINGS;
   try {
-    const stored = localStorage.getItem(SETTINGS_STORAGE_KEY)
+    const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
     if (stored) {
-      const parsed = JSON.parse(stored)
-      return { ...DEFAULT_SETTINGS, ...parsed }
+      const parsed = JSON.parse(stored);
+      return { ...DEFAULT_SETTINGS, ...parsed };
     }
   } catch (e) {
-    console.warn('Failed to parse stored settings:', e)
+    console.warn("Failed to parse stored settings:", e);
   }
-  return DEFAULT_SETTINGS
+  return DEFAULT_SETTINGS;
 }
 
 function saveSettings(settings: Settings) {
-  localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings))
+  localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
 }
 
 interface SettingsState {
-  settings: Settings
-  setDownloadTimeout: (timeout: number) => void
-  initSettings: () => void
+  settings: Settings;
+  setDownloadTimeout: (timeout: number) => void;
+  initSettings: () => void;
 }
 
 export const useSettingsStore = create<SettingsState>((set, get) => ({
   settings: DEFAULT_SETTINGS,
 
   setDownloadTimeout: (timeout: number) => {
-    const newSettings = { ...get().settings, downloadTimeout: timeout }
-    saveSettings(newSettings)
-    set({ settings: newSettings })
+    const newSettings = { ...get().settings, downloadTimeout: timeout };
+    saveSettings(newSettings);
+    set({ settings: newSettings });
   },
 
   initSettings: () => {
-    const settings = getStoredSettings()
-    set({ settings })
+    const settings = getStoredSettings();
+    set({ settings });
   },
-}))
+}));
 
 // Helper to get download timeout in milliseconds (for workers)
 export function getDownloadTimeoutMs(): number {
   try {
-    const stored = localStorage.getItem(SETTINGS_STORAGE_KEY)
+    const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
     if (stored) {
-      const parsed = JSON.parse(stored)
-      return (parsed.downloadTimeout || DEFAULT_SETTINGS.downloadTimeout) * 1000
+      const parsed = JSON.parse(stored);
+      return (
+        (parsed.downloadTimeout || DEFAULT_SETTINGS.downloadTimeout) * 1000
+      );
     }
   } catch (e) {
     // ignore
   }
-  return DEFAULT_SETTINGS.downloadTimeout * 1000
+  return DEFAULT_SETTINGS.downloadTimeout * 1000;
 }
diff --git a/src/stores/templateStore.ts b/src/stores/templateStore.ts
index d1af17b1..ed5538df 100644
--- a/src/stores/templateStore.ts
+++ b/src/stores/templateStore.ts
@@ -1,78 +1,121 @@
-import { create } from 'zustand'
-import type { Template, TemplateFilter, CreateTemplateInput, TemplateExport } from '../types/template'
+import { create } from "zustand";
+import type {
+  Template,
+  TemplateFilter,
+  CreateTemplateInput,
+  TemplateExport,
+} from "../types/template";
 
-const TEMPLATES_STORAGE_KEY = 'wavespeed_templates'
-const MIGRATION_FLAG_KEY = 'wavespeed_templates_migrated'
+const TEMPLATES_STORAGE_KEY = "wavespeed_templates";
+const MIGRATION_FLAG_KEY = "wavespeed_templates_migrated";
 
 /** True when running in Electron with full template IPC. */
 function hasTemplateIpc(): boolean {
-  return typeof window !== 'undefined' && Boolean((window as unknown as { workflowAPI?: { invoke?: unknown } }).workflowAPI?.invoke)
+  return (
+    typeof window !== "undefined" &&
+    Boolean(
+      (window as unknown as { workflowAPI?: { invoke?: unknown } }).workflowAPI
+        ?.invoke,
+    )
+  );
 }
 
 function readTemplatesFromStorage(): Template[] {
-  if (typeof localStorage === 'undefined') return []
+  if (typeof localStorage === "undefined") return [];
   try {
-    const raw = localStorage.getItem(TEMPLATES_STORAGE_KEY)
-    if (!raw) return []
-    const parsed = JSON.parse(raw) as unknown
-    return Array.isArray(parsed) ? parsed.filter((t): t is Template => t && typeof t === 'object' && typeof t.id === 'string') : []
+    const raw = localStorage.getItem(TEMPLATES_STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw) as unknown;
+    return Array.isArray(parsed)
+      ? parsed.filter(
+          (t): t is Template =>
+            t && typeof t === "object" && typeof t.id === "string",
+        )
+      : [];
   } catch {
-    return []
+    return [];
   }
 }
 
 function writeTemplatesToStorage(templates: Template[]): void {
-  if (typeof localStorage === 'undefined') return
-  localStorage.setItem(TEMPLATES_STORAGE_KEY, JSON.stringify(templates))
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem(TEMPLATES_STORAGE_KEY, JSON.stringify(templates));
 }
 
-function applyFilter(templates: Template[], filter?: TemplateFilter): Template[] {
-  if (!filter) return [...templates]
-  let out = templates
-  if (filter.templateType) out = out.filter(t => t.templateType === filter.templateType)
-  if (filter.type) out = out.filter(t => t.type === filter.type)
-  if (filter.isFavorite !== undefined) out = out.filter(t => t.isFavorite === filter.isFavorite)
-  if (filter.category && filter.templateType === 'workflow') {
-    out = out.filter(t => (t.workflowData as { category?: string } | null)?.category === filter.category)
+function applyFilter(
+  templates: Template[],
+  filter?: TemplateFilter,
+): Template[] {
+  if (!filter) return [...templates];
+  let out = templates;
+  if (filter.templateType)
+    out = out.filter((t) => t.templateType === filter.templateType);
+  if (filter.type) out = out.filter((t) => t.type === filter.type);
+  if (filter.isFavorite !== undefined)
+    out = out.filter((t) => t.isFavorite === filter.isFavorite);
+  if (filter.category && filter.templateType === "workflow") {
+    out = out.filter(
+      (t) =>
+        (t.workflowData as { category?: string } | null)?.category ===
+        filter.category,
+    );
   }
   if (filter.search?.trim()) {
-    const q = filter.search.trim().toLowerCase()
-    out = out.filter(t =>
-      t.name.toLowerCase().includes(q) ||
-      (t.description ?? '').toLowerCase().includes(q) ||
-      (t.tags ?? []).some(tag => tag.toLowerCase().includes(q))
-    )
+    const q = filter.search.trim().toLowerCase();
+    out = out.filter(
+      (t) =>
+        t.name.toLowerCase().includes(q) ||
+        (t.description ?? "").toLowerCase().includes(q) ||
+        (t.tags ?? []).some((tag) => tag.toLowerCase().includes(q)),
+    );
   }
-  if (filter.sortBy === 'useCount') out = [...out].sort((a, b) => (b.useCount ?? 0) - (a.useCount ?? 0))
-  else out = [...out].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
-  return out
+  if (filter.sortBy === "useCount")
+    out = [...out].sort((a, b) => (b.useCount ?? 0) - (a.useCount ?? 0));
+  else
+    out = [...out].sort(
+      (a, b) =>
+        new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(),
+    );
+  return out;
 }
 
-async function browserTemplateInvoke<T = unknown>(channel: string, args?: unknown): Promise<T> {
-  const templates = readTemplatesFromStorage()
-  const now = new Date().toISOString()
+async function browserTemplateInvoke<T = unknown>(
+  channel: string,
+  args?: unknown,
+): Promise<T> {
+  const templates = readTemplatesFromStorage();
+  const now = new Date().toISOString();
 
   switch (channel) {
-    case 'template:migrate': {
-      const { legacyTemplatesJson } = (args ?? {}) as { legacyTemplatesJson?: string }
-      if (!legacyTemplatesJson) return { migrated: 0, skipped: 0 } as T
+    case "template:migrate": {
+      const { legacyTemplatesJson } = (args ?? {}) as {
+        legacyTemplatesJson?: string;
+      };
+      if (!legacyTemplatesJson) return { migrated: 0, skipped: 0 } as T;
       try {
-        const legacy = JSON.parse(legacyTemplatesJson) as Record<string, unknown>[] | unknown
-        const arr = Array.isArray(legacy) ? legacy : []
-        let migrated = 0
+        const legacy = JSON.parse(legacyTemplatesJson) as
+          | Record<string, unknown>[]
+          | unknown;
+        const arr = Array.isArray(legacy) ? legacy : [];
+        let migrated = 0;
         for (const item of arr) {
-          if (!item || typeof item !== 'object') continue
-          const o = item as Record<string, unknown>
-          const name = String(o.name ?? 'Untitled')
-          const id = `custom-${Date.now()}-${migrated}`
-          const hasLegacyPlayground = o.modelId != null && o.modelName != null && o.values != null
+          if (!item || typeof item !== "object") continue;
+          const o = item as Record<string, unknown>;
+          const name = String(o.name ?? "Untitled");
+          const id = `custom-${Date.now()}-${migrated}`;
+          const hasLegacyPlayground =
+            o.modelId != null && o.modelName != null && o.values != null;
           const template: Template = {
             id,
             name,
             description: o.description != null ? String(o.description) : null,
-            tags: Array.isArray(o.tags) ? o.tags.filter((x): x is string => typeof x === 'string') : [],
-            type: 'custom',
-            templateType: hasLegacyPlayground ? 'playground' : ((o.templateType as 'playground' | 'workflow') ?? 'workflow'),
+            tags: Array.isArray(o.tags)
+              ? o.tags.filter((x): x is string => typeof x === "string")
+              : [],
+            type: "custom",
+            templateType: hasLegacyPlayground
+              ? "playground"
+              : ((o.templateType as "playground" | "workflow") ?? "workflow"),
             isFavorite: false,
             createdAt: (o.createdAt as string) ?? now,
             updatedAt: (o.updatedAt as string) ?? now,
@@ -80,27 +123,31 @@ async function browserTemplateInvoke<T = unknown>(channel: string, args?: unknow
             useCount: 0,
             thumbnail: o.thumbnail != null ? String(o.thumbnail) : null,
             playgroundData: hasLegacyPlayground
-              ? { modelId: String(o.modelId), modelName: String(o.modelName), values: (o.values as Record<string, unknown>) ?? {} }
-              : (o.playgroundData as Template['playgroundData']) ?? null,
-            workflowData: (o.workflowData as Template['workflowData']) ?? null
-          }
-          templates.push(template)
-          migrated++
+              ? {
+                  modelId: String(o.modelId),
+                  modelName: String(o.modelName),
+                  values: (o.values as Record<string, unknown>) ?? {},
+                }
+              : ((o.playgroundData as Template["playgroundData"]) ?? null),
+            workflowData: (o.workflowData as Template["workflowData"]) ?? null,
+          };
+          templates.push(template);
+          migrated++;
         }
-        writeTemplatesToStorage(templates)
-        localStorage.setItem(MIGRATION_FLAG_KEY, 'true')
-        return { migrated, skipped: 0 } as T
+        writeTemplatesToStorage(templates);
+        localStorage.setItem(MIGRATION_FLAG_KEY, "true");
+        return { migrated, skipped: 0 } as T;
       } catch {
-        return { migrated: 0, skipped: 0 } as T
+        return { migrated: 0, skipped: 0 } as T;
       }
     }
-    case 'template:query': {
-      const filter = (args ?? {}) as TemplateFilter | undefined
-      return applyFilter(templates, filter) as T
+    case "template:query": {
+      const filter = (args ?? {}) as TemplateFilter | undefined;
+      return applyFilter(templates, filter) as T;
     }
-    case 'template:create': {
-      const input = args as CreateTemplateInput
-      const id = `custom-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+    case "template:create": {
+      const input = args as CreateTemplateInput;
+      const id = `custom-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
       const template: Template = {
         id,
         name: input.name,
@@ -108,7 +155,7 @@ async function browserTemplateInvoke<T = unknown>(channel: string, args?: unknow
         _searchText: input._searchText,
         description: input.description ?? null,
         tags: input.tags ?? [],
-        type: input.type ?? 'custom',
+        type: input.type ?? "custom",
         templateType: input.templateType,
         isFavorite: false,
         createdAt: now,
@@ -117,122 +164,151 @@ async function browserTemplateInvoke<T = unknown>(channel: string, args?: unknow
         useCount: 0,
         thumbnail: input.thumbnail ?? null,
         playgroundData: input.playgroundData ?? null,
-        workflowData: input.workflowData ?? null
-      }
-      templates.unshift(template)
-      writeTemplatesToStorage(templates)
-      return template as T
+        workflowData: input.workflowData ?? null,
+      };
+      templates.unshift(template);
+      writeTemplatesToStorage(templates);
+      return template as T;
     }
-    case 'template:update': {
-      const { id, updates } = (args ?? {}) as { id: string; updates: Partial<Template> }
-      const idx = templates.findIndex(t => t.id === id)
-      if (idx === -1) throw new Error(`Template ${id} not found`)
-      templates[idx] = { ...templates[idx], ...updates, updatedAt: now }
-      writeTemplatesToStorage(templates)
-      return undefined as T
+    case "template:update": {
+      const { id, updates } = (args ?? {}) as {
+        id: string;
+        updates: Partial<Template>;
+      };
+      const idx = templates.findIndex((t) => t.id === id);
+      if (idx === -1) throw new Error(`Template ${id} not found`);
+      templates[idx] = { ...templates[idx], ...updates, updatedAt: now };
+      writeTemplatesToStorage(templates);
+      return undefined as T;
     }
-    case 'template:delete': {
-      const { id } = (args ?? {}) as { id: string }
-      const next = templates.filter(t => t.id !== id)
-      writeTemplatesToStorage(next)
-      return undefined as T
+    case "template:delete": {
+      const { id } = (args ?? {}) as { id: string };
+      const next = templates.filter((t) => t.id !== id);
+      writeTemplatesToStorage(next);
+      return undefined as T;
     }
-    case 'template:deleteMany': {
-      const { ids } = (args ?? {}) as { ids: string[] }
-      const set = new Set(ids)
-      const next = templates.filter(t => !set.has(t.id))
-      writeTemplatesToStorage(next)
-      return undefined as T
+    case "template:deleteMany": {
+      const { ids } = (args ?? {}) as { ids: string[] };
+      const set = new Set(ids);
+      const next = templates.filter((t) => !set.has(t.id));
+      writeTemplatesToStorage(next);
+      return undefined as T;
     }
-    case 'template:toggleFavorite': {
-      const { id } = (args ?? {}) as { id: string }
-      const idx = templates.findIndex(t => t.id === id)
-      if (idx === -1) throw new Error(`Template ${id} not found`)
-      templates[idx] = { ...templates[idx], isFavorite: !templates[idx].isFavorite, updatedAt: now }
-      writeTemplatesToStorage(templates)
-      return undefined as T
+    case "template:toggleFavorite": {
+      const { id } = (args ?? {}) as { id: string };
+      const idx = templates.findIndex((t) => t.id === id);
+      if (idx === -1) throw new Error(`Template ${id} not found`);
+      templates[idx] = {
+        ...templates[idx],
+        isFavorite: !templates[idx].isFavorite,
+        updatedAt: now,
+      };
+      writeTemplatesToStorage(templates);
+      return undefined as T;
     }
-    case 'template:incrementUseCount': {
-      const { id } = (args ?? {}) as { id: string }
-      const idx = templates.findIndex(t => t.id === id)
+    case "template:incrementUseCount": {
+      const { id } = (args ?? {}) as { id: string };
+      const idx = templates.findIndex((t) => t.id === id);
       if (idx !== -1) {
-        templates[idx] = { ...templates[idx], useCount: (templates[idx].useCount ?? 0) + 1, updatedAt: now }
-        writeTemplatesToStorage(templates)
+        templates[idx] = {
+          ...templates[idx],
+          useCount: (templates[idx].useCount ?? 0) + 1,
+          updatedAt: now,
+        };
+        writeTemplatesToStorage(templates);
       }
-      return undefined as T
+      return undefined as T;
     }
-    case 'template:export': {
-      const { ids } = (args ?? {}) as { ids?: string[] }
-      const list = ids ? templates.filter(t => ids.includes(t.id)) : [...templates]
+    case "template:export": {
+      const { ids } = (args ?? {}) as { ids?: string[] };
+      const list = ids
+        ? templates.filter((t) => ids.includes(t.id))
+        : [...templates];
       const data: TemplateExport = {
-        version: '1',
+        version: "1",
         exportedAt: now,
-        templates: list
-      }
-      return data as T
+        templates: list,
+      };
+      return data as T;
     }
-    case 'template:import': {
-      const { data, mode } = (args ?? {}) as { data: TemplateExport; mode: 'merge' | 'replace' }
-      if (!data?.templates || !Array.isArray(data.templates)) throw new Error('Invalid import data')
-      let next = mode === 'replace' ? [] : [...templates]
-      const existingKeys = new Set(next.map(t => `${t.templateType}:${t.name}`))
-      let imported = 0
+    case "template:import": {
+      const { data, mode } = (args ?? {}) as {
+        data: TemplateExport;
+        mode: "merge" | "replace";
+      };
+      if (!data?.templates || !Array.isArray(data.templates))
+        throw new Error("Invalid import data");
+      let next = mode === "replace" ? [] : [...templates];
+      const existingKeys = new Set(
+        next.map((t) => `${t.templateType}:${t.name}`),
+      );
+      let imported = 0;
       for (const t of data.templates) {
-        const key = `${t.templateType}:${t.name}`
-        if (existingKeys.has(key)) continue
-        const id = `custom-${Date.now()}-${imported}-${Math.random().toString(36).slice(2, 9)}`
+        const key = `${t.templateType}:${t.name}`;
+        if (existingKeys.has(key)) continue;
+        const id = `custom-${Date.now()}-${imported}-${Math.random().toString(36).slice(2, 9)}`;
         next.push({
           ...t,
           id,
-          type: 'custom',
+          type: "custom",
           createdAt: now,
           updatedAt: now,
-          useCount: 0
-        })
-        existingKeys.add(key)
-        imported++
+          useCount: 0,
+        });
+        existingKeys.add(key);
+        imported++;
       }
-      writeTemplatesToStorage(next)
-      return { imported, skipped: data.templates.length - imported } as T
+      writeTemplatesToStorage(next);
+      return { imported, skipped: data.templates.length - imported } as T;
     }
     default:
-      throw new Error(`Unknown template channel: ${channel}`)
+      throw new Error(`Unknown template channel: ${channel}`);
   }
 }
 
-function invokeTemplateIpc<T = unknown>(channel: string, args?: unknown): Promise<T> {
+function invokeTemplateIpc<T = unknown>(
+  channel: string,
+  args?: unknown,
+): Promise<T> {
   if (hasTemplateIpc()) {
-    return (window as unknown as { workflowAPI: { invoke: (ch: string, a?: unknown) => Promise<T> } }).workflowAPI.invoke(channel, args)
+    return (
+      window as unknown as {
+        workflowAPI: { invoke: (ch: string, a?: unknown) => Promise<T> };
+      }
+    ).workflowAPI.invoke(channel, args);
   }
-  return browserTemplateInvoke<T>(channel, args)
+  return browserTemplateInvoke<T>(channel, args);
 }
 
 interface TemplateState {
-  templates: Template[]
-  isLoading: boolean
-  error: string | null
-  
+  templates: Template[];
+  isLoading: boolean;
+  error: string | null;
+
   // CRUD operations
-  loadTemplates: (filter?: TemplateFilter) => Promise<void>
-  createTemplate: (input: CreateTemplateInput) => Promise<Template>
-  updateTemplate: (id: string, updates: Partial<Template>) => Promise<void>
-  deleteTemplate: (id: string) => Promise<void>
-  deleteTemplates: (ids: string[]) => Promise<void>
-  
+  loadTemplates: (filter?: TemplateFilter) => Promise<void>;
+  createTemplate: (input: CreateTemplateInput) => Promise<Template>;
+  updateTemplate: (id: string, updates: Partial<Template>) => Promise<void>;
+  deleteTemplate: (id: string) => Promise<void>;
+  deleteTemplates: (ids: string[]) => Promise<void>;
+
   // Special operations
-  toggleFavorite: (id: string) => Promise<void>
-  useTemplate: (id: string) => Promise<void>
-  
+  toggleFavorite: (id: string) => Promise<void>;
+  useTemplate: (id: string) => Promise<void>;
+
   // Import/Export
-  exportTemplates: (ids?: string[]) => Promise<void>
-  importTemplates: (file: File, mode: 'merge' | 'replace') => Promise<{ imported: number; skipped: number }>
-  
+  exportTemplates: (ids?: string[]) => Promise<void>;
+  importTemplates: (
+    file: File,
+    mode: "merge" | "replace",
+  ) => Promise<{ imported: number; skipped: number }>;
+
   // Filters
-  currentFilter: TemplateFilter
-  setFilter: (filter: TemplateFilter) => void
-  
+  currentFilter: TemplateFilter;
+  setFilter: (filter: TemplateFilter) => void;
+
   // Migration
-  migrateFromLocalStorage: () => Promise<void>
+  migrateFromLocalStorage: () => Promise<void>;
 }
 
 export const useTemplateStore = create<TemplateState>((set, get) => ({
@@ -240,176 +316,195 @@ export const useTemplateStore = create<TemplateState>((set, get) => ({
   isLoading: false,
   error: null,
   currentFilter: {},
-  
+
   migrateFromLocalStorage: async () => {
     try {
-      const migrationComplete = localStorage.getItem(MIGRATION_FLAG_KEY) === 'true'
+      const migrationComplete =
+        localStorage.getItem(MIGRATION_FLAG_KEY) === "true";
       if (migrationComplete) {
-        console.log('[Template Store] Migration already completed')
-        return
+        console.log("[Template Store] Migration already completed");
+        return;
       }
-      
-      const legacyTemplatesJson = localStorage.getItem(TEMPLATES_STORAGE_KEY)
+
+      const legacyTemplatesJson = localStorage.getItem(TEMPLATES_STORAGE_KEY);
       if (!legacyTemplatesJson) {
-        console.log('[Template Store] No legacy templates to migrate')
-        localStorage.setItem(MIGRATION_FLAG_KEY, 'true')
-        return
+        console.log("[Template Store] No legacy templates to migrate");
+        localStorage.setItem(MIGRATION_FLAG_KEY, "true");
+        return;
       }
-      
-      const result = await invokeTemplateIpc<{ migrated: number; skipped: number }>('template:migrate', {
+
+      const result = await invokeTemplateIpc<{
+        migrated: number;
+        skipped: number;
+      }>("template:migrate", {
         legacyTemplatesJson,
-        migrationComplete
-      })
-      
-      console.log(`[Template Store] Migration complete: ${result.migrated} migrated, ${result.skipped} skipped`)
-      localStorage.setItem(MIGRATION_FLAG_KEY, 'true')
-      
+        migrationComplete,
+      });
+
+      console.log(
+        `[Template Store] Migration complete: ${result.migrated} migrated, ${result.skipped} skipped`,
+      );
+      localStorage.setItem(MIGRATION_FLAG_KEY, "true");
+
       // Reload templates after migration using current filter
-      await get().loadTemplates(get().currentFilter)
+      await get().loadTemplates(get().currentFilter);
     } catch (error) {
-      console.error('[Template Store] Migration failed:', error)
+      console.error("[Template Store] Migration failed:", error);
     }
   },
-  
+
   loadTemplates: async (filter?: TemplateFilter) => {
-    const activeFilter = filter ?? get().currentFilter
-    set({ isLoading: true, error: null })
+    const activeFilter = filter ?? get().currentFilter;
+    set({ isLoading: true, error: null });
     try {
-      const templates = await invokeTemplateIpc<Template[]>('template:query', activeFilter)
-      set({ templates, isLoading: false })
+      const templates = await invokeTemplateIpc<Template[]>(
+        "template:query",
+        activeFilter,
+      );
+      set({ templates, isLoading: false });
     } catch (error) {
-      set({ error: (error as Error).message, isLoading: false })
+      set({ error: (error as Error).message, isLoading: false });
     }
   },
-  
+
   createTemplate: async (input: CreateTemplateInput) => {
-    set({ isLoading: true, error: null })
+    set({ isLoading: true, error: null });
     try {
-      const template = await invokeTemplateIpc<Template>('template:create', input)
-      set(state => ({
+      const template = await invokeTemplateIpc<Template>(
+        "template:create",
+        input,
+      );
+      set((state) => ({
         templates: [template, ...state.templates],
-        isLoading: false
-      }))
-      return template
+        isLoading: false,
+      }));
+      return template;
     } catch (error) {
-      set({ error: (error as Error).message, isLoading: false })
-      throw error
+      set({ error: (error as Error).message, isLoading: false });
+      throw error;
     }
   },
-  
+
   updateTemplate: async (id: string, updates: Partial<Template>) => {
     // Optimistic update
-    set(state => ({
-      templates: state.templates.map(t => 
-        t.id === id ? { ...t, ...updates, updatedAt: new Date().toISOString() } : t
-      )
-    }))
-    
+    set((state) => ({
+      templates: state.templates.map((t) =>
+        t.id === id
+          ? { ...t, ...updates, updatedAt: new Date().toISOString() }
+          : t,
+      ),
+    }));
+
     try {
-      await invokeTemplateIpc('template:update', { id, updates })
+      await invokeTemplateIpc("template:update", { id, updates });
     } catch (error) {
       // Revert on error
-      await get().loadTemplates(get().currentFilter)
-      set({ error: (error as Error).message })
-      throw error
+      await get().loadTemplates(get().currentFilter);
+      set({ error: (error as Error).message });
+      throw error;
     }
   },
-  
+
   deleteTemplate: async (id: string) => {
     // Optimistic delete
-    set(state => ({
-      templates: state.templates.filter(t => t.id !== id)
-    }))
-    
+    set((state) => ({
+      templates: state.templates.filter((t) => t.id !== id),
+    }));
+
     try {
-      await invokeTemplateIpc('template:delete', { id })
+      await invokeTemplateIpc("template:delete", { id });
     } catch (error) {
       // Revert on error
-      await get().loadTemplates(get().currentFilter)
-      set({ error: (error as Error).message })
-      throw error
+      await get().loadTemplates(get().currentFilter);
+      set({ error: (error as Error).message });
+      throw error;
     }
   },
-  
+
   deleteTemplates: async (ids: string[]) => {
-    const idsSet = new Set(ids)
-    set(state => ({
-      templates: state.templates.filter(t => !idsSet.has(t.id))
-    }))
-    
+    const idsSet = new Set(ids);
+    set((state) => ({
+      templates: state.templates.filter((t) => !idsSet.has(t.id)),
+    }));
+
     try {
-      await invokeTemplateIpc('template:deleteMany', { ids })
+      await invokeTemplateIpc("template:deleteMany", { ids });
     } catch (error) {
-      await get().loadTemplates(get().currentFilter)
-      set({ error: (error as Error).message })
-      throw error
+      await get().loadTemplates(get().currentFilter);
+      set({ error: (error as Error).message });
+      throw error;
     }
   },
-  
+
   toggleFavorite: async (id: string) => {
     // Optimistic toggle
-    set(state => ({
-      templates: state.templates.map(t =>
-        t.id === id ? { ...t, isFavorite: !t.isFavorite } : t
-      )
-    }))
-    
+    set((state) => ({
+      templates: state.templates.map((t) =>
+        t.id === id ? { ...t, isFavorite: !t.isFavorite } : t,
+      ),
+    }));
+
     try {
-      await invokeTemplateIpc('template:toggleFavorite', { id })
+      await invokeTemplateIpc("template:toggleFavorite", { id });
     } catch (error) {
-      await get().loadTemplates(get().currentFilter)
-      set({ error: (error as Error).message })
-      throw error
+      await get().loadTemplates(get().currentFilter);
+      set({ error: (error as Error).message });
+      throw error;
     }
   },
-  
+
   useTemplate: async (id: string) => {
     try {
-      await invokeTemplateIpc('template:incrementUseCount', { id })
+      await invokeTemplateIpc("template:incrementUseCount", { id });
       // Update local state
-      set(state => ({
-        templates: state.templates.map(t =>
-          t.id === id ? { ...t, useCount: t.useCount + 1 } : t
-        )
-      }))
+      set((state) => ({
+        templates: state.templates.map((t) =>
+          t.id === id ? { ...t, useCount: t.useCount + 1 } : t,
+        ),
+      }));
     } catch (error) {
-      console.error('Failed to increment use count:', error)
+      console.error("Failed to increment use count:", error);
     }
   },
-  
+
   exportTemplates: async (ids?: string[]) => {
     try {
-      const data = await invokeTemplateIpc('template:export', { ids })
-      const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
-      const url = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = url
-      a.download = `templates-${new Date().toISOString().split('T')[0]}.json`
-      a.click()
-      URL.revokeObjectURL(url)
+      const data = await invokeTemplateIpc("template:export", { ids });
+      const blob = new Blob([JSON.stringify(data, null, 2)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `templates-${new Date().toISOString().split("T")[0]}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
     } catch (error) {
-      set({ error: (error as Error).message })
-      throw error
+      set({ error: (error as Error).message });
+      throw error;
     }
   },
-  
-  importTemplates: async (file: File, mode: 'merge' | 'replace') => {
-    set({ isLoading: true, error: null })
+
+  importTemplates: async (file: File, mode: "merge" | "replace") => {
+    set({ isLoading: true, error: null });
     try {
-      const text = await file.text()
-      const data = JSON.parse(text)
-      const result = await invokeTemplateIpc<{ imported: number; skipped: number }>('template:import', { data, mode })
-      await get().loadTemplates(get().currentFilter)
-      set({ isLoading: false })
-      return result
+      const text = await file.text();
+      const data = JSON.parse(text);
+      const result = await invokeTemplateIpc<{
+        imported: number;
+        skipped: number;
+      }>("template:import", { data, mode });
+      await get().loadTemplates(get().currentFilter);
+      set({ isLoading: false });
+      return result;
     } catch (error) {
-      set({ error: (error as Error).message, isLoading: false })
-      throw error
+      set({ error: (error as Error).message, isLoading: false });
+      throw error;
     }
   },
-  
+
   setFilter: (filter: TemplateFilter) => {
-    set({ currentFilter: filter })
-    get().loadTemplates(filter)
-  }
-}))
+    set({ currentFilter: filter });
+    get().loadTemplates(filter);
+  },
+}));
diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts
index ffb77b61..b7696e93 100644
--- a/src/stores/themeStore.ts
+++ b/src/stores/themeStore.ts
@@ -1,67 +1,74 @@
-import { create } from 'zustand'
+import { create } from "zustand";
 
-export type Theme = 'auto' | 'dark' | 'light'
+export type Theme = "auto" | "dark" | "light";
 
-const THEME_STORAGE_KEY = 'wavespeed_theme'
+const THEME_STORAGE_KEY = "wavespeed_theme";
 
 function getStoredTheme(): Theme {
-  if (typeof window === 'undefined') return 'auto'
-  const stored = localStorage.getItem(THEME_STORAGE_KEY)
-  if (stored === 'dark' || stored === 'light' || stored === 'auto') {
-    return stored
+  if (typeof window === "undefined") return "auto";
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  if (stored === "dark" || stored === "light" || stored === "auto") {
+    return stored;
   }
-  return 'auto'
+  return "auto";
 }
 
 function applyTheme(theme: Theme) {
-  const root = document.documentElement
+  const root = document.documentElement;
 
-  let isDark: boolean
-  if (theme === 'auto') {
-    isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-    root.classList.toggle('dark', isDark)
-  } else if (theme === 'dark') {
-    isDark = true
-    root.classList.add('dark')
+  let isDark: boolean;
+  if (theme === "auto") {
+    isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    root.classList.toggle("dark", isDark);
+  } else if (theme === "dark") {
+    isDark = true;
+    root.classList.add("dark");
   } else {
-    isDark = false
-    root.classList.remove('dark')
+    isDark = false;
+    root.classList.remove("dark");
   }
 
   // Update Electron title bar overlay colors to match theme
   try {
-    (window as unknown as { electronAPI?: { updateTitlebarTheme?: (isDark: boolean) => Promise<void> } })
-      .electronAPI?.updateTitlebarTheme?.(isDark)
-  } catch { /* not in Electron */ }
+    (
+      window as unknown as {
+        electronAPI?: {
+          updateTitlebarTheme?: (isDark: boolean) => Promise<void>;
+        };
+      }
+    ).electronAPI?.updateTitlebarTheme?.(isDark);
+  } catch {
+    /* not in Electron */
+  }
 }
 
 interface ThemeState {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-  initTheme: () => void
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  initTheme: () => void;
 }
 
 export const useThemeStore = create<ThemeState>((set, get) => ({
-  theme: 'auto',
+  theme: "auto",
 
   setTheme: (theme: Theme) => {
-    localStorage.setItem(THEME_STORAGE_KEY, theme)
-    applyTheme(theme)
-    set({ theme })
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+    applyTheme(theme);
+    set({ theme });
   },
 
   initTheme: () => {
-    const theme = getStoredTheme()
-    applyTheme(theme)
-    set({ theme })
+    const theme = getStoredTheme();
+    applyTheme(theme);
+    set({ theme });
 
     // Listen for system theme changes when in auto mode
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => {
-      if (get().theme === 'auto') {
-        applyTheme('auto')
+      if (get().theme === "auto") {
+        applyTheme("auto");
       }
-    }
-    mediaQuery.addEventListener('change', handleChange)
+    };
+    mediaQuery.addEventListener("change", handleChange);
   },
-}))
+}));
diff --git a/src/types/asset.ts b/src/types/asset.ts
index 13f9b497..e9994bac 100644
--- a/src/types/asset.ts
+++ b/src/types/asset.ts
@@ -1,72 +1,78 @@
-export type AssetType = 'image' | 'video' | 'audio' | 'text' | 'json'
+export type AssetType = "image" | "video" | "audio" | "text" | "json";
 
-export type AssetSortBy = 'date-desc' | 'date-asc' | 'name-asc' | 'name-desc' | 'size-desc' | 'size-asc'
+export type AssetSortBy =
+  | "date-desc"
+  | "date-asc"
+  | "name-asc"
+  | "name-desc"
+  | "size-desc"
+  | "size-asc";
 
-export type AssetSource = 'playground' | 'workflow' | 'free-tool' | 'z-image'
+export type AssetSource = "playground" | "workflow" | "free-tool" | "z-image";
 
 export interface AssetMetadata {
-  id: string
-  filePath: string
-  fileName: string
-  type: AssetType
-  modelId: string
-  createdAt: string
-  fileSize: number
-  tags: string[]
-  favorite: boolean
-  predictionId?: string
-  originalUrl?: string
-  source?: AssetSource
-  workflowId?: string
-  workflowName?: string
-  nodeId?: string
-  executionId?: string
+  id: string;
+  filePath: string;
+  fileName: string;
+  type: AssetType;
+  modelId: string;
+  createdAt: string;
+  fileSize: number;
+  tags: string[];
+  favorite: boolean;
+  predictionId?: string;
+  originalUrl?: string;
+  source?: AssetSource;
+  workflowId?: string;
+  workflowName?: string;
+  nodeId?: string;
+  executionId?: string;
 }
 
 export interface AssetsFilter {
-  types?: AssetType[]
-  models?: string[]
-  dateFrom?: string
-  dateTo?: string
-  tags?: string[]
-  favoritesOnly?: boolean
-  search?: string
-  sortBy?: AssetSortBy
-  sources?: AssetSource[]
+  types?: AssetType[];
+  models?: string[];
+  dateFrom?: string;
+  dateTo?: string;
+  tags?: string[];
+  favoritesOnly?: boolean;
+  search?: string;
+  sortBy?: AssetSortBy;
+  sources?: AssetSource[];
 }
 
 export interface AssetsSaveOptions {
-  modelId: string
-  predictionId?: string
-  originalUrl?: string
-  resultIndex?: number
-  source?: AssetSource
-  workflowId?: string
-  workflowName?: string
-  nodeId?: string
-  executionId?: string
+  modelId: string;
+  predictionId?: string;
+  originalUrl?: string;
+  resultIndex?: number;
+  source?: AssetSource;
+  workflowId?: string;
+  workflowName?: string;
+  nodeId?: string;
+  executionId?: string;
 }
 
 export interface AssetsSettings {
-  autoSaveAssets: boolean
-  assetsDirectory: string
+  autoSaveAssets: boolean;
+  assetsDirectory: string;
 }
 
 export interface SaveAssetResult {
-  success: boolean
-  filePath?: string
-  fileSize?: number
-  error?: string
+  success: boolean;
+  filePath?: string;
+  fileSize?: number;
+  error?: string;
 }
 
 export interface DeleteAssetResult {
-  success: boolean
-  error?: string
+  success: boolean;
+  error?: string;
 }
 
 export interface SelectDirectoryResult {
-  success: boolean
-  path?: string
-  canceled?: boolean
-  error?: string
+  success: boolean;
+  path?: string;
+  canceled?: boolean;
+  error?: string;
 }
diff --git a/src/types/batch.ts b/src/types/batch.ts
index 86883c26..fb49dd3e 100644
--- a/src/types/batch.ts
+++ b/src/types/batch.ts
@@ -1,43 +1,43 @@
-import type { PredictionResult } from './prediction'
+import type { PredictionResult } from "./prediction";
 
 export interface BatchConfig {
-  enabled: boolean
-  repeatCount: number // 2-16
-  randomizeSeed: boolean // Auto-randomize seed for each run
-  stopOnError: boolean // Stop batch on first error or continue
+  enabled: boolean;
+  repeatCount: number; // 2-16
+  randomizeSeed: boolean; // Auto-randomize seed for each run
+  stopOnError: boolean; // Stop batch on first error or continue
 }
 
 export interface BatchQueueItem {
-  id: string
-  index: number
-  input: Record<string, unknown>
-  status: 'pending' | 'running' | 'completed' | 'failed' | 'cancelled'
-  result?: PredictionResult
-  error?: string
+  id: string;
+  index: number;
+  input: Record<string, unknown>;
+  status: "pending" | "running" | "completed" | "failed" | "cancelled";
+  result?: PredictionResult;
+  error?: string;
 }
 
 export interface BatchState {
-  isRunning: boolean
-  queue: BatchQueueItem[]
-  currentIndex: number
-  completedCount: number
-  failedCount: number
-  cancelRequested: boolean
+  isRunning: boolean;
+  queue: BatchQueueItem[];
+  currentIndex: number;
+  completedCount: number;
+  failedCount: number;
+  cancelRequested: boolean;
 }
 
 export interface BatchResult {
-  id: string
-  index: number
-  input: Record<string, unknown>
-  prediction: PredictionResult | null
-  outputs: (string | Record<string, unknown>)[]
-  error: string | null
-  timing?: number
+  id: string;
+  index: number;
+  input: Record<string, unknown>;
+  prediction: PredictionResult | null;
+  outputs: (string | Record<string, unknown>)[];
+  error: string | null;
+  timing?: number;
 }
 
 export const DEFAULT_BATCH_CONFIG: BatchConfig = {
   enabled: false,
   repeatCount: 4,
   randomizeSeed: true,
-  stopOnError: false
-}
+  stopOnError: false,
+};
diff --git a/src/types/electron.d.ts b/src/types/electron.d.ts
index a88fd3b5..7dc56dea 100644
--- a/src/types/electron.d.ts
+++ b/src/types/electron.d.ts
@@ -1,218 +1,315 @@
 export interface DownloadResult {
-  success: boolean
-  filePath?: string
-  error?: string
-  canceled?: boolean
+  success: boolean;
+  filePath?: string;
+  error?: string;
+  canceled?: boolean;
 }
 
 export interface AssetsSettings {
-  autoSaveAssets: boolean
-  assetsDirectory: string
+  autoSaveAssets: boolean;
+  assetsDirectory: string;
 }
 
 export interface SaveAssetResult {
-  success: boolean
-  filePath?: string
-  fileSize?: number
-  error?: string
+  success: boolean;
+  filePath?: string;
+  fileSize?: number;
+  error?: string;
 }
 
 export interface DeleteAssetResult {
-  success: boolean
-  error?: string
+  success: boolean;
+  error?: string;
 }
 
 export interface DeleteAssetsBulkResult {
-  success: boolean
-  deleted: number
+  success: boolean;
+  deleted: number;
 }
 
 export interface SelectDirectoryResult {
-  success: boolean
-  path?: string
-  canceled?: boolean
-  error?: string
+  success: boolean;
+  path?: string;
+  canceled?: boolean;
+  error?: string;
 }
 
 export interface AssetMetadataElectron {
-  id: string
-  filePath: string
-  fileName: string
-  type: 'image' | 'video' | 'audio' | 'text' | 'json'
-  modelId: string
-  createdAt: string
-  fileSize: number
-  tags: string[]
-  favorite: boolean
-  predictionId?: string
-  originalUrl?: string
-  source?: 'playground' | 'workflow' | 'free-tool' | 'z-image'
-  workflowId?: string
-  workflowName?: string
-  nodeId?: string
-  executionId?: string
+  id: string;
+  filePath: string;
+  fileName: string;
+  type: "image" | "video" | "audio" | "text" | "json";
+  modelId: string;
+  createdAt: string;
+  fileSize: number;
+  tags: string[];
+  favorite: boolean;
+  predictionId?: string;
+  originalUrl?: string;
+  source?: "playground" | "workflow" | "free-tool" | "z-image";
+  workflowId?: string;
+  workflowName?: string;
+  nodeId?: string;
+  executionId?: string;
 }
 
 export interface UpdateStatus {
-  status: string
-  version?: string
-  releaseNotes?: string | null
-  releaseDate?: string
-  percent?: number
-  bytesPerSecond?: number
-  transferred?: number
-  total?: number
-  message?: string
+  status: string;
+  version?: string;
+  releaseNotes?: string | null;
+  releaseDate?: string;
+  percent?: number;
+  bytesPerSecond?: number;
+  transferred?: number;
+  total?: number;
+  message?: string;
 }
 
 export interface UpdateCheckResult {
-  status: string
+  status: string;
   updateInfo?: {
-    version: string
-    releaseNotes?: string | null
-  }
-  message?: string
+    version: string;
+    releaseNotes?: string | null;
+  };
+  message?: string;
 }
 
 export interface SDGenerationParams {
-  modelPath: string
-  llmPath?: string
-  vaePath?: string
-  lowVramMode?: boolean
-  vaeTiling?: boolean
-  prompt: string
-  negativePrompt?: string
-  width: number
-  height: number
-  steps: number
-  cfgScale: number
-  seed?: number
-  samplingMethod?: string
-  scheduler?: string
-  outputPath: string
+  modelPath: string;
+  llmPath?: string;
+  vaePath?: string;
+  lowVramMode?: boolean;
+  vaeTiling?: boolean;
+  prompt: string;
+  negativePrompt?: string;
+  width: number;
+  height: number;
+  steps: number;
+  cfgScale: number;
+  seed?: number;
+  samplingMethod?: string;
+  scheduler?: string;
+  outputPath: string;
 }
 
 export interface SDProgressData {
-  phase: string
-  progress: number
+  phase: string;
+  progress: number;
   detail?: {
-    current?: number
-    total?: number
-    unit?: 'bytes' | 'steps' | 'percent'
-  }
+    current?: number;
+    total?: number;
+    unit?: "bytes" | "steps" | "percent";
+  };
 }
 
 export interface SDModelInfo {
-  name: string
-  path: string
-  size: number
-  createdAt: string
+  name: string;
+  path: string;
+  size: number;
+  createdAt: string;
 }
 
 export interface ElectronAPI {
-  getApiKey: () => Promise<string>
-  setApiKey: (apiKey: string) => Promise<boolean>
+  getApiKey: () => Promise<string>;
+  setApiKey: (apiKey: string) => Promise<boolean>;
   getSettings: () => Promise<{
-    theme: 'light' | 'dark' | 'system'
-    defaultPollInterval: number
-    defaultTimeout: number
-    updateChannel: 'stable' | 'nightly'
-    autoCheckUpdate: boolean
-    language?: string
-  }>
-  setSettings: (settings: Record<string, unknown>) => Promise<boolean>
-  clearAllData: () => Promise<boolean>
-  downloadFile: (url: string, defaultFilename: string) => Promise<DownloadResult>
-  saveFileSilent: (url: string, dir: string, fileName: string) => Promise<DownloadResult>
-  openExternal: (url: string) => Promise<void>
+    theme: "light" | "dark" | "system";
+    defaultPollInterval: number;
+    defaultTimeout: number;
+    updateChannel: "stable" | "nightly";
+    autoCheckUpdate: boolean;
+    language?: string;
+  }>;
+  setSettings: (settings: Record<string, unknown>) => Promise<boolean>;
+  clearAllData: () => Promise<boolean>;
+  downloadFile: (
+    url: string,
+    defaultFilename: string,
+  ) => Promise<DownloadResult>;
+  saveFileSilent: (
+    url: string,
+    dir: string,
+    fileName: string,
+  ) => Promise<DownloadResult>;
+  openExternal: (url: string) => Promise<void>;
 
   // Title bar theme
-  updateTitlebarTheme: (isDark: boolean) => Promise<void>
+  updateTitlebarTheme: (isDark: boolean) => Promise<void>;
 
   // Auto-updater APIs
-  getAppVersion: () => Promise<string>
-  getLogFilePath: () => Promise<string>
-  openLogDirectory: () => Promise<{ success: boolean; path: string }>
-  checkForUpdates: () => Promise<UpdateCheckResult>
-  downloadUpdate: () => Promise<{ status: string; message?: string }>
-  installUpdate: () => void
-  setUpdateChannel: (channel: 'stable' | 'nightly') => Promise<boolean>
-  onUpdateStatus: (callback: (status: UpdateStatus) => void) => () => void
+  getAppVersion: () => Promise<string>;
+  getLogFilePath: () => Promise<string>;
+  openLogDirectory: () => Promise<{ success: boolean; path: string }>;
+  checkForUpdates: () => Promise<UpdateCheckResult>;
+  downloadUpdate: () => Promise<{ status: string; message?: string }>;
+  installUpdate: () => void;
+  setUpdateChannel: (channel: "stable" | "nightly") => Promise<boolean>;
+  onUpdateStatus: (callback: (status: UpdateStatus) => void) => () => void;
 
   // Assets APIs
-  getAssetsSettings: () => Promise<AssetsSettings>
-  setAssetsSettings: (settings: Partial<AssetsSettings>) => Promise<boolean>
-  getDefaultAssetsDirectory: () => Promise<string>
-  getZImageOutputPath: () => Promise<string>
-  selectDirectory: () => Promise<SelectDirectoryResult>
-  saveAsset: (url: string, type: string, fileName: string, subDir: string) => Promise<SaveAssetResult>
-  deleteAsset: (filePath: string) => Promise<DeleteAssetResult>
-  deleteAssetsBulk: (filePaths: string[]) => Promise<DeleteAssetsBulkResult>
-  getAssetsMetadata: () => Promise<AssetMetadataElectron[]>
-  saveAssetsMetadata: (metadata: AssetMetadataElectron[]) => Promise<boolean>
-  openFileLocation: (filePath: string) => Promise<DeleteAssetResult>
-  checkFileExists: (filePath: string) => Promise<boolean>
-  openAssetsFolder: () => Promise<{ success: boolean; error?: string }>
-  scanAssetsDirectory: () => Promise<Array<{
-    filePath: string
-    fileName: string
-    type: 'image' | 'video' | 'audio' | 'text'
-    fileSize: number
-    createdAt: string
-  }>>
+  getAssetsSettings: () => Promise<AssetsSettings>;
+  setAssetsSettings: (settings: Partial<AssetsSettings>) => Promise<boolean>;
+  getDefaultAssetsDirectory: () => Promise<string>;
+  getZImageOutputPath: () => Promise<string>;
+  selectDirectory: () => Promise<SelectDirectoryResult>;
+  saveAsset: (
+    url: string,
+    type: string,
+    fileName: string,
+    subDir: string,
+  ) => Promise<SaveAssetResult>;
+  deleteAsset: (filePath: string) => Promise<DeleteAssetResult>;
+  deleteAssetsBulk: (filePaths: string[]) => Promise<DeleteAssetsBulkResult>;
+  getAssetsMetadata: () => Promise<AssetMetadataElectron[]>;
+  saveAssetsMetadata: (metadata: AssetMetadataElectron[]) => Promise<boolean>;
+  openFileLocation: (filePath: string) => Promise<DeleteAssetResult>;
+  checkFileExists: (filePath: string) => Promise<boolean>;
+  openAssetsFolder: () => Promise<{ success: boolean; error?: string }>;
+  scanAssetsDirectory: () => Promise<
+    Array<{
+      filePath: string;
+      fileName: string;
+      type: "image" | "video" | "audio" | "text";
+      fileSize: number;
+      createdAt: string;
+    }>
+  >;
 
   // Stable Diffusion APIs
-  sdGetBinaryPath: () => Promise<{ success: boolean; path?: string; error?: string }>
-  sdCheckAuxiliaryModels: () => Promise<{ success: boolean; llmExists: boolean; vaeExists: boolean; llmPath: string; vaePath: string; error?: string }>
-  sdListAuxiliaryModels: () => Promise<{ success: boolean; models?: Array<{ name: string; path: string; size: number; type: 'llm' | 'vae' }>; error?: string }>
-  sdDeleteAuxiliaryModel: (type: 'llm' | 'vae') => Promise<{ success: boolean; error?: string }>
-  sdGenerateImage: (params: SDGenerationParams) => Promise<{ success: boolean; outputPath?: string; error?: string }>
-  sdCancelGeneration: () => Promise<{ success: boolean; error?: string }>
-  sdSaveModelFromCache: (filename: string, data: Uint8Array, type: 'model' | 'llm' | 'vae') => Promise<{ success: boolean; filePath?: string; error?: string }>
-  sdListModels: () => Promise<{ success: boolean; models?: SDModelInfo[]; error?: string }>
-  sdDeleteModel: (modelPath: string) => Promise<{ success: boolean; error?: string }>
-  sdGetBinaryPath: () => Promise<{ success: boolean; path?: string; error?: string }>
-  sdDeleteBinary: () => Promise<{ success: boolean; error?: string }>
-  getFileSize: (filePath: string) => Promise<number>
-  sdGetSystemInfo: () => Promise<{ platform: string; arch: string; acceleration: string; supported: boolean }>
-  sdGetGpuVramMb: () => Promise<{ success: boolean; vramMb: number | null; error?: string }>
-  onSdProgress: (callback: (data: SDProgressData) => void) => () => void
-  onSdLog: (callback: (data: { type: 'stdout' | 'stderr'; message: string }) => void) => () => void
-  onSdDownloadProgress: (callback: (data: SDProgressData) => void) => () => void
-  onSdBinaryDownloadProgress: (callback: (data: SDProgressData) => void) => () => void
-  onSdLlmDownloadProgress: (callback: (data: SDProgressData) => void) => () => void
-  onSdVaeDownloadProgress: (callback: (data: SDProgressData) => void) => () => void
+  sdGetBinaryPath: () => Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }>;
+  sdCheckAuxiliaryModels: () => Promise<{
+    success: boolean;
+    llmExists: boolean;
+    vaeExists: boolean;
+    llmPath: string;
+    vaePath: string;
+    error?: string;
+  }>;
+  sdListAuxiliaryModels: () => Promise<{
+    success: boolean;
+    models?: Array<{
+      name: string;
+      path: string;
+      size: number;
+      type: "llm" | "vae";
+    }>;
+    error?: string;
+  }>;
+  sdDeleteAuxiliaryModel: (
+    type: "llm" | "vae",
+  ) => Promise<{ success: boolean; error?: string }>;
+  sdGenerateImage: (
+    params: SDGenerationParams,
+  ) => Promise<{ success: boolean; outputPath?: string; error?: string }>;
+  sdCancelGeneration: () => Promise<{ success: boolean; error?: string }>;
+  sdSaveModelFromCache: (
+    filename: string,
+    data: Uint8Array,
+    type: "model" | "llm" | "vae",
+  ) => Promise<{ success: boolean; filePath?: string; error?: string }>;
+  sdListModels: () => Promise<{
+    success: boolean;
+    models?: SDModelInfo[];
+    error?: string;
+  }>;
+  sdDeleteModel: (
+    modelPath: string,
+  ) => Promise<{ success: boolean; error?: string }>;
+  sdGetBinaryPath: () => Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }>;
+  sdDeleteBinary: () => Promise<{ success: boolean; error?: string }>;
+  getFileSize: (filePath: string) => Promise<number>;
+  sdGetSystemInfo: () => Promise<{
+    platform: string;
+    arch: string;
+    acceleration: string;
+    supported: boolean;
+  }>;
+  sdGetGpuVramMb: () => Promise<{
+    success: boolean;
+    vramMb: number | null;
+    error?: string;
+  }>;
+  onSdProgress: (callback: (data: SDProgressData) => void) => () => void;
+  onSdLog: (
+    callback: (data: { type: "stdout" | "stderr"; message: string }) => void,
+  ) => () => void;
+  onSdDownloadProgress: (
+    callback: (data: SDProgressData) => void,
+  ) => () => void;
+  onSdBinaryDownloadProgress: (
+    callback: (data: SDProgressData) => void,
+  ) => () => void;
+  onSdLlmDownloadProgress: (
+    callback: (data: SDProgressData) => void,
+  ) => () => void;
+  onSdVaeDownloadProgress: (
+    callback: (data: SDProgressData) => void,
+  ) => () => void;
 
   // File operations for chunked downloads
-  fileGetSize: (filePath: string) => Promise<{ success: boolean; size?: number; error?: string }>
-  fileAppendChunk: (filePath: string, chunk: ArrayBuffer) => Promise<{ success: boolean; error?: string }>
-  fileRename: (oldPath: string, newPath: string) => Promise<{ success: boolean; error?: string }>
-  fileDelete: (filePath: string) => Promise<{ success: boolean; error?: string }>
+  fileGetSize: (
+    filePath: string,
+  ) => Promise<{ success: boolean; size?: number; error?: string }>;
+  fileAppendChunk: (
+    filePath: string,
+    chunk: ArrayBuffer,
+  ) => Promise<{ success: boolean; error?: string }>;
+  fileRename: (
+    oldPath: string,
+    newPath: string,
+  ) => Promise<{ success: boolean; error?: string }>;
+  fileDelete: (
+    filePath: string,
+  ) => Promise<{ success: boolean; error?: string }>;
 
   // SD download path helpers for chunked downloads
-  sdGetBinaryDownloadPath: () => Promise<{ success: boolean; path?: string; error?: string }>
-  sdGetAuxiliaryModelDownloadPath: (type: 'llm' | 'vae') => Promise<{ success: boolean; path?: string; error?: string }>
-  sdGetModelsDir: () => Promise<{ success: boolean; path?: string; error?: string }>
-  sdExtractBinary: (zipPath: string, destPath: string) => Promise<{ success: boolean; path?: string; error?: string }>
+  sdGetBinaryDownloadPath: () => Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }>;
+  sdGetAuxiliaryModelDownloadPath: (
+    type: "llm" | "vae",
+  ) => Promise<{ success: boolean; path?: string; error?: string }>;
+  sdGetModelsDir: () => Promise<{
+    success: boolean;
+    path?: string;
+    error?: string;
+  }>;
+  sdExtractBinary: (
+    zipPath: string,
+    destPath: string,
+  ) => Promise<{ success: boolean; path?: string; error?: string }>;
 
   // Persistent key-value state (survives app restarts)
-  getState: (key: string) => Promise<unknown>
-  setState: (key: string, value: unknown) => Promise<boolean>
-  removeState: (key: string) => Promise<boolean>
+  getState: (key: string) => Promise<unknown>;
+  setState: (key: string, value: unknown) => Promise<boolean>;
+  removeState: (key: string) => Promise<boolean>;
 
   // Assets event listener (workflow executor pushes new assets)
-  onAssetsNewAsset: (callback: (asset: unknown) => void) => () => void
+  onAssetsNewAsset: (callback: (asset: unknown) => void) => () => void;
 }
 
 export interface WorkflowAPI {
-  invoke: (channel: string, args?: unknown) => Promise<unknown>
-  on: (channel: string, callback: (...args: unknown[]) => void) => void
-  removeListener: (channel: string, callback: (...args: unknown[]) => void) => void
+  invoke: (channel: string, args?: unknown) => Promise<unknown>;
+  on: (channel: string, callback: (...args: unknown[]) => void) => void;
+  removeListener: (
+    channel: string,
+    callback: (...args: unknown[]) => void,
+  ) => void;
 }
 
 declare global {
   interface Window {
-    electronAPI: ElectronAPI
-    workflowAPI: WorkflowAPI
+    electronAPI: ElectronAPI;
+    workflowAPI: WorkflowAPI;
   }
 }
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
index 45e04cd8..4ca23c62 100644
--- a/src/types/images.d.ts
+++ b/src/types/images.d.ts
@@ -1,31 +1,30 @@
 // Image module declarations for TypeScript
-declare module '*.png' {
-  const src: string
-  export default src
+declare module "*.png" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.jpg' {
-  const src: string
-  export default src
+declare module "*.jpg" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.jpeg' {
-  const src: string
-  export default src
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.gif' {
-  const src: string
-  export default src
+declare module "*.gif" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.svg' {
-  const src: string
-  export default src
+declare module "*.svg" {
+  const src: string;
+  export default src;
 }
 
-declare module '*.webp' {
-  const src: string
-  export default src
+declare module "*.webp" {
+  const src: string;
+  export default src;
 }
-
diff --git a/src/types/model.ts b/src/types/model.ts
index 0b8a7cb2..5d7a7fca 100644
--- a/src/types/model.ts
+++ b/src/types/model.ts
@@ -1,60 +1,60 @@
 export interface ModelSchema {
-  type: string
-  properties: Record<string, SchemaProperty>
-  required?: string[]
+  type: string;
+  properties: Record<string, SchemaProperty>;
+  required?: string[];
 }
 
 export interface SchemaProperty {
-  type: string
-  title?: string
-  description?: string
-  default?: unknown
-  minimum?: number
-  maximum?: number
-  enum?: string[]
+  type: string;
+  title?: string;
+  description?: string;
+  default?: unknown;
+  minimum?: number;
+  maximum?: number;
+  enum?: string[];
   items?: {
-    type: string
-    minItems?: number
-    maxItems?: number
-  }
-  minItems?: number
-  maxItems?: number
+    type: string;
+    minItems?: number;
+    maxItems?: number;
+  };
+  minItems?: number;
+  maxItems?: number;
   recommend?: Array<{
-    path: string
-    scale: number
-    cover?: string
-  }>
+    path: string;
+    scale: number;
+    cover?: string;
+  }>;
   // Extended UI hints
-  step?: number
-  'x-ui-component'?: 'slider' | 'uploader' | 'loras' | 'select'
-  'x-accept'?: string
-  'x-placeholder'?: string
-  'x-hidden'?: boolean
-  nullable?: boolean
+  step?: number;
+  "x-ui-component"?: "slider" | "uploader" | "loras" | "select";
+  "x-accept"?: string;
+  "x-placeholder"?: string;
+  "x-hidden"?: boolean;
+  nullable?: boolean;
 }
 
 export interface Model {
-  model_id: string
-  name: string
-  description?: string
-  type?: string
-  base_price?: number
-  sort_order?: number
+  model_id: string;
+  name: string;
+  description?: string;
+  type?: string;
+  base_price?: number;
+  sort_order?: number;
   api_schema?: {
-    openapi?: string
-    info?: Record<string, unknown>
-    paths?: Record<string, unknown>
+    openapi?: string;
+    info?: Record<string, unknown>;
+    paths?: Record<string, unknown>;
     components?: {
       schemas?: {
-        Request?: ModelSchema
-        Response?: Record<string, unknown>
-      }
-    }
-  }
+        Request?: ModelSchema;
+        Response?: Record<string, unknown>;
+      };
+    };
+  };
 }
 
 export interface ModelsResponse {
-  code: number
-  message: string
-  data: Model[]
+  code: number;
+  message: string;
+  data: Model[];
 }
diff --git a/src/types/onnxruntime-web.d.ts b/src/types/onnxruntime-web.d.ts
index 101f8497..c6cb75d0 100644
--- a/src/types/onnxruntime-web.d.ts
+++ b/src/types/onnxruntime-web.d.ts
@@ -1,52 +1,56 @@
 // Type declaration for onnxruntime-web
 // Needed because package.json "exports" prevents automatic type resolution
-declare module 'onnxruntime-web' {
+declare module "onnxruntime-web" {
   export namespace env {
     namespace wasm {
-      let wasmPaths: string
+      let wasmPaths: string;
     }
   }
 
-  export type TypedTensorDataType = Float32Array | Int32Array | BigInt64Array | Uint8Array
+  export type TypedTensorDataType =
+    | Float32Array
+    | Int32Array
+    | BigInt64Array
+    | Uint8Array;
 
   export class Tensor {
     constructor(
-      type: 'float32' | 'int32' | 'int64' | 'uint8',
+      type: "float32" | "int32" | "int64" | "uint8",
       data: TypedTensorDataType | number[] | bigint[],
-      dims: readonly number[]
-    )
-    readonly data: TypedTensorDataType
-    readonly dims: readonly number[]
-    readonly type: string
-    readonly size: number
+      dims: readonly number[],
+    );
+    readonly data: TypedTensorDataType;
+    readonly dims: readonly number[];
+    readonly type: string;
+    readonly size: number;
   }
 
   export interface SessionOptions {
-    executionProviders?: string[]
-    graphOptimizationLevel?: 'disabled' | 'basic' | 'extended' | 'all'
-    enableCpuMemArena?: boolean
-    executionMode?: 'sequential' | 'parallel'
+    executionProviders?: string[];
+    graphOptimizationLevel?: "disabled" | "basic" | "extended" | "all";
+    enableCpuMemArena?: boolean;
+    executionMode?: "sequential" | "parallel";
   }
 
   export interface RunOptions {
-    logSeverityLevel?: number
+    logSeverityLevel?: number;
   }
 
   export interface OnnxValueMapType {
-    [name: string]: Tensor
+    [name: string]: Tensor;
   }
 
   export class InferenceSession {
     static create(
       modelPath: string | ArrayBuffer | Uint8Array,
-      options?: SessionOptions
-    ): Promise<InferenceSession>
+      options?: SessionOptions,
+    ): Promise<InferenceSession>;
     run(
       feeds: OnnxValueMapType,
-      options?: RunOptions
-    ): Promise<OnnxValueMapType>
-    release(): Promise<void>
-    readonly inputNames: readonly string[]
-    readonly outputNames: readonly string[]
+      options?: RunOptions,
+    ): Promise<OnnxValueMapType>;
+    release(): Promise<void>;
+    readonly inputNames: readonly string[];
+    readonly outputNames: readonly string[];
   }
 }
diff --git a/src/types/prediction.ts b/src/types/prediction.ts
index 7d499600..739a0516 100644
--- a/src/types/prediction.ts
+++ b/src/types/prediction.ts
@@ -1,61 +1,62 @@
 export interface PredictionResult {
-  id: string
-  model: string
-  status: 'pending' | 'processing' | 'completed' | 'failed' | 'created'
-  outputs?: (string | Record<string, unknown>)[]
-  error?: string
-  has_nsfw_contents?: boolean[]
-  created_at?: string
+  id: string;
+  model: string;
+  status: "pending" | "processing" | "completed" | "failed" | "created";
+  outputs?: (string | Record<string, unknown>)[];
+  error?: string;
+  has_nsfw_contents?: boolean[];
+  created_at?: string;
   timings?: {
-    inference?: number
-  }
+    inference?: number;
+  };
   urls?: {
-    get?: string
-  }
+    get?: string;
+  };
 }
 
 export interface PredictionResponse {
-  code: number
-  message: string
-  data: PredictionResult
+  code: number;
+  message: string;
+  data: PredictionResult;
 }
 
 export interface HistoryItem {
-  id: string
-  model: string
-  status: 'pending' | 'processing' | 'completed' | 'failed' | 'created'
-  outputs?: (string | Record<string, unknown>)[]
-  created_at: string
-  execution_time?: number
-  has_nsfw_contents?: boolean[]
+  id: string;
+  model: string;
+  status: "pending" | "processing" | "completed" | "failed" | "created";
+  outputs?: (string | Record<string, unknown>)[];
+  created_at: string;
+  execution_time?: number;
+  has_nsfw_contents?: boolean[];
 }
 
 export interface HistoryResponse {
-  code: number
-  message: string
+  code: number;
+  message: string;
   data: {
-    page: number
-    total: number
-    items: HistoryItem[]
-  }
+    page: number;
+    total: number;
+    items: HistoryItem[];
+  };
 }
 
 export interface GenerationHistoryItem {
-  id: string
-  prediction: PredictionResult
-  outputs: (string | Record<string, unknown>)[]
-  addedAt: number
-  thumbnailUrl: string | null
-  thumbnailType: 'image' | 'video' | null
+  id: string;
+  prediction: PredictionResult;
+  outputs: (string | Record<string, unknown>)[];
+  formValues?: Record<string, unknown>;
+  addedAt: number;
+  thumbnailUrl: string | null;
+  thumbnailType: "image" | "video" | null;
 }
 
 export interface UploadResponse {
-  code: number
-  message: string
+  code: number;
+  message: string;
   data: {
-    type: string
-    download_url: string
-    filename: string
-    size: number
-  }
+    type: string;
+    download_url: string;
+    filename: string;
+    size: number;
+  };
 }
diff --git a/src/types/progress.ts b/src/types/progress.ts
index c8bb8699..4cfe1072 100644
--- a/src/types/progress.ts
+++ b/src/types/progress.ts
@@ -1,56 +1,56 @@
-export type PhaseStatus = 'pending' | 'active' | 'completed' | 'error'
+export type PhaseStatus = "pending" | "active" | "completed" | "error";
 
 export interface ProgressDetail {
-  current?: number
-  total?: number
-  unit?: 'bytes' | 'frames' | 'percent' | 'steps' | 'seconds' | 'items'
+  current?: number;
+  total?: number;
+  unit?: "bytes" | "frames" | "percent" | "steps" | "seconds" | "items";
 }
 
 export interface ProcessingPhase {
-  id: string
-  labelKey: string
-  weight: number // Relative weight for overall progress (0-1)
-  progress: number // 0-100 within phase
-  status: PhaseStatus
-  detail?: ProgressDetail
+  id: string;
+  labelKey: string;
+  weight: number; // Relative weight for overall progress (0-1)
+  progress: number; // 0-100 within phase
+  status: PhaseStatus;
+  detail?: ProgressDetail;
 }
 
 export interface MultiPhaseProgress {
-  phases: ProcessingPhase[]
-  currentPhaseIndex: number
-  overallProgress: number
-  startTime: number | null
-  eta: string | null
-  isActive: boolean
+  phases: ProcessingPhase[];
+  currentPhaseIndex: number;
+  overallProgress: number;
+  startTime: number | null;
+  eta: string | null;
+  isActive: boolean;
 }
 
 export interface PhaseConfig {
-  id: string
-  labelKey: string
-  weight: number
+  id: string;
+  labelKey: string;
+  weight: number;
 }
 
 export interface StandardProgressPayload {
-  phase: string
-  progress: number
-  detail?: ProgressDetail
+  phase: string;
+  progress: number;
+  detail?: ProgressDetail;
 }
 
 // Helper to format bytes for display
 export function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
 }
 
 // Helper to format time for display
 export function formatTime(seconds: number): string {
   if (seconds < 60) {
-    return `${Math.ceil(seconds)}s`
+    return `${Math.ceil(seconds)}s`;
   }
-  const mins = Math.floor(seconds / 60)
-  const secs = Math.ceil(seconds % 60)
-  return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.ceil(seconds % 60);
+  return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
 }
diff --git a/src/types/stable-diffusion.ts b/src/types/stable-diffusion.ts
index 8d1674ef..84c017b4 100644
--- a/src/types/stable-diffusion.ts
+++ b/src/types/stable-diffusion.ts
@@ -5,96 +5,96 @@
  */
 export interface SDModel {
   /** Model unique ID */
-  id: string
+  id: string;
   /** Model filename */
-  name: string
+  name: string;
   /** Display name */
-  displayName: string
+  displayName: string;
   /** Model description */
-  description: string
+  description: string;
   /** File size (bytes) */
-  size: number
+  size: number;
   /** Quantization type (Q5_K_M, Q8_0, F16, etc.) */
-  quantization: string
+  quantization: string;
   /** Download URL */
-  downloadUrl: string
+  downloadUrl: string;
   /** Local path (if downloaded) */
-  localPath?: string
+  localPath?: string;
   /** Whether downloaded */
-  isDownloaded: boolean
+  isDownloaded: boolean;
   /** Whether downloading */
-  isDownloading: boolean
+  isDownloading: boolean;
   /** Download progress (0-100) */
-  downloadProgress: number
+  downloadProgress: number;
   /** Whether download failed */
-  downloadFailed?: boolean
+  downloadFailed?: boolean;
 }
 
 /**
  * Sampling methods
  */
 export type SamplingMethod =
-  | 'euler'
-  | 'euler_a'
-  | 'heun'
-  | 'dpm2'
-  | 'dpm++2s_a'
-  | 'dpm++2m'
-  | 'dpm++2mv2'
-  | 'ipndm'
-  | 'ipndm_v'
-  | 'lcm'
-  | 'ddim_trailing'
-  | 'tcd'
+  | "euler"
+  | "euler_a"
+  | "heun"
+  | "dpm2"
+  | "dpm++2s_a"
+  | "dpm++2m"
+  | "dpm++2mv2"
+  | "ipndm"
+  | "ipndm_v"
+  | "lcm"
+  | "ddim_trailing"
+  | "tcd";
 
 /**
  * Scheduler types
  */
 export type Scheduler =
-  | 'discrete'
-  | 'karras'
-  | 'exponential'
-  | 'ays'
-  | 'gits'
-  | 'smoothstep'
-  | 'sgm_uniform'
-  | 'simple'
-  | 'lcm'
+  | "discrete"
+  | "karras"
+  | "exponential"
+  | "ays"
+  | "gits"
+  | "smoothstep"
+  | "sgm_uniform"
+  | "simple"
+  | "lcm";
 
 /**
  * Image generation parameters
  */
 export interface GenerationParams {
   /** Model path */
-  modelPath: string
+  modelPath: string;
   /** LLM (text encoder) path */
-  llmPath?: string
+  llmPath?: string;
   /** VAE path */
-  vaePath?: string
+  vaePath?: string;
   /** Enable low VRAM mode (CLIP on CPU) */
-  lowVramMode?: boolean
+  lowVramMode?: boolean;
   /** Enable VAE tiling for lower VRAM usage */
-  vaeTiling?: boolean
+  vaeTiling?: boolean;
   /** Positive prompt */
-  prompt: string
+  prompt: string;
   /** Negative prompt */
-  negativePrompt?: string
+  negativePrompt?: string;
   /** Image width (must be multiple of 64) */
-  width: number
+  width: number;
   /** Image height (must be multiple of 64) */
-  height: number
+  height: number;
   /** Sampling steps (10-50) */
-  steps: number
+  steps: number;
   /** CFG Scale (1-20) */
-  cfgScale: number
+  cfgScale: number;
   /** Random seed (optional, for reproducibility) */
-  seed?: number
+  seed?: number;
   /** Sampling method */
-  samplingMethod?: SamplingMethod
+  samplingMethod?: SamplingMethod;
   /** Scheduler */
-  scheduler?: Scheduler
+  scheduler?: Scheduler;
   /** Output path */
-  outputPath: string
+  outputPath: string;
 }
 
 /**
@@ -102,15 +102,15 @@ export interface GenerationParams {
  */
 export interface GenerationResult {
   /** Whether successful */
-  success: boolean
+  success: boolean;
   /** Output image path */
-  outputPath?: string
+  outputPath?: string;
   /** Error message */
-  error?: string
+  error?: string;
   /** Generation time (seconds) */
-  duration?: number
+  duration?: number;
   /** Parameters used */
-  params?: GenerationParams
+  params?: GenerationParams;
 }
 
 /**
@@ -118,13 +118,13 @@ export interface GenerationResult {
  */
 export interface SystemInfo {
   /** Platform (darwin, win32, linux) */
-  platform: string
+  platform: string;
   /** Architecture (arm64, x64) */
-  arch?: string
+  arch?: string;
   /** Hardware acceleration type */
-  acceleration: string
+  acceleration: string;
   /** Whether supported */
-  supported: boolean
+  supported: boolean;
 }
 
 /**
@@ -132,11 +132,11 @@ export interface SystemInfo {
  */
 export interface BinaryPathResult {
   /** Whether successful */
-  success: boolean
+  success: boolean;
   /** Binary path */
-  path?: string
+  path?: string;
   /** Error message */
-  error?: string
+  error?: string;
 }
 
 /**
@@ -144,16 +144,16 @@ export interface BinaryPathResult {
  */
 export interface ModelsListResult {
   /** Whether successful */
-  success: boolean
+  success: boolean;
   /** Model list */
   models?: Array<{
-    name: string
-    path: string
-    size: number
-    createdAt: string
-  }>
+    name: string;
+    path: string;
+    size: number;
+    createdAt: string;
+  }>;
   /** Error message */
-  error?: string
+  error?: string;
 }
 
 /**
@@ -161,11 +161,11 @@ export interface ModelsListResult {
  */
 export interface DownloadResult {
   /** Whether successful */
-  success: boolean
+  success: boolean;
   /** File path */
-  filePath?: string
+  filePath?: string;
   /** Error message */
-  error?: string
+  error?: string;
 }
 
 /**
@@ -173,9 +173,9 @@ export interface DownloadResult {
  */
 export interface DeleteResult {
   /** Whether successful */
-  success: boolean
+  success: boolean;
   /** Error message */
-  error?: string
+  error?: string;
 }
 
 /**
@@ -183,18 +183,18 @@ export interface DeleteResult {
  */
 export interface ProgressData {
   /** Phase name */
-  phase: string
+  phase: string;
   /** Progress (0-100) */
-  progress: number
+  progress: number;
   /** Detailed information */
   detail?: {
     /** Current value */
-    current?: number
+    current?: number;
     /** Total */
-    total?: number
+    total?: number;
     /** Unit (bytes, steps, percent) */
-    unit?: 'bytes' | 'steps' | 'percent'
-  }
+    unit?: "bytes" | "steps" | "percent";
+  };
 }
 
 /**
@@ -202,107 +202,109 @@ export interface ProgressData {
  */
 export interface ValidationResult {
   /** Whether valid */
-  valid: boolean
+  valid: boolean;
   /** Error message */
-  error?: string
+  error?: string;
 }
 
 /**
  * Image size presets
  */
 export const IMAGE_SIZE_PRESETS = {
-  '512x512': { width: 512, height: 512, label: '512×512 (Square)' },
-  '768x768': { width: 768, height: 768, label: '768×768 (Square)' },
-  '512x768': { width: 512, height: 768, label: '512×768 (Portrait)' },
-  '768x512': { width: 768, height: 512, label: '768×512 (Landscape)' },
-  '1024x1024': { width: 1024, height: 1024, label: '1024×1024 (Square)' }
-} as const
+  "512x512": { width: 512, height: 512, label: "512×512 (Square)" },
+  "768x768": { width: 768, height: 768, label: "768×768 (Square)" },
+  "512x768": { width: 512, height: 768, label: "512×768 (Portrait)" },
+  "768x512": { width: 768, height: 512, label: "768×512 (Landscape)" },
+  "1024x1024": { width: 1024, height: 1024, label: "1024×1024 (Square)" },
+} as const;
 
 /**
  * Sampling steps presets
  */
 export const STEPS_PRESETS = {
-  fast: { value: 15, label: 'Fast (15 steps)' },
-  balanced: { value: 20, label: 'Balanced (20 steps)' },
-  quality: { value: 30, label: 'Quality (30 steps)' },
-  high: { value: 40, label: 'High Quality (40 steps)' }
-} as const
+  fast: { value: 15, label: "Fast (15 steps)" },
+  balanced: { value: 20, label: "Balanced (20 steps)" },
+  quality: { value: 30, label: "Quality (30 steps)" },
+  high: { value: 40, label: "High Quality (40 steps)" },
+} as const;
 
 /**
  * CFG Scale presets
  */
 export const CFG_SCALE_PRESETS = {
-  low: { value: 5, label: 'Low (5)' },
-  balanced: { value: 7.5, label: 'Balanced (7.5)' },
-  high: { value: 10, label: 'High (10)' },
-  veryHigh: { value: 15, label: 'Very High (15)' }
-} as const
+  low: { value: 5, label: "Low (5)" },
+  balanced: { value: 7.5, label: "Balanced (7.5)" },
+  high: { value: 10, label: "High (10)" },
+  veryHigh: { value: 15, label: "Very High (15)" },
+} as const;
 
 /**
  * Required auxiliary models for Z-Image
  */
 export const AUXILIARY_MODELS = {
   llm: {
-    name: 'Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf',
-    displayName: 'Qwen3-4B Text Encoder',
-    description: 'Text encoder model for Z-Image (required)',
+    name: "Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf",
+    displayName: "Qwen3-4B Text Encoder",
+    description: "Text encoder model for Z-Image (required)",
     size: 2400000000, // ~2.4GB
-    downloadUrl: 'https://huggingface.co/unsloth/Qwen3-4B-Instruct-2507-GGUF/resolve/main/Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf'
+    downloadUrl:
+      "https://huggingface.co/unsloth/Qwen3-4B-Instruct-2507-GGUF/resolve/main/Qwen3-4B-Instruct-2507-UD-Q4_K_XL.gguf",
   },
   vae: {
-    name: 'ae.safetensors',
-    displayName: 'FLUX VAE',
-    description: 'VAE model for Z-Image (required)',
+    name: "ae.safetensors",
+    displayName: "FLUX VAE",
+    description: "VAE model for Z-Image (required)",
     size: 335000000, // ~335MB
-    downloadUrl: 'https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/vae/ae.safetensors'
-  }
-} as const
+    downloadUrl:
+      "https://huggingface.co/Comfy-Org/z_image_turbo/resolve/main/split_files/vae/ae.safetensors",
+  },
+} as const;
 
 /**
  * Predefined model list - Z-Image-Turbo models
  */
 export const PREDEFINED_MODELS: Omit<
   SDModel,
-  'localPath' | 'isDownloaded' | 'isDownloading' | 'downloadProgress'
+  "localPath" | "isDownloaded" | "isDownloading" | "downloadProgress"
 >[] = [
   {
-    id: 'z-image-turbo-q4-k',
-    name: 'z_image_turbo-Q4_K.gguf',
-    displayName: 'Z-Image-Turbo (Q4_K)',
-    description: 'zImage.models.q4k.description', // i18n key
+    id: "z-image-turbo-q4-k",
+    name: "z_image_turbo-Q4_K.gguf",
+    displayName: "Z-Image-Turbo (Q4_K)",
+    description: "zImage.models.q4k.description", // i18n key
     size: 2500000000, // ~2.5GB (estimated)
-    quantization: 'Q4_K',
+    quantization: "Q4_K",
     downloadUrl:
-      'https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q4_K.gguf'
+      "https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q4_K.gguf",
   },
   {
-    id: 'z-image-turbo-q6-k',
-    name: 'z_image_turbo-Q6_K.gguf',
-    displayName: 'Z-Image-Turbo (Q6_K)',
-    description: 'zImage.models.q6k.description', // i18n key
+    id: "z-image-turbo-q6-k",
+    name: "z_image_turbo-Q6_K.gguf",
+    displayName: "Z-Image-Turbo (Q6_K)",
+    description: "zImage.models.q6k.description", // i18n key
     size: 3500000000, // ~3.5GB (estimated)
-    quantization: 'Q6_K',
+    quantization: "Q6_K",
     downloadUrl:
-      'https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q6_K.gguf'
+      "https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q6_K.gguf",
   },
   {
-    id: 'z-image-turbo-q8-0',
-    name: 'z_image_turbo-Q8_0.gguf',
-    displayName: 'Z-Image-Turbo (Q8_0)',
-    description: 'zImage.models.q8.description', // i18n key
+    id: "z-image-turbo-q8-0",
+    name: "z_image_turbo-Q8_0.gguf",
+    displayName: "Z-Image-Turbo (Q8_0)",
+    description: "zImage.models.q8.description", // i18n key
     size: 4000000000, // ~4GB (estimated)
-    quantization: 'Q8_0',
+    quantization: "Q8_0",
     downloadUrl:
-      'https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q8_0.gguf'
+      "https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q8_0.gguf",
   },
   {
-    id: 'z-image-turbo-q2-k',
-    name: 'z_image_turbo-Q2_K.gguf',
-    displayName: 'Z-Image-Turbo (Q2_K)',
-    description: 'zImage.models.q2k.description', // i18n key
+    id: "z-image-turbo-q2-k",
+    name: "z_image_turbo-Q2_K.gguf",
+    displayName: "Z-Image-Turbo (Q2_K)",
+    description: "zImage.models.q2k.description", // i18n key
     size: 1500000000, // ~1.5GB (estimated)
-    quantization: 'Q2_K',
+    quantization: "Q2_K",
     downloadUrl:
-      'https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q2_K.gguf'
-  }
-]
+      "https://huggingface.co/leejet/Z-Image-Turbo-GGUF/resolve/main/z_image_turbo-Q2_K.gguf",
+  },
+];
diff --git a/src/types/template.ts b/src/types/template.ts
index 555c20fa..5c337d20 100644
--- a/src/types/template.ts
+++ b/src/types/template.ts
@@ -1,63 +1,63 @@
 export interface Template {
-  id: string
-  name: string
-  i18nKey?: string
-  _searchText?: string
-  description: string | null
-  tags: string[]
-  type: 'public' | 'custom'
-  templateType: 'playground' | 'workflow'
-  isFavorite: boolean
-  createdAt: string
-  updatedAt: string
-  author: string | null
-  useCount: number
-  thumbnail: string | null
-  
+  id: string;
+  name: string;
+  i18nKey?: string;
+  _searchText?: string;
+  description: string | null;
+  tags: string[];
+  type: "public" | "custom";
+  templateType: "playground" | "workflow";
+  isFavorite: boolean;
+  createdAt: string;
+  updatedAt: string;
+  author: string | null;
+  useCount: number;
+  thumbnail: string | null;
+
   // Type-specific data
-  playgroundData: PlaygroundTemplateData | null
-  workflowData: WorkflowTemplateData | null
+  playgroundData: PlaygroundTemplateData | null;
+  workflowData: WorkflowTemplateData | null;
 }
 
 export interface PlaygroundTemplateData {
-  modelId: string
-  modelName: string
-  values: Record<string, unknown>
+  modelId: string;
+  modelName: string;
+  values: Record<string, unknown>;
 }
 
 export interface WorkflowTemplateData {
-  category: string
-  graphDefinition: any  // GraphDefinition from workflow types
-  nodeTypes: string[]
-  nodeCount: number
-  useCases: string[]
+  category: string;
+  graphDefinition: any; // GraphDefinition from workflow types
+  nodeTypes: string[];
+  nodeCount: number;
+  useCases: string[];
 }
 
 export interface CreateTemplateInput {
-  name: string
-  i18nKey?: string
-  _searchText?: string
-  description?: string | null
-  tags?: string[]
-  type: 'public' | 'custom'
-  templateType: 'playground' | 'workflow'
-  author?: string | null
-  thumbnail?: string | null
-  playgroundData?: PlaygroundTemplateData | null
-  workflowData?: WorkflowTemplateData | null
+  name: string;
+  i18nKey?: string;
+  _searchText?: string;
+  description?: string | null;
+  tags?: string[];
+  type: "public" | "custom";
+  templateType: "playground" | "workflow";
+  author?: string | null;
+  thumbnail?: string | null;
+  playgroundData?: PlaygroundTemplateData | null;
+  workflowData?: WorkflowTemplateData | null;
 }
 
 export interface TemplateFilter {
-  templateType?: 'playground' | 'workflow'
-  type?: 'public' | 'custom'
-  isFavorite?: boolean
-  category?: string
-  search?: string
-  sortBy?: 'updatedAt' | 'useCount'
+  templateType?: "playground" | "workflow";
+  type?: "public" | "custom";
+  isFavorite?: boolean;
+  category?: string;
+  search?: string;
+  sortBy?: "updatedAt" | "useCount";
 }
 
 export interface TemplateExport {
-  version: string
-  exportedAt: string
-  templates: Template[]
+  version: string;
+  exportedAt: string;
+  templates: Template[];
 }
diff --git a/src/workers/backgroundRemover.worker.ts b/src/workers/backgroundRemover.worker.ts
index bdf0c2fa..6f936c64 100644
--- a/src/workers/backgroundRemover.worker.ts
+++ b/src/workers/backgroundRemover.worker.ts
@@ -2,212 +2,222 @@ import {
   removeBackground,
   removeForeground,
   segmentForeground,
-  type Config
-} from '@imgly/background-removal'
+  type Config,
+} from "@imgly/background-removal";
 
-type ModelType = 'isnet_quint8' | 'isnet_fp16' | 'isnet'
-type OutputType = 'foreground' | 'background' | 'mask'
+type ModelType = "isnet_quint8" | "isnet_fp16" | "isnet";
+type OutputType = "foreground" | "background" | "mask";
 
 // Track last emitted phase to detect phase changes
-let lastPhase = ''
+let lastPhase = "";
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'process': {
+      case "process": {
         const { imageBlob, model, outputType, id } = payload as {
-          imageBlob: Blob
-          model: ModelType
-          outputType: OutputType
-          id: number
-        }
+          imageBlob: Blob;
+          model: ModelType;
+          outputType: OutputType;
+          id: number;
+        };
 
         // Reset phase tracking
-        lastPhase = ''
+        lastPhase = "";
 
         // Auto-detect GPU support
-        const hasGpu = typeof navigator !== 'undefined' && 'gpu' in navigator
+        const hasGpu = typeof navigator !== "undefined" && "gpu" in navigator;
 
         const config: Config = {
           model,
-          device: hasGpu ? 'gpu' : 'cpu',
+          device: hasGpu ? "gpu" : "cpu",
           output: {
-            format: 'image/png',
-            quality: 1
+            format: "image/png",
+            quality: 1,
           },
           progress: (key: string, current: number, total: number) => {
             // Map library progress keys to standardized phases
             // Keys from @imgly/background-removal:
             // - fetch:* for model downloading
             // - compute:* for processing
-            const isDownload = key.startsWith('fetch')
-            const phase = isDownload ? 'download' : 'process'
+            const isDownload = key.startsWith("fetch");
+            const phase = isDownload ? "download" : "process";
 
             // Notify of phase change
             if (phase !== lastPhase) {
               self.postMessage({
-                type: 'phase',
-                payload: { phase, id }
-              })
-              lastPhase = phase
+                type: "phase",
+                payload: { phase, id },
+              });
+              lastPhase = phase;
             }
 
             // Emit standardized progress
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
                 phase,
                 progress: total > 0 ? (current / total) * 100 : 0,
                 detail: isDownload
-                  ? { current, total, unit: 'bytes' as const }
+                  ? { current, total, unit: "bytes" as const }
                   : undefined,
-                id
-              }
-            })
-          }
-        }
+                id,
+              },
+            });
+          },
+        };
 
         // Start in process phase - download phase only emitted if library fetches model
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id }
-        })
-        lastPhase = 'process'
+          type: "phase",
+          payload: { phase: "process", id },
+        });
+        lastPhase = "process";
 
         // Call the appropriate function based on output type
-        let resultBlob: Blob
+        let resultBlob: Blob;
         switch (outputType) {
-          case 'foreground':
-            resultBlob = await removeBackground(imageBlob, config)
-            break
-          case 'background':
-            resultBlob = await removeForeground(imageBlob, config)
-            break
-          case 'mask':
-            resultBlob = await segmentForeground(imageBlob, config)
-            break
+          case "foreground":
+            resultBlob = await removeBackground(imageBlob, config);
+            break;
+          case "background":
+            resultBlob = await removeForeground(imageBlob, config);
+            break;
+          case "mask":
+            resultBlob = await segmentForeground(imageBlob, config);
+            break;
           default:
-            resultBlob = await removeBackground(imageBlob, config)
+            resultBlob = await removeBackground(imageBlob, config);
         }
 
         // Convert blob to ArrayBuffer for transfer
-        const arrayBuffer = await resultBlob.arrayBuffer()
+        const arrayBuffer = await resultBlob.arrayBuffer();
 
         self.postMessage(
           {
-            type: 'result',
-            payload: { arrayBuffer, id }
+            type: "result",
+            payload: { arrayBuffer, id },
           },
-          { transfer: [arrayBuffer] }
-        )
-        break
+          { transfer: [arrayBuffer] },
+        );
+        break;
       }
 
-      case 'processAll': {
+      case "processAll": {
         const { imageBlob, model, id } = payload as {
-          imageBlob: Blob
-          model: ModelType
-          id: number
-        }
+          imageBlob: Blob;
+          model: ModelType;
+          id: number;
+        };
 
         // Reset phase tracking
-        lastPhase = ''
+        lastPhase = "";
 
         // Auto-detect GPU support
-        const hasGpu = typeof navigator !== 'undefined' && 'gpu' in navigator
+        const hasGpu = typeof navigator !== "undefined" && "gpu" in navigator;
 
         // Total operations for progress calculation
-        const totalOps = 3
-        const downloadWeight = 10 // Download is 10% of total progress
-        const processWeight = 90 // Processing is 90% of total progress
-        const perOpWeight = processWeight / totalOps // 30% per operation
+        const totalOps = 3;
+        const downloadWeight = 10; // Download is 10% of total progress
+        const processWeight = 90; // Processing is 90% of total progress
+        const perOpWeight = processWeight / totalOps; // 30% per operation
 
         const createConfig = (opIndex: number): Config => ({
           model,
-          device: hasGpu ? 'gpu' : 'cpu',
+          device: hasGpu ? "gpu" : "cpu",
           output: {
-            format: 'image/png',
-            quality: 1
+            format: "image/png",
+            quality: 1,
           },
           progress: (key: string, current: number, total: number) => {
-            const isDownload = key.startsWith('fetch')
-            const phase = isDownload ? 'download' : 'process'
+            const isDownload = key.startsWith("fetch");
+            const phase = isDownload ? "download" : "process";
 
             if (phase !== lastPhase) {
               self.postMessage({
-                type: 'phase',
-                payload: { phase, id }
-              })
-              lastPhase = phase
+                type: "phase",
+                payload: { phase, id },
+              });
+              lastPhase = phase;
             }
 
             // Calculate progress using opIndex for deterministic mapping:
             // Download: 0-10%, Op 0: 10-40%, Op 1: 40-70%, Op 2: 70-100%
-            let overallProgress: number
+            let overallProgress: number;
             if (isDownload) {
               // Download progress scales to first 10%
-              overallProgress = total > 0 ? (current / total) * downloadWeight : 0
+              overallProgress =
+                total > 0 ? (current / total) * downloadWeight : 0;
             } else {
               // Each operation gets equal share of remaining 90%
-              const opProgress = total > 0 ? (current / total) * 100 : 0
-              overallProgress = downloadWeight + (opIndex * perOpWeight) + (opProgress / 100 * perOpWeight)
+              const opProgress = total > 0 ? (current / total) * 100 : 0;
+              overallProgress =
+                downloadWeight +
+                opIndex * perOpWeight +
+                (opProgress / 100) * perOpWeight;
             }
 
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
                 phase,
                 progress: Math.min(overallProgress, 100),
                 detail: isDownload
-                  ? { current, total, unit: 'bytes' as const }
+                  ? { current, total, unit: "bytes" as const }
                   : undefined,
-                id
-              }
-            })
-          }
-        })
+                id,
+              },
+            });
+          },
+        });
 
         // Start in process phase - download phase only emitted if library fetches model
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id }
-        })
-        lastPhase = 'process'
+          type: "phase",
+          payload: { phase: "process", id },
+        });
+        lastPhase = "process";
 
         // Process all three outputs (model is cached after first call)
-        const foregroundBlob = await removeBackground(imageBlob, createConfig(0))
-        const backgroundBlob = await removeForeground(imageBlob, createConfig(1))
-        const maskBlob = await segmentForeground(imageBlob, createConfig(2))
+        const foregroundBlob = await removeBackground(
+          imageBlob,
+          createConfig(0),
+        );
+        const backgroundBlob = await removeForeground(
+          imageBlob,
+          createConfig(1),
+        );
+        const maskBlob = await segmentForeground(imageBlob, createConfig(2));
 
         // Convert blobs to ArrayBuffers for transfer
-        const foregroundBuffer = await foregroundBlob.arrayBuffer()
-        const backgroundBuffer = await backgroundBlob.arrayBuffer()
-        const maskBuffer = await maskBlob.arrayBuffer()
+        const foregroundBuffer = await foregroundBlob.arrayBuffer();
+        const backgroundBuffer = await backgroundBlob.arrayBuffer();
+        const maskBuffer = await maskBlob.arrayBuffer();
 
         self.postMessage(
           {
-            type: 'resultAll',
+            type: "resultAll",
             payload: {
               foreground: foregroundBuffer,
               background: backgroundBuffer,
               mask: maskBuffer,
-              id
-            }
+              id,
+            },
           },
-          { transfer: [foregroundBuffer, backgroundBuffer, maskBuffer] }
-        )
-        break
+          { transfer: [foregroundBuffer, backgroundBuffer, maskBuffer] },
+        );
+        break;
       }
 
-      case 'dispose': {
+      case "dispose": {
         // Clean up if needed (library handles its own cleanup)
-        self.postMessage({ type: 'disposed' })
-        break
+        self.postMessage({ type: "disposed" });
+        break;
       }
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/src/workers/faceEnhancer.worker.ts b/src/workers/faceEnhancer.worker.ts
index 910044d7..dd6a2c95 100644
--- a/src/workers/faceEnhancer.worker.ts
+++ b/src/workers/faceEnhancer.worker.ts
@@ -5,114 +5,120 @@
  * Face parsing uses @huggingface/transformers pipeline
  */
 
-import * as ort from 'onnxruntime-web'
-import { pipeline, env, RawImage } from '@huggingface/transformers'
-import { FACE_LABELS } from '@/lib/faceParsingUtils'
+import * as ort from "onnxruntime-web";
+import { pipeline, env, RawImage } from "@huggingface/transformers";
+import { FACE_LABELS } from "@/lib/faceParsingUtils";
 import {
   initWebGPU,
   gaussianBlur,
   erodeMask,
-  disposeWebGPU
-} from './webgpuCompute'
+  disposeWebGPU,
+} from "./webgpuCompute";
 
 // Configure transformers.js
-env.allowLocalModels = false
+env.allowLocalModels = false;
 
 // Configure WASM paths to use CDN
-const ORT_WASM_VERSION = '1.21.0'
-ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`
+const ORT_WASM_VERSION = "1.21.0";
+ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`;
 
 // Track which backend is being used
-let useWebGPU = false
+let useWebGPU = false;
 
 /**
  * Check if WebGPU is available
  */
 async function checkWebGPU(): Promise<boolean> {
   try {
-    if (!navigator.gpu) return false
-    const adapter = await navigator.gpu.requestAdapter()
-    return adapter !== null
+    if (!navigator.gpu) return false;
+    const adapter = await navigator.gpu.requestAdapter();
+    return adapter !== null;
   } catch {
-    return false
+    return false;
   }
 }
 
 // Model URLs
-const YOLO_MODEL_URL = 'https://huggingface.co/deepghs/yolo-face/resolve/main/yolov8n-face/model.onnx'
-const GFPGAN_MODEL_URL = 'https://huggingface.co/facefusion/models-3.0.0/resolve/main/gfpgan_1.4.onnx'
+const YOLO_MODEL_URL =
+  "https://huggingface.co/deepghs/yolo-face/resolve/main/yolov8n-face/model.onnx";
+const GFPGAN_MODEL_URL =
+  "https://huggingface.co/facefusion/models-3.0.0/resolve/main/gfpgan_1.4.onnx";
 
 // Model sizes
-const YOLO_INPUT_SIZE = 640
-const GFPGAN_INPUT_SIZE = 512
+const YOLO_INPUT_SIZE = 640;
+const GFPGAN_INPUT_SIZE = 512;
 
 // Detection thresholds
-const CONFIDENCE_THRESHOLD = 0.35
-const IOU_THRESHOLD = 0.45
+const CONFIDENCE_THRESHOLD = 0.35;
+const IOU_THRESHOLD = 0.45;
 
 // Cache names
-const CACHE_NAME = 'face-enhancer-models'
+const CACHE_NAME = "face-enhancer-models";
 
 // ONNX sessions
-let yoloSession: ort.InferenceSession | null = null
-let gfpganSession: ort.InferenceSession | null = null
+let yoloSession: ort.InferenceSession | null = null;
+let gfpganSession: ort.InferenceSession | null = null;
 
 // Face parsing segmenter (using transformers.js pipeline)
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-let segmenter: any = null
+let segmenter: any = null;
 
 /**
  * Safely dispose an ONNX tensor to free memory
  * The dispose method exists at runtime but isn't in TypeScript types
  */
 function disposeTensor(tensor: ort.Tensor): void {
-  (tensor as unknown as { dispose?: () => void }).dispose?.()
+  (tensor as unknown as { dispose?: () => void }).dispose?.();
 }
 
 interface FaceBox {
-  x: number
-  y: number
-  width: number
-  height: number
-  confidence: number
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  confidence: number;
 }
 
 interface WorkerMessage {
-  type: 'init' | 'enhance' | 'dispose'
+  type: "init" | "enhance" | "dispose";
   payload?: {
-    imageData?: Float32Array
-    width?: number
-    height?: number
-    id?: number
-    timeout?: number // in milliseconds
-  }
+    imageData?: Float32Array;
+    width?: number;
+    height?: number;
+    id?: number;
+    timeout?: number; // in milliseconds
+  };
 }
 
 // Default timeout (60 minutes)
-const DEFAULT_TIMEOUT = 3600000
+const DEFAULT_TIMEOUT = 3600000;
 
 /**
  * Feather mask edges using Gaussian blur (auto-fallback to CPU if GPU unavailable)
  */
-async function featherMask(mask: Uint8Array, size: number, featherRadius: number): Promise<Uint8Array> {
-  const kernelSize = featherRadius * 2 + 1
+async function featherMask(
+  mask: Uint8Array,
+  size: number,
+  featherRadius: number,
+): Promise<Uint8Array> {
+  const kernelSize = featherRadius * 2 + 1;
 
   // Convert mask to Float32Array for processing
-  const floatMask = new Float32Array(mask.length)
+  const floatMask = new Float32Array(mask.length);
   for (let i = 0; i < mask.length; i++) {
-    floatMask[i] = mask[i]
+    floatMask[i] = mask[i];
   }
 
   // Apply Gaussian blur (auto-fallback to CPU if GPU unavailable)
-  const blurred = await gaussianBlur(floatMask, size, size, kernelSize)
+  const blurred = await gaussianBlur(floatMask, size, size, kernelSize);
 
   // Convert back to Uint8Array
-  const result = new Uint8Array(mask.length)
+  const result = new Uint8Array(mask.length);
   for (let i = 0; i < mask.length; i++) {
-    result[i] = Math.round(Math.max(0, Math.min(255, blurred[i])))
+    result[i] = Math.round(Math.max(0, Math.min(255, blurred[i])));
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -121,89 +127,93 @@ async function featherMask(mask: Uint8Array, size: number, featherRadius: number
 async function downloadModel(
   url: string,
   onProgress: (current: number, total: number) => void,
-  timeout: number = DEFAULT_TIMEOUT
+  timeout: number = DEFAULT_TIMEOUT,
 ): Promise<ArrayBuffer> {
   // Try to get from cache first
-  const cache = await caches.open(CACHE_NAME)
-  const cachedResponse = await cache.match(url)
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(url);
 
   if (cachedResponse) {
-    const buffer = await cachedResponse.arrayBuffer()
-    onProgress(buffer.byteLength, buffer.byteLength)
-    return buffer
+    const buffer = await cachedResponse.arrayBuffer();
+    onProgress(buffer.byteLength, buffer.byteLength);
+    return buffer;
   }
 
   // Download with progress and configurable timeout
-  const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), timeout)
-  const timeoutSeconds = Math.round(timeout / 1000)
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+  const timeoutSeconds = Math.round(timeout / 1000);
 
   try {
     const response = await fetch(url, {
       headers: { Origin: self.location.origin },
-      signal: controller.signal
-    })
+      signal: controller.signal,
+    });
 
     if (!response.ok) {
-      throw new Error(`Failed to download model: ${response.status}`)
+      throw new Error(`Failed to download model: ${response.status}`);
     }
 
-    const contentLength = response.headers.get('content-length')
-    const total = contentLength ? parseInt(contentLength, 10) : 0
+    const contentLength = response.headers.get("content-length");
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
 
-    const reader = response.body?.getReader()
+    const reader = response.body?.getReader();
     if (!reader) {
-      throw new Error('Failed to get response reader')
+      throw new Error("Failed to get response reader");
     }
 
-    const chunks: Uint8Array[] = []
-    let received = 0
+    const chunks: Uint8Array[] = [];
+    let received = 0;
 
     while (true) {
       // Check if aborted during streaming
       if (controller.signal.aborted) {
-        reader.cancel()
-        throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+        reader.cancel();
+        throw new Error(
+          `Model download timed out after ${timeoutSeconds} seconds`,
+        );
       }
 
-      const { done, value } = await reader.read()
-      if (done) break
+      const { done, value } = await reader.read();
+      if (done) break;
 
-      chunks.push(value)
-      received += value.length
-      onProgress(received, total)
+      chunks.push(value);
+      received += value.length;
+      onProgress(received, total);
     }
 
-    clearTimeout(timeoutId)
+    clearTimeout(timeoutId);
 
     // Combine chunks
-    const buffer = new Uint8Array(received)
-    let position = 0
+    const buffer = new Uint8Array(received);
+    let position = 0;
     for (const chunk of chunks) {
-      buffer.set(chunk, position)
-      position += chunk.length
+      buffer.set(chunk, position);
+      position += chunk.length;
     }
 
     // Cache the model
     try {
       const cacheResponse = new Response(buffer.buffer, {
         headers: {
-          'Content-Type': 'application/octet-stream',
-          'Content-Length': buffer.byteLength.toString()
-        }
-      })
-      await cache.put(url, cacheResponse)
+          "Content-Type": "application/octet-stream",
+          "Content-Length": buffer.byteLength.toString(),
+        },
+      });
+      await cache.put(url, cacheResponse);
     } catch (e) {
-      console.warn('Failed to cache model:', e)
+      console.warn("Failed to cache model:", e);
     }
 
-    return buffer.buffer
+    return buffer.buffer;
   } catch (error) {
-    clearTimeout(timeoutId)
-    if ((error as Error).name === 'AbortError') {
-      throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+    clearTimeout(timeoutId);
+    if ((error as Error).name === "AbortError") {
+      throw new Error(
+        `Model download timed out after ${timeoutSeconds} seconds`,
+      );
     }
-    throw error
+    throw error;
   }
 }
 
@@ -211,36 +221,40 @@ async function downloadModel(
  * Check if model is cached
  */
 async function isModelCached(url: string): Promise<boolean> {
-  const cache = await caches.open(CACHE_NAME)
-  const cachedResponse = await cache.match(url)
-  return cachedResponse !== undefined
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(url);
+  return cachedResponse !== undefined;
 }
 
 /**
  * Initialize ONNX session with WebGPU (fallback to WASM)
  */
-async function createSession(modelBuffer: ArrayBuffer): Promise<ort.InferenceSession> {
+async function createSession(
+  modelBuffer: ArrayBuffer,
+): Promise<ort.InferenceSession> {
   // Try WebGPU first if available
   if (useWebGPU) {
     try {
       return await ort.InferenceSession.create(modelBuffer, {
-        executionProviders: ['webgpu'],
-        graphOptimizationLevel: 'all'
-      })
+        executionProviders: ["webgpu"],
+        graphOptimizationLevel: "all",
+      });
     } catch (e) {
-      const errorMsg = e instanceof Error ? e.message : String(e)
-      console.warn(`WebGPU session creation failed, falling back to WASM. Reason: ${errorMsg}`)
-      useWebGPU = false
+      const errorMsg = e instanceof Error ? e.message : String(e);
+      console.warn(
+        `WebGPU session creation failed, falling back to WASM. Reason: ${errorMsg}`,
+      );
+      useWebGPU = false;
     }
   }
 
   // Fallback to WASM
   return await ort.InferenceSession.create(modelBuffer, {
-    executionProviders: ['wasm'],
-    graphOptimizationLevel: 'all',
+    executionProviders: ["wasm"],
+    graphOptimizationLevel: "all",
     enableCpuMemArena: true,
-    executionMode: 'parallel'
-  })
+    executionMode: "parallel",
+  });
 }
 
 /**
@@ -250,100 +264,103 @@ function letterboxResize(
   imageData: Float32Array,
   srcW: number,
   srcH: number,
-  targetSize: number
+  targetSize: number,
 ): { data: Float32Array; scale: number; padX: number; padY: number } {
   // Calculate scale to fit target size
-  const scale = Math.min(targetSize / srcW, targetSize / srcH)
-  const newW = Math.round(srcW * scale)
-  const newH = Math.round(srcH * scale)
+  const scale = Math.min(targetSize / srcW, targetSize / srcH);
+  const newW = Math.round(srcW * scale);
+  const newH = Math.round(srcH * scale);
 
   // Calculate padding
-  const padX = (targetSize - newW) / 2
-  const padY = (targetSize - newH) / 2
+  const padX = (targetSize - newW) / 2;
+  const padY = (targetSize - newH) / 2;
 
   // Create output array (filled with 0.5 for gray padding, normalized)
-  const output = new Float32Array(3 * targetSize * targetSize)
-  output.fill(0.5)
+  const output = new Float32Array(3 * targetSize * targetSize);
+  output.fill(0.5);
 
   // Bilinear resize and place in center
-  const padXInt = Math.floor(padX)
-  const padYInt = Math.floor(padY)
+  const padXInt = Math.floor(padX);
+  const padYInt = Math.floor(padY);
 
   for (let c = 0; c < 3; c++) {
     for (let y = 0; y < newH; y++) {
       for (let x = 0; x < newW; x++) {
         // Map to source coordinates
-        const srcX = x / scale
-        const srcY = y / scale
+        const srcX = x / scale;
+        const srcY = y / scale;
 
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, srcW - 1)
-        const y1 = Math.min(y0 + 1, srcH - 1)
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, srcW - 1);
+        const y1 = Math.min(y0 + 1, srcH - 1);
 
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
 
         // Bilinear interpolation from HWC input
-        const v00 = imageData[(y0 * srcW + x0) * 3 + c]
-        const v10 = imageData[(y0 * srcW + x1) * 3 + c]
-        const v01 = imageData[(y1 * srcW + x0) * 3 + c]
-        const v11 = imageData[(y1 * srcW + x1) * 3 + c]
+        const v00 = imageData[(y0 * srcW + x0) * 3 + c];
+        const v10 = imageData[(y0 * srcW + x1) * 3 + c];
+        const v01 = imageData[(y1 * srcW + x0) * 3 + c];
+        const v11 = imageData[(y1 * srcW + x1) * 3 + c];
 
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
 
         // Output in CHW format, normalized to [0, 1]
-        const outIdx = c * targetSize * targetSize + (padYInt + y) * targetSize + (padXInt + x)
-        output[outIdx] = v
+        const outIdx =
+          c * targetSize * targetSize +
+          (padYInt + y) * targetSize +
+          (padXInt + x);
+        output[outIdx] = v;
       }
     }
   }
 
-  return { data: output, scale, padX, padY }
+  return { data: output, scale, padX, padY };
 }
 
 /**
  * Non-Maximum Suppression
  */
 function nms(boxes: FaceBox[], iouThreshold: number): FaceBox[] {
-  if (boxes.length === 0) return []
+  if (boxes.length === 0) return [];
 
   // Sort by confidence descending
-  const sorted = [...boxes].sort((a, b) => b.confidence - a.confidence)
-  const selected: FaceBox[] = []
+  const sorted = [...boxes].sort((a, b) => b.confidence - a.confidence);
+  const selected: FaceBox[] = [];
 
   while (sorted.length > 0) {
-    const best = sorted.shift()!
-    selected.push(best)
+    const best = sorted.shift()!;
+    selected.push(best);
 
     // Remove boxes with high IoU
     for (let i = sorted.length - 1; i >= 0; i--) {
       if (iou(best, sorted[i]) > iouThreshold) {
-        sorted.splice(i, 1)
+        sorted.splice(i, 1);
       }
     }
   }
 
-  return selected
+  return selected;
 }
 
 /**
  * Calculate IoU between two boxes
  */
 function iou(a: FaceBox, b: FaceBox): number {
-  const x1 = Math.max(a.x, b.x)
-  const y1 = Math.max(a.y, b.y)
-  const x2 = Math.min(a.x + a.width, b.x + b.width)
-  const y2 = Math.min(a.y + a.height, b.y + b.height)
+  const x1 = Math.max(a.x, b.x);
+  const y1 = Math.max(a.y, b.y);
+  const x2 = Math.min(a.x + a.width, b.x + b.width);
+  const y2 = Math.min(a.y + a.height, b.y + b.height);
 
-  const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1)
-  const aArea = a.width * a.height
-  const bArea = b.width * b.height
-  const union = aArea + bArea - intersection
+  const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
+  const aArea = a.width * a.height;
+  const bArea = b.width * b.height;
+  const union = aArea + bArea - intersection;
 
-  return intersection / union
+  return intersection / union;
 }
 
 /**
@@ -355,36 +372,36 @@ function parseYoloOutput(
   imgH: number,
   scale: number,
   padX: number,
-  padY: number
+  padY: number,
 ): FaceBox[] {
-  const boxes: FaceBox[] = []
+  const boxes: FaceBox[] = [];
 
   // YOLOv8 output shape: [1, 5, num_detections] - transposed format
   // Rows: x_center, y_center, width, height, confidence
-  const numDetections = output.length / 5
+  const numDetections = output.length / 5;
 
   for (let i = 0; i < numDetections; i++) {
-    const confidence = output[4 * numDetections + i]
+    const confidence = output[4 * numDetections + i];
 
-    if (confidence < CONFIDENCE_THRESHOLD) continue
+    if (confidence < CONFIDENCE_THRESHOLD) continue;
 
     // Get box coordinates (in model input space)
-    const xCenter = output[0 * numDetections + i]
-    const yCenter = output[1 * numDetections + i]
-    const width = output[2 * numDetections + i]
-    const height = output[3 * numDetections + i]
+    const xCenter = output[0 * numDetections + i];
+    const yCenter = output[1 * numDetections + i];
+    const width = output[2 * numDetections + i];
+    const height = output[3 * numDetections + i];
 
     // Convert from model input space to original image space
-    const x = (xCenter - padX) / scale - width / (2 * scale)
-    const y = (yCenter - padY) / scale - height / (2 * scale)
-    const w = width / scale
-    const h = height / scale
+    const x = (xCenter - padX) / scale - width / (2 * scale);
+    const y = (yCenter - padY) / scale - height / (2 * scale);
+    const w = width / scale;
+    const h = height / scale;
 
     // Clamp to image bounds
-    const clampedX = Math.max(0, Math.min(x, imgW))
-    const clampedY = Math.max(0, Math.min(y, imgH))
-    const clampedW = Math.min(w, imgW - clampedX)
-    const clampedH = Math.min(h, imgH - clampedY)
+    const clampedX = Math.max(0, Math.min(x, imgW));
+    const clampedY = Math.max(0, Math.min(y, imgH));
+    const clampedW = Math.min(w, imgW - clampedX);
+    const clampedH = Math.min(h, imgH - clampedY);
 
     if (clampedW > 0 && clampedH > 0) {
       boxes.push({
@@ -392,12 +409,12 @@ function parseYoloOutput(
         y: clampedY,
         width: clampedW,
         height: clampedH,
-        confidence
-      })
+        confidence,
+      });
     }
   }
 
-  return nms(boxes, IOU_THRESHOLD)
+  return nms(boxes, IOU_THRESHOLD);
 }
 
 /**
@@ -406,35 +423,45 @@ function parseYoloOutput(
 async function detectFaces(
   imageData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): Promise<FaceBox[]> {
-  if (!yoloSession) throw new Error('YOLO session not initialized')
+  if (!yoloSession) throw new Error("YOLO session not initialized");
 
   // Letterbox resize to 640x640
-  const { data, scale, padX, padY } = letterboxResize(imageData, width, height, YOLO_INPUT_SIZE)
+  const { data, scale, padX, padY } = letterboxResize(
+    imageData,
+    width,
+    height,
+    YOLO_INPUT_SIZE,
+  );
 
   // Create tensor
-  const inputTensor = new ort.Tensor('float32', data, [1, 3, YOLO_INPUT_SIZE, YOLO_INPUT_SIZE])
+  const inputTensor = new ort.Tensor("float32", data, [
+    1,
+    3,
+    YOLO_INPUT_SIZE,
+    YOLO_INPUT_SIZE,
+  ]);
 
   // Run inference - use actual input name from model
-  const inputName = yoloSession.inputNames[0]
-  const results = await yoloSession.run({ [inputName]: inputTensor })
+  const inputName = yoloSession.inputNames[0];
+  const results = await yoloSession.run({ [inputName]: inputTensor });
 
   // Dispose input tensor to free memory
-  disposeTensor(inputTensor)
+  disposeTensor(inputTensor);
 
   // Get output - YOLOv8 uses 'output0' as output name
-  const outputName = Object.keys(results)[0]
-  const output = results[outputName].data as Float32Array
+  const outputName = Object.keys(results)[0];
+  const output = results[outputName].data as Float32Array;
 
   // Copy output data before disposing
-  const outputCopy = new Float32Array(output)
+  const outputCopy = new Float32Array(output);
 
   // Dispose output tensor to free memory
-  disposeTensor(results[outputName])
+  disposeTensor(results[outputName]);
 
   // Parse boxes
-  return parseYoloOutput(outputCopy, width, height, scale, padX, padY)
+  return parseYoloOutput(outputCopy, width, height, scale, padX, padY);
 }
 
 /**
@@ -446,96 +473,104 @@ function cropAndResizeFace(
   imgH: number,
   box: FaceBox,
   targetSize: number,
-  padding: number = 0.2
-): { data: Float32Array; cropBox: { x: number; y: number; w: number; h: number } } {
+  padding: number = 0.2,
+): {
+  data: Float32Array;
+  cropBox: { x: number; y: number; w: number; h: number };
+} {
   // Expand box with padding
-  const expandW = box.width * padding
-  const expandH = box.height * padding
+  const expandW = box.width * padding;
+  const expandH = box.height * padding;
 
-  let cropX = box.x - expandW
-  let cropY = box.y - expandH
-  let cropW = box.width + expandW * 2
-  let cropH = box.height + expandH * 2
+  let cropX = box.x - expandW;
+  let cropY = box.y - expandH;
+  let cropW = box.width + expandW * 2;
+  let cropH = box.height + expandH * 2;
 
   // Make square (use larger dimension)
-  const size = Math.max(cropW, cropH)
-  cropX = cropX - (size - cropW) / 2
-  cropY = cropY - (size - cropH) / 2
-  cropW = size
-  cropH = size
+  const size = Math.max(cropW, cropH);
+  cropX = cropX - (size - cropW) / 2;
+  cropY = cropY - (size - cropH) / 2;
+  cropW = size;
+  cropH = size;
 
   // Clamp to image bounds
-  cropX = Math.max(0, cropX)
-  cropY = Math.max(0, cropY)
-  cropW = Math.min(cropW, imgW - cropX)
-  cropH = Math.min(cropH, imgH - cropY)
+  cropX = Math.max(0, cropX);
+  cropY = Math.max(0, cropY);
+  cropW = Math.min(cropW, imgW - cropX);
+  cropH = Math.min(cropH, imgH - cropY);
 
   // Create output in CHW format, normalized to [-1, 1] for GFPGAN
-  const output = new Float32Array(3 * targetSize * targetSize)
+  const output = new Float32Array(3 * targetSize * targetSize);
 
   for (let c = 0; c < 3; c++) {
     for (let y = 0; y < targetSize; y++) {
       for (let x = 0; x < targetSize; x++) {
         // Map to crop coordinates
-        const srcX = cropX + (x / targetSize) * cropW
-        const srcY = cropY + (y / targetSize) * cropH
+        const srcX = cropX + (x / targetSize) * cropW;
+        const srcY = cropY + (y / targetSize) * cropH;
 
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, imgW - 1)
-        const y1 = Math.min(y0 + 1, imgH - 1)
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, imgW - 1);
+        const y1 = Math.min(y0 + 1, imgH - 1);
 
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
 
         // Bilinear interpolation from HWC input
-        const v00 = imageData[(y0 * imgW + x0) * 3 + c]
-        const v10 = imageData[(y0 * imgW + x1) * 3 + c]
-        const v01 = imageData[(y1 * imgW + x0) * 3 + c]
-        const v11 = imageData[(y1 * imgW + x1) * 3 + c]
+        const v00 = imageData[(y0 * imgW + x0) * 3 + c];
+        const v10 = imageData[(y0 * imgW + x1) * 3 + c];
+        const v01 = imageData[(y1 * imgW + x0) * 3 + c];
+        const v11 = imageData[(y1 * imgW + x1) * 3 + c];
 
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        let v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        let v = v0 * (1 - yFrac) + v1 * yFrac;
 
         // Normalize to [-1, 1]: (v - 0.5) / 0.5
-        v = (v - 0.5) / 0.5
+        v = (v - 0.5) / 0.5;
 
-        output[c * targetSize * targetSize + y * targetSize + x] = v
+        output[c * targetSize * targetSize + y * targetSize + x] = v;
       }
     }
   }
 
-  return { data: output, cropBox: { x: cropX, y: cropY, w: cropW, h: cropH } }
+  return { data: output, cropBox: { x: cropX, y: cropY, w: cropW, h: cropH } };
 }
 
 /**
  * Enhance a single face using GFPGAN
  */
 async function enhanceFace(faceData: Float32Array): Promise<Float32Array> {
-  if (!gfpganSession) throw new Error('GFPGAN session not initialized')
+  if (!gfpganSession) throw new Error("GFPGAN session not initialized");
 
   // Create tensor
-  const inputTensor = new ort.Tensor('float32', faceData, [1, 3, GFPGAN_INPUT_SIZE, GFPGAN_INPUT_SIZE])
+  const inputTensor = new ort.Tensor("float32", faceData, [
+    1,
+    3,
+    GFPGAN_INPUT_SIZE,
+    GFPGAN_INPUT_SIZE,
+  ]);
 
   // Run inference - use actual input name from model
-  const inputName = gfpganSession.inputNames[0]
-  const results = await gfpganSession.run({ [inputName]: inputTensor })
+  const inputName = gfpganSession.inputNames[0];
+  const results = await gfpganSession.run({ [inputName]: inputTensor });
 
   // Dispose input tensor to free memory
-  disposeTensor(inputTensor)
+  disposeTensor(inputTensor);
 
   // Get output
-  const outputName = Object.keys(results)[0]
-  const outputData = results[outputName].data as Float32Array
+  const outputName = Object.keys(results)[0];
+  const outputData = results[outputName].data as Float32Array;
 
   // Copy output data before disposing
-  const output = new Float32Array(outputData)
+  const output = new Float32Array(outputData);
 
   // Dispose output tensor to free memory
-  disposeTensor(results[outputName])
+  disposeTensor(results[outputName]);
 
-  return output
+  return output;
 }
 
 /**
@@ -548,95 +583,95 @@ async function parseFace(
   imgW: number,
   imgH: number,
   faceBox: FaceBox,
-  outputSize: number = GFPGAN_INPUT_SIZE
+  outputSize: number = GFPGAN_INPUT_SIZE,
 ): Promise<Uint8Array> {
-  if (!segmenter) throw new Error('Face segmenter not initialized')
+  if (!segmenter) throw new Error("Face segmenter not initialized");
 
   // Crop face with padding (10%)
-  const padding = 0.1
-  const expandW = faceBox.width * padding
-  const expandH = faceBox.height * padding
+  const padding = 0.1;
+  const expandW = faceBox.width * padding;
+  const expandH = faceBox.height * padding;
 
-  let cropX = faceBox.x - expandW
-  let cropY = faceBox.y - expandH
-  let cropW = faceBox.width + expandW * 2
-  let cropH = faceBox.height + expandH * 2
+  let cropX = faceBox.x - expandW;
+  let cropY = faceBox.y - expandH;
+  let cropW = faceBox.width + expandW * 2;
+  let cropH = faceBox.height + expandH * 2;
 
   // Make square
-  const squareSize = Math.max(cropW, cropH)
-  cropX = cropX - (squareSize - cropW) / 2
-  cropY = cropY - (squareSize - cropH) / 2
-  cropW = squareSize
-  cropH = squareSize
+  const squareSize = Math.max(cropW, cropH);
+  cropX = cropX - (squareSize - cropW) / 2;
+  cropY = cropY - (squareSize - cropH) / 2;
+  cropW = squareSize;
+  cropH = squareSize;
 
   // Clamp to image bounds
-  cropX = Math.max(0, cropX)
-  cropY = Math.max(0, cropY)
-  cropW = Math.min(cropW, imgW - cropX)
-  cropH = Math.min(cropH, imgH - cropY)
+  cropX = Math.max(0, cropX);
+  cropY = Math.max(0, cropY);
+  cropW = Math.min(cropW, imgW - cropX);
+  cropH = Math.min(cropH, imgH - cropY);
 
   // Create cropped image as Uint8Array RGBA for RawImage
-  const cropSize = outputSize // Use output size directly
-  const rgbaData = new Uint8Array(cropSize * cropSize * 4)
+  const cropSize = outputSize; // Use output size directly
+  const rgbaData = new Uint8Array(cropSize * cropSize * 4);
 
   for (let y = 0; y < cropSize; y++) {
     for (let x = 0; x < cropSize; x++) {
       // Map to crop coordinates
-      const srcX = cropX + (x / cropSize) * cropW
-      const srcY = cropY + (y / cropSize) * cropH
+      const srcX = cropX + (x / cropSize) * cropW;
+      const srcY = cropY + (y / cropSize) * cropH;
 
-      const x0 = Math.floor(srcX)
-      const y0 = Math.floor(srcY)
-      const x1 = Math.min(x0 + 1, imgW - 1)
-      const y1 = Math.min(y0 + 1, imgH - 1)
+      const x0 = Math.floor(srcX);
+      const y0 = Math.floor(srcY);
+      const x1 = Math.min(x0 + 1, imgW - 1);
+      const y1 = Math.min(y0 + 1, imgH - 1);
 
-      const xFrac = srcX - x0
-      const yFrac = srcY - y0
+      const xFrac = srcX - x0;
+      const yFrac = srcY - y0;
 
-      const outIdx = (y * cropSize + x) * 4
+      const outIdx = (y * cropSize + x) * 4;
 
       for (let c = 0; c < 3; c++) {
         // Bilinear interpolation from HWC input [0,1]
-        const v00 = originalData[(y0 * imgW + x0) * 3 + c]
-        const v10 = originalData[(y0 * imgW + x1) * 3 + c]
-        const v01 = originalData[(y1 * imgW + x0) * 3 + c]
-        const v11 = originalData[(y1 * imgW + x1) * 3 + c]
+        const v00 = originalData[(y0 * imgW + x0) * 3 + c];
+        const v10 = originalData[(y0 * imgW + x1) * 3 + c];
+        const v01 = originalData[(y1 * imgW + x0) * 3 + c];
+        const v11 = originalData[(y1 * imgW + x1) * 3 + c];
 
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
 
         // Convert [0,1] to [0,255]
-        rgbaData[outIdx + c] = Math.round(v * 255)
+        rgbaData[outIdx + c] = Math.round(v * 255);
       }
-      rgbaData[outIdx + 3] = 255 // Alpha
+      rgbaData[outIdx + 3] = 255; // Alpha
     }
   }
 
   // Create RawImage directly from RGBA data
-  const image = new RawImage(rgbaData, cropSize, cropSize, 4)
-  const results = await segmenter(image)
+  const image = new RawImage(rgbaData, cropSize, cropSize, 4);
+  const results = await segmenter(image);
 
   // Combine face region masks
-  const mask = new Uint8Array(outputSize * outputSize)
+  const mask = new Uint8Array(outputSize * outputSize);
 
   for (const segment of results) {
     // Handle labels that might have .png extension (e.g., 'skin.png' -> 'skin')
-    const label = segment.label.replace(/\.png$/i, '')
+    const label = segment.label.replace(/\.png$/i, "");
     if (FACE_LABELS.has(label)) {
-      const segMask = segment.mask
-      const maskData = segMask.data as Uint8Array
-      const maskW = segMask.width
-      const maskH = segMask.height
+      const segMask = segment.mask;
+      const maskData = segMask.data as Uint8Array;
+      const maskW = segMask.width;
+      const maskH = segMask.height;
 
       for (let y = 0; y < outputSize; y++) {
         for (let x = 0; x < outputSize; x++) {
-          const srcX = (x / outputSize) * maskW
-          const srcY = (y / outputSize) * maskH
-          const srcIdx = Math.floor(srcY) * maskW + Math.floor(srcX)
+          const srcX = (x / outputSize) * maskW;
+          const srcY = (y / outputSize) * maskH;
+          const srcIdx = Math.floor(srcY) * maskW + Math.floor(srcX);
 
           if (maskData[srcIdx] > 0) {
-            mask[y * outputSize + x] = 255
+            mask[y * outputSize + x] = 255;
           }
         }
       }
@@ -644,20 +679,20 @@ async function parseFace(
   }
 
   // Erode mask to shrink face region (prevents hair bleed-through)
-  const maskFloat = new Float32Array(mask.length)
+  const maskFloat = new Float32Array(mask.length);
   for (let i = 0; i < mask.length; i++) {
-    maskFloat[i] = mask[i]
+    maskFloat[i] = mask[i];
   }
-  const erodedMask = await erodeMask(maskFloat, outputSize, outputSize, 7)
-  const erodedUint8 = new Uint8Array(mask.length)
+  const erodedMask = await erodeMask(maskFloat, outputSize, outputSize, 7);
+  const erodedUint8 = new Uint8Array(mask.length);
   for (let i = 0; i < mask.length; i++) {
-    erodedUint8[i] = Math.max(0, Math.round(erodedMask[i]))
+    erodedUint8[i] = Math.max(0, Math.round(erodedMask[i]));
   }
 
   // Apply feathering to mask edges
-  const featheredMask = await featherMask(erodedUint8, outputSize, 4)
+  const featheredMask = await featherMask(erodedUint8, outputSize, 4);
 
-  return featheredMask
+  return featheredMask;
 }
 
 /**
@@ -671,76 +706,102 @@ function pasteEnhancedFaceWithMask(
   imgW: number,
   imgH: number,
   cropBox: { x: number; y: number; w: number; h: number },
-  edgeFeatherSize: number = 8
+  edgeFeatherSize: number = 8,
 ): Float32Array {
-  const result = new Float32Array(originalData)
-  const { x: cropX, y: cropY, w: cropW, h: cropH } = cropBox
+  const result = new Float32Array(originalData);
+  const { x: cropX, y: cropY, w: cropW, h: cropH } = cropBox;
 
   for (let y = 0; y < imgH; y++) {
     for (let x = 0; x < imgW; x++) {
       // Check if pixel is in crop region
       if (x >= cropX && x < cropX + cropW && y >= cropY && y < cropY + cropH) {
         // Map to enhanced face coordinates (512x512)
-        const faceX = ((x - cropX) / cropW) * GFPGAN_INPUT_SIZE
-        const faceY = ((y - cropY) / cropH) * GFPGAN_INPUT_SIZE
+        const faceX = ((x - cropX) / cropW) * GFPGAN_INPUT_SIZE;
+        const faceY = ((y - cropY) / cropH) * GFPGAN_INPUT_SIZE;
 
-        const fx0 = Math.floor(faceX)
-        const fy0 = Math.floor(faceY)
-        const fx1 = Math.min(fx0 + 1, GFPGAN_INPUT_SIZE - 1)
-        const fy1 = Math.min(fy0 + 1, GFPGAN_INPUT_SIZE - 1)
+        const fx0 = Math.floor(faceX);
+        const fy0 = Math.floor(faceY);
+        const fx1 = Math.min(fx0 + 1, GFPGAN_INPUT_SIZE - 1);
+        const fy1 = Math.min(fy0 + 1, GFPGAN_INPUT_SIZE - 1);
 
-        const xFrac = faceX - fx0
-        const yFrac = faceY - fy0
+        const xFrac = faceX - fx0;
+        const yFrac = faceY - fy0;
 
         // Get mask alpha from semantic segmentation (bilinear interpolation)
-        const m00 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx0]
-        const m10 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx1]
-        const m01 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx0]
-        const m11 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx1]
+        const m00 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx0];
+        const m10 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx1];
+        const m01 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx0];
+        const m11 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx1];
 
-        const m0 = m00 * (1 - xFrac) + m10 * xFrac
-        const m1 = m01 * (1 - xFrac) + m11 * xFrac
-        let maskAlpha = (m0 * (1 - yFrac) + m1 * yFrac) / 255
+        const m0 = m00 * (1 - xFrac) + m10 * xFrac;
+        const m1 = m01 * (1 - xFrac) + m11 * xFrac;
+        let maskAlpha = (m0 * (1 - yFrac) + m1 * yFrac) / 255;
 
         // Apply additional edge feathering at crop boundaries
-        const distToLeft = x - cropX
-        const distToRight = cropX + cropW - 1 - x
-        const distToTop = y - cropY
-        const distToBottom = cropY + cropH - 1 - y
-        const minDist = Math.min(distToLeft, distToRight, distToTop, distToBottom)
-        const edgeFactor = Math.min(1.0, minDist / edgeFeatherSize)
+        const distToLeft = x - cropX;
+        const distToRight = cropX + cropW - 1 - x;
+        const distToTop = y - cropY;
+        const distToBottom = cropY + cropH - 1 - y;
+        const minDist = Math.min(
+          distToLeft,
+          distToRight,
+          distToTop,
+          distToBottom,
+        );
+        const edgeFactor = Math.min(1.0, minDist / edgeFeatherSize);
 
         // Combine mask alpha with edge feathering
-        const blendFactor = maskAlpha * edgeFactor
+        const blendFactor = maskAlpha * edgeFactor;
 
         if (blendFactor > 0) {
           for (let c = 0; c < 3; c++) {
             // Bilinear interpolation from enhanced face (CHW format)
-            const v00 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy0 * GFPGAN_INPUT_SIZE + fx0]
-            const v10 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy0 * GFPGAN_INPUT_SIZE + fx1]
-            const v01 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy1 * GFPGAN_INPUT_SIZE + fx0]
-            const v11 = enhancedFace[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy1 * GFPGAN_INPUT_SIZE + fx1]
-
-            const v0 = v00 * (1 - xFrac) + v10 * xFrac
-            const v1 = v01 * (1 - xFrac) + v11 * xFrac
-            let enhanced = v0 * (1 - yFrac) + v1 * yFrac
+            const v00 =
+              enhancedFace[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy0 * GFPGAN_INPUT_SIZE +
+                  fx0
+              ];
+            const v10 =
+              enhancedFace[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy0 * GFPGAN_INPUT_SIZE +
+                  fx1
+              ];
+            const v01 =
+              enhancedFace[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy1 * GFPGAN_INPUT_SIZE +
+                  fx0
+              ];
+            const v11 =
+              enhancedFace[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy1 * GFPGAN_INPUT_SIZE +
+                  fx1
+              ];
+
+            const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+            const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+            let enhanced = v0 * (1 - yFrac) + v1 * yFrac;
 
             // Denormalize from [-1, 1] to [0, 1]
-            enhanced = (enhanced + 1) / 2
-            enhanced = Math.max(0, Math.min(1, enhanced))
+            enhanced = (enhanced + 1) / 2;
+            enhanced = Math.max(0, Math.min(1, enhanced));
 
             // Blend with original using combined mask and edge factor
-            const origIdx = (y * imgW + x) * 3 + c
-            const original = originalData[origIdx]
+            const origIdx = (y * imgW + x) * 3 + c;
+            const original = originalData[origIdx];
 
-            result[origIdx] = original * (1 - blendFactor) + enhanced * blendFactor
+            result[origIdx] =
+              original * (1 - blendFactor) + enhanced * blendFactor;
           }
         }
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -750,24 +811,24 @@ async function processImage(
   imageData: Float32Array,
   width: number,
   height: number,
-  onProgress: (progress: number, faces?: number) => void
+  onProgress: (progress: number, faces?: number) => void,
 ): Promise<{ result: Float32Array; faceCount: number }> {
   // Detect faces
-  onProgress(10)
-  const faces = await detectFaces(imageData, width, height)
+  onProgress(10);
+  const faces = await detectFaces(imageData, width, height);
 
   if (faces.length === 0) {
-    return { result: new Float32Array(imageData), faceCount: 0 }
+    return { result: new Float32Array(imageData), faceCount: 0 };
   }
 
-  onProgress(20, faces.length)
+  onProgress(20, faces.length);
 
   // Enhance each face
-  let result: Float32Array = new Float32Array(imageData)
-  const progressPerFace = 80 / faces.length
+  let result: Float32Array = new Float32Array(imageData);
+  const progressPerFace = 80 / faces.length;
 
   for (let i = 0; i < faces.length; i++) {
-    const face = faces[i]
+    const face = faces[i];
 
     // Crop and resize face
     const { data: faceData, cropBox } = cropAndResizeFace(
@@ -776,202 +837,257 @@ async function processImage(
       height,
       face,
       GFPGAN_INPUT_SIZE,
-      0.3
-    )
+      0.3,
+    );
 
     // Generate face mask using semantic segmentation (from original image with tighter crop)
-    const faceMask = await parseFace(imageData, width, height, face, GFPGAN_INPUT_SIZE)
+    const faceMask = await parseFace(
+      imageData,
+      width,
+      height,
+      face,
+      GFPGAN_INPUT_SIZE,
+    );
 
     // Enhance face
-    const enhancedFace = await enhanceFace(faceData)
+    const enhancedFace = await enhanceFace(faceData);
 
     // Paste back with mask-based blending
-    result = pasteEnhancedFaceWithMask(result, enhancedFace, faceMask, width, height, cropBox)
+    result = pasteEnhancedFaceWithMask(
+      result,
+      enhancedFace,
+      faceMask,
+      width,
+      height,
+      cropBox,
+    );
 
-    onProgress(20 + (i + 1) * progressPerFace, faces.length)
+    onProgress(20 + (i + 1) * progressPerFace, faces.length);
   }
 
-  return { result, faceCount: faces.length }
+  return { result, faceCount: faces.length };
 }
 
 /**
  * Handle incoming messages
  */
 self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   switch (type) {
-    case 'init': {
+    case "init": {
       try {
         // Reuse existing sessions if already initialized
         if (yoloSession && gfpganSession && segmenter) {
-          console.log('Face Enhancer models already loaded, reusing sessions')
-          self.postMessage({ type: 'ready', payload: { id: payload?.id } })
-          break
+          console.log("Face Enhancer models already loaded, reusing sessions");
+          self.postMessage({ type: "ready", payload: { id: payload?.id } });
+          break;
         }
 
         // Get timeout from payload
-        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT
+        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT;
 
         // Check for WebGPU support
-        useWebGPU = await checkWebGPU()
-        console.log(`Face Enhancer using ${useWebGPU ? 'WebGPU' : 'WASM'} backend`)
+        useWebGPU = await checkWebGPU();
+        console.log(
+          `Face Enhancer using ${useWebGPU ? "WebGPU" : "WASM"} backend`,
+        );
 
         // Initialize WebGPU compute for accelerated mask processing
         if (useWebGPU) {
-          const gpuInitialized = await initWebGPU()
-          console.log(`WebGPU compute: ${gpuInitialized ? 'enabled' : 'disabled'}`)
+          const gpuInitialized = await initWebGPU();
+          console.log(
+            `WebGPU compute: ${gpuInitialized ? "enabled" : "disabled"}`,
+          );
         }
 
         // Check if models are cached
-        const yoloCached = await isModelCached(YOLO_MODEL_URL)
-        const gfpganCached = await isModelCached(GFPGAN_MODEL_URL)
+        const yoloCached = await isModelCached(YOLO_MODEL_URL);
+        const gfpganCached = await isModelCached(GFPGAN_MODEL_URL);
 
-        let totalProgress = 0
+        let totalProgress = 0;
         // Progress weights based on model sizes: YOLO ~12MB, GFPGAN ~340MB
         // Face-parsing is handled by transformers.js which manages its own caching
-        const yoloWeight = 0.03 // ~3%
-        const gfpganWeight = 0.97 // ~97%
+        const yoloWeight = 0.03; // ~3%
+        const gfpganWeight = 0.97; // ~97%
 
         // Download/load YOLO model
         if (!yoloCached) {
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id: payload?.id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
         }
 
-        const yoloBuffer = await downloadModel(YOLO_MODEL_URL, (current, total) => {
-          const progress = total > 0 ? (current / total) * yoloWeight * 100 : 0
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: yoloCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
-        totalProgress = yoloWeight * 100
+        const yoloBuffer = await downloadModel(
+          YOLO_MODEL_URL,
+          (current, total) => {
+            const progress =
+              total > 0 ? (current / total) * yoloWeight * 100 : 0;
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: yoloCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
+        totalProgress = yoloWeight * 100;
 
         // Download/load GFPGAN model
         if (!gfpganCached) {
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id: payload?.id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
         }
 
-        const gfpganBuffer = await downloadModel(GFPGAN_MODEL_URL, (current, total) => {
-          const progress = totalProgress + (total > 0 ? (current / total) * gfpganWeight * 100 : 0)
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: gfpganCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
+        const gfpganBuffer = await downloadModel(
+          GFPGAN_MODEL_URL,
+          (current, total) => {
+            const progress =
+              totalProgress +
+              (total > 0 ? (current / total) * gfpganWeight * 100 : 0);
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: gfpganCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
 
         // Create ONNX sessions
-        self.postMessage({ type: 'phase', payload: { phase: 'loading', id: payload?.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "loading", id: payload?.id },
+        });
 
-        yoloSession = await createSession(yoloBuffer)
-        gfpganSession = await createSession(gfpganBuffer)
+        yoloSession = await createSession(yoloBuffer);
+        gfpganSession = await createSession(gfpganBuffer);
 
         // Initialize face-parsing segmenter using transformers.js pipeline
         // This will download/cache the model automatically on first use
-        segmenter = await pipeline('image-segmentation', 'Xenova/face-parsing', {
-          device: useWebGPU ? 'webgpu' : 'wasm'
-        })
+        segmenter = await pipeline(
+          "image-segmentation",
+          "Xenova/face-parsing",
+          {
+            device: useWebGPU ? "webgpu" : "wasm",
+          },
+        );
 
-        self.postMessage({ type: 'ready', payload: { id: payload?.id } })
+        self.postMessage({ type: "ready", payload: { id: payload?.id } });
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to initialize models'
-        })
+          type: "error",
+          payload:
+            error instanceof Error
+              ? error.message
+              : "Failed to initialize models",
+        });
       }
-      break
+      break;
     }
 
-    case 'enhance': {
+    case "enhance": {
       if (!payload?.imageData || !payload?.width || !payload?.height) {
-        self.postMessage({ type: 'error', payload: 'Missing image data' })
-        return
+        self.postMessage({ type: "error", payload: "Missing image data" });
+        return;
       }
 
       try {
         // Phase: detect
-        self.postMessage({ type: 'phase', payload: { phase: 'detect', id: payload.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "detect", id: payload.id },
+        });
 
-        let faceCount = 0
+        let faceCount = 0;
 
         const { result, faceCount: count } = await processImage(
           payload.imageData,
           payload.width,
           payload.height,
           (progress, faces) => {
-            if (faces !== undefined) faceCount = faces
+            if (faces !== undefined) faceCount = faces;
             // Switch to enhance phase after detection
             if (progress >= 20 && faceCount > 0) {
-              self.postMessage({ type: 'phase', payload: { phase: 'enhance', id: payload.id } })
+              self.postMessage({
+                type: "phase",
+                payload: { phase: "enhance", id: payload.id },
+              });
             }
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: progress < 20 ? 'detect' : 'enhance',
+                phase: progress < 20 ? "detect" : "enhance",
                 progress,
-                id: payload.id
-              }
-            })
-          }
-        )
+                id: payload.id,
+              },
+            });
+          },
+        );
 
-        faceCount = count
+        faceCount = count;
 
         // Send result
         self.postMessage(
           {
-            type: 'result',
+            type: "result",
             payload: {
               data: result,
               width: payload.width,
               height: payload.height,
               faces: faceCount,
-              id: payload.id
-            }
+              id: payload.id,
+            },
           },
-          { transfer: [result.buffer] }
-        )
+          { transfer: [result.buffer] },
+        );
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to enhance image'
-        })
+          type: "error",
+          payload:
+            error instanceof Error ? error.message : "Failed to enhance image",
+        });
       }
-      break
+      break;
     }
 
-    case 'dispose': {
+    case "dispose": {
       // Properly release ONNX sessions to free GPU/WASM memory
       try {
         if (yoloSession) {
-          await yoloSession.release()
-          yoloSession = null
+          await yoloSession.release();
+          yoloSession = null;
         }
         if (gfpganSession) {
-          await gfpganSession.release()
-          gfpganSession = null
+          await gfpganSession.release();
+          gfpganSession = null;
         }
-        if (segmenter && typeof segmenter.dispose === 'function') {
-          await segmenter.dispose()
+        if (segmenter && typeof segmenter.dispose === "function") {
+          await segmenter.dispose();
         }
-        segmenter = null
+        segmenter = null;
         // Dispose WebGPU resources
-        disposeWebGPU()
+        disposeWebGPU();
       } catch (e) {
-        console.warn('Error disposing sessions:', e)
+        console.warn("Error disposing sessions:", e);
       }
-      self.postMessage({ type: 'disposed' })
-      break
+      self.postMessage({ type: "disposed" });
+      break;
     }
   }
-}
+};
diff --git a/src/workers/faceSwapper.worker.ts b/src/workers/faceSwapper.worker.ts
index 42757ea9..a38d0ba6 100644
--- a/src/workers/faceSwapper.worker.ts
+++ b/src/workers/faceSwapper.worker.ts
@@ -7,9 +7,9 @@
  * All models run via ONNX Runtime (WebGPU with WASM fallback)
  */
 
-import * as ort from 'onnxruntime-web'
-import { pipeline, env, RawImage } from '@huggingface/transformers'
-import { FACE_LABELS, featherMask } from '@/lib/faceParsingUtils'
+import * as ort from "onnxruntime-web";
+import { pipeline, env, RawImage } from "@huggingface/transformers";
+import { FACE_LABELS, featherMask } from "@/lib/faceParsingUtils";
 import {
   initWebGPU,
   isWebGPUAvailable,
@@ -18,18 +18,18 @@ import {
   erodeMask,
   dilateMask,
   colorMatch,
-  disposeWebGPU
-} from './webgpuCompute'
+  disposeWebGPU,
+} from "./webgpuCompute";
 
 // Configure transformers.js
-env.allowLocalModels = false
+env.allowLocalModels = false;
 
 // Configure WASM paths to use CDN
-const ORT_WASM_VERSION = '1.21.0'
-ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`
+const ORT_WASM_VERSION = "1.21.0";
+ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`;
 
 // Track which backend is being used
-let useWebGPU = false
+let useWebGPU = false;
 
 /**
  * Check if WebGPU is available
@@ -37,125 +37,130 @@ let useWebGPU = false
 async function checkWebGPU(): Promise<boolean> {
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const gpu = (navigator as any).gpu
-    if (!gpu) return false
-    const adapter = await gpu.requestAdapter()
-    return adapter !== null
+    const gpu = (navigator as any).gpu;
+    if (!gpu) return false;
+    const adapter = await gpu.requestAdapter();
+    return adapter !== null;
   } catch {
-    return false
+    return false;
   }
 }
 
 // Model URLs
-const DET_10G_MODEL_URL = 'https://huggingface.co/wavespeed/misc/resolve/main/inswapper/det_10g_patched.onnx'
-const ARCFACE_MODEL_URL = 'https://huggingface.co/fofr/comfyui/resolve/main/insightface/models/buffalo_l/w600k_r50.onnx'
+const DET_10G_MODEL_URL =
+  "https://huggingface.co/wavespeed/misc/resolve/main/inswapper/det_10g_patched.onnx";
+const ARCFACE_MODEL_URL =
+  "https://huggingface.co/fofr/comfyui/resolve/main/insightface/models/buffalo_l/w600k_r50.onnx";
 // Full precision model required - fp16 version produces distorted results
-const INSWAPPER_MODEL_URL = 'https://huggingface.co/ezioruan/inswapper_128.onnx/resolve/main/inswapper_128.onnx'
-const EMAP_URL = 'https://huggingface.co/wavespeed/misc/resolve/main/inswapper/emap.bin'
-const GFPGAN_MODEL_URL = 'https://huggingface.co/facefusion/models-3.0.0/resolve/main/gfpgan_1.4.onnx'
+const INSWAPPER_MODEL_URL =
+  "https://huggingface.co/ezioruan/inswapper_128.onnx/resolve/main/inswapper_128.onnx";
+const EMAP_URL =
+  "https://huggingface.co/wavespeed/misc/resolve/main/inswapper/emap.bin";
+const GFPGAN_MODEL_URL =
+  "https://huggingface.co/facefusion/models-3.0.0/resolve/main/gfpgan_1.4.onnx";
 
 // Model sizes (approximate, for progress weight calculation)
 const MODEL_SIZES = {
-  det10g: 17,    // ~17MB (det_10g from InsightFace)
-  arcface: 174,  // ~174MB
+  det10g: 17, // ~17MB (det_10g from InsightFace)
+  arcface: 174, // ~174MB
   inswapper: 554, // ~554MB (full precision)
-  emap: 1,       // ~1MB (embedding transformation matrix)
-  gfpgan: 340    // ~340MB
-}
+  emap: 1, // ~1MB (embedding transformation matrix)
+  gfpgan: 340, // ~340MB
+};
 
 // Model input sizes
-const DET_INPUT_SIZE = 640
-const ARCFACE_INPUT_SIZE = 112
-const INSWAPPER_INPUT_SIZE = 128
-const GFPGAN_INPUT_SIZE = 512
+const DET_INPUT_SIZE = 640;
+const ARCFACE_INPUT_SIZE = 112;
+const INSWAPPER_INPUT_SIZE = 128;
+const GFPGAN_INPUT_SIZE = 512;
 
 // Detection thresholds
-const CONFIDENCE_THRESHOLD = 0.35
-const NMS_THRESHOLD = 0.4
+const CONFIDENCE_THRESHOLD = 0.35;
+const NMS_THRESHOLD = 0.4;
 
 // Cache names
-const CACHE_NAME = 'face-swapper-models'  // For arcface, inswapper
-const FACE_ENHANCER_CACHE = 'face-enhancer-models'  // Shared with faceEnhancer for GFPGAN
+const CACHE_NAME = "face-swapper-models"; // For arcface, inswapper
+const FACE_ENHANCER_CACHE = "face-enhancer-models"; // Shared with faceEnhancer for GFPGAN
 
 // ONNX sessions
-let det10gSession: ort.InferenceSession | null = null
-let arcfaceSession: ort.InferenceSession | null = null
-let inswapperSession: ort.InferenceSession | null = null
-let gfpganSession: ort.InferenceSession | null = null
+let det10gSession: ort.InferenceSession | null = null;
+let arcfaceSession: ort.InferenceSession | null = null;
+let inswapperSession: ort.InferenceSession | null = null;
+let gfpganSession: ort.InferenceSession | null = null;
 
 // Track enhancement preference (persists across init calls)
-let enhancementEnabled = false
+let enhancementEnabled = false;
 
 // Face parsing segmenter (using transformers.js pipeline)
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-let segmenter: any = null
+let segmenter: any = null;
 
 // EMAP matrix for embedding transformation (extracted from inswapper model)
-let emapMatrix: Float32Array | null = null
+let emapMatrix: Float32Array | null = null;
 
 /**
  * Safely dispose an ONNX tensor to free memory
  * The dispose method exists at runtime but isn't in TypeScript types
  */
 function disposeTensor(tensor: ort.Tensor): void {
-  (tensor as unknown as { dispose?: () => void }).dispose?.()
+  (tensor as unknown as { dispose?: () => void }).dispose?.();
 }
 
 // Standard ArcFace destination landmarks for 112x112 aligned face
 // These are the target positions for the 5 facial landmarks
 const ARCFACE_DST_112 = [
-  [38.2946, 51.6963],  // left eye
-  [73.5318, 51.5014],  // right eye
-  [56.0252, 71.7366],  // nose tip
-  [41.5493, 92.3655],  // left mouth corner
-  [70.7299, 92.2041]   // right mouth corner
-]
+  [38.2946, 51.6963], // left eye
+  [73.5318, 51.5014], // right eye
+  [56.0252, 71.7366], // nose tip
+  [41.5493, 92.3655], // left mouth corner
+  [70.7299, 92.2041], // right mouth corner
+];
 
 // Destination landmarks for 128x128 inswapper input
 // InsightFace adds 8.0 to x coordinates for 128x128 (not scaled!)
 // See: insightface/utils/face_align.py estimate_norm()
 const INSWAPPER_DST_128 = ARCFACE_DST_112.map(([x, y]) => [
-  x + 8.0,  // Add 8 to x (centers the face in 128x128)
-  y         // Y stays the same
-])
+  x + 8.0, // Add 8 to x (centers the face in 128x128)
+  y, // Y stays the same
+]);
 
 interface FaceBox {
-  x: number
-  y: number
-  width: number
-  height: number
-  confidence: number
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  confidence: number;
 }
 
 interface DetectedFace {
-  box: FaceBox
-  landmarks: number[][] // 5-point: [left_eye, right_eye, nose, left_mouth, right_mouth]
-  index: number
+  box: FaceBox;
+  landmarks: number[][]; // 5-point: [left_eye, right_eye, nose, left_mouth, right_mouth]
+  index: number;
 }
 
 interface WorkerMessage {
-  type: 'init' | 'detect' | 'swap' | 'dispose'
+  type: "init" | "detect" | "swap" | "dispose";
   payload?: {
-    imageData?: Float32Array
-    width?: number
-    height?: number
-    imageId?: 'source' | 'target'
-    id?: number
-    timeout?: number
-    enableEnhancement?: boolean
-    sourceImage?: Float32Array
-    sourceWidth?: number
-    sourceHeight?: number
-    sourceLandmarks?: number[][]
-    targetImage?: Float32Array
-    targetWidth?: number
-    targetHeight?: number
-    targetFaces?: { landmarks: number[][]; box: FaceBox }[]
-  }
+    imageData?: Float32Array;
+    width?: number;
+    height?: number;
+    imageId?: "source" | "target";
+    id?: number;
+    timeout?: number;
+    enableEnhancement?: boolean;
+    sourceImage?: Float32Array;
+    sourceWidth?: number;
+    sourceHeight?: number;
+    sourceLandmarks?: number[][];
+    targetImage?: Float32Array;
+    targetWidth?: number;
+    targetHeight?: number;
+    targetFaces?: { landmarks: number[][]; box: FaceBox }[];
+  };
 }
 
 // Default timeout (60 minutes)
-const DEFAULT_TIMEOUT = 3600000
+const DEFAULT_TIMEOUT = 3600000;
 
 /**
  * Download model with progress tracking
@@ -164,146 +169,160 @@ async function downloadModel(
   url: string,
   onProgress: (current: number, total: number) => void,
   timeout: number = DEFAULT_TIMEOUT,
-  cacheName: string = CACHE_NAME
+  cacheName: string = CACHE_NAME,
 ): Promise<ArrayBuffer> {
-  const cache = await caches.open(cacheName)
-  const cachedResponse = await cache.match(url)
+  const cache = await caches.open(cacheName);
+  const cachedResponse = await cache.match(url);
 
   if (cachedResponse) {
-    const buffer = await cachedResponse.arrayBuffer()
-    onProgress(buffer.byteLength, buffer.byteLength)
-    return buffer
+    const buffer = await cachedResponse.arrayBuffer();
+    onProgress(buffer.byteLength, buffer.byteLength);
+    return buffer;
   }
 
-  const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), timeout)
-  const timeoutSeconds = Math.round(timeout / 1000)
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+  const timeoutSeconds = Math.round(timeout / 1000);
 
   try {
     const response = await fetch(url, {
-      signal: controller.signal
-    })
+      signal: controller.signal,
+    });
 
     if (!response.ok) {
-      throw new Error(`Failed to download model: ${response.status}`)
+      throw new Error(`Failed to download model: ${response.status}`);
     }
 
-    const contentLength = response.headers.get('content-length')
-    const total = contentLength ? parseInt(contentLength, 10) : 0
+    const contentLength = response.headers.get("content-length");
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
 
-    const reader = response.body?.getReader()
+    const reader = response.body?.getReader();
     if (!reader) {
-      throw new Error('Failed to get response reader')
+      throw new Error("Failed to get response reader");
     }
 
-    const chunks: Uint8Array[] = []
-    let received = 0
+    const chunks: Uint8Array[] = [];
+    let received = 0;
 
     while (true) {
       if (controller.signal.aborted) {
-        reader.cancel()
-        throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+        reader.cancel();
+        throw new Error(
+          `Model download timed out after ${timeoutSeconds} seconds`,
+        );
       }
 
-      const { done, value } = await reader.read()
-      if (done) break
+      const { done, value } = await reader.read();
+      if (done) break;
 
-      chunks.push(value)
-      received += value.length
-      onProgress(received, total)
+      chunks.push(value);
+      received += value.length;
+      onProgress(received, total);
     }
 
-    clearTimeout(timeoutId)
+    clearTimeout(timeoutId);
 
-    const buffer = new Uint8Array(received)
-    let position = 0
+    const buffer = new Uint8Array(received);
+    let position = 0;
     for (const chunk of chunks) {
-      buffer.set(chunk, position)
-      position += chunk.length
+      buffer.set(chunk, position);
+      position += chunk.length;
     }
 
     try {
       const cacheResponse = new Response(buffer.buffer, {
         headers: {
-          'Content-Type': 'application/octet-stream',
-          'Content-Length': buffer.byteLength.toString()
-        }
-      })
-      await cache.put(url, cacheResponse)
+          "Content-Type": "application/octet-stream",
+          "Content-Length": buffer.byteLength.toString(),
+        },
+      });
+      await cache.put(url, cacheResponse);
     } catch (e) {
-      console.warn('Failed to cache model:', e)
+      console.warn("Failed to cache model:", e);
     }
 
-    return buffer.buffer
+    return buffer.buffer;
   } catch (error) {
-    clearTimeout(timeoutId)
-    if ((error as Error).name === 'AbortError') {
-      throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+    clearTimeout(timeoutId);
+    if ((error as Error).name === "AbortError") {
+      throw new Error(
+        `Model download timed out after ${timeoutSeconds} seconds`,
+      );
     }
-    throw error
+    throw error;
   }
 }
 
 /**
  * Check if model is cached
  */
-async function isModelCached(url: string, cacheName: string = CACHE_NAME): Promise<boolean> {
-  const cache = await caches.open(cacheName)
-  const cachedResponse = await cache.match(url)
-  return cachedResponse !== undefined
+async function isModelCached(
+  url: string,
+  cacheName: string = CACHE_NAME,
+): Promise<boolean> {
+  const cache = await caches.open(cacheName);
+  const cachedResponse = await cache.match(url);
+  return cachedResponse !== undefined;
 }
 
 /**
  * Initialize ONNX session with WebGPU (fallback to WASM)
  */
-async function createSession(modelBuffer: ArrayBuffer): Promise<ort.InferenceSession> {
+async function createSession(
+  modelBuffer: ArrayBuffer,
+): Promise<ort.InferenceSession> {
   if (useWebGPU) {
     try {
       return await ort.InferenceSession.create(modelBuffer, {
-        executionProviders: ['webgpu'],
-        graphOptimizationLevel: 'all'
-      })
+        executionProviders: ["webgpu"],
+        graphOptimizationLevel: "all",
+      });
     } catch (e) {
-      const errorMsg = e instanceof Error ? e.message : String(e)
-      console.warn(`WebGPU session creation failed, falling back to WASM. Reason: ${errorMsg}`)
-      useWebGPU = false
+      const errorMsg = e instanceof Error ? e.message : String(e);
+      console.warn(
+        `WebGPU session creation failed, falling back to WASM. Reason: ${errorMsg}`,
+      );
+      useWebGPU = false;
     }
   }
 
   return await ort.InferenceSession.create(modelBuffer, {
-    executionProviders: ['wasm'],
-    graphOptimizationLevel: 'all',
+    executionProviders: ["wasm"],
+    graphOptimizationLevel: "all",
     enableCpuMemArena: true,
-    executionMode: 'parallel'
-  })
+    executionMode: "parallel",
+  });
 }
 
 /**
  * Transform embedding using EMAP matrix
  * This is required by inswapper to properly interpret ArcFace embeddings
  */
-function transformEmbedding(embedding: Float32Array, emap: Float32Array): Float32Array {
-  const result = new Float32Array(512)
+function transformEmbedding(
+  embedding: Float32Array,
+  emap: Float32Array,
+): Float32Array {
+  const result = new Float32Array(512);
 
   // Matrix multiplication: result = embedding @ emap
   // embedding is [512], emap is [512, 512], result is [512]
   for (let i = 0; i < 512; i++) {
-    let sum = 0
+    let sum = 0;
     for (let j = 0; j < 512; j++) {
-      sum += embedding[j] * emap[j * 512 + i]
+      sum += embedding[j] * emap[j * 512 + i];
     }
-    result[i] = sum
+    result[i] = sum;
   }
 
   // Normalize to unit length
-  const norm = Math.sqrt(result.reduce((s, v) => s + v * v, 0))
+  const norm = Math.sqrt(result.reduce((s, v) => s + v * v, 0));
   if (norm > 0) {
     for (let i = 0; i < 512; i++) {
-      result[i] /= norm
+      result[i] /= norm;
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -313,68 +332,71 @@ function letterboxResize(
   imageData: Float32Array,
   srcW: number,
   srcH: number,
-  targetSize: number
+  targetSize: number,
 ): { data: Float32Array; scale: number; padX: number; padY: number } {
-  const scale = Math.min(targetSize / srcW, targetSize / srcH)
-  const newW = Math.round(srcW * scale)
-  const newH = Math.round(srcH * scale)
+  const scale = Math.min(targetSize / srcW, targetSize / srcH);
+  const newW = Math.round(srcW * scale);
+  const newH = Math.round(srcH * scale);
 
-  const padX = (targetSize - newW) / 2
-  const padY = (targetSize - newH) / 2
+  const padX = (targetSize - newW) / 2;
+  const padY = (targetSize - newH) / 2;
 
-  const output = new Float32Array(3 * targetSize * targetSize)
-  output.fill(0.5)
+  const output = new Float32Array(3 * targetSize * targetSize);
+  output.fill(0.5);
 
-  const padXInt = Math.floor(padX)
-  const padYInt = Math.floor(padY)
+  const padXInt = Math.floor(padX);
+  const padYInt = Math.floor(padY);
 
   for (let c = 0; c < 3; c++) {
     for (let y = 0; y < newH; y++) {
       for (let x = 0; x < newW; x++) {
-        const srcX = x / scale
-        const srcY = y / scale
-
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, srcW - 1)
-        const y1 = Math.min(y0 + 1, srcH - 1)
-
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
-
-        const v00 = imageData[(y0 * srcW + x0) * 3 + c]
-        const v10 = imageData[(y0 * srcW + x1) * 3 + c]
-        const v01 = imageData[(y1 * srcW + x0) * 3 + c]
-        const v11 = imageData[(y1 * srcW + x1) * 3 + c]
-
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
-
-        const outIdx = c * targetSize * targetSize + (padYInt + y) * targetSize + (padXInt + x)
-        output[outIdx] = v
+        const srcX = x / scale;
+        const srcY = y / scale;
+
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, srcW - 1);
+        const y1 = Math.min(y0 + 1, srcH - 1);
+
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
+
+        const v00 = imageData[(y0 * srcW + x0) * 3 + c];
+        const v10 = imageData[(y0 * srcW + x1) * 3 + c];
+        const v01 = imageData[(y1 * srcW + x0) * 3 + c];
+        const v11 = imageData[(y1 * srcW + x1) * 3 + c];
+
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
+
+        const outIdx =
+          c * targetSize * targetSize +
+          (padYInt + y) * targetSize +
+          (padXInt + x);
+        output[outIdx] = v;
       }
     }
   }
 
-  return { data: output, scale, padX, padY }
+  return { data: output, scale, padX, padY };
 }
 
 /**
  * Calculate IoU between two boxes
  */
 function iou(a: FaceBox, b: FaceBox): number {
-  const x1 = Math.max(a.x, b.x)
-  const y1 = Math.max(a.y, b.y)
-  const x2 = Math.min(a.x + a.width, b.x + b.width)
-  const y2 = Math.min(a.y + a.height, b.y + b.height)
+  const x1 = Math.max(a.x, b.x);
+  const y1 = Math.max(a.y, b.y);
+  const x2 = Math.min(a.x + a.width, b.x + b.width);
+  const y2 = Math.min(a.y + a.height, b.y + b.height);
 
-  const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1)
-  const aArea = a.width * a.height
-  const bArea = b.width * b.height
-  const union = aArea + bArea - intersection
+  const intersection = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
+  const aArea = a.width * a.height;
+  const bArea = b.width * b.height;
+  const union = aArea + bArea - intersection;
 
-  return intersection / union
+  return intersection / union;
 }
 
 /**
@@ -382,30 +404,30 @@ function iou(a: FaceBox, b: FaceBox): number {
  */
 function nmsWithIndices(
   faces: Array<{ box: FaceBox; landmarks: number[][] }>,
-  iouThreshold: number
+  iouThreshold: number,
 ): number[] {
-  if (faces.length === 0) return []
+  if (faces.length === 0) return [];
 
   // Create indexed array and sort by confidence descending
-  const indexed = faces.map((f, i) => ({ ...f, idx: i }))
-  indexed.sort((a, b) => b.box.confidence - a.box.confidence)
+  const indexed = faces.map((f, i) => ({ ...f, idx: i }));
+  indexed.sort((a, b) => b.box.confidence - a.box.confidence);
 
-  const selectedIndices: number[] = []
-  const remaining = [...indexed]
+  const selectedIndices: number[] = [];
+  const remaining = [...indexed];
 
   while (remaining.length > 0) {
-    const best = remaining.shift()!
-    selectedIndices.push(best.idx)
+    const best = remaining.shift()!;
+    selectedIndices.push(best.idx);
 
     // Remove overlapping faces
     for (let i = remaining.length - 1; i >= 0; i--) {
       if (iou(best.box, remaining[i].box) > iouThreshold) {
-        remaining.splice(i, 1)
+        remaining.splice(i, 1);
       }
     }
   }
 
-  return selectedIndices
+  return selectedIndices;
 }
 
 /**
@@ -421,129 +443,139 @@ function nmsWithIndices(
 async function detectFacesWithLandmarks(
   imageData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): Promise<DetectedFace[]> {
-  if (!det10gSession) throw new Error('det_10g session not initialized')
-
-  const { data, scale, padX, padY } = letterboxResize(imageData, width, height, DET_INPUT_SIZE)
-  const inputTensor = new ort.Tensor('float32', data, [1, 3, DET_INPUT_SIZE, DET_INPUT_SIZE])
+  if (!det10gSession) throw new Error("det_10g session not initialized");
+
+  const { data, scale, padX, padY } = letterboxResize(
+    imageData,
+    width,
+    height,
+    DET_INPUT_SIZE,
+  );
+  const inputTensor = new ort.Tensor("float32", data, [
+    1,
+    3,
+    DET_INPUT_SIZE,
+    DET_INPUT_SIZE,
+  ]);
 
   // Get input name
-  const inputName = det10gSession.inputNames[0]
-  const results = await det10gSession.run({ [inputName]: inputTensor })
+  const inputName = det10gSession.inputNames[0];
+  const results = await det10gSession.run({ [inputName]: inputTensor });
 
   // Dispose input tensor to free memory
-  disposeTensor(inputTensor)
+  disposeTensor(inputTensor);
 
   // SCRFD outputs 9 tensors grouped by stride level
-  const outputNames = Object.keys(results)
+  const outputNames = Object.keys(results);
 
   // Collect all detections from all stride levels
-  const allFaces: { box: FaceBox; landmarks: number[][] }[] = []
+  const allFaces: { box: FaceBox; landmarks: number[][] }[] = [];
 
   // SCRFD strides and their feature map sizes for 640x640 input
-  const strides = [8, 16, 32]
-  const numAnchorsPerPos = 2
+  const strides = [8, 16, 32];
+  const numAnchorsPerPos = 2;
 
   // Group outputs by last dimension (1=score, 4=bbox, 10=kps)
-  const scoreOutputs: { data: Float32Array; dims: number[] }[] = []
-  const bboxOutputs: { data: Float32Array; dims: number[] }[] = []
-  const kpsOutputs: { data: Float32Array; dims: number[] }[] = []
+  const scoreOutputs: { data: Float32Array; dims: number[] }[] = [];
+  const bboxOutputs: { data: Float32Array; dims: number[] }[] = [];
+  const kpsOutputs: { data: Float32Array; dims: number[] }[] = [];
 
   for (const name of outputNames) {
-    const output = results[name]
-    const outputData = output.data as Float32Array
-    const dims = output.dims as number[]
-    const lastDim = dims[dims.length - 1]
+    const output = results[name];
+    const outputData = output.data as Float32Array;
+    const dims = output.dims as number[];
+    const lastDim = dims[dims.length - 1];
 
     if (lastDim === 1) {
-      scoreOutputs.push({ data: outputData, dims })
+      scoreOutputs.push({ data: outputData, dims });
     } else if (lastDim === 4) {
-      bboxOutputs.push({ data: outputData, dims })
+      bboxOutputs.push({ data: outputData, dims });
     } else if (lastDim === 10) {
-      kpsOutputs.push({ data: outputData, dims })
+      kpsOutputs.push({ data: outputData, dims });
     }
   }
 
   // Sort by number of anchors (descending) to match stride order (8, 16, 32)
-  scoreOutputs.sort((a, b) => b.data.length - a.data.length)
-  bboxOutputs.sort((a, b) => b.data.length - a.data.length)
-  kpsOutputs.sort((a, b) => b.data.length - a.data.length)
+  scoreOutputs.sort((a, b) => b.data.length - a.data.length);
+  bboxOutputs.sort((a, b) => b.data.length - a.data.length);
+  kpsOutputs.sort((a, b) => b.data.length - a.data.length);
 
   // Process each stride level
   for (let s = 0; s < strides.length; s++) {
-    const stride = strides[s]
-    const scoreData = scoreOutputs[s]?.data
-    const bboxData = bboxOutputs[s]?.data
-    const kpsData = kpsOutputs[s]?.data
+    const stride = strides[s];
+    const scoreData = scoreOutputs[s]?.data;
+    const bboxData = bboxOutputs[s]?.data;
+    const kpsData = kpsOutputs[s]?.data;
 
-    if (!scoreData || !bboxData || !kpsData) continue
+    if (!scoreData || !bboxData || !kpsData) continue;
 
     // Feature map size for this stride
-    const fmSize = Math.floor(DET_INPUT_SIZE / stride)
-    const numAnchors = fmSize * fmSize * numAnchorsPerPos
+    const fmSize = Math.floor(DET_INPUT_SIZE / stride);
+    const numAnchors = fmSize * fmSize * numAnchorsPerPos;
 
     // Iterate over all anchor positions
     // Note: det_10g outputs are already sigmoid'd (scores in 0-1 range)
     for (let i = 0; i < numAnchors; i++) {
-      const confidence = scoreData[i]
-      if (confidence < CONFIDENCE_THRESHOLD) continue
+      const confidence = scoreData[i];
+      if (confidence < CONFIDENCE_THRESHOLD) continue;
 
       // Calculate anchor position
-      const anchorIdx = Math.floor(i / numAnchorsPerPos)
-      const anchorY = Math.floor(anchorIdx / fmSize)
-      const anchorX = anchorIdx % fmSize
+      const anchorIdx = Math.floor(i / numAnchorsPerPos);
+      const anchorY = Math.floor(anchorIdx / fmSize);
+      const anchorX = anchorIdx % fmSize;
 
       // Anchor position in input image coordinates (corner-aligned for det_10g)
-      const anchorCenterX = anchorX * stride
-      const anchorCenterY = anchorY * stride
+      const anchorCenterX = anchorX * stride;
+      const anchorCenterY = anchorY * stride;
 
       // Decode bbox: distances from anchor center
-      const bboxOffset = i * 4
-      const left = bboxData[bboxOffset] * stride
-      const top = bboxData[bboxOffset + 1] * stride
-      const right = bboxData[bboxOffset + 2] * stride
-      const bottom = bboxData[bboxOffset + 3] * stride
+      const bboxOffset = i * 4;
+      const left = bboxData[bboxOffset] * stride;
+      const top = bboxData[bboxOffset + 1] * stride;
+      const right = bboxData[bboxOffset + 2] * stride;
+      const bottom = bboxData[bboxOffset + 3] * stride;
 
       // Convert to x1, y1, x2, y2 in input coordinates
-      const x1Input = anchorCenterX - left
-      const y1Input = anchorCenterY - top
-      const x2Input = anchorCenterX + right
-      const y2Input = anchorCenterY + bottom
+      const x1Input = anchorCenterX - left;
+      const y1Input = anchorCenterY - top;
+      const x2Input = anchorCenterX + right;
+      const y2Input = anchorCenterY + bottom;
 
       // Convert to original image coordinates
-      const x1 = (x1Input - padX) / scale
-      const y1 = (y1Input - padY) / scale
-      const x2 = (x2Input - padX) / scale
-      const y2 = (y2Input - padY) / scale
+      const x1 = (x1Input - padX) / scale;
+      const y1 = (y1Input - padY) / scale;
+      const x2 = (x2Input - padX) / scale;
+      const y2 = (y2Input - padY) / scale;
 
-      const boxW = x2 - x1
-      const boxH = y2 - y1
+      const boxW = x2 - x1;
+      const boxH = y2 - y1;
 
-      if (boxW <= 0 || boxH <= 0) continue
+      if (boxW <= 0 || boxH <= 0) continue;
 
       // Clamp to image bounds
-      const clampedX = Math.max(0, Math.min(x1, width - 1))
-      const clampedY = Math.max(0, Math.min(y1, height - 1))
-      const clampedW = Math.min(boxW, width - clampedX)
-      const clampedH = Math.min(boxH, height - clampedY)
+      const clampedX = Math.max(0, Math.min(x1, width - 1));
+      const clampedY = Math.max(0, Math.min(y1, height - 1));
+      const clampedW = Math.min(boxW, width - clampedX);
+      const clampedH = Math.min(boxH, height - clampedY);
 
-      if (clampedW <= 0 || clampedH <= 0) continue
+      if (clampedW <= 0 || clampedH <= 0) continue;
 
       // Decode 5-point landmarks: offsets from anchor center
-      const kpsOffset = i * 10
-      const landmarks: number[][] = []
+      const kpsOffset = i * 10;
+      const landmarks: number[][] = [];
       for (let j = 0; j < 5; j++) {
-        const offsetX = kpsData[kpsOffset + j * 2] * stride
-        const offsetY = kpsData[kpsOffset + j * 2 + 1] * stride
-        const lmXInput = anchorCenterX + offsetX
-        const lmYInput = anchorCenterY + offsetY
-        const lmX = (lmXInput - padX) / scale
-        const lmY = (lmYInput - padY) / scale
+        const offsetX = kpsData[kpsOffset + j * 2] * stride;
+        const offsetY = kpsData[kpsOffset + j * 2 + 1] * stride;
+        const lmXInput = anchorCenterX + offsetX;
+        const lmYInput = anchorCenterY + offsetY;
+        const lmX = (lmXInput - padX) / scale;
+        const lmY = (lmYInput - padY) / scale;
         landmarks.push([
           Math.max(0, Math.min(lmX, width - 1)),
-          Math.max(0, Math.min(lmY, height - 1))
-        ])
+          Math.max(0, Math.min(lmY, height - 1)),
+        ]);
       }
 
       allFaces.push({
@@ -552,74 +584,85 @@ async function detectFacesWithLandmarks(
           y: clampedY,
           width: clampedW,
           height: clampedH,
-          confidence
+          confidence,
         },
-        landmarks
-      })
+        landmarks,
+      });
     }
   }
 
   // Dispose output tensors to free memory
   for (const name of outputNames) {
-    disposeTensor(results[name])
+    disposeTensor(results[name]);
   }
 
   // Apply NMS with index tracking (preserves landmark association)
-  const selectedIndices = nmsWithIndices(allFaces, NMS_THRESHOLD)
+  const selectedIndices = nmsWithIndices(allFaces, NMS_THRESHOLD);
 
   // Build result using indices directly (no floating-point matching)
   const result: DetectedFace[] = selectedIndices.map((idx, i) => ({
     box: allFaces[idx].box,
     landmarks: allFaces[idx].landmarks,
-    index: i
-  }))
+    index: i,
+  }));
 
-  return result
+  return result;
 }
 
 /**
  * Average multiple points
  */
 function averagePoints(points: number[][]): number[] {
-  const sum = [0, 0]
+  const sum = [0, 0];
   for (const p of points) {
-    sum[0] += p[0]
-    sum[1] += p[1]
+    sum[0] += p[0];
+    sum[1] += p[1];
   }
-  return [sum[0] / points.length, sum[1] / points.length]
+  return [sum[0] / points.length, sum[1] / points.length];
 }
 
 /**
  * Compute 2x2 SVD using closed-form analytical solution
  * Returns U, S (singular values), V matrices
  */
-function svd2x2(a: number, b: number, c: number, d: number): {
-  U: number[][]
-  S: number[]
-  V: number[][]
+function svd2x2(
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+): {
+  U: number[][];
+  S: number[];
+  V: number[][];
 } {
-  const e = (a + d) / 2
-  const f = (a - d) / 2
-  const g = (c + b) / 2
-  const h = (c - b) / 2
+  const e = (a + d) / 2;
+  const f = (a - d) / 2;
+  const g = (c + b) / 2;
+  const h = (c - b) / 2;
 
-  const q = Math.sqrt(e * e + h * h)
-  const r = Math.sqrt(f * f + g * g)
+  const q = Math.sqrt(e * e + h * h);
+  const r = Math.sqrt(f * f + g * g);
 
-  const s1 = q + r
-  const s2 = Math.abs(q - r)
+  const s1 = q + r;
+  const s2 = Math.abs(q - r);
 
-  const a1 = Math.atan2(g, f)
-  const a2 = Math.atan2(h, e)
+  const a1 = Math.atan2(g, f);
+  const a2 = Math.atan2(h, e);
 
-  const theta = (a2 - a1) / 2
-  const phi = (a2 + a1) / 2
+  const theta = (a2 - a1) / 2;
+  const phi = (a2 + a1) / 2;
 
   return {
-    U: [[Math.cos(phi), -Math.sin(phi)], [Math.sin(phi), Math.cos(phi)]],
+    U: [
+      [Math.cos(phi), -Math.sin(phi)],
+      [Math.sin(phi), Math.cos(phi)],
+    ],
     S: [s1, s2],
-    V: [[Math.cos(theta), Math.sin(theta)], [-Math.sin(theta), Math.cos(theta)]]
-  }
+    V: [
+      [Math.cos(theta), Math.sin(theta)],
+      [-Math.sin(theta), Math.cos(theta)],
+    ],
+  };
 }
 
 /**
@@ -629,102 +672,120 @@ function svd2x2(a: number, b: number, c: number, d: number): {
  */
 function estimateSimilarityTransform(
   srcLandmarks: number[][],
-  dstLandmarks: number[][]
+  dstLandmarks: number[][],
 ): number[] {
-  const n = srcLandmarks.length
+  const n = srcLandmarks.length;
 
   // 1. Compute centroids
-  const srcCentroid = averagePoints(srcLandmarks)
-  const dstCentroid = averagePoints(dstLandmarks)
+  const srcCentroid = averagePoints(srcLandmarks);
+  const dstCentroid = averagePoints(dstLandmarks);
 
   // 2. Center points
-  const srcCentered = srcLandmarks.map(p => [p[0] - srcCentroid[0], p[1] - srcCentroid[1]])
-  const dstCentered = dstLandmarks.map(p => [p[0] - dstCentroid[0], p[1] - dstCentroid[1]])
+  const srcCentered = srcLandmarks.map((p) => [
+    p[0] - srcCentroid[0],
+    p[1] - srcCentroid[1],
+  ]);
+  const dstCentered = dstLandmarks.map((p) => [
+    p[0] - dstCentroid[0],
+    p[1] - dstCentroid[1],
+  ]);
 
   // 3. Compute source variance
-  let srcVar = 0
+  let srcVar = 0;
   for (const p of srcCentered) {
-    srcVar += p[0] * p[0] + p[1] * p[1]
+    srcVar += p[0] * p[0] + p[1] * p[1];
   }
-  srcVar /= n
+  srcVar /= n;
 
   // Handle degenerate case
   if (srcVar < 1e-10) {
-    return [1, 0, dstCentroid[0] - srcCentroid[0], 0, 1, dstCentroid[1] - srcCentroid[1]]
+    return [
+      1,
+      0,
+      dstCentroid[0] - srcCentroid[0],
+      0,
+      1,
+      dstCentroid[1] - srcCentroid[1],
+    ];
   }
 
   // 4. Compute 2x2 covariance matrix H = dst^T * src / n
-  let h00 = 0, h01 = 0, h10 = 0, h11 = 0
+  let h00 = 0,
+    h01 = 0,
+    h10 = 0,
+    h11 = 0;
   for (let i = 0; i < n; i++) {
-    h00 += dstCentered[i][0] * srcCentered[i][0]
-    h01 += dstCentered[i][0] * srcCentered[i][1]
-    h10 += dstCentered[i][1] * srcCentered[i][0]
-    h11 += dstCentered[i][1] * srcCentered[i][1]
+    h00 += dstCentered[i][0] * srcCentered[i][0];
+    h01 += dstCentered[i][0] * srcCentered[i][1];
+    h10 += dstCentered[i][1] * srcCentered[i][0];
+    h11 += dstCentered[i][1] * srcCentered[i][1];
   }
-  h00 /= n
-  h01 /= n
-  h10 /= n
-  h11 /= n
+  h00 /= n;
+  h01 /= n;
+  h10 /= n;
+  h11 /= n;
 
   // 5. SVD of 2x2 covariance matrix
-  const { U, S, V } = svd2x2(h00, h01, h10, h11)
+  const { U, S, V } = svd2x2(h00, h01, h10, h11);
 
   // 6. Compute rotation R = U * D * V^T, handling reflection
   // Determinant of U and V
-  const detU = U[0][0] * U[1][1] - U[0][1] * U[1][0]
-  const detV = V[0][0] * V[1][1] - V[0][1] * V[1][0]
+  const detU = U[0][0] * U[1][1] - U[0][1] * U[1][0];
+  const detV = V[0][0] * V[1][1] - V[0][1] * V[1][0];
 
   // Create sign matrix D for reflection handling
-  const d = detU * detV < 0 ? -1 : 1
+  const d = detU * detV < 0 ? -1 : 1;
 
   // R = U * D * V^T where D = diag(1, d)
   // U * D:
-  const ud00 = U[0][0]
-  const ud01 = U[0][1] * d
-  const ud10 = U[1][0]
-  const ud11 = U[1][1] * d
+  const ud00 = U[0][0];
+  const ud01 = U[0][1] * d;
+  const ud10 = U[1][0];
+  const ud11 = U[1][1] * d;
 
   // (U * D) * V^T where V^T[k][j] = V[j][k]:
   // R[i][j] = sum_k UD[i][k] * V[j][k]
-  const r00 = ud00 * V[0][0] + ud01 * V[0][1]
-  const r01 = ud00 * V[1][0] + ud01 * V[1][1]
-  const r10 = ud10 * V[0][0] + ud11 * V[0][1]
-  const r11 = ud10 * V[1][0] + ud11 * V[1][1]
+  const r00 = ud00 * V[0][0] + ud01 * V[0][1];
+  const r01 = ud00 * V[1][0] + ud01 * V[1][1];
+  const r10 = ud10 * V[0][0] + ud11 * V[0][1];
+  const r11 = ud10 * V[1][0] + ud11 * V[1][1];
 
   // 7. Compute scale: c = trace(D * S) / variance_src
-  const traceDS = S[0] + d * S[1]
-  const scale = traceDS / srcVar
+  const traceDS = S[0] + d * S[1];
+  const scale = traceDS / srcVar;
 
   // 8. Compute translation: t = dst_centroid - scale * R * src_centroid
-  const tx = dstCentroid[0] - scale * (r00 * srcCentroid[0] + r01 * srcCentroid[1])
-  const ty = dstCentroid[1] - scale * (r10 * srcCentroid[0] + r11 * srcCentroid[1])
+  const tx =
+    dstCentroid[0] - scale * (r00 * srcCentroid[0] + r01 * srcCentroid[1]);
+  const ty =
+    dstCentroid[1] - scale * (r10 * srcCentroid[0] + r11 * srcCentroid[1]);
 
   // Return 2x3 matrix [a, b, tx, c, d, ty] where:
   // x' = a*x + b*y + tx
   // y' = c*x + d*y + ty
-  return [scale * r00, scale * r01, tx, scale * r10, scale * r11, ty]
+  return [scale * r00, scale * r01, tx, scale * r10, scale * r11, ty];
 }
 
 /**
  * Invert a 2x3 affine matrix
  */
 function invertAffineMatrix(m: number[]): number[] {
-  const [a, b, tx, c, d, ty] = m
-  const det = a * d - b * c
+  const [a, b, tx, c, d, ty] = m;
+  const det = a * d - b * c;
 
   if (Math.abs(det) < 1e-10) {
-    throw new Error('Matrix is singular')
+    throw new Error("Matrix is singular");
   }
 
-  const invDet = 1 / det
-  const ia = d * invDet
-  const ib = -b * invDet
-  const ic = -c * invDet
-  const id = a * invDet
-  const itx = -(ia * tx + ib * ty)
-  const ity = -(ic * tx + id * ty)
+  const invDet = 1 / det;
+  const ia = d * invDet;
+  const ib = -b * invDet;
+  const ic = -c * invDet;
+  const id = a * invDet;
+  const itx = -(ia * tx + ib * ty);
+  const ity = -(ic * tx + id * ty);
 
-  return [ia, ib, itx, ic, id, ity]
+  return [ia, ib, itx, ic, id, ity];
 }
 
 /**
@@ -738,58 +799,66 @@ function warpAffine(
   matrix: number[],
   outputSize: number,
   normalize: boolean = true,
-  toBGR: boolean = false
+  toBGR: boolean = false,
 ): Float32Array {
-  const output = new Float32Array(3 * outputSize * outputSize)
-  const invMatrix = invertAffineMatrix(matrix)
+  const output = new Float32Array(3 * outputSize * outputSize);
+  const invMatrix = invertAffineMatrix(matrix);
 
   for (let y = 0; y < outputSize; y++) {
     for (let x = 0; x < outputSize; x++) {
       // Map output coords to input coords using inverse matrix
-      const srcX = invMatrix[0] * x + invMatrix[1] * y + invMatrix[2]
-      const srcY = invMatrix[3] * x + invMatrix[4] * y + invMatrix[5]
+      const srcX = invMatrix[0] * x + invMatrix[1] * y + invMatrix[2];
+      const srcY = invMatrix[3] * x + invMatrix[4] * y + invMatrix[5];
 
       // Bilinear interpolation
-      const x0 = Math.floor(srcX)
-      const y0 = Math.floor(srcY)
-      const x1 = Math.min(x0 + 1, imgW - 1)
-      const y1 = Math.min(y0 + 1, imgH - 1)
+      const x0 = Math.floor(srcX);
+      const y0 = Math.floor(srcY);
+      const x1 = Math.min(x0 + 1, imgW - 1);
+      const y1 = Math.min(y0 + 1, imgH - 1);
 
-      const xFrac = srcX - x0
-      const yFrac = srcY - y0
+      const xFrac = srcX - x0;
+      const yFrac = srcY - y0;
 
       // Check bounds
       if (x0 >= 0 && x0 < imgW && y0 >= 0 && y0 < imgH) {
         for (let c = 0; c < 3; c++) {
           // For BGR output, swap R(0) and B(2) channels
-          const srcC = toBGR ? (c === 0 ? 2 : c === 2 ? 0 : c) : c
-
-          const v00 = imageData[(y0 * imgW + x0) * 3 + srcC]
-          const v10 = imageData[(y0 * imgW + Math.min(x1, imgW - 1)) * 3 + srcC]
-          const v01 = imageData[(Math.min(y1, imgH - 1) * imgW + x0) * 3 + srcC]
-          const v11 = imageData[(Math.min(y1, imgH - 1) * imgW + Math.min(x1, imgW - 1)) * 3 + srcC]
-
-          const v0 = v00 * (1 - xFrac) + v10 * xFrac
-          const v1 = v01 * (1 - xFrac) + v11 * xFrac
-          let v = v0 * (1 - yFrac) + v1 * yFrac
+          const srcC = toBGR ? (c === 0 ? 2 : c === 2 ? 0 : c) : c;
+
+          const v00 = imageData[(y0 * imgW + x0) * 3 + srcC];
+          const v10 =
+            imageData[(y0 * imgW + Math.min(x1, imgW - 1)) * 3 + srcC];
+          const v01 =
+            imageData[(Math.min(y1, imgH - 1) * imgW + x0) * 3 + srcC];
+          const v11 =
+            imageData[
+              (Math.min(y1, imgH - 1) * imgW + Math.min(x1, imgW - 1)) * 3 +
+                srcC
+            ];
+
+          const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+          const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+          let v = v0 * (1 - yFrac) + v1 * yFrac;
 
           // Normalize to [-1, 1] for model input
           if (normalize) {
-            v = v * 2 - 1
+            v = v * 2 - 1;
           }
 
-          output[c * outputSize * outputSize + y * outputSize + x] = v
+          output[c * outputSize * outputSize + y * outputSize + x] = v;
         }
       } else {
         // Out of bounds - fill with black (normalized)
         for (let c = 0; c < 3; c++) {
-          output[c * outputSize * outputSize + y * outputSize + x] = normalize ? -1 : 0
+          output[c * outputSize * outputSize + y * outputSize + x] = normalize
+            ? -1
+            : 0;
         }
       }
     }
   }
 
-  return output
+  return output;
 }
 
 /**
@@ -799,43 +868,56 @@ async function extractEmbedding(
   imageData: Float32Array,
   imgW: number,
   imgH: number,
-  landmarks: number[][]
+  landmarks: number[][],
 ): Promise<Float32Array> {
-  if (!arcfaceSession) throw new Error('ArcFace session not initialized')
+  if (!arcfaceSession) throw new Error("ArcFace session not initialized");
 
   // Compute alignment matrix
-  const matrix = estimateSimilarityTransform(landmarks, ARCFACE_DST_112)
+  const matrix = estimateSimilarityTransform(landmarks, ARCFACE_DST_112);
 
   // Warp face to 112x112 aligned position (BGR for InsightFace ArcFace)
-  const alignedFace = warpAffine(imageData, imgW, imgH, matrix, ARCFACE_INPUT_SIZE, true, true)
+  const alignedFace = warpAffine(
+    imageData,
+    imgW,
+    imgH,
+    matrix,
+    ARCFACE_INPUT_SIZE,
+    true,
+    true,
+  );
 
   // Run ArcFace - Input: NCHW [1, 3, 112, 112]
-  const inputTensor = new ort.Tensor('float32', alignedFace, [1, 3, ARCFACE_INPUT_SIZE, ARCFACE_INPUT_SIZE])
+  const inputTensor = new ort.Tensor("float32", alignedFace, [
+    1,
+    3,
+    ARCFACE_INPUT_SIZE,
+    ARCFACE_INPUT_SIZE,
+  ]);
 
   // Use actual input name from model (may be 'input', 'input.1', 'data', etc.)
-  const inputName = arcfaceSession.inputNames[0]
-  const results = await arcfaceSession.run({ [inputName]: inputTensor })
+  const inputName = arcfaceSession.inputNames[0];
+  const results = await arcfaceSession.run({ [inputName]: inputTensor });
 
   // Dispose input tensor to free memory
-  disposeTensor(inputTensor)
+  disposeTensor(inputTensor);
 
-  const outputName = Object.keys(results)[0]
-  const embedding = results[outputName].data as Float32Array
+  const outputName = Object.keys(results)[0];
+  const embedding = results[outputName].data as Float32Array;
 
   // Copy embedding data before disposing output tensor
-  const embeddingCopy = new Float32Array(embedding)
+  const embeddingCopy = new Float32Array(embedding);
 
   // Dispose output tensor to free memory
-  disposeTensor(results[outputName])
+  disposeTensor(results[outputName]);
 
   // Normalize embedding to unit length
-  const norm = Math.sqrt(embeddingCopy.reduce((sum, v) => sum + v * v, 0))
-  const normalized = new Float32Array(embeddingCopy.length)
+  const norm = Math.sqrt(embeddingCopy.reduce((sum, v) => sum + v * v, 0));
+  const normalized = new Float32Array(embeddingCopy.length);
   for (let i = 0; i < embeddingCopy.length; i++) {
-    normalized[i] = embeddingCopy[i] / norm
+    normalized[i] = embeddingCopy[i] / norm;
   }
 
-  return normalized
+  return normalized;
 }
 
 /**
@@ -846,60 +928,88 @@ async function swapFace(
   targetW: number,
   targetH: number,
   targetLandmarks: number[][],
-  sourceEmbedding: Float32Array
+  sourceEmbedding: Float32Array,
 ): Promise<{ swapped: Float32Array; matrix: number[] }> {
-  if (!inswapperSession) throw new Error('Inswapper session not initialized')
+  if (!inswapperSession) throw new Error("Inswapper session not initialized");
 
   // Compute alignment matrix for target face
-  const matrix = estimateSimilarityTransform(targetLandmarks, INSWAPPER_DST_128)
+  const matrix = estimateSimilarityTransform(
+    targetLandmarks,
+    INSWAPPER_DST_128,
+  );
 
   // Warp target face to 128x128 - inswapper expects RGB, [0, 1] range
-  const alignedTarget = warpAffine(targetImage, targetW, targetH, matrix, INSWAPPER_INPUT_SIZE, false, false)
+  const alignedTarget = warpAffine(
+    targetImage,
+    targetW,
+    targetH,
+    matrix,
+    INSWAPPER_INPUT_SIZE,
+    false,
+    false,
+  );
 
   // Run inswapper
-  const targetTensor = new ort.Tensor('float32', alignedTarget, [1, 3, INSWAPPER_INPUT_SIZE, INSWAPPER_INPUT_SIZE])
+  const targetTensor = new ort.Tensor("float32", alignedTarget, [
+    1,
+    3,
+    INSWAPPER_INPUT_SIZE,
+    INSWAPPER_INPUT_SIZE,
+  ]);
 
   // Transform embedding using EMAP matrix (required by inswapper)
   const transformedEmbedding = emapMatrix
     ? transformEmbedding(sourceEmbedding, emapMatrix)
-    : sourceEmbedding
-  const embeddingTensor = new ort.Tensor('float32', transformedEmbedding, [1, 512])
+    : sourceEmbedding;
+  const embeddingTensor = new ort.Tensor(
+    "float32",
+    transformedEmbedding,
+    [1, 512],
+  );
 
   // Map inputs based on model input names
-  const inputNames = inswapperSession.inputNames
-  const inputs: Record<string, ort.Tensor> = {}
+  const inputNames = inswapperSession.inputNames;
+  const inputs: Record<string, ort.Tensor> = {};
 
   for (const name of inputNames) {
-    const lowerName = name.toLowerCase()
-    if (lowerName.includes('source') || lowerName.includes('latent') || lowerName.includes('emb')) {
-      inputs[name] = embeddingTensor
-    } else if (lowerName.includes('target') || lowerName.includes('input') || lowerName.includes('image')) {
-      inputs[name] = targetTensor
+    const lowerName = name.toLowerCase();
+    if (
+      lowerName.includes("source") ||
+      lowerName.includes("latent") ||
+      lowerName.includes("emb")
+    ) {
+      inputs[name] = embeddingTensor;
+    } else if (
+      lowerName.includes("target") ||
+      lowerName.includes("input") ||
+      lowerName.includes("image")
+    ) {
+      inputs[name] = targetTensor;
     }
   }
 
   // Fallback: use positional mapping (InsightFace order: image first, embedding second)
   if (Object.keys(inputs).length < 2) {
-    inputs[inputNames[0]] = targetTensor
-    inputs[inputNames[1]] = embeddingTensor
+    inputs[inputNames[0]] = targetTensor;
+    inputs[inputNames[1]] = embeddingTensor;
   }
 
-  const results = await inswapperSession.run(inputs)
+  const results = await inswapperSession.run(inputs);
 
   // Dispose input tensors to free memory
-  disposeTensor(targetTensor)
-  disposeTensor(embeddingTensor)
+  disposeTensor(targetTensor);
+  disposeTensor(embeddingTensor);
 
-  const outputName = Object.keys(results)[0]
-  const swappedData = results[outputName].data as Float32Array
+  const outputName = Object.keys(results)[0];
+  const swappedData = results[outputName].data as Float32Array;
 
   // Copy swapped data before disposing output tensor
-  const swapped = new Float32Array(swappedData)
+  const swapped = new Float32Array(swappedData);
 
   // Dispose output tensor to free memory
-  disposeTensor(results[outputName])
+  disposeTensor(results[outputName]);
 
-  return { swapped, matrix }
+  return { swapped, matrix };
 }
 
 /**
@@ -908,49 +1018,51 @@ async function swapFace(
  */
 async function parseSwappedFace(
   alignedFace: Float32Array,
-  faceSize: number
+  faceSize: number,
 ): Promise<Uint8Array> {
-  if (!segmenter) throw new Error('Face segmenter not initialized')
+  if (!segmenter) throw new Error("Face segmenter not initialized");
 
   // Convert CHW [0,1] to RGBA Uint8Array for RawImage
-  const rgbaData = new Uint8Array(faceSize * faceSize * 4)
+  const rgbaData = new Uint8Array(faceSize * faceSize * 4);
 
   for (let y = 0; y < faceSize; y++) {
     for (let x = 0; x < faceSize; x++) {
-      const outIdx = (y * faceSize + x) * 4
+      const outIdx = (y * faceSize + x) * 4;
 
       for (let c = 0; c < 3; c++) {
         // CHW format: channel * H * W + y * W + x
-        const srcIdx = c * faceSize * faceSize + y * faceSize + x
-        rgbaData[outIdx + c] = Math.round(Math.max(0, Math.min(1, alignedFace[srcIdx])) * 255)
+        const srcIdx = c * faceSize * faceSize + y * faceSize + x;
+        rgbaData[outIdx + c] = Math.round(
+          Math.max(0, Math.min(1, alignedFace[srcIdx])) * 255,
+        );
       }
-      rgbaData[outIdx + 3] = 255
+      rgbaData[outIdx + 3] = 255;
     }
   }
 
   // Create RawImage and run segmentation
-  const image = new RawImage(rgbaData, faceSize, faceSize, 4)
-  const results = await segmenter(image)
+  const image = new RawImage(rgbaData, faceSize, faceSize, 4);
+  const results = await segmenter(image);
 
   // Combine face region masks
-  const mask = new Uint8Array(faceSize * faceSize)
+  const mask = new Uint8Array(faceSize * faceSize);
 
   for (const segment of results) {
-    const label = segment.label.replace(/\.png$/i, '')
+    const label = segment.label.replace(/\.png$/i, "");
     if (FACE_LABELS.has(label)) {
-      const segMask = segment.mask
-      const maskData = segMask.data as Uint8Array
-      const maskW = segMask.width
-      const maskH = segMask.height
+      const segMask = segment.mask;
+      const maskData = segMask.data as Uint8Array;
+      const maskW = segMask.width;
+      const maskH = segMask.height;
 
       for (let y = 0; y < faceSize; y++) {
         for (let x = 0; x < faceSize; x++) {
-          const srcX = (x / faceSize) * maskW
-          const srcY = (y / faceSize) * maskH
-          const srcIdx = Math.floor(srcY) * maskW + Math.floor(srcX)
+          const srcX = (x / faceSize) * maskW;
+          const srcY = (y / faceSize) * maskH;
+          const srcIdx = Math.floor(srcY) * maskW + Math.floor(srcX);
 
           if (maskData[srcIdx] > 0) {
-            mask[y * faceSize + x] = 255
+            mask[y * faceSize + x] = 255;
           }
         }
       }
@@ -958,20 +1070,20 @@ async function parseSwappedFace(
   }
 
   // Erode mask to shrink face region (prevents source hair bleed-through)
-  const maskFloat = new Float32Array(mask.length)
+  const maskFloat = new Float32Array(mask.length);
   for (let i = 0; i < mask.length; i++) {
-    maskFloat[i] = mask[i]
+    maskFloat[i] = mask[i];
   }
-  const erodedMask = await erodeMask(maskFloat, faceSize, faceSize, 7)
-  const erodedUint8 = new Uint8Array(mask.length)
+  const erodedMask = await erodeMask(maskFloat, faceSize, faceSize, 7);
+  const erodedUint8 = new Uint8Array(mask.length);
   for (let i = 0; i < mask.length; i++) {
-    erodedUint8[i] = Math.max(0, Math.round(erodedMask[i]))
+    erodedUint8[i] = Math.max(0, Math.round(erodedMask[i]));
   }
 
   // Apply feathering to mask edges
-  const featheredMask = featherMask(erodedUint8, faceSize, 4)
+  const featheredMask = featherMask(erodedUint8, faceSize, 4);
 
-  return featheredMask
+  return featheredMask;
 }
 
 /**
@@ -983,90 +1095,90 @@ async function parseFaceCrop(
   imgW: number,
   imgH: number,
   faceBox: FaceBox,
-  outputSize: number = GFPGAN_INPUT_SIZE
+  outputSize: number = GFPGAN_INPUT_SIZE,
 ): Promise<Uint8Array> {
-  if (!segmenter) throw new Error('Face segmenter not initialized')
+  if (!segmenter) throw new Error("Face segmenter not initialized");
 
   // Crop face with padding (10%)
-  const padding = 0.1
-  const expandW = faceBox.width * padding
-  const expandH = faceBox.height * padding
+  const padding = 0.1;
+  const expandW = faceBox.width * padding;
+  const expandH = faceBox.height * padding;
 
-  let cropX = faceBox.x - expandW
-  let cropY = faceBox.y - expandH
-  let cropW = faceBox.width + expandW * 2
-  let cropH = faceBox.height + expandH * 2
+  let cropX = faceBox.x - expandW;
+  let cropY = faceBox.y - expandH;
+  let cropW = faceBox.width + expandW * 2;
+  let cropH = faceBox.height + expandH * 2;
 
   // Make square
-  const squareSize = Math.max(cropW, cropH)
-  cropX = cropX - (squareSize - cropW) / 2
-  cropY = cropY - (squareSize - cropH) / 2
-  cropW = squareSize
-  cropH = squareSize
+  const squareSize = Math.max(cropW, cropH);
+  cropX = cropX - (squareSize - cropW) / 2;
+  cropY = cropY - (squareSize - cropH) / 2;
+  cropW = squareSize;
+  cropH = squareSize;
 
   // Clamp to image bounds
-  cropX = Math.max(0, cropX)
-  cropY = Math.max(0, cropY)
-  cropW = Math.min(cropW, imgW - cropX)
-  cropH = Math.min(cropH, imgH - cropY)
+  cropX = Math.max(0, cropX);
+  cropY = Math.max(0, cropY);
+  cropW = Math.min(cropW, imgW - cropX);
+  cropH = Math.min(cropH, imgH - cropY);
 
   // Create cropped image as Uint8Array RGBA for RawImage
-  const rgbaData = new Uint8Array(outputSize * outputSize * 4)
+  const rgbaData = new Uint8Array(outputSize * outputSize * 4);
 
   for (let y = 0; y < outputSize; y++) {
     for (let x = 0; x < outputSize; x++) {
-      const srcX = cropX + (x / outputSize) * cropW
-      const srcY = cropY + (y / outputSize) * cropH
+      const srcX = cropX + (x / outputSize) * cropW;
+      const srcY = cropY + (y / outputSize) * cropH;
 
-      const x0 = Math.floor(srcX)
-      const y0 = Math.floor(srcY)
-      const x1 = Math.min(x0 + 1, imgW - 1)
-      const y1 = Math.min(y0 + 1, imgH - 1)
+      const x0 = Math.floor(srcX);
+      const y0 = Math.floor(srcY);
+      const x1 = Math.min(x0 + 1, imgW - 1);
+      const y1 = Math.min(y0 + 1, imgH - 1);
 
-      const xFrac = srcX - x0
-      const yFrac = srcY - y0
+      const xFrac = srcX - x0;
+      const yFrac = srcY - y0;
 
-      const outIdx = (y * outputSize + x) * 4
+      const outIdx = (y * outputSize + x) * 4;
 
       for (let c = 0; c < 3; c++) {
-        const v00 = originalData[(y0 * imgW + x0) * 3 + c]
-        const v10 = originalData[(y0 * imgW + x1) * 3 + c]
-        const v01 = originalData[(y1 * imgW + x0) * 3 + c]
-        const v11 = originalData[(y1 * imgW + x1) * 3 + c]
+        const v00 = originalData[(y0 * imgW + x0) * 3 + c];
+        const v10 = originalData[(y0 * imgW + x1) * 3 + c];
+        const v01 = originalData[(y1 * imgW + x0) * 3 + c];
+        const v11 = originalData[(y1 * imgW + x1) * 3 + c];
 
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
 
-        rgbaData[outIdx + c] = Math.round(v * 255)
+        rgbaData[outIdx + c] = Math.round(v * 255);
       }
-      rgbaData[outIdx + 3] = 255
+      rgbaData[outIdx + 3] = 255;
     }
   }
 
   // Create RawImage and run segmentation
-  const image = new RawImage(rgbaData, outputSize, outputSize, 4)
-  const results = await segmenter(image)
+  const image = new RawImage(rgbaData, outputSize, outputSize, 4);
+  const results = await segmenter(image);
 
   // Combine face region masks
-  const mask = new Uint8Array(outputSize * outputSize)
+  const mask = new Uint8Array(outputSize * outputSize);
 
   for (const segment of results) {
-    const label = segment.label.replace(/\.png$/i, '')
+    const label = segment.label.replace(/\.png$/i, "");
     if (FACE_LABELS.has(label)) {
-      const segMask = segment.mask
-      const maskData = segMask.data as Uint8Array
-      const maskW = segMask.width
-      const maskH = segMask.height
+      const segMask = segment.mask;
+      const maskData = segMask.data as Uint8Array;
+      const maskW = segMask.width;
+      const maskH = segMask.height;
 
       for (let y = 0; y < outputSize; y++) {
         for (let x = 0; x < outputSize; x++) {
-          const srcX = (x / outputSize) * maskW
-          const srcY = (y / outputSize) * maskH
-          const srcIdx = Math.floor(srcY) * maskW + Math.floor(srcX)
+          const srcX = (x / outputSize) * maskW;
+          const srcY = (y / outputSize) * maskH;
+          const srcIdx = Math.floor(srcY) * maskW + Math.floor(srcX);
 
           if (maskData[srcIdx] > 0) {
-            mask[y * outputSize + x] = 255
+            mask[y * outputSize + x] = 255;
           }
         }
       }
@@ -1074,9 +1186,9 @@ async function parseFaceCrop(
   }
 
   // Apply feathering to mask edges
-  const featheredMask = featherMask(mask, outputSize, 8)
+  const featheredMask = featherMask(mask, outputSize, 8);
 
-  return featheredMask
+  return featheredMask;
 }
 
 /**
@@ -1093,57 +1205,66 @@ async function inverseWarpAndBlend(
   originalImage: Float32Array,
   imgW: number,
   imgH: number,
-  swappedFace: Float32Array,  // CHW format, [0,1] range
-  alignedOriginal: Float32Array,  // CHW format, [0,1] range (aligned target face)
+  swappedFace: Float32Array, // CHW format, [0,1] range
+  alignedOriginal: Float32Array, // CHW format, [0,1] range (aligned target face)
   matrix: number[],
-  faceMask: Uint8Array  // Face parsing mask in aligned space
+  faceMask: Uint8Array, // Face parsing mask in aligned space
 ): Promise<Float32Array> {
-  const faceSize = INSWAPPER_INPUT_SIZE
+  const faceSize = INSWAPPER_INPUT_SIZE;
 
   // Step 0: Compute bounding box of the face in image space
   // Transform corners of the face region using inverse matrix
-  const invMatrix = invertAffineMatrix(matrix)
+  const invMatrix = invertAffineMatrix(matrix);
   const corners = [
-    [0, 0], [faceSize, 0], [faceSize, faceSize], [0, faceSize]
-  ]
-  let minX = imgW, maxX = 0, minY = imgH, maxY = 0
+    [0, 0],
+    [faceSize, 0],
+    [faceSize, faceSize],
+    [0, faceSize],
+  ];
+  let minX = imgW,
+    maxX = 0,
+    minY = imgH,
+    maxY = 0;
   for (const [fx, fy] of corners) {
-    const ix = invMatrix[0] * fx + invMatrix[1] * fy + invMatrix[2]
-    const iy = invMatrix[3] * fx + invMatrix[4] * fy + invMatrix[5]
-    minX = Math.min(minX, ix)
-    maxX = Math.max(maxX, ix)
-    minY = Math.min(minY, iy)
-    maxY = Math.max(maxY, iy)
+    const ix = invMatrix[0] * fx + invMatrix[1] * fy + invMatrix[2];
+    const iy = invMatrix[3] * fx + invMatrix[4] * fy + invMatrix[5];
+    minX = Math.min(minX, ix);
+    maxX = Math.max(maxX, ix);
+    minY = Math.min(minY, iy);
+    maxY = Math.max(maxY, iy);
   }
 
   // Add margin for blur kernels (adaptive based on face size)
-  const faceW = maxX - minX
-  const faceH = maxY - minY
-  const faceSizeEst = Math.sqrt(faceW * faceH)
-  const maxBlurK = Math.max(Math.floor(faceSizeEst / 10), 10) + Math.floor(faceSizeEst / 20) + 15
+  const faceW = maxX - minX;
+  const faceH = maxY - minY;
+  const faceSizeEst = Math.sqrt(faceW * faceH);
+  const maxBlurK =
+    Math.max(Math.floor(faceSizeEst / 10), 10) +
+    Math.floor(faceSizeEst / 20) +
+    15;
 
   // Clamp bounds to image dimensions with margin
-  const bx0 = Math.max(0, Math.floor(minX) - maxBlurK)
-  const by0 = Math.max(0, Math.floor(minY) - maxBlurK)
-  const bx1 = Math.min(imgW, Math.ceil(maxX) + maxBlurK)
-  const by1 = Math.min(imgH, Math.ceil(maxY) + maxBlurK)
-  const bw = bx1 - bx0
-  const bh = by1 - by0
+  const bx0 = Math.max(0, Math.floor(minX) - maxBlurK);
+  const by0 = Math.max(0, Math.floor(minY) - maxBlurK);
+  const bx1 = Math.min(imgW, Math.ceil(maxX) + maxBlurK);
+  const by1 = Math.min(imgH, Math.ceil(maxY) + maxBlurK);
+  const bw = bx1 - bx0;
+  const bh = by1 - by0;
 
   // Step 0.5: Color matching - adjust swapped face colors to match target
   // Calculate mean color within face mask for both images
-  const swappedMean = [0, 0, 0]
-  const originalMean = [0, 0, 0]
-  let maskCount = 0
+  const swappedMean = [0, 0, 0];
+  const originalMean = [0, 0, 0];
+  let maskCount = 0;
 
   for (let y = 0; y < faceSize; y++) {
     for (let x = 0; x < faceSize; x++) {
       if (faceMask[y * faceSize + x] > 128) {
-        maskCount++
+        maskCount++;
         for (let c = 0; c < 3; c++) {
-          const idx = c * faceSize * faceSize + y * faceSize + x
-          swappedMean[c] += swappedFace[idx]
-          originalMean[c] += alignedOriginal[idx]
+          const idx = c * faceSize * faceSize + y * faceSize + x;
+          swappedMean[c] += swappedFace[idx];
+          originalMean[c] += alignedOriginal[idx];
         }
       }
     }
@@ -1151,31 +1272,31 @@ async function inverseWarpAndBlend(
 
   if (maskCount > 0) {
     for (let c = 0; c < 3; c++) {
-      swappedMean[c] /= maskCount
-      originalMean[c] /= maskCount
+      swappedMean[c] /= maskCount;
+      originalMean[c] /= maskCount;
     }
 
     // Apply color shift to swapped face (simple mean transfer)
     const colorShift: [number, number, number] = [
       originalMean[0] - swappedMean[0],
       originalMean[1] - swappedMean[1],
-      originalMean[2] - swappedMean[2]
-    ]
+      originalMean[2] - swappedMean[2],
+    ];
 
     // Create color-matched swapped face (auto-fallback to CPU if GPU unavailable)
-    swappedFace = await colorMatch(swappedFace, colorShift, faceSize)
+    swappedFace = await colorMatch(swappedFace, colorShift, faceSize);
   }
 
   // Step 1: Compute difference map in aligned space |fake - original|
-  const diffMap = new Float32Array(faceSize * faceSize)
+  const diffMap = new Float32Array(faceSize * faceSize);
   for (let y = 0; y < faceSize; y++) {
     for (let x = 0; x < faceSize; x++) {
-      let diff = 0
+      let diff = 0;
       for (let c = 0; c < 3; c++) {
-        const idx = c * faceSize * faceSize + y * faceSize + x
-        diff += Math.abs(swappedFace[idx] - alignedOriginal[idx])
+        const idx = c * faceSize * faceSize + y * faceSize + x;
+        diff += Math.abs(swappedFace[idx] - alignedOriginal[idx]);
       }
-      diffMap[y * faceSize + x] = diff / 3 * 255  // Average and scale to 0-255
+      diffMap[y * faceSize + x] = (diff / 3) * 255; // Average and scale to 0-255
     }
   }
 
@@ -1183,90 +1304,94 @@ async function inverseWarpAndBlend(
   for (let y = 0; y < faceSize; y++) {
     for (let x = 0; x < faceSize; x++) {
       if (y < 2 || y >= faceSize - 2 || x < 2 || x >= faceSize - 2) {
-        diffMap[y * faceSize + x] = 0
+        diffMap[y * faceSize + x] = 0;
       }
     }
   }
 
   // Step 2: Inverse warp fake face, white mask, and diff map (bounded region only)
-  const fakeWarped = new Float32Array(bw * bh * 3)
-  const whiteMask = new Float32Array(bw * bh)
-  const faceRegion = new Uint8Array(bw * bh)
-  const diffWarped = new Float32Array(bw * bh)
+  const fakeWarped = new Float32Array(bw * bh * 3);
+  const whiteMask = new Float32Array(bw * bh);
+  const faceRegion = new Uint8Array(bw * bh);
+  const diffWarped = new Float32Array(bw * bh);
 
   for (let by = 0; by < bh; by++) {
-    const y = by + by0
+    const y = by + by0;
     for (let bx = 0; bx < bw; bx++) {
-      const x = bx + bx0
+      const x = bx + bx0;
       // Transform to face coordinates
-      const faceX = matrix[0] * x + matrix[1] * y + matrix[2]
-      const faceY = matrix[3] * x + matrix[4] * y + matrix[5]
+      const faceX = matrix[0] * x + matrix[1] * y + matrix[2];
+      const faceY = matrix[3] * x + matrix[4] * y + matrix[5];
 
       if (faceX >= 0 && faceX < faceSize && faceY >= 0 && faceY < faceSize) {
-        const fx0 = Math.floor(faceX)
-        const fy0 = Math.floor(faceY)
-        const fx1 = Math.min(fx0 + 1, faceSize - 1)
-        const fy1 = Math.min(fy0 + 1, faceSize - 1)
-        const xFrac = faceX - fx0
-        const yFrac = faceY - fy0
+        const fx0 = Math.floor(faceX);
+        const fy0 = Math.floor(faceY);
+        const fx1 = Math.min(fx0 + 1, faceSize - 1);
+        const fy1 = Math.min(fy0 + 1, faceSize - 1);
+        const xFrac = faceX - fx0;
+        const yFrac = faceY - fy0;
 
         // Bilinear interpolation for fake face (CHW to HWC)
         for (let c = 0; c < 3; c++) {
-          const v00 = swappedFace[c * faceSize * faceSize + fy0 * faceSize + fx0]
-          const v10 = swappedFace[c * faceSize * faceSize + fy0 * faceSize + fx1]
-          const v01 = swappedFace[c * faceSize * faceSize + fy1 * faceSize + fx0]
-          const v11 = swappedFace[c * faceSize * faceSize + fy1 * faceSize + fx1]
-          const v0 = v00 * (1 - xFrac) + v10 * xFrac
-          const v1 = v01 * (1 - xFrac) + v11 * xFrac
-          fakeWarped[(by * bw + bx) * 3 + c] = v0 * (1 - yFrac) + v1 * yFrac
+          const v00 =
+            swappedFace[c * faceSize * faceSize + fy0 * faceSize + fx0];
+          const v10 =
+            swappedFace[c * faceSize * faceSize + fy0 * faceSize + fx1];
+          const v01 =
+            swappedFace[c * faceSize * faceSize + fy1 * faceSize + fx0];
+          const v11 =
+            swappedFace[c * faceSize * faceSize + fy1 * faceSize + fx1];
+          const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+          const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+          fakeWarped[(by * bw + bx) * 3 + c] = v0 * (1 - yFrac) + v1 * yFrac;
         }
 
-        whiteMask[by * bw + bx] = 255
-        faceRegion[by * bw + bx] = 1
+        whiteMask[by * bw + bx] = 255;
+        faceRegion[by * bw + bx] = 1;
 
         // Diff map
-        const d00 = diffMap[fy0 * faceSize + fx0]
-        const d10 = diffMap[fy0 * faceSize + fx1]
-        const d01 = diffMap[fy1 * faceSize + fx0]
-        const d11 = diffMap[fy1 * faceSize + fx1]
-        const d0 = d00 * (1 - xFrac) + d10 * xFrac
-        const d1 = d01 * (1 - xFrac) + d11 * xFrac
-        diffWarped[by * bw + bx] = d0 * (1 - yFrac) + d1 * yFrac
+        const d00 = diffMap[fy0 * faceSize + fx0];
+        const d10 = diffMap[fy0 * faceSize + fx1];
+        const d01 = diffMap[fy1 * faceSize + fx0];
+        const d11 = diffMap[fy1 * faceSize + fx1];
+        const d0 = d00 * (1 - xFrac) + d10 * xFrac;
+        const d1 = d01 * (1 - xFrac) + d11 * xFrac;
+        diffWarped[by * bw + bx] = d0 * (1 - yFrac) + d1 * yFrac;
       }
     }
   }
 
   // Step 3: Threshold masks (bounded)
   for (let i = 0; i < whiteMask.length; i++) {
-    whiteMask[i] = whiteMask[i] > 20 ? 255 : 0
+    whiteMask[i] = whiteMask[i] > 20 ? 255 : 0;
   }
 
-  const DIFF_THRESH = 10
+  const DIFF_THRESH = 10;
   for (let i = 0; i < diffWarped.length; i++) {
-    diffWarped[i] = diffWarped[i] >= DIFF_THRESH ? 255 : 0
+    diffWarped[i] = diffWarped[i] >= DIFF_THRESH ? 255 : 0;
   }
 
   // Calculate adaptive kernel size based on mask dimensions
-  const maskSize = faceSizeEst
+  const maskSize = faceSizeEst;
 
   // Step 4: Morphological operations (bounded)
-  const erodeK = Math.max(Math.floor(maskSize / 10), 10)
-  let imgMask = await erodeMask(whiteMask, bw, bh, erodeK)
-  let diffMask = await dilateMask(diffWarped, bw, bh, 2)
+  const erodeK = Math.max(Math.floor(maskSize / 10), 10);
+  let imgMask = await erodeMask(whiteMask, bw, bh, erodeK);
+  let diffMask = await dilateMask(diffWarped, bw, bh, 2);
 
   // Warp face parsing mask (bounded)
   for (let by = 0; by < bh; by++) {
-    const y = by + by0
+    const y = by + by0;
     for (let bx = 0; bx < bw; bx++) {
-      const x = bx + bx0
-      const faceX = matrix[0] * x + matrix[1] * y + matrix[2]
-      const faceY = matrix[3] * x + matrix[4] * y + matrix[5]
+      const x = bx + bx0;
+      const faceX = matrix[0] * x + matrix[1] * y + matrix[2];
+      const faceY = matrix[3] * x + matrix[4] * y + matrix[5];
 
       if (faceX >= 0 && faceX < faceSize && faceY >= 0 && faceY < faceSize) {
-        const fx = Math.floor(faceX)
-        const fy = Math.floor(faceY)
+        const fx = Math.floor(faceX);
+        const fy = Math.floor(faceY);
         if (faceMask[fy * faceSize + fx] > 0) {
-          diffMask[by * bw + bx] = 255
+          diffMask[by * bw + bx] = 255;
         }
       }
     }
@@ -1274,77 +1399,84 @@ async function inverseWarpAndBlend(
 
   // Step 5: Gaussian blur (bounded)
   // Reduced blur for sharper face boundaries (less hair bleed-through)
-  const blurK = Math.max(Math.floor(maskSize / 40), 3)
-  const blurSize = blurK * 2 + 1
-  imgMask = await gaussianBlur(imgMask, bw, bh, blurSize)
-  diffMask = await boxBlur(diffMask, bw, bh, 7)
+  const blurK = Math.max(Math.floor(maskSize / 40), 3);
+  const blurSize = blurK * 2 + 1;
+  imgMask = await gaussianBlur(imgMask, bw, bh, blurSize);
+  diffMask = await boxBlur(diffMask, bw, bh, 7);
 
   // Step 6: Combine masks (bounded)
   // Warp face parsing mask to bounded space with bilinear interpolation
-  const faceParsingWarped = new Float32Array(bw * bh)
+  const faceParsingWarped = new Float32Array(bw * bh);
   for (let by = 0; by < bh; by++) {
-    const y = by + by0
+    const y = by + by0;
     for (let bx = 0; bx < bw; bx++) {
-      const x = bx + bx0
-      const faceX = matrix[0] * x + matrix[1] * y + matrix[2]
-      const faceY = matrix[3] * x + matrix[4] * y + matrix[5]
+      const x = bx + bx0;
+      const faceX = matrix[0] * x + matrix[1] * y + matrix[2];
+      const faceY = matrix[3] * x + matrix[4] * y + matrix[5];
 
       if (faceX >= 0 && faceX < faceSize && faceY >= 0 && faceY < faceSize) {
         // Bilinear interpolation for smooth mask
-        const fx0 = Math.floor(faceX)
-        const fy0 = Math.floor(faceY)
-        const fx1 = Math.min(fx0 + 1, faceSize - 1)
-        const fy1 = Math.min(fy0 + 1, faceSize - 1)
-        const xFrac = faceX - fx0
-        const yFrac = faceY - fy0
-
-        const v00 = faceMask[fy0 * faceSize + fx0]
-        const v10 = faceMask[fy0 * faceSize + fx1]
-        const v01 = faceMask[fy1 * faceSize + fx0]
-        const v11 = faceMask[fy1 * faceSize + fx1]
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        faceParsingWarped[by * bw + bx] = v0 * (1 - yFrac) + v1 * yFrac
+        const fx0 = Math.floor(faceX);
+        const fy0 = Math.floor(faceY);
+        const fx1 = Math.min(fx0 + 1, faceSize - 1);
+        const fy1 = Math.min(fy0 + 1, faceSize - 1);
+        const xFrac = faceX - fx0;
+        const yFrac = faceY - fy0;
+
+        const v00 = faceMask[fy0 * faceSize + fx0];
+        const v10 = faceMask[fy0 * faceSize + fx1];
+        const v01 = faceMask[fy1 * faceSize + fx0];
+        const v11 = faceMask[fy1 * faceSize + fx1];
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        faceParsingWarped[by * bw + bx] = v0 * (1 - yFrac) + v1 * yFrac;
       }
     }
   }
 
   // Blur face parsing mask for smooth transitions
-  const blurredFaceParsing = await gaussianBlur(faceParsingWarped, bw, bh, blurSize)
-
-  const faceRegionFloat = new Float32Array(bw * bh)
+  const blurredFaceParsing = await gaussianBlur(
+    faceParsingWarped,
+    bw,
+    bh,
+    blurSize,
+  );
+
+  const faceRegionFloat = new Float32Array(bw * bh);
   for (let i = 0; i < faceRegion.length; i++) {
-    faceRegionFloat[i] = faceRegion[i] * 255
+    faceRegionFloat[i] = faceRegion[i] * 255;
   }
-  const dilatedFaceRegion = await dilateMask(faceRegionFloat, bw, bh, 3)
-  const blurredFaceRegion = await gaussianBlur(dilatedFaceRegion, bw, bh, 5)
+  const dilatedFaceRegion = await dilateMask(faceRegionFloat, bw, bh, 3);
+  const blurredFaceRegion = await gaussianBlur(dilatedFaceRegion, bw, bh, 5);
 
   // Combine all masks: imgMask × diffMask × faceRegion × faceParsing
   for (let i = 0; i < imgMask.length; i++) {
-    const regionWeight = blurredFaceRegion[i] / 255
-    const faceWeight = blurredFaceParsing[i] / 255  // Face parsing constraint
-    imgMask[i] = (imgMask[i] / 255) * (diffMask[i] / 255) * regionWeight * faceWeight
+    const regionWeight = blurredFaceRegion[i] / 255;
+    const faceWeight = blurredFaceParsing[i] / 255; // Face parsing constraint
+    imgMask[i] =
+      (imgMask[i] / 255) * (diffMask[i] / 255) * regionWeight * faceWeight;
   }
 
   // Step 7: Final alpha blend (copy original, blend only bounded region)
-  const result = new Float32Array(originalImage)
+  const result = new Float32Array(originalImage);
   for (let by = 0; by < bh; by++) {
-    const y = by + by0
+    const y = by + by0;
     for (let bx = 0; bx < bw; bx++) {
-      const x = bx + bx0
-      const alpha = imgMask[by * bw + bx]
+      const x = bx + bx0;
+      const alpha = imgMask[by * bw + bx];
       if (alpha > 0) {
         for (let c = 0; c < 3; c++) {
-          const srcIdx = (by * bw + bx) * 3 + c
-          const dstIdx = (y * imgW + x) * 3 + c
-          const fakeVal = Math.max(0, Math.min(1, fakeWarped[srcIdx]))
-          result[dstIdx] = alpha * fakeVal + (1 - alpha) * originalImage[dstIdx]
+          const srcIdx = (by * bw + bx) * 3 + c;
+          const dstIdx = (y * imgW + x) * 3 + c;
+          const fakeVal = Math.max(0, Math.min(1, fakeWarped[srcIdx]));
+          result[dstIdx] =
+            alpha * fakeVal + (1 - alpha) * originalImage[dstIdx];
         }
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -1356,145 +1488,176 @@ async function enhanceFaceRegion(
   imgW: number,
   imgH: number,
   faceBox: FaceBox,
-  faceMask: Uint8Array
+  faceMask: Uint8Array,
 ): Promise<Float32Array> {
-  if (!gfpganSession) throw new Error('GFPGAN session not initialized')
+  if (!gfpganSession) throw new Error("GFPGAN session not initialized");
 
   // Crop face with padding (10%)
-  const padding = 0.1
-  const expandW = faceBox.width * padding
-  const expandH = faceBox.height * padding
+  const padding = 0.1;
+  const expandW = faceBox.width * padding;
+  const expandH = faceBox.height * padding;
 
-  let cropX = faceBox.x - expandW
-  let cropY = faceBox.y - expandH
-  let cropW = faceBox.width + expandW * 2
-  let cropH = faceBox.height + expandH * 2
+  let cropX = faceBox.x - expandW;
+  let cropY = faceBox.y - expandH;
+  let cropW = faceBox.width + expandW * 2;
+  let cropH = faceBox.height + expandH * 2;
 
   // Make square
-  const size = Math.max(cropW, cropH)
-  cropX = cropX - (size - cropW) / 2
-  cropY = cropY - (size - cropH) / 2
-  cropW = size
-  cropH = size
+  const size = Math.max(cropW, cropH);
+  cropX = cropX - (size - cropW) / 2;
+  cropY = cropY - (size - cropH) / 2;
+  cropW = size;
+  cropH = size;
 
   // Clamp
-  cropX = Math.max(0, cropX)
-  cropY = Math.max(0, cropY)
-  cropW = Math.min(cropW, imgW - cropX)
-  cropH = Math.min(cropH, imgH - cropY)
+  cropX = Math.max(0, cropX);
+  cropY = Math.max(0, cropY);
+  cropW = Math.min(cropW, imgW - cropX);
+  cropH = Math.min(cropH, imgH - cropY);
 
   // Crop and resize to 512x512 for GFPGAN
-  const faceData = new Float32Array(3 * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE)
+  const faceData = new Float32Array(3 * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE);
 
   for (let c = 0; c < 3; c++) {
     for (let y = 0; y < GFPGAN_INPUT_SIZE; y++) {
       for (let x = 0; x < GFPGAN_INPUT_SIZE; x++) {
-        const srcX = cropX + (x / GFPGAN_INPUT_SIZE) * cropW
-        const srcY = cropY + (y / GFPGAN_INPUT_SIZE) * cropH
+        const srcX = cropX + (x / GFPGAN_INPUT_SIZE) * cropW;
+        const srcY = cropY + (y / GFPGAN_INPUT_SIZE) * cropH;
 
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, imgW - 1)
-        const y1 = Math.min(y0 + 1, imgH - 1)
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, imgW - 1);
+        const y1 = Math.min(y0 + 1, imgH - 1);
 
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
 
-        const v00 = imageData[(y0 * imgW + x0) * 3 + c]
-        const v10 = imageData[(y0 * imgW + x1) * 3 + c]
-        const v01 = imageData[(y1 * imgW + x0) * 3 + c]
-        const v11 = imageData[(y1 * imgW + x1) * 3 + c]
+        const v00 = imageData[(y0 * imgW + x0) * 3 + c];
+        const v10 = imageData[(y0 * imgW + x1) * 3 + c];
+        const v01 = imageData[(y1 * imgW + x0) * 3 + c];
+        const v11 = imageData[(y1 * imgW + x1) * 3 + c];
 
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        let v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        let v = v0 * (1 - yFrac) + v1 * yFrac;
 
         // Normalize to [-1, 1]
-        v = (v - 0.5) / 0.5
+        v = (v - 0.5) / 0.5;
 
-        faceData[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + y * GFPGAN_INPUT_SIZE + x] = v
+        faceData[
+          c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + y * GFPGAN_INPUT_SIZE + x
+        ] = v;
       }
     }
   }
 
   // Run GFPGAN
-  const inputTensor = new ort.Tensor('float32', faceData, [1, 3, GFPGAN_INPUT_SIZE, GFPGAN_INPUT_SIZE])
-  const inputName = gfpganSession.inputNames[0]
-  const results = await gfpganSession.run({ [inputName]: inputTensor })
+  const inputTensor = new ort.Tensor("float32", faceData, [
+    1,
+    3,
+    GFPGAN_INPUT_SIZE,
+    GFPGAN_INPUT_SIZE,
+  ]);
+  const inputName = gfpganSession.inputNames[0];
+  const results = await gfpganSession.run({ [inputName]: inputTensor });
 
   // Dispose input tensor to free memory
-  disposeTensor(inputTensor)
+  disposeTensor(inputTensor);
 
-  const outputName = Object.keys(results)[0]
-  const enhancedData = results[outputName].data as Float32Array
+  const outputName = Object.keys(results)[0];
+  const enhancedData = results[outputName].data as Float32Array;
 
   // Copy enhanced data before disposing output tensor
-  const enhanced = new Float32Array(enhancedData)
+  const enhanced = new Float32Array(enhancedData);
 
   // Dispose output tensor to free memory
-  disposeTensor(results[outputName])
+  disposeTensor(results[outputName]);
 
   // Paste back with semantic mask and edge feathering
-  const result = new Float32Array(imageData)
-  const edgeFeatherSize = 12
+  const result = new Float32Array(imageData);
+  const edgeFeatherSize = 12;
 
   for (let y = 0; y < imgH; y++) {
     for (let x = 0; x < imgW; x++) {
       if (x >= cropX && x < cropX + cropW && y >= cropY && y < cropY + cropH) {
-        const faceX = ((x - cropX) / cropW) * GFPGAN_INPUT_SIZE
-        const faceY = ((y - cropY) / cropH) * GFPGAN_INPUT_SIZE
+        const faceX = ((x - cropX) / cropW) * GFPGAN_INPUT_SIZE;
+        const faceY = ((y - cropY) / cropH) * GFPGAN_INPUT_SIZE;
 
-        const fx0 = Math.floor(faceX)
-        const fy0 = Math.floor(faceY)
-        const fx1 = Math.min(fx0 + 1, GFPGAN_INPUT_SIZE - 1)
-        const fy1 = Math.min(fy0 + 1, GFPGAN_INPUT_SIZE - 1)
+        const fx0 = Math.floor(faceX);
+        const fy0 = Math.floor(faceY);
+        const fx1 = Math.min(fx0 + 1, GFPGAN_INPUT_SIZE - 1);
+        const fy1 = Math.min(fy0 + 1, GFPGAN_INPUT_SIZE - 1);
 
-        const xFrac = faceX - fx0
-        const yFrac = faceY - fy0
+        const xFrac = faceX - fx0;
+        const yFrac = faceY - fy0;
 
         // Get mask alpha from semantic segmentation (bilinear interpolation)
-        const m00 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx0]
-        const m10 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx1]
-        const m01 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx0]
-        const m11 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx1]
-        const m0 = m00 * (1 - xFrac) + m10 * xFrac
-        const m1 = m01 * (1 - xFrac) + m11 * xFrac
-        let maskAlpha = (m0 * (1 - yFrac) + m1 * yFrac) / 255
+        const m00 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx0];
+        const m10 = faceMask[fy0 * GFPGAN_INPUT_SIZE + fx1];
+        const m01 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx0];
+        const m11 = faceMask[fy1 * GFPGAN_INPUT_SIZE + fx1];
+        const m0 = m00 * (1 - xFrac) + m10 * xFrac;
+        const m1 = m01 * (1 - xFrac) + m11 * xFrac;
+        let maskAlpha = (m0 * (1 - yFrac) + m1 * yFrac) / 255;
 
         // Apply additional edge feathering at crop boundaries
         const distToEdge = Math.min(
-          x - cropX, cropX + cropW - 1 - x,
-          y - cropY, cropY + cropH - 1 - y
-        )
-        const edgeFactor = Math.min(1, distToEdge / edgeFeatherSize)
+          x - cropX,
+          cropX + cropW - 1 - x,
+          y - cropY,
+          cropY + cropH - 1 - y,
+        );
+        const edgeFactor = Math.min(1, distToEdge / edgeFeatherSize);
 
         // Combine mask alpha with edge feathering
-        const blendFactor = maskAlpha * edgeFactor
+        const blendFactor = maskAlpha * edgeFactor;
 
         if (blendFactor > 0) {
           for (let c = 0; c < 3; c++) {
-            const v00 = enhanced[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy0 * GFPGAN_INPUT_SIZE + fx0]
-            const v10 = enhanced[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy0 * GFPGAN_INPUT_SIZE + fx1]
-            const v01 = enhanced[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy1 * GFPGAN_INPUT_SIZE + fx0]
-            const v11 = enhanced[c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE + fy1 * GFPGAN_INPUT_SIZE + fx1]
-
-            const v0 = v00 * (1 - xFrac) + v10 * xFrac
-            const v1 = v01 * (1 - xFrac) + v11 * xFrac
-            let enhancedVal = v0 * (1 - yFrac) + v1 * yFrac
+            const v00 =
+              enhanced[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy0 * GFPGAN_INPUT_SIZE +
+                  fx0
+              ];
+            const v10 =
+              enhanced[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy0 * GFPGAN_INPUT_SIZE +
+                  fx1
+              ];
+            const v01 =
+              enhanced[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy1 * GFPGAN_INPUT_SIZE +
+                  fx0
+              ];
+            const v11 =
+              enhanced[
+                c * GFPGAN_INPUT_SIZE * GFPGAN_INPUT_SIZE +
+                  fy1 * GFPGAN_INPUT_SIZE +
+                  fx1
+              ];
+
+            const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+            const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+            let enhancedVal = v0 * (1 - yFrac) + v1 * yFrac;
 
             // Denormalize from [-1, 1] to [0, 1]
-            enhancedVal = (enhancedVal + 1) / 2
-            enhancedVal = Math.max(0, Math.min(1, enhancedVal))
+            enhancedVal = (enhancedVal + 1) / 2;
+            enhancedVal = Math.max(0, Math.min(1, enhancedVal));
 
-            const origIdx = (y * imgW + x) * 3 + c
-            result[origIdx] = imageData[origIdx] * (1 - blendFactor) + enhancedVal * blendFactor
+            const origIdx = (y * imgW + x) * 3 + c;
+            result[origIdx] =
+              imageData[origIdx] * (1 - blendFactor) +
+              enhancedVal * blendFactor;
           }
         }
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -1504,262 +1667,362 @@ async function enhanceFaceRegion(
 async function detectFaces(
   imageData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): Promise<DetectedFace[]> {
-  return await detectFacesWithLandmarks(imageData, width, height)
+  return await detectFacesWithLandmarks(imageData, width, height);
 }
 
 /**
  * Handle incoming messages
  */
 self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   switch (type) {
-    case 'init': {
+    case "init": {
       try {
-        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT
-        const enableEnhancement = payload?.enableEnhancement ?? false
+        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT;
+        const enableEnhancement = payload?.enableEnhancement ?? false;
 
         // Always update the enhancement preference
-        enhancementEnabled = enableEnhancement
+        enhancementEnabled = enableEnhancement;
 
         // Reuse existing sessions if already initialized
         if (det10gSession && arcfaceSession && inswapperSession && segmenter) {
           // If enhancement is off, or enhancement is on and GFPGAN is loaded, we're ready
           if (!enableEnhancement || gfpganSession) {
-            self.postMessage({ type: 'ready', payload: { id: payload?.id } })
-            break
+            self.postMessage({ type: "ready", payload: { id: payload?.id } });
+            break;
           }
 
           // Enhancement is ON but GFPGAN not loaded - load only GFPGAN
-          self.postMessage({ type: 'phase', payload: { phase: 'download', id: payload?.id } })
-
-          const gfpganCached = await isModelCached(GFPGAN_MODEL_URL, FACE_ENHANCER_CACHE)
-
-          const gfpganBuffer = await downloadModel(GFPGAN_MODEL_URL, (current, total) => {
-            const progress = (current / (total || 1)) * 100
-            self.postMessage({
-              type: 'progress',
-              payload: {
-                phase: 'download',
-                progress,
-                detail: gfpganCached ? undefined : { current, total, unit: 'bytes' },
-                id: payload?.id
-              }
-            })
-          }, timeout, FACE_ENHANCER_CACHE)
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
+
+          const gfpganCached = await isModelCached(
+            GFPGAN_MODEL_URL,
+            FACE_ENHANCER_CACHE,
+          );
+
+          const gfpganBuffer = await downloadModel(
+            GFPGAN_MODEL_URL,
+            (current, total) => {
+              const progress = (current / (total || 1)) * 100;
+              self.postMessage({
+                type: "progress",
+                payload: {
+                  phase: "download",
+                  progress,
+                  detail: gfpganCached
+                    ? undefined
+                    : { current, total, unit: "bytes" },
+                  id: payload?.id,
+                },
+              });
+            },
+            timeout,
+            FACE_ENHANCER_CACHE,
+          );
 
-          self.postMessage({ type: 'phase', payload: { phase: 'loading', id: payload?.id } })
-          gfpganSession = await createSession(gfpganBuffer)
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "loading", id: payload?.id },
+          });
+          gfpganSession = await createSession(gfpganBuffer);
 
-          self.postMessage({ type: 'ready', payload: { id: payload?.id } })
-          break
+          self.postMessage({ type: "ready", payload: { id: payload?.id } });
+          break;
         }
 
         // Check for WebGPU support
-        useWebGPU = await checkWebGPU()
+        useWebGPU = await checkWebGPU();
 
         // Initialize WebGPU compute for image processing
         if (useWebGPU) {
-          await initWebGPU()
+          await initWebGPU();
         }
 
         // Calculate total model size for progress
-        let totalSize = MODEL_SIZES.det10g + MODEL_SIZES.arcface + MODEL_SIZES.inswapper + MODEL_SIZES.emap
+        let totalSize =
+          MODEL_SIZES.det10g +
+          MODEL_SIZES.arcface +
+          MODEL_SIZES.inswapper +
+          MODEL_SIZES.emap;
         if (enableEnhancement) {
-          totalSize += MODEL_SIZES.gfpgan
+          totalSize += MODEL_SIZES.gfpgan;
         }
 
         // Check cache status
-        const det10gCached = await isModelCached(DET_10G_MODEL_URL)
-        const arcfaceCached = await isModelCached(ARCFACE_MODEL_URL)
-        const inswapperCached = await isModelCached(INSWAPPER_MODEL_URL)
-        const emapCached = await isModelCached(EMAP_URL)
-        const gfpganCached = enableEnhancement ? await isModelCached(GFPGAN_MODEL_URL, FACE_ENHANCER_CACHE) : true
+        const det10gCached = await isModelCached(DET_10G_MODEL_URL);
+        const arcfaceCached = await isModelCached(ARCFACE_MODEL_URL);
+        const inswapperCached = await isModelCached(INSWAPPER_MODEL_URL);
+        const emapCached = await isModelCached(EMAP_URL);
+        const gfpganCached = enableEnhancement
+          ? await isModelCached(GFPGAN_MODEL_URL, FACE_ENHANCER_CACHE)
+          : true;
 
-        let downloadedSize = 0
+        let downloadedSize = 0;
 
         // Download det_10g (detection + landmarks from InsightFace)
-        self.postMessage({ type: 'phase', payload: { phase: 'download', id: payload?.id } })
-
-        const det10gBuffer = await downloadModel(DET_10G_MODEL_URL, (current, total) => {
-          const progress = ((downloadedSize + (current / (total || 1)) * MODEL_SIZES.det10g) / totalSize) * 100
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: det10gCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
-        downloadedSize += MODEL_SIZES.det10g
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "download", id: payload?.id },
+        });
+
+        const det10gBuffer = await downloadModel(
+          DET_10G_MODEL_URL,
+          (current, total) => {
+            const progress =
+              ((downloadedSize +
+                (current / (total || 1)) * MODEL_SIZES.det10g) /
+                totalSize) *
+              100;
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: det10gCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
+        downloadedSize += MODEL_SIZES.det10g;
 
         // Download ArcFace
-        const arcfaceBuffer = await downloadModel(ARCFACE_MODEL_URL, (current, total) => {
-          const progress = ((downloadedSize + (current / (total || 1)) * MODEL_SIZES.arcface) / totalSize) * 100
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: arcfaceCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
-        downloadedSize += MODEL_SIZES.arcface
+        const arcfaceBuffer = await downloadModel(
+          ARCFACE_MODEL_URL,
+          (current, total) => {
+            const progress =
+              ((downloadedSize +
+                (current / (total || 1)) * MODEL_SIZES.arcface) /
+                totalSize) *
+              100;
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: arcfaceCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
+        downloadedSize += MODEL_SIZES.arcface;
 
         // Download Inswapper
-        const inswapperBuffer = await downloadModel(INSWAPPER_MODEL_URL, (current, total) => {
-          const progress = ((downloadedSize + (current / (total || 1)) * MODEL_SIZES.inswapper) / totalSize) * 100
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: inswapperCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
-        downloadedSize += MODEL_SIZES.inswapper
+        const inswapperBuffer = await downloadModel(
+          INSWAPPER_MODEL_URL,
+          (current, total) => {
+            const progress =
+              ((downloadedSize +
+                (current / (total || 1)) * MODEL_SIZES.inswapper) /
+                totalSize) *
+              100;
+            self.postMessage({
+              type: "progress",
+              payload: {
+                phase: "download",
+                progress,
+                detail: inswapperCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
+        downloadedSize += MODEL_SIZES.inswapper;
 
         // Download EMAP matrix (embedding transformation for inswapper)
-        const emapBuffer = await downloadModel(EMAP_URL, (current, total) => {
-          const progress = ((downloadedSize + (current / (total || 1)) * MODEL_SIZES.emap) / totalSize) * 100
-          self.postMessage({
-            type: 'progress',
-            payload: {
-              phase: 'download',
-              progress,
-              detail: emapCached ? undefined : { current, total, unit: 'bytes' },
-              id: payload?.id
-            }
-          })
-        }, timeout)
-        downloadedSize += MODEL_SIZES.emap
-
-        // Download GFPGAN if enhancement enabled
-        let gfpganBuffer: ArrayBuffer | null = null
-        if (enableEnhancement) {
-          gfpganBuffer = await downloadModel(GFPGAN_MODEL_URL, (current, total) => {
-            const progress = ((downloadedSize + (current / (total || 1)) * MODEL_SIZES.gfpgan) / totalSize) * 100
+        const emapBuffer = await downloadModel(
+          EMAP_URL,
+          (current, total) => {
+            const progress =
+              ((downloadedSize + (current / (total || 1)) * MODEL_SIZES.emap) /
+                totalSize) *
+              100;
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: 'download',
+                phase: "download",
                 progress,
-                detail: gfpganCached ? undefined : { current, total, unit: 'bytes' },
-                id: payload?.id
-              }
-            })
-          }, timeout, FACE_ENHANCER_CACHE)
+                detail: emapCached
+                  ? undefined
+                  : { current, total, unit: "bytes" },
+                id: payload?.id,
+              },
+            });
+          },
+          timeout,
+        );
+        downloadedSize += MODEL_SIZES.emap;
+
+        // Download GFPGAN if enhancement enabled
+        let gfpganBuffer: ArrayBuffer | null = null;
+        if (enableEnhancement) {
+          gfpganBuffer = await downloadModel(
+            GFPGAN_MODEL_URL,
+            (current, total) => {
+              const progress =
+                ((downloadedSize +
+                  (current / (total || 1)) * MODEL_SIZES.gfpgan) /
+                  totalSize) *
+                100;
+              self.postMessage({
+                type: "progress",
+                payload: {
+                  phase: "download",
+                  progress,
+                  detail: gfpganCached
+                    ? undefined
+                    : { current, total, unit: "bytes" },
+                  id: payload?.id,
+                },
+              });
+            },
+            timeout,
+            FACE_ENHANCER_CACHE,
+          );
         }
 
         // Create ONNX sessions
-        self.postMessage({ type: 'phase', payload: { phase: 'loading', id: payload?.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "loading", id: payload?.id },
+        });
 
-        det10gSession = await createSession(det10gBuffer)
-        arcfaceSession = await createSession(arcfaceBuffer)
+        det10gSession = await createSession(det10gBuffer);
+        arcfaceSession = await createSession(arcfaceBuffer);
 
         // Parse EMAP matrix from downloaded binary (512x512 float32 = 1MB)
-        emapMatrix = new Float32Array(emapBuffer)
+        emapMatrix = new Float32Array(emapBuffer);
 
-        inswapperSession = await createSession(inswapperBuffer)
+        inswapperSession = await createSession(inswapperBuffer);
 
         if (enableEnhancement && gfpganBuffer) {
-          gfpganSession = await createSession(gfpganBuffer)
+          gfpganSession = await createSession(gfpganBuffer);
         }
 
         // Initialize face-parsing segmenter using transformers.js pipeline
         // This is used for precise face masking (same as face enhancer)
-        segmenter = await pipeline('image-segmentation', 'Xenova/face-parsing', {
-          device: useWebGPU ? 'webgpu' : 'wasm',
-          dtype: 'fp32'
-        })
+        segmenter = await pipeline(
+          "image-segmentation",
+          "Xenova/face-parsing",
+          {
+            device: useWebGPU ? "webgpu" : "wasm",
+            dtype: "fp32",
+          },
+        );
 
-        self.postMessage({ type: 'ready', payload: { id: payload?.id } })
+        self.postMessage({ type: "ready", payload: { id: payload?.id } });
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to initialize models'
-        })
+          type: "error",
+          payload:
+            error instanceof Error
+              ? error.message
+              : "Failed to initialize models",
+        });
       }
-      break
+      break;
     }
 
-    case 'detect': {
+    case "detect": {
       if (!payload?.imageData || !payload?.width || !payload?.height) {
-        self.postMessage({ type: 'error', payload: 'Missing image data' })
-        return
+        self.postMessage({ type: "error", payload: "Missing image data" });
+        return;
       }
 
       try {
-        self.postMessage({ type: 'phase', payload: { phase: 'detect', id: payload.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "detect", id: payload.id },
+        });
 
         const faces = await detectFaces(
           payload.imageData,
           payload.width,
-          payload.height
-        )
+          payload.height,
+        );
 
         self.postMessage({
-          type: 'detectResult',
+          type: "detectResult",
           payload: {
             faces,
             imageId: payload.imageId,
-            id: payload.id
-          }
-        })
+            id: payload.id,
+          },
+        });
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to detect faces'
-        })
+          type: "error",
+          payload:
+            error instanceof Error ? error.message : "Failed to detect faces",
+        });
       }
-      break
+      break;
     }
 
-    case 'swap': {
-      if (!payload?.sourceImage || !payload?.targetImage || !payload?.sourceLandmarks || !payload?.targetFaces) {
-        self.postMessage({ type: 'error', payload: 'Missing swap parameters' })
-        return
+    case "swap": {
+      if (
+        !payload?.sourceImage ||
+        !payload?.targetImage ||
+        !payload?.sourceLandmarks ||
+        !payload?.targetFaces
+      ) {
+        self.postMessage({ type: "error", payload: "Missing swap parameters" });
+        return;
       }
 
       try {
         // Phase: embed - extract source embedding
-        self.postMessage({ type: 'phase', payload: { phase: 'embed', id: payload.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "embed", id: payload.id },
+        });
 
         const sourceEmbedding = await extractEmbedding(
           payload.sourceImage,
           payload.sourceWidth!,
           payload.sourceHeight!,
-          payload.sourceLandmarks
-        )
+          payload.sourceLandmarks,
+        );
 
         self.postMessage({
-          type: 'progress',
-          payload: { phase: 'embed', progress: 100, id: payload.id }
-        })
+          type: "progress",
+          payload: { phase: "embed", progress: 100, id: payload.id },
+        });
 
         // Phase: swap - swap each target face
-        self.postMessage({ type: 'phase', payload: { phase: 'swap', id: payload.id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "swap", id: payload.id },
+        });
 
         // Keep reference to original target image for face parsing and color matching
         // This ensures we always use the original target face features, not already-swapped faces
-        const originalTarget = new Float32Array(payload.targetImage)
-        let result: Float32Array = new Float32Array(payload.targetImage)
-        const targetFaces = payload.targetFaces
-        const totalFaces = targetFaces.length
+        const originalTarget = new Float32Array(payload.targetImage);
+        let result: Float32Array = new Float32Array(payload.targetImage);
+        const targetFaces = payload.targetFaces;
+        const totalFaces = targetFaces.length;
 
         // Store face boxes and masks for enhancement phase
-        const swappedFaceData: { box: FaceBox; mask: Uint8Array }[] = []
+        const swappedFaceData: { box: FaceBox; mask: Uint8Array }[] = [];
 
         for (let i = 0; i < totalFaces; i++) {
-          const face = targetFaces[i]
+          const face = targetFaces[i];
 
           // Swap face using original target image for consistent alignment
           const { swapped, matrix } = await swapFace(
@@ -1767,12 +2030,15 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
             payload.targetWidth!,
             payload.targetHeight!,
             face.landmarks,
-            sourceEmbedding
-          )
+            sourceEmbedding,
+          );
 
           // Generate face mask from SWAPPED face using face parsing
           // This ensures the mask matches the actual swapped result boundaries
-          const swapMask = await parseSwappedFace(swapped, INSWAPPER_INPUT_SIZE)
+          const swapMask = await parseSwappedFace(
+            swapped,
+            INSWAPPER_INPUT_SIZE,
+          );
 
           // Get aligned original face for difference map calculation (same alignment as swapped)
           const alignedOriginal = warpAffine(
@@ -1781,9 +2047,9 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
             payload.targetHeight!,
             matrix,
             INSWAPPER_INPUT_SIZE,
-            false,  // No normalization, keep [0,1] range
-            false   // RGB, not BGR
-          )
+            false, // No normalization, keep [0,1] range
+            false, // RGB, not BGR
+          );
 
           result = await inverseWarpAndBlend(
             result,
@@ -1792,8 +2058,8 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
             swapped,
             alignedOriginal,
             matrix,
-            swapMask
-          )
+            swapMask,
+          );
 
           // Generate mask at GFPGAN size using crop from original target
           const enhanceMask = await parseFaceCrop(
@@ -1801,99 +2067,103 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
             payload.targetWidth!,
             payload.targetHeight!,
             face.box,
-            GFPGAN_INPUT_SIZE
-          )
+            GFPGAN_INPUT_SIZE,
+          );
 
-          swappedFaceData.push({ box: face.box, mask: enhanceMask })
+          swappedFaceData.push({ box: face.box, mask: enhanceMask });
 
           self.postMessage({
-            type: 'progress',
+            type: "progress",
             payload: {
-              phase: 'swap',
+              phase: "swap",
               progress: ((i + 1) / totalFaces) * 100,
-              id: payload.id
-            }
-          })
+              id: payload.id,
+            },
+          });
         }
 
         // Phase: enhance - optional GFPGAN enhancement (only if user enabled it)
         if (enhancementEnabled && gfpganSession && swappedFaceData.length > 0) {
-          self.postMessage({ type: 'phase', payload: { phase: 'enhance', id: payload.id } })
+          self.postMessage({
+            type: "phase",
+            payload: { phase: "enhance", id: payload.id },
+          });
 
           for (let i = 0; i < swappedFaceData.length; i++) {
-            const { box, mask } = swappedFaceData[i]
+            const { box, mask } = swappedFaceData[i];
             result = (await enhanceFaceRegion(
               result,
               payload.targetWidth!,
               payload.targetHeight!,
               box,
-              mask
-            )) as Float32Array<ArrayBuffer>
+              mask,
+            )) as Float32Array<ArrayBuffer>;
 
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: 'enhance',
+                phase: "enhance",
                 progress: ((i + 1) / swappedFaceData.length) * 100,
-                id: payload.id
-              }
-            })
+                id: payload.id,
+              },
+            });
           }
         }
 
         // Send result
         self.postMessage(
           {
-            type: 'swapResult',
+            type: "swapResult",
             payload: {
               data: result,
               width: payload.targetWidth,
               height: payload.targetHeight,
-              id: payload.id
-            }
+              id: payload.id,
+            },
           },
-          { transfer: [result.buffer] }
-        )
+          { transfer: [result.buffer] },
+        );
       } catch (error) {
         self.postMessage({
-          type: 'error',
-          payload: error instanceof Error ? error.message : 'Failed to swap faces'
-        })
+          type: "error",
+          payload:
+            error instanceof Error ? error.message : "Failed to swap faces",
+        });
       }
-      break
+      break;
     }
 
-    case 'dispose': {
+    case "dispose": {
       // Properly release ONNX sessions to free GPU/WASM memory
       try {
         if (det10gSession) {
-          await det10gSession.release()
-          det10gSession = null
+          await det10gSession.release();
+          det10gSession = null;
         }
         if (arcfaceSession) {
-          await arcfaceSession.release()
-          arcfaceSession = null
+          await arcfaceSession.release();
+          arcfaceSession = null;
         }
         if (inswapperSession) {
-          await inswapperSession.release()
-          inswapperSession = null
+          await inswapperSession.release();
+          inswapperSession = null;
         }
         if (gfpganSession) {
-          await gfpganSession.release()
-          gfpganSession = null
+          await gfpganSession.release();
+          gfpganSession = null;
         }
         // Dispose segmenter if it has a dispose method
-        if (segmenter && typeof segmenter.dispose === 'function') {
-          await segmenter.dispose()
+        if (segmenter && typeof segmenter.dispose === "function") {
+          await segmenter.dispose();
         }
-        segmenter = null
+        segmenter = null;
         // Dispose WebGPU resources
-        disposeWebGPU()
+        disposeWebGPU();
       } catch (e) {
-        console.warn('Error disposing sessions:', e)
+        console.warn("Error disposing sessions:", e);
       }
-      self.postMessage({ type: 'disposed' })
-      break
+      self.postMessage({ type: "disposed" });
+      break;
     }
   }
-}
+};
diff --git a/src/workers/ffmpeg.worker.ts b/src/workers/ffmpeg.worker.ts
index 291e125f..16a83998 100644
--- a/src/workers/ffmpeg.worker.ts
+++ b/src/workers/ffmpeg.worker.ts
@@ -1,147 +1,154 @@
 const CDN_BASE_URLS = [
-  'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm',
-  'https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm',
-]
+  "https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm",
+  "https://unpkg.com/@ffmpeg/core@0.12.6/dist/esm",
+];
 
 interface FFmpegCore {
   FS: {
-    writeFile(path: string, data: Uint8Array | string): void
-    readFile(path: string, opts?: { encoding?: string }): Uint8Array | string
-    unlink(path: string): void
-    mkdir(path: string): void
-    readdir(path: string): string[]
-    stat(path: string): { mode: number }
-    isDir(mode: number): boolean
-  }
-  exec(...args: string[]): void
-  ret: number
-  reset(): void
-  setTimeout(timeout: number): void
-  setLogger(cb: (data: { type: string; message: string }) => void): void
-  setProgress(cb: (data: { progress: number; time: number }) => void): void
+    writeFile(path: string, data: Uint8Array | string): void;
+    readFile(path: string, opts?: { encoding?: string }): Uint8Array | string;
+    unlink(path: string): void;
+    mkdir(path: string): void;
+    readdir(path: string): string[];
+    stat(path: string): { mode: number };
+    isDir(mode: number): boolean;
+  };
+  exec(...args: string[]): void;
+  ret: number;
+  reset(): void;
+  setTimeout(timeout: number): void;
+  setLogger(cb: (data: { type: string; message: string }) => void): void;
+  setProgress(cb: (data: { progress: number; time: number }) => void): void;
 }
 
 async function fetchValidated(url: string): Promise<ArrayBuffer> {
-  const resp = await fetch(url)
-  if (!resp.ok) throw new Error(`HTTP ${resp.status} fetching ${url}`)
-  return resp.arrayBuffer()
+  const resp = await fetch(url);
+  if (!resp.ok) throw new Error(`HTTP ${resp.status} fetching ${url}`);
+  return resp.arrayBuffer();
 }
 
 function toBlobURL(buf: ArrayBuffer, mimeType: string): string {
-  return URL.createObjectURL(new Blob([buf], { type: mimeType }))
+  return URL.createObjectURL(new Blob([buf], { type: mimeType }));
 }
 
 async function fetchFromCDNs(filename: string): Promise<ArrayBuffer> {
-  let lastErr: Error | null = null
+  let lastErr: Error | null = null;
   for (const base of CDN_BASE_URLS) {
     try {
-      const buf = await fetchValidated(`${base}/${filename}`)
-      if (filename.endsWith('.wasm')) {
-        const magic = new Uint8Array(buf, 0, 4)
-        if (magic[0] !== 0x00 || magic[1] !== 0x61 || magic[2] !== 0x73 || magic[3] !== 0x6d) {
-          throw new Error(`Invalid WASM from ${base}/${filename}`)
+      const buf = await fetchValidated(`${base}/${filename}`);
+      if (filename.endsWith(".wasm")) {
+        const magic = new Uint8Array(buf, 0, 4);
+        if (
+          magic[0] !== 0x00 ||
+          magic[1] !== 0x61 ||
+          magic[2] !== 0x73 ||
+          magic[3] !== 0x6d
+        ) {
+          throw new Error(`Invalid WASM from ${base}/${filename}`);
         }
       }
-      return buf
+      return buf;
     } catch (e) {
-      lastErr = e as Error
+      lastErr = e as Error;
     }
   }
-  throw lastErr ?? new Error(`Failed to fetch ${filename} from all CDNs`)
+  throw lastErr ?? new Error(`Failed to fetch ${filename} from all CDNs`);
 }
 
-let ffmpegCore: FFmpegCore | null = null
-let isLoaded = false
-let loadingPromise: Promise<void> | null = null
-let currentOperationId: number | null = null
+let ffmpegCore: FFmpegCore | null = null;
+let isLoaded = false;
+let loadingPromise: Promise<void> | null = null;
+let currentOperationId: number | null = null;
 
 interface ConvertOptions {
-  videoCodec?: string
-  videoBitrate?: string
-  resolution?: string
-  fps?: number
-  audioCodec?: string
-  audioBitrate?: string
-  sampleRate?: number
-  quality?: number
+  videoCodec?: string;
+  videoBitrate?: string;
+  resolution?: string;
+  fps?: number;
+  audioCodec?: string;
+  audioBitrate?: string;
+  sampleRate?: number;
+  quality?: number;
 }
 
 interface ConvertPayload {
-  file: ArrayBuffer
-  fileName: string
-  outputFormat: string
-  outputExt: string
-  options?: ConvertOptions
-  id: number
+  file: ArrayBuffer;
+  fileName: string;
+  outputFormat: string;
+  outputExt: string;
+  options?: ConvertOptions;
+  id: number;
 }
 
 interface MergePayload {
-  files: ArrayBuffer[]
-  fileNames: string[]
-  outputFormat: string
-  outputExt: string
-  id: number
+  files: ArrayBuffer[];
+  fileNames: string[];
+  outputFormat: string;
+  outputExt: string;
+  id: number;
 }
 
 interface TrimPayload {
-  file: ArrayBuffer
-  fileName: string
-  startTime: number
-  endTime: number
-  outputFormat: string
-  outputExt: string
-  id: number
+  file: ArrayBuffer;
+  fileName: string;
+  startTime: number;
+  endTime: number;
+  outputFormat: string;
+  outputExt: string;
+  id: number;
 }
 
 interface InfoPayload {
-  file: ArrayBuffer
-  fileName: string
-  id: number
+  file: ArrayBuffer;
+  fileName: string;
+  id: number;
 }
 
-async function ensureLoaded(onProgress?: (progress: number) => void): Promise<FFmpegCore> {
-  if (isLoaded && ffmpegCore) return ffmpegCore
+async function ensureLoaded(
+  onProgress?: (progress: number) => void,
+): Promise<FFmpegCore> {
+  if (isLoaded && ffmpegCore) return ffmpegCore;
 
   if (loadingPromise) {
-    await loadingPromise
-    return ffmpegCore!
+    await loadingPromise;
+    return ffmpegCore!;
   }
 
   loadingPromise = (async () => {
-    onProgress?.(5)
-    const coreBuf = await fetchFromCDNs('ffmpeg-core.js')
+    onProgress?.(5);
+    const coreBuf = await fetchFromCDNs("ffmpeg-core.js");
 
-    onProgress?.(40)
-    const wasmBuf = await fetchFromCDNs('ffmpeg-core.wasm')
+    onProgress?.(40);
+    const wasmBuf = await fetchFromCDNs("ffmpeg-core.wasm");
 
-    onProgress?.(80)
+    onProgress?.(80);
 
     // Import the core module directly — bypasses @ffmpeg/ffmpeg's internal
     // Worker layer which always derives a workerURL and causes the load to hang
     // when @ffmpeg/core is the single-thread build (no .worker.js file).
-    const coreURL = toBlobURL(coreBuf, 'text/javascript')
+    const coreURL = toBlobURL(coreBuf, "text/javascript");
     const coreFactory = (await import(/* @vite-ignore */ coreURL)).default as (
-      config: Record<string, unknown>
-    ) => Promise<FFmpegCore>
+      config: Record<string, unknown>,
+    ) => Promise<FFmpegCore>;
 
     // Pass wasmBinary directly so Emscripten skips its own fetch of the .wasm
     // file (which would fail because import.meta.url is a blob URL).
     ffmpegCore = await coreFactory({
       wasmBinary: wasmBuf,
-    })
+    });
 
-    isLoaded = true
-    onProgress?.(100)
-  })()
+    isLoaded = true;
+    onProgress?.(100);
+  })();
 
   try {
-    await loadingPromise
-    return ffmpegCore!
+    await loadingPromise;
+    return ffmpegCore!;
   } catch (error) {
-    loadingPromise = null
-    isLoaded = false
-    ffmpegCore = null
-    throw error
+    loadingPromise = null;
+    isLoaded = false;
+    ffmpegCore = null;
+    throw error;
   }
 }
 
@@ -149,311 +156,471 @@ function buildConvertArgs(
   inputFile: string,
   outputFile: string,
   outputFormat: string,
-  options?: ConvertOptions
+  options?: ConvertOptions,
 ): string[] {
-  const args: string[] = ['-i', inputFile]
+  const args: string[] = ["-i", inputFile];
 
-  if (['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp'].includes(outputFormat)) {
-    if (options?.quality && ['jpg', 'jpeg', 'webp'].includes(outputFormat)) {
-      if (outputFormat === 'webp') {
-        args.push('-quality', String(options.quality))
+  if (["jpg", "jpeg", "png", "webp", "gif", "bmp"].includes(outputFormat)) {
+    if (options?.quality && ["jpg", "jpeg", "webp"].includes(outputFormat)) {
+      if (outputFormat === "webp") {
+        args.push("-quality", String(options.quality));
       } else {
-        const qscale = Math.round(31 - (options.quality / 100) * 29)
-        args.push('-qscale:v', String(qscale))
+        const qscale = Math.round(31 - (options.quality / 100) * 29);
+        args.push("-qscale:v", String(qscale));
       }
     }
-    args.push('-frames:v', '1', '-update', '1', outputFile)
-    return args
+    args.push("-frames:v", "1", "-update", "1", outputFile);
+    return args;
   }
 
-  if (options?.videoCodec) args.push('-c:v', options.videoCodec)
-  if (options?.videoBitrate) args.push('-b:v', options.videoBitrate)
-  if (options?.audioCodec) args.push('-c:a', options.audioCodec)
-  if (options?.audioBitrate) args.push('-b:a', options.audioBitrate)
+  if (options?.videoCodec) args.push("-c:v", options.videoCodec);
+  if (options?.videoBitrate) args.push("-b:v", options.videoBitrate);
+  if (options?.audioCodec) args.push("-c:a", options.audioCodec);
+  if (options?.audioBitrate) args.push("-b:a", options.audioBitrate);
 
-  if (options?.resolution && options.resolution !== 'original') {
-    args.push('-vf', `scale=${options.resolution.replace('x', ':')}`)
+  if (options?.resolution && options.resolution !== "original") {
+    args.push("-vf", `scale=${options.resolution.replace("x", ":")}`);
   }
-  if (options?.fps) args.push('-r', String(options.fps))
-  if (options?.sampleRate) args.push('-ar', String(options.sampleRate))
+  if (options?.fps) args.push("-r", String(options.fps));
+  if (options?.sampleRate) args.push("-ar", String(options.sampleRate));
 
-  args.push(outputFile)
-  return args
+  args.push(outputFile);
+  return args;
 }
 
 function parseDuration(log: string): number | null {
-  const match = log.match(/Duration: (\d{2}):(\d{2}):(\d{2})\.(\d{2})/)
+  const match = log.match(/Duration: (\d{2}):(\d{2}):(\d{2})\.(\d{2})/);
   if (match) {
-    return parseInt(match[1]) * 3600 + parseInt(match[2]) * 60 + parseInt(match[3]) + parseInt(match[4]) / 100
+    return (
+      parseInt(match[1]) * 3600 +
+      parseInt(match[2]) * 60 +
+      parseInt(match[3]) +
+      parseInt(match[4]) / 100
+    );
   }
-  return null
+  return null;
 }
 
 function runExec(ff: FFmpegCore, args: string[]): number {
-  ff.exec(...args)
-  const ret = ff.ret
-  ff.reset()
-  return ret
+  ff.exec(...args);
+  const ret = ff.ret;
+  ff.reset();
+  return ret;
 }
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'load': {
-        self.postMessage({ type: 'phase', payload: { phase: 'download' } })
+      case "load": {
+        self.postMessage({ type: "phase", payload: { phase: "download" } });
         await ensureLoaded((progress) => {
-          self.postMessage({ type: 'progress', payload: { phase: 'download', progress } })
-        })
-        self.postMessage({ type: 'loaded' })
-        break
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "download", progress },
+          });
+        });
+        self.postMessage({ type: "loaded" });
+        break;
       }
 
-      case 'convert': {
-        const { file, fileName, outputFormat, outputExt, options, id } = payload as ConvertPayload
-        currentOperationId = id
+      case "convert": {
+        const { file, fileName, outputFormat, outputExt, options, id } =
+          payload as ConvertPayload;
+        currentOperationId = id;
 
-        self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+        self.postMessage({ type: "phase", payload: { phase: "download", id } });
         const ff = await ensureLoaded((progress) => {
-          self.postMessage({ type: 'progress', payload: { phase: 'download', progress, id } })
-        })
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "download", progress, id },
+          });
+        });
 
-        self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
+        self.postMessage({ type: "phase", payload: { phase: "process", id } });
 
-        const inputExt = fileName.split('.').pop() || 'bin'
-        const safeInput = `input.${inputExt}`
-        ff.FS.writeFile(safeInput, new Uint8Array(file))
+        const inputExt = fileName.split(".").pop() || "bin";
+        const safeInput = `input.${inputExt}`;
+        ff.FS.writeFile(safeInput, new Uint8Array(file));
 
-        let totalDuration: number | null = null
+        let totalDuration: number | null = null;
         ff.setLogger(({ message }) => {
-          if (!totalDuration) totalDuration = parseDuration(message)
-        })
+          if (!totalDuration) totalDuration = parseDuration(message);
+        });
 
         ff.setProgress(({ progress, time }) => {
-          if (currentOperationId !== id) return
+          if (currentOperationId !== id) return;
           self.postMessage({
-            type: 'progress',
+            type: "progress",
             payload: {
-              phase: 'process',
+              phase: "process",
               progress: progress * 100,
-              detail: totalDuration ? { current: Math.floor(time / 1000000), total: Math.floor(totalDuration), unit: 'seconds' } : undefined,
-              id
-            }
-          })
-        })
-
-        const outputFile = `output.${outputExt}`
-        runExec(ff, buildConvertArgs(safeInput, outputFile, outputFormat, options))
-
-        const data = ff.FS.readFile(outputFile) as Uint8Array
-        ff.FS.unlink(safeInput)
-        ff.FS.unlink(outputFile)
-
-        const buffer = data.buffer
-        self.postMessage({ type: 'result', payload: { data: buffer, filename: outputFile, id } }, { transfer: [buffer] })
-        currentOperationId = null
-        break
+              detail: totalDuration
+                ? {
+                    current: Math.floor(time / 1000000),
+                    total: Math.floor(totalDuration),
+                    unit: "seconds",
+                  }
+                : undefined,
+              id,
+            },
+          });
+        });
+
+        const outputFile = `output.${outputExt}`;
+        runExec(
+          ff,
+          buildConvertArgs(safeInput, outputFile, outputFormat, options),
+        );
+
+        const data = ff.FS.readFile(outputFile) as Uint8Array;
+        ff.FS.unlink(safeInput);
+        ff.FS.unlink(outputFile);
+
+        const buffer = data.buffer;
+        self.postMessage(
+          {
+            type: "result",
+            payload: { data: buffer, filename: outputFile, id },
+          },
+          { transfer: [buffer] },
+        );
+        currentOperationId = null;
+        break;
       }
 
-      case 'merge': {
-        const { files, fileNames, outputFormat: _outputFormat, outputExt, id } = payload as MergePayload
-        currentOperationId = id
+      case "merge": {
+        const {
+          files,
+          fileNames,
+          outputFormat: _outputFormat,
+          outputExt,
+          id,
+        } = payload as MergePayload;
+        currentOperationId = id;
 
         // Phase 1: Load FFmpeg
-        self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+        self.postMessage({ type: "phase", payload: { phase: "download", id } });
         const ff = await ensureLoaded((progress) => {
-          self.postMessage({ type: 'progress', payload: { phase: 'download', progress, id } })
-        })
-
-        const isAudioOnly = ['mp3', 'ogg', 'wav', 'flac', 'm4a', 'aac', 'wma'].includes(outputExt)
-        const total = files.length
-
-        const safeNames: string[] = []
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "download", progress, id },
+          });
+        });
+
+        const isAudioOnly = [
+          "mp3",
+          "ogg",
+          "wav",
+          "flac",
+          "m4a",
+          "aac",
+          "wma",
+        ].includes(outputExt);
+        const total = files.length;
+
+        const safeNames: string[] = [];
         for (let i = 0; i < files.length; i++) {
-          const ext = fileNames[i].split('.').pop() || outputExt
-          const safeName = `input_${i}.${ext}`
-          ff.FS.writeFile(safeName, new Uint8Array(files[i]))
-          safeNames.push(safeName)
+          const ext = fileNames[i].split(".").pop() || outputExt;
+          const safeName = `input_${i}.${ext}`;
+          ff.FS.writeFile(safeName, new Uint8Array(files[i]));
+          safeNames.push(safeName);
         }
 
         // Phase 2: Transcode each input to uniform intermediate format
-        self.postMessage({ type: 'phase', payload: { phase: 'transcode', id } })
+        self.postMessage({
+          type: "phase",
+          payload: { phase: "transcode", id },
+        });
 
-        const intermediateNames: string[] = []
+        const intermediateNames: string[] = [];
         for (let i = 0; i < safeNames.length; i++) {
-          const fileProgress = (i / total) * 100
+          const fileProgress = (i / total) * 100;
           self.postMessage({
-            type: 'progress',
-            payload: { phase: 'transcode', progress: fileProgress, detail: { current: i + 1, total, unit: 'items' }, id }
-          })
+            type: "progress",
+            payload: {
+              phase: "transcode",
+              progress: fileProgress,
+              detail: { current: i + 1, total, unit: "items" },
+              id,
+            },
+          });
 
           if (isAudioOnly) {
-            const intName = `intermediate_${i}.wav`
-            const ret = runExec(ff, ['-i', safeNames[i], '-acodec', 'pcm_s16le', '-ar', '44100', '-ac', '2', intName])
+            const intName = `intermediate_${i}.wav`;
+            const ret = runExec(ff, [
+              "-i",
+              safeNames[i],
+              "-acodec",
+              "pcm_s16le",
+              "-ar",
+              "44100",
+              "-ac",
+              "2",
+              intName,
+            ]);
             if (ret !== 0) {
-              throw new Error(`Failed to transcode input ${i + 1} (${fileNames[i]})`)
+              throw new Error(
+                `Failed to transcode input ${i + 1} (${fileNames[i]})`,
+              );
             }
-            intermediateNames.push(intName)
+            intermediateNames.push(intName);
           } else {
-            const intName = `intermediate_${i}.ts`
-
-            let probeLog = ''
-            ff.setLogger(({ message }) => { probeLog += message + '\n' })
-            try { runExec(ff, ['-i', safeNames[i], '-f', 'null', '-']) } catch { /* probe may fail */ }
-            ff.setLogger(() => {})
+            const intName = `intermediate_${i}.ts`;
+
+            let probeLog = "";
+            ff.setLogger(({ message }) => {
+              probeLog += message + "\n";
+            });
+            try {
+              runExec(ff, ["-i", safeNames[i], "-f", "null", "-"]);
+            } catch {
+              /* probe may fail */
+            }
+            ff.setLogger(() => {});
 
-            const hasAudio = /Audio:/.test(probeLog)
+            const hasAudio = /Audio:/.test(probeLog);
 
-            const encodeArgs = ['-i', safeNames[i]]
+            const encodeArgs = ["-i", safeNames[i]];
             if (!hasAudio) {
-              encodeArgs.push('-f', 'lavfi', '-i', 'anullsrc=r=44100:cl=stereo')
-              encodeArgs.push('-shortest')
+              encodeArgs.push(
+                "-f",
+                "lavfi",
+                "-i",
+                "anullsrc=r=44100:cl=stereo",
+              );
+              encodeArgs.push("-shortest");
             }
             encodeArgs.push(
-              '-c:v', 'libx264', '-preset', 'ultrafast', '-pix_fmt', 'yuv420p',
-              '-c:a', 'aac', '-b:a', '128k', '-ar', '44100', '-ac', '2',
-              '-f', 'mpegts', intName
-            )
-
-            const ret = runExec(ff, encodeArgs)
+              "-c:v",
+              "libx264",
+              "-preset",
+              "ultrafast",
+              "-pix_fmt",
+              "yuv420p",
+              "-c:a",
+              "aac",
+              "-b:a",
+              "128k",
+              "-ar",
+              "44100",
+              "-ac",
+              "2",
+              "-f",
+              "mpegts",
+              intName,
+            );
+
+            const ret = runExec(ff, encodeArgs);
             if (ret !== 0) {
-              throw new Error(`Failed to transcode input ${i + 1} (${fileNames[i]})`)
+              throw new Error(
+                `Failed to transcode input ${i + 1} (${fileNames[i]})`,
+              );
             }
-            intermediateNames.push(intName)
+            intermediateNames.push(intName);
           }
-          ff.FS.unlink(safeNames[i])
+          ff.FS.unlink(safeNames[i]);
         }
 
         self.postMessage({
-          type: 'progress',
-          payload: { phase: 'transcode', progress: 100, detail: { current: total, total, unit: 'items' }, id }
-        })
+          type: "progress",
+          payload: {
+            phase: "transcode",
+            progress: 100,
+            detail: { current: total, total, unit: "items" },
+            id,
+          },
+        });
 
         // Phase 3: Concatenate intermediates into final output
-        self.postMessage({ type: 'phase', payload: { phase: 'merge', id } })
+        self.postMessage({ type: "phase", payload: { phase: "merge", id } });
 
-        const concatContent = intermediateNames.map(name => `file '${name}'`).join('\n')
-        ff.FS.writeFile('concat.txt', new TextEncoder().encode(concatContent))
+        const concatContent = intermediateNames
+          .map((name) => `file '${name}'`)
+          .join("\n");
+        ff.FS.writeFile("concat.txt", new TextEncoder().encode(concatContent));
 
         ff.setProgress(({ progress }) => {
-          if (currentOperationId !== id) return
-          self.postMessage({ type: 'progress', payload: { phase: 'merge', progress: progress * 100, id } })
-        })
+          if (currentOperationId !== id) return;
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "merge", progress: progress * 100, id },
+          });
+        });
 
-        const outputFile = `output.${outputExt}`
+        const outputFile = `output.${outputExt}`;
         if (isAudioOnly) {
-          const ret = runExec(ff, ['-f', 'concat', '-safe', '0', '-i', 'concat.txt', outputFile])
-          if (ret !== 0) throw new Error('Failed to merge audio files')
+          const ret = runExec(ff, [
+            "-f",
+            "concat",
+            "-safe",
+            "0",
+            "-i",
+            "concat.txt",
+            outputFile,
+          ]);
+          if (ret !== 0) throw new Error("Failed to merge audio files");
         } else {
-          const ret = runExec(ff, ['-f', 'concat', '-safe', '0', '-i', 'concat.txt', '-c', 'copy', outputFile])
-          if (ret !== 0) throw new Error('Failed to merge video files')
+          const ret = runExec(ff, [
+            "-f",
+            "concat",
+            "-safe",
+            "0",
+            "-i",
+            "concat.txt",
+            "-c",
+            "copy",
+            outputFile,
+          ]);
+          if (ret !== 0) throw new Error("Failed to merge video files");
         }
 
-        const data = ff.FS.readFile(outputFile) as Uint8Array
-        for (const name of intermediateNames) ff.FS.unlink(name)
-        ff.FS.unlink('concat.txt')
-        ff.FS.unlink(outputFile)
-
-        const buffer = data.buffer
-        self.postMessage({ type: 'result', payload: { data: buffer, filename: outputFile, id } }, { transfer: [buffer] })
-        currentOperationId = null
-        break
+        const data = ff.FS.readFile(outputFile) as Uint8Array;
+        for (const name of intermediateNames) ff.FS.unlink(name);
+        ff.FS.unlink("concat.txt");
+        ff.FS.unlink(outputFile);
+
+        const buffer = data.buffer;
+        self.postMessage(
+          {
+            type: "result",
+            payload: { data: buffer, filename: outputFile, id },
+          },
+          { transfer: [buffer] },
+        );
+        currentOperationId = null;
+        break;
       }
 
-      case 'trim': {
-        const { file, fileName, startTime, endTime, outputFormat: _outputFormat, outputExt, id } = payload as TrimPayload
-        currentOperationId = id
-
-        self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+      case "trim": {
+        const {
+          file,
+          fileName,
+          startTime,
+          endTime,
+          outputFormat: _outputFormat,
+          outputExt,
+          id,
+        } = payload as TrimPayload;
+        currentOperationId = id;
+
+        self.postMessage({ type: "phase", payload: { phase: "download", id } });
         const ff = await ensureLoaded((progress) => {
-          self.postMessage({ type: 'progress', payload: { phase: 'download', progress, id } })
-        })
+          self.postMessage({
+            type: "progress",
+            payload: { phase: "download", progress, id },
+          });
+        });
 
-        self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
+        self.postMessage({ type: "phase", payload: { phase: "process", id } });
 
-        const trimInputExt = fileName.split('.').pop() || 'bin'
-        const safeTrimInput = `input.${trimInputExt}`
-        ff.FS.writeFile(safeTrimInput, new Uint8Array(file))
-        const duration = endTime - startTime
+        const trimInputExt = fileName.split(".").pop() || "bin";
+        const safeTrimInput = `input.${trimInputExt}`;
+        ff.FS.writeFile(safeTrimInput, new Uint8Array(file));
+        const duration = endTime - startTime;
 
         ff.setProgress(({ progress }) => {
-          if (currentOperationId !== id) return
+          if (currentOperationId !== id) return;
           self.postMessage({
-            type: 'progress',
+            type: "progress",
             payload: {
-              phase: 'process',
+              phase: "process",
               progress: progress * 100,
-              detail: { current: Math.floor(progress * duration), total: Math.floor(duration), unit: 'seconds' },
-              id
-            }
-          })
-        })
-
-        const outputFile = `output.${outputExt}`
-        runExec(ff, ['-ss', String(startTime), '-i', safeTrimInput, '-t', String(duration), '-c', 'copy', outputFile])
-
-        const data = ff.FS.readFile(outputFile) as Uint8Array
-        ff.FS.unlink(safeTrimInput)
-        ff.FS.unlink(outputFile)
-
-        const buffer = data.buffer
-        self.postMessage({ type: 'result', payload: { data: buffer, filename: outputFile, id } }, { transfer: [buffer] })
-        currentOperationId = null
-        break
+              detail: {
+                current: Math.floor(progress * duration),
+                total: Math.floor(duration),
+                unit: "seconds",
+              },
+              id,
+            },
+          });
+        });
+
+        const outputFile = `output.${outputExt}`;
+        runExec(ff, [
+          "-ss",
+          String(startTime),
+          "-i",
+          safeTrimInput,
+          "-t",
+          String(duration),
+          "-c",
+          "copy",
+          outputFile,
+        ]);
+
+        const data = ff.FS.readFile(outputFile) as Uint8Array;
+        ff.FS.unlink(safeTrimInput);
+        ff.FS.unlink(outputFile);
+
+        const buffer = data.buffer;
+        self.postMessage(
+          {
+            type: "result",
+            payload: { data: buffer, filename: outputFile, id },
+          },
+          { transfer: [buffer] },
+        );
+        currentOperationId = null;
+        break;
       }
 
-      case 'getInfo': {
-        const { file, fileName, id } = payload as InfoPayload
-        const ff = await ensureLoaded()
+      case "getInfo": {
+        const { file, fileName, id } = payload as InfoPayload;
+        const ff = await ensureLoaded();
 
-        const infoInputExt = fileName.split('.').pop() || 'bin'
-        const safeInfoInput = `input.${infoInputExt}`
-        ff.FS.writeFile(safeInfoInput, new Uint8Array(file))
+        const infoInputExt = fileName.split(".").pop() || "bin";
+        const safeInfoInput = `input.${infoInputExt}`;
+        ff.FS.writeFile(safeInfoInput, new Uint8Array(file));
 
-        let logOutput = ''
-        ff.setLogger(({ message }) => { logOutput += message + '\n' })
+        let logOutput = "";
+        ff.setLogger(({ message }) => {
+          logOutput += message + "\n";
+        });
 
         try {
-          runExec(ff, ['-i', safeInfoInput, '-f', 'null', '-'])
+          runExec(ff, ["-i", safeInfoInput, "-f", "null", "-"]);
         } catch {
           // Expected to fail for info probing, but logs contain the metadata
         }
 
-        const duration = parseDuration(logOutput)
-        const resMatch = logOutput.match(/(\d{2,4})x(\d{2,4})/)
-        const videoCodecMatch = logOutput.match(/Video: (\w+)/)
-        const audioCodecMatch = logOutput.match(/Audio: (\w+)/)
+        const duration = parseDuration(logOutput);
+        const resMatch = logOutput.match(/(\d{2,4})x(\d{2,4})/);
+        const videoCodecMatch = logOutput.match(/Video: (\w+)/);
+        const audioCodecMatch = logOutput.match(/Audio: (\w+)/);
 
-        ff.FS.unlink(safeInfoInput)
+        ff.FS.unlink(safeInfoInput);
 
         self.postMessage({
-          type: 'info',
+          type: "info",
           payload: {
             duration,
-            resolution: resMatch ? { width: parseInt(resMatch[1]), height: parseInt(resMatch[2]) } : null,
+            resolution: resMatch
+              ? { width: parseInt(resMatch[1]), height: parseInt(resMatch[2]) }
+              : null,
             videoCodec: videoCodecMatch?.[1] || null,
             audioCodec: audioCodecMatch?.[1] || null,
-            id
-          }
-        })
-        break
+            id,
+          },
+        });
+        break;
       }
 
-      case 'cancel': {
-        currentOperationId = null
-        break
+      case "cancel": {
+        currentOperationId = null;
+        break;
       }
 
-      case 'dispose': {
-        ffmpegCore = null
-        isLoaded = false
-        loadingPromise = null
-        self.postMessage({ type: 'disposed' })
-        break
+      case "dispose": {
+        ffmpegCore = null;
+        isLoaded = false;
+        loadingPromise = null;
+        self.postMessage({ type: "disposed" });
+        break;
       }
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/src/workers/imageEraser.worker.ts b/src/workers/imageEraser.worker.ts
index 4ec44b99..8811e12d 100644
--- a/src/workers/imageEraser.worker.ts
+++ b/src/workers/imageEraser.worker.ts
@@ -3,46 +3,46 @@
  * Uses LaMa inpainting model via ONNX Runtime (WebGPU with WASM fallback)
  */
 
-import * as ort from 'onnxruntime-web'
+import * as ort from "onnxruntime-web";
 
 // Configure WASM paths to use CDN (required for Vite bundling)
-const ORT_WASM_VERSION = '1.21.0'
-ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`
+const ORT_WASM_VERSION = "1.21.0";
+ort.env.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/onnxruntime-web@${ORT_WASM_VERSION}/dist/`;
 
 // Track which backend is being used
-let useWebGPU = false
+let useWebGPU = false;
 
 // LaMa model from Hugging Face (quantized)
 const MODEL_URL =
-  'https://huggingface.co/opencv/inpainting_lama/resolve/main/inpainting_lama_2025jan.onnx'
-const MODEL_SIZE = 512
-const CACHE_NAME = 'lama-model-cache'
+  "https://huggingface.co/opencv/inpainting_lama/resolve/main/inpainting_lama_2025jan.onnx";
+const MODEL_SIZE = 512;
+const CACHE_NAME = "lama-model-cache";
 
 // ONNX Runtime session
-let session: ort.InferenceSession | null = null
+let session: ort.InferenceSession | null = null;
 
 /**
  * Safely dispose an ONNX tensor to free memory
  * The dispose method exists at runtime but isn't in TypeScript types
  */
 function disposeTensor(tensor: ort.Tensor): void {
-  (tensor as unknown as { dispose?: () => void }).dispose?.()
+  (tensor as unknown as { dispose?: () => void }).dispose?.();
 }
 
 interface WorkerMessage {
-  type: 'init' | 'process' | 'dispose'
+  type: "init" | "process" | "dispose";
   payload?: {
-    imageData?: Float32Array
-    maskData?: Float32Array
-    width?: number
-    height?: number
-    id?: number
-    timeout?: number // in milliseconds
-  }
+    imageData?: Float32Array;
+    maskData?: Float32Array;
+    width?: number;
+    height?: number;
+    id?: number;
+    timeout?: number; // in milliseconds
+  };
 }
 
 // Default timeout (60 minutes)
-const DEFAULT_TIMEOUT = 3600000
+const DEFAULT_TIMEOUT = 3600000;
 
 /**
  * Download model with progress tracking
@@ -50,91 +50,95 @@ const DEFAULT_TIMEOUT = 3600000
 async function downloadModel(
   url: string,
   onProgress: (current: number, total: number) => void,
-  timeout: number = DEFAULT_TIMEOUT
+  timeout: number = DEFAULT_TIMEOUT,
 ): Promise<ArrayBuffer> {
   // Try to get from cache first
-  const cache = await caches.open(CACHE_NAME)
-  const cachedResponse = await cache.match(url)
+  const cache = await caches.open(CACHE_NAME);
+  const cachedResponse = await cache.match(url);
 
   if (cachedResponse) {
-    const buffer = await cachedResponse.arrayBuffer()
-    onProgress(buffer.byteLength, buffer.byteLength)
-    return buffer
+    const buffer = await cachedResponse.arrayBuffer();
+    onProgress(buffer.byteLength, buffer.byteLength);
+    return buffer;
   }
 
   // Download with progress and configurable timeout
-  const controller = new AbortController()
-  const timeoutId = setTimeout(() => controller.abort(), timeout)
-  const timeoutSeconds = Math.round(timeout / 1000)
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+  const timeoutSeconds = Math.round(timeout / 1000);
 
   try {
     const response = await fetch(url, {
       headers: {
-        Origin: self.location.origin
+        Origin: self.location.origin,
       },
-      signal: controller.signal
-    })
+      signal: controller.signal,
+    });
 
     if (!response.ok) {
-      throw new Error(`Failed to download model: ${response.status}`)
+      throw new Error(`Failed to download model: ${response.status}`);
     }
 
-    const contentLength = response.headers.get('content-length')
-    const total = contentLength ? parseInt(contentLength, 10) : 0
+    const contentLength = response.headers.get("content-length");
+    const total = contentLength ? parseInt(contentLength, 10) : 0;
 
-    const reader = response.body?.getReader()
+    const reader = response.body?.getReader();
     if (!reader) {
-      throw new Error('Failed to get response reader')
+      throw new Error("Failed to get response reader");
     }
 
-    const chunks: Uint8Array[] = []
-    let received = 0
+    const chunks: Uint8Array[] = [];
+    let received = 0;
 
     while (true) {
       // Check if aborted during streaming
       if (controller.signal.aborted) {
-        reader.cancel()
-        throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+        reader.cancel();
+        throw new Error(
+          `Model download timed out after ${timeoutSeconds} seconds`,
+        );
       }
 
-      const { done, value } = await reader.read()
-      if (done) break
+      const { done, value } = await reader.read();
+      if (done) break;
 
-      chunks.push(value)
-      received += value.length
-      onProgress(received, total)
+      chunks.push(value);
+      received += value.length;
+      onProgress(received, total);
     }
 
-    clearTimeout(timeoutId)
+    clearTimeout(timeoutId);
 
     // Combine chunks
-    const buffer = new Uint8Array(received)
-    let position = 0
+    const buffer = new Uint8Array(received);
+    let position = 0;
     for (const chunk of chunks) {
-      buffer.set(chunk, position)
-      position += chunk.length
+      buffer.set(chunk, position);
+      position += chunk.length;
     }
 
     // Cache the model for future use
     try {
       const cacheResponse = new Response(buffer.buffer, {
         headers: {
-          'Content-Type': 'application/octet-stream',
-          'Content-Length': buffer.byteLength.toString()
-        }
-      })
-      await cache.put(url, cacheResponse)
+          "Content-Type": "application/octet-stream",
+          "Content-Length": buffer.byteLength.toString(),
+        },
+      });
+      await cache.put(url, cacheResponse);
     } catch (e) {
-      console.warn('Failed to cache model:', e)
+      console.warn("Failed to cache model:", e);
     }
 
-    return buffer.buffer
+    return buffer.buffer;
   } catch (error) {
-    clearTimeout(timeoutId)
-    if ((error as Error).name === 'AbortError') {
-      throw new Error(`Model download timed out after ${timeoutSeconds} seconds`)
+    clearTimeout(timeoutId);
+    if ((error as Error).name === "AbortError") {
+      throw new Error(
+        `Model download timed out after ${timeoutSeconds} seconds`,
+      );
     }
-    throw error
+    throw error;
   }
 }
 
@@ -146,26 +150,28 @@ async function initSession(modelBuffer: ArrayBuffer): Promise<void> {
   if (useWebGPU) {
     try {
       session = await ort.InferenceSession.create(modelBuffer, {
-        executionProviders: ['webgpu'],
-        graphOptimizationLevel: 'all'
-      })
-      console.log('Using WebGPU backend')
-      return
+        executionProviders: ["webgpu"],
+        graphOptimizationLevel: "all",
+      });
+      console.log("Using WebGPU backend");
+      return;
     } catch (e) {
-      const errorMsg = e instanceof Error ? e.message : String(e)
-      console.warn(`WebGPU session creation failed, falling back to WASM. Reason: ${errorMsg}`)
-      useWebGPU = false
+      const errorMsg = e instanceof Error ? e.message : String(e);
+      console.warn(
+        `WebGPU session creation failed, falling back to WASM. Reason: ${errorMsg}`,
+      );
+      useWebGPU = false;
     }
   }
 
   // Fallback to WASM
   session = await ort.InferenceSession.create(modelBuffer, {
-    executionProviders: ['wasm'],
-    graphOptimizationLevel: 'all',
+    executionProviders: ["wasm"],
+    graphOptimizationLevel: "all",
     enableCpuMemArena: true,
-    executionMode: 'parallel'
-  })
-  console.log('Using WASM backend')
+    executionMode: "parallel",
+  });
+  console.log("Using WASM backend");
 }
 
 /**
@@ -177,42 +183,42 @@ function resizeCHW(
   srcH: number,
   dstW: number,
   dstH: number,
-  channels: number
+  channels: number,
 ): Float32Array {
-  const result = new Float32Array(channels * dstH * dstW)
+  const result = new Float32Array(channels * dstH * dstW);
 
   for (let c = 0; c < channels; c++) {
     for (let y = 0; y < dstH; y++) {
       for (let x = 0; x < dstW; x++) {
         // Map to source coordinates
-        const srcX = (x * (srcW - 1)) / (dstW - 1)
-        const srcY = (y * (srcH - 1)) / (dstH - 1)
+        const srcX = (x * (srcW - 1)) / (dstW - 1);
+        const srcY = (y * (srcH - 1)) / (dstH - 1);
 
-        const x0 = Math.floor(srcX)
-        const y0 = Math.floor(srcY)
-        const x1 = Math.min(x0 + 1, srcW - 1)
-        const y1 = Math.min(y0 + 1, srcH - 1)
+        const x0 = Math.floor(srcX);
+        const y0 = Math.floor(srcY);
+        const x1 = Math.min(x0 + 1, srcW - 1);
+        const y1 = Math.min(y0 + 1, srcH - 1);
 
-        const xFrac = srcX - x0
-        const yFrac = srcY - y0
+        const xFrac = srcX - x0;
+        const yFrac = srcY - y0;
 
         // Get source values
-        const v00 = data[c * srcH * srcW + y0 * srcW + x0]
-        const v10 = data[c * srcH * srcW + y0 * srcW + x1]
-        const v01 = data[c * srcH * srcW + y1 * srcW + x0]
-        const v11 = data[c * srcH * srcW + y1 * srcW + x1]
+        const v00 = data[c * srcH * srcW + y0 * srcW + x0];
+        const v10 = data[c * srcH * srcW + y0 * srcW + x1];
+        const v01 = data[c * srcH * srcW + y1 * srcW + x0];
+        const v11 = data[c * srcH * srcW + y1 * srcW + x1];
 
         // Bilinear interpolation
-        const v0 = v00 * (1 - xFrac) + v10 * xFrac
-        const v1 = v01 * (1 - xFrac) + v11 * xFrac
-        const v = v0 * (1 - yFrac) + v1 * yFrac
+        const v0 = v00 * (1 - xFrac) + v10 * xFrac;
+        const v1 = v01 * (1 - xFrac) + v11 * xFrac;
+        const v = v0 * (1 - yFrac) + v1 * yFrac;
 
-        result[c * dstH * dstW + y * dstW + x] = v
+        result[c * dstH * dstW + y * dstW + x] = v;
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -223,19 +229,19 @@ function resizeMaskCHW(
   srcW: number,
   srcH: number,
   dstW: number,
-  dstH: number
+  dstH: number,
 ): Float32Array {
-  const result = new Float32Array(dstH * dstW)
+  const result = new Float32Array(dstH * dstW);
 
   for (let y = 0; y < dstH; y++) {
     for (let x = 0; x < dstW; x++) {
-      const srcX = Math.round((x * (srcW - 1)) / (dstW - 1))
-      const srcY = Math.round((y * (srcH - 1)) / (dstH - 1))
-      result[y * dstW + x] = data[srcY * srcW + srcX]
+      const srcX = Math.round((x * (srcW - 1)) / (dstW - 1));
+      const srcY = Math.round((y * (srcH - 1)) / (dstH - 1));
+      result[y * dstW + x] = data[srcY * srcW + srcX];
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -244,27 +250,27 @@ function resizeMaskCHW(
 function getMaskBoundingBox(
   maskData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): { minX: number; minY: number; maxX: number; maxY: number } | null {
-  let minX = width
-  let minY = height
-  let maxX = 0
-  let maxY = 0
-  let hasMask = false
+  let minX = width;
+  let minY = height;
+  let maxX = 0;
+  let maxY = 0;
+  let hasMask = false;
 
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
       if (maskData[y * width + x] > 0.5) {
-        hasMask = true
-        minX = Math.min(minX, x)
-        minY = Math.min(minY, y)
-        maxX = Math.max(maxX, x)
-        maxY = Math.max(maxY, y)
+        hasMask = true;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x);
+        maxY = Math.max(maxY, y);
       }
     }
   }
 
-  return hasMask ? { minX, minY, maxX, maxY } : null
+  return hasMask ? { minX, minY, maxX, maxY } : null;
 }
 
 /**
@@ -273,29 +279,29 @@ function getMaskBoundingBox(
 function calculateCropRegion(
   maskBbox: { minX: number; minY: number; maxX: number; maxY: number },
   imgWidth: number,
-  imgHeight: number
+  imgHeight: number,
 ): { x: number; y: number; w: number; h: number } {
-  const maskW = maskBbox.maxX - maskBbox.minX + 1
-  const maskH = maskBbox.maxY - maskBbox.minY + 1
-  const maskCenterX = (maskBbox.minX + maskBbox.maxX) / 2
-  const maskCenterY = (maskBbox.minY + maskBbox.maxY) / 2
+  const maskW = maskBbox.maxX - maskBbox.minX + 1;
+  const maskH = maskBbox.maxY - maskBbox.minY + 1;
+  const maskCenterX = (maskBbox.minX + maskBbox.maxX) / 2;
+  const maskCenterY = (maskBbox.minY + maskBbox.maxY) / 2;
 
   // Target size: 3x mask size, but at least MODEL_SIZE
-  let cropW = Math.max(maskW * 3, MODEL_SIZE)
-  let cropH = Math.max(maskH * 3, MODEL_SIZE)
+  let cropW = Math.max(maskW * 3, MODEL_SIZE);
+  let cropH = Math.max(maskH * 3, MODEL_SIZE);
 
   // Clamp to image dimensions
-  cropW = Math.min(cropW, imgWidth)
-  cropH = Math.min(cropH, imgHeight)
+  cropW = Math.min(cropW, imgWidth);
+  cropH = Math.min(cropH, imgHeight);
 
   // Center crop on mask, but clamp to image bounds
-  let cropX = Math.round(maskCenterX - cropW / 2)
-  let cropY = Math.round(maskCenterY - cropH / 2)
+  let cropX = Math.round(maskCenterX - cropW / 2);
+  let cropY = Math.round(maskCenterY - cropH / 2);
 
-  cropX = Math.max(0, Math.min(cropX, imgWidth - cropW))
-  cropY = Math.max(0, Math.min(cropY, imgHeight - cropH))
+  cropX = Math.max(0, Math.min(cropX, imgWidth - cropW));
+  cropY = Math.max(0, Math.min(cropY, imgHeight - cropH));
 
-  return { x: cropX, y: cropY, w: cropW, h: cropH }
+  return { x: cropX, y: cropY, w: cropW, h: cropH };
 }
 
 /**
@@ -309,21 +315,21 @@ function extractCropCHW(
   cropY: number,
   cropW: number,
   cropH: number,
-  channels: number
+  channels: number,
 ): Float32Array {
-  const result = new Float32Array(channels * cropH * cropW)
+  const result = new Float32Array(channels * cropH * cropW);
 
   for (let c = 0; c < channels; c++) {
     for (let y = 0; y < cropH; y++) {
       for (let x = 0; x < cropW; x++) {
-        const srcIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x)
-        const dstIdx = c * cropH * cropW + y * cropW + x
-        result[dstIdx] = data[srcIdx]
+        const srcIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x);
+        const dstIdx = c * cropH * cropW + y * cropW + x;
+        result[dstIdx] = data[srcIdx];
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -335,17 +341,17 @@ function extractCropMask(
   cropX: number,
   cropY: number,
   cropW: number,
-  cropH: number
+  cropH: number,
 ): Float32Array {
-  const result = new Float32Array(cropH * cropW)
+  const result = new Float32Array(cropH * cropW);
 
   for (let y = 0; y < cropH; y++) {
     for (let x = 0; x < cropW; x++) {
-      result[y * cropW + x] = data[(cropY + y) * imgW + (cropX + x)]
+      result[y * cropW + x] = data[(cropY + y) * imgW + (cropX + x)];
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -362,41 +368,46 @@ function pasteCropWithBlend(
   cropW: number,
   cropH: number,
   channels: number,
-  featherSize: number = 8
+  featherSize: number = 8,
 ): Float32Array {
-  const result = new Float32Array(original)
+  const result = new Float32Array(original);
 
   // Create blend mask: 1.0 in center, fading to 0 at edges
   for (let c = 0; c < channels; c++) {
     for (let y = 0; y < cropH; y++) {
       for (let x = 0; x < cropW; x++) {
-        const maskVal = mask[y * cropW + x]
+        const maskVal = mask[y * cropW + x];
 
         // Only blend where mask is active
-        if (maskVal < 0.01) continue
+        if (maskVal < 0.01) continue;
 
         // Calculate edge feather factor
-        const distToLeft = x
-        const distToRight = cropW - 1 - x
-        const distToTop = y
-        const distToBottom = cropH - 1 - y
-        const minDist = Math.min(distToLeft, distToRight, distToTop, distToBottom)
-        const edgeFactor = Math.min(1.0, minDist / featherSize)
+        const distToLeft = x;
+        const distToRight = cropW - 1 - x;
+        const distToTop = y;
+        const distToBottom = cropH - 1 - y;
+        const minDist = Math.min(
+          distToLeft,
+          distToRight,
+          distToTop,
+          distToBottom,
+        );
+        const edgeFactor = Math.min(1.0, minDist / featherSize);
 
         // Blend factor: full blend in masked area, feathered at crop edges
-        const blendFactor = maskVal * edgeFactor
+        const blendFactor = maskVal * edgeFactor;
 
-        const srcIdx = c * cropH * cropW + y * cropW + x
-        const dstIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x)
+        const srcIdx = c * cropH * cropW + y * cropW + x;
+        const dstIdx = c * imgH * imgW + (cropY + y) * imgW + (cropX + x);
 
         // Blend: original * (1 - blend) + inpainted * blend
         result[dstIdx] =
-          original[dstIdx] * (1 - blendFactor) + crop[srcIdx] * blendFactor
+          original[dstIdx] * (1 - blendFactor) + crop[srcIdx] * blendFactor;
       }
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -406,21 +417,21 @@ async function removeArea(
   imageData: Float32Array,
   maskData: Float32Array,
   width: number,
-  height: number
+  height: number,
 ): Promise<Float32Array> {
   if (!session) {
-    throw new Error('Session not initialized')
+    throw new Error("Session not initialized");
   }
 
   // Find mask bounding box
-  const maskBbox = getMaskBoundingBox(maskData, width, height)
+  const maskBbox = getMaskBoundingBox(maskData, width, height);
   if (!maskBbox) {
     // No mask - return original
-    return new Float32Array(imageData)
+    return new Float32Array(imageData);
   }
 
   // Calculate crop region (3x mask size, min MODEL_SIZE)
-  const crop = calculateCropRegion(maskBbox, width, height)
+  const crop = calculateCropRegion(maskBbox, width, height);
 
   // Extract crops
   const croppedImage = extractCropCHW(
@@ -431,24 +442,24 @@ async function removeArea(
     crop.y,
     crop.w,
     crop.h,
-    3
-  )
+    3,
+  );
   const croppedMask = extractCropMask(
     maskData,
     width,
     crop.x,
     crop.y,
     crop.w,
-    crop.h
-  )
+    crop.h,
+  );
 
   // Resize to model input size
-  let resizedImage: Float32Array
-  let resizedMask: Float32Array
+  let resizedImage: Float32Array;
+  let resizedMask: Float32Array;
 
   if (crop.w === MODEL_SIZE && crop.h === MODEL_SIZE) {
-    resizedImage = croppedImage
-    resizedMask = croppedMask
+    resizedImage = croppedImage;
+    resizedMask = croppedMask;
   } else {
     resizedImage = resizeCHW(
       croppedImage,
@@ -456,65 +467,78 @@ async function removeArea(
       crop.h,
       MODEL_SIZE,
       MODEL_SIZE,
-      3
-    )
-    resizedMask = resizeMaskCHW(croppedMask, crop.w, crop.h, MODEL_SIZE, MODEL_SIZE)
+      3,
+    );
+    resizedMask = resizeMaskCHW(
+      croppedMask,
+      crop.w,
+      crop.h,
+      MODEL_SIZE,
+      MODEL_SIZE,
+    );
   }
 
   // Binarize mask (model expects 0 or 1)
-  const maskBinary = new Float32Array(resizedMask.length)
+  const maskBinary = new Float32Array(resizedMask.length);
   for (let i = 0; i < resizedMask.length; i++) {
-    maskBinary[i] = resizedMask[i] > 0.5 ? 1.0 : 0.0
+    maskBinary[i] = resizedMask[i] > 0.5 ? 1.0 : 0.0;
   }
 
   // Create tensors (image in 0-1 range, mask binary 0/1)
-  const imageTensor = new ort.Tensor('float32', resizedImage, [
+  const imageTensor = new ort.Tensor("float32", resizedImage, [
     1,
     3,
     MODEL_SIZE,
-    MODEL_SIZE
-  ])
-  const maskTensor = new ort.Tensor('float32', maskBinary, [
+    MODEL_SIZE,
+  ]);
+  const maskTensor = new ort.Tensor("float32", maskBinary, [
     1,
     1,
     MODEL_SIZE,
-    MODEL_SIZE
-  ])
+    MODEL_SIZE,
+  ]);
 
   // Run inference - use actual input/output names from model
-  const inputNames = session.inputNames
+  const inputNames = session.inputNames;
   const feeds: Record<string, ort.Tensor> = {
     [inputNames[0]]: imageTensor,
-    [inputNames[1]]: maskTensor
-  }
+    [inputNames[1]]: maskTensor,
+  };
 
-  const results = await session.run(feeds)
+  const results = await session.run(feeds);
 
   // Dispose input tensors to free memory
-  disposeTensor(imageTensor)
-  disposeTensor(maskTensor)
+  disposeTensor(imageTensor);
+  disposeTensor(maskTensor);
 
-  const outputName = session.outputNames[0]
-  const rawOutput = results[outputName].data as Float32Array
+  const outputName = session.outputNames[0];
+  const rawOutput = results[outputName].data as Float32Array;
 
   // Copy raw output before disposing
-  const rawOutputCopy = new Float32Array(rawOutput)
+  const rawOutputCopy = new Float32Array(rawOutput);
 
   // Dispose output tensor to free memory
-  disposeTensor(results[outputName])
+  disposeTensor(results[outputName]);
 
   // Model outputs 0-255 range, convert to 0-1
-  const output = new Float32Array(rawOutputCopy.length)
+  const output = new Float32Array(rawOutputCopy.length);
   for (let i = 0; i < rawOutputCopy.length; i++) {
-    output[i] = Math.max(0, Math.min(1, rawOutputCopy[i] / 255.0))
+    output[i] = Math.max(0, Math.min(1, rawOutputCopy[i] / 255.0));
   }
 
   // Resize output back to crop size
-  let resizedOutput: Float32Array
+  let resizedOutput: Float32Array;
   if (crop.w === MODEL_SIZE && crop.h === MODEL_SIZE) {
-    resizedOutput = output
+    resizedOutput = output;
   } else {
-    resizedOutput = resizeCHW(output, MODEL_SIZE, MODEL_SIZE, crop.w, crop.h, 3)
+    resizedOutput = resizeCHW(
+      output,
+      MODEL_SIZE,
+      MODEL_SIZE,
+      crop.w,
+      crop.h,
+      3,
+    );
   }
 
   // Paste back with blending
@@ -528,91 +552,97 @@ async function removeArea(
     crop.y,
     crop.w,
     crop.h,
-    3
-  )
+    3,
+  );
 
-  return result
+  return result;
 }
 
 /**
  * Handle incoming messages
  */
 self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   switch (type) {
-    case 'init': {
+    case "init": {
       try {
         // Reuse existing session if already initialized
         if (session) {
-          console.log('Image Eraser model already loaded, reusing session')
-          self.postMessage({ type: 'ready', payload: { id: payload?.id } })
-          break
+          console.log("Image Eraser model already loaded, reusing session");
+          self.postMessage({ type: "ready", payload: { id: payload?.id } });
+          break;
         }
 
         // Get timeout from payload
-        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT
+        const timeout = payload?.timeout ?? DEFAULT_TIMEOUT;
 
         // Force WASM backend - WebGPU has kernel compatibility issues with LaMa model
-        useWebGPU = false
-        console.log('Image Eraser using WASM backend')
+        useWebGPU = false;
+        console.log("Image Eraser using WASM backend");
 
         // Check if model is cached first
-        const cache = await caches.open(CACHE_NAME)
-        const cachedResponse = await cache.match(MODEL_URL)
+        const cache = await caches.open(CACHE_NAME);
+        const cachedResponse = await cache.match(MODEL_URL);
 
-        let modelBuffer: ArrayBuffer
+        let modelBuffer: ArrayBuffer;
 
         if (cachedResponse) {
           // Model is cached - skip download phase, go straight to loading
           self.postMessage({
-            type: 'phase',
-            payload: { phase: 'loading', id: payload?.id }
-          })
-          modelBuffer = await cachedResponse.arrayBuffer()
+            type: "phase",
+            payload: { phase: "loading", id: payload?.id },
+          });
+          modelBuffer = await cachedResponse.arrayBuffer();
         } else {
           // Model not cached - show download phase
           self.postMessage({
-            type: 'phase',
-            payload: { phase: 'download', id: payload?.id }
-          })
-
-          modelBuffer = await downloadModel(MODEL_URL, (current, total) => {
-            self.postMessage({
-              type: 'progress',
-              payload: {
-                phase: 'download',
-                progress: total > 0 ? (current / total) * 100 : 0,
-                detail: { current, total, unit: 'bytes' },
-                id: payload?.id
-              }
-            })
-          }, timeout)
+            type: "phase",
+            payload: { phase: "download", id: payload?.id },
+          });
+
+          modelBuffer = await downloadModel(
+            MODEL_URL,
+            (current, total) => {
+              self.postMessage({
+                type: "progress",
+                payload: {
+                  phase: "download",
+                  progress: total > 0 ? (current / total) * 100 : 0,
+                  detail: { current, total, unit: "bytes" },
+                  id: payload?.id,
+                },
+              });
+            },
+            timeout,
+          );
 
           // Phase: loading (after download)
           self.postMessage({
-            type: 'phase',
-            payload: { phase: 'loading', id: payload?.id }
-          })
+            type: "phase",
+            payload: { phase: "loading", id: payload?.id },
+          });
         }
 
-        await initSession(modelBuffer)
+        await initSession(modelBuffer);
 
         self.postMessage({
-          type: 'ready',
-          payload: { id: payload?.id }
-        })
+          type: "ready",
+          payload: { id: payload?.id },
+        });
       } catch (error) {
         self.postMessage({
-          type: 'error',
+          type: "error",
           payload:
-            error instanceof Error ? error.message : 'Failed to initialize model'
-        })
+            error instanceof Error
+              ? error.message
+              : "Failed to initialize model",
+        });
       }
-      break
+      break;
     }
 
-    case 'process': {
+    case "process": {
       if (
         !payload?.imageData ||
         !payload?.maskData ||
@@ -620,80 +650,80 @@ self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
         !payload?.height
       ) {
         self.postMessage({
-          type: 'error',
-          payload: 'Missing image or mask data'
-        })
-        return
+          type: "error",
+          payload: "Missing image or mask data",
+        });
+        return;
       }
 
       try {
         // Phase: process
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id: payload.id }
-        })
+          type: "phase",
+          payload: { phase: "process", id: payload.id },
+        });
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'process',
+            phase: "process",
             progress: 10,
-            id: payload.id
-          }
-        })
+            id: payload.id,
+          },
+        });
 
         const result = await removeArea(
           payload.imageData,
           payload.maskData,
           payload.width,
-          payload.height
-        )
+          payload.height,
+        );
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'process',
+            phase: "process",
             progress: 100,
-            id: payload.id
-          }
-        })
+            id: payload.id,
+          },
+        });
 
         // Transfer the result buffer for efficiency
         // DeepFillv2 output is normalized 0-1
         self.postMessage(
           {
-            type: 'result',
+            type: "result",
             payload: {
               data: result,
               width: payload.width,
               height: payload.height,
-              id: payload.id
-            }
+              id: payload.id,
+            },
           },
-          { transfer: [result.buffer] }
-        )
+          { transfer: [result.buffer] },
+        );
       } catch (error) {
         self.postMessage({
-          type: 'error',
+          type: "error",
           payload:
-            error instanceof Error ? error.message : 'Failed to process image'
-        })
+            error instanceof Error ? error.message : "Failed to process image",
+        });
       }
-      break
+      break;
     }
 
-    case 'dispose': {
+    case "dispose": {
       // Properly release ONNX session to free WASM memory
       try {
         if (session) {
-          await session.release()
-          session = null
+          await session.release();
+          session = null;
         }
       } catch (e) {
-        console.warn('Error disposing session:', e)
+        console.warn("Error disposing session:", e);
       }
-      self.postMessage({ type: 'disposed' })
-      break
+      self.postMessage({ type: "disposed" });
+      break;
     }
   }
-}
+};
diff --git a/src/workers/segmentAnything.worker.ts b/src/workers/segmentAnything.worker.ts
index 5868e4fb..f3278275 100644
--- a/src/workers/segmentAnything.worker.ts
+++ b/src/workers/segmentAnything.worker.ts
@@ -1,151 +1,262 @@
-import { env, SamModel, AutoProcessor, RawImage, Tensor } from '@huggingface/transformers'
+import {
+  env,
+  SamModel,
+  AutoProcessor,
+  RawImage,
+  Tensor,
+} from "@huggingface/transformers";
 
-env.allowLocalModels = false
+env.allowLocalModels = false;
 
 // Detect mobile environment (Android/iOS WebView)
-const isMobile = /android|iphone|ipad/i.test(navigator.userAgent)
+const isMobile = /android|iphone|ipad/i.test(navigator.userAgent);
 
 if (!isMobile) {
   // Align WASM files with the actual installed onnxruntime-web version (pinned via overrides).
   // The JS API is 1.21.0 (due to package.json overrides), so WASM binaries must match.
-  env.backends.onnx.wasm!.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/'
+  env.backends.onnx.wasm!.wasmPaths =
+    "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/";
 }
 
-const MODEL_ID = 'Xenova/slimsam-77-uniform'
+const MODEL_ID = "Xenova/slimsam-77-uniform";
 
 // State
-let model: Awaited<ReturnType<typeof SamModel.from_pretrained>> | null = null
-let processor: Awaited<ReturnType<typeof AutoProcessor.from_pretrained>> | null = null
-let imageInputs: { pixel_values: Tensor; original_sizes: [number, number][]; reshaped_input_sizes: [number, number][] } | null = null
-let imageEmbeddings: Record<string, Tensor> | null = null
-let device: 'webgpu' | 'wasm' = 'wasm'
+let model: Awaited<ReturnType<typeof SamModel.from_pretrained>> | null = null;
+let processor: Awaited<
+  ReturnType<typeof AutoProcessor.from_pretrained>
+> | null = null;
+let imageInputs: {
+  pixel_values: Tensor;
+  original_sizes: [number, number][];
+  reshaped_input_sizes: [number, number][];
+} | null = null;
+let imageEmbeddings: Record<string, Tensor> | null = null;
+let device: "webgpu" | "wasm" = "wasm";
 
 interface PointPrompt {
-  point: [number, number]
-  label: 0 | 1
+  point: [number, number];
+  label: 0 | 1;
 }
 
 // Detect WebGPU
 async function hasWebGPU(): Promise<boolean> {
   try {
-    return !!(navigator.gpu && await navigator.gpu.requestAdapter())
+    return !!(navigator.gpu && (await navigator.gpu.requestAdapter()));
   } catch {
-    return false
+    return false;
   }
 }
 
 // Load model
 async function loadModel(id: number): Promise<void> {
   if (model && processor) {
-    self.postMessage({ type: 'ready', payload: { id, device } })
-    return
+    self.postMessage({ type: "ready", payload: { id, device } });
+    return;
   }
 
   // On mobile, always use WASM for stability (WebGPU in Android WebView is unreliable)
   if (isMobile) {
-    device = 'wasm'
+    device = "wasm";
   } else {
-    device = await hasWebGPU() ? 'webgpu' : 'wasm'
+    device = (await hasWebGPU()) ? "webgpu" : "wasm";
   }
-  self.postMessage({ type: 'phase', payload: { phase: 'download', id } })
+  self.postMessage({ type: "phase", payload: { phase: "download", id } });
 
-  const fileProgress: Record<string, { loaded: number; total: number }> = {}
-  const progress_callback = (p: { status: string; file?: string; loaded?: number; total?: number }) => {
-    if (p.status === 'progress' && p.file) {
-      fileProgress[p.file] = { loaded: p.loaded || 0, total: p.total || 1 }
-      const totals = Object.values(fileProgress).reduce((acc, f) => ({ loaded: acc.loaded + f.loaded, total: acc.total + f.total }), { loaded: 0, total: 0 })
+  const fileProgress: Record<string, { loaded: number; total: number }> = {};
+  const progress_callback = (p: {
+    status: string;
+    file?: string;
+    loaded?: number;
+    total?: number;
+  }) => {
+    if (p.status === "progress" && p.file) {
+      fileProgress[p.file] = { loaded: p.loaded || 0, total: p.total || 1 };
+      const totals = Object.values(fileProgress).reduce(
+        (acc, f) => ({
+          loaded: acc.loaded + f.loaded,
+          total: acc.total + f.total,
+        }),
+        { loaded: 0, total: 0 },
+      );
       if (totals.total > 0) {
-        self.postMessage({ type: 'progress', payload: { phase: 'download', progress: (totals.loaded / totals.total) * 100, detail: { current: totals.loaded, total: totals.total, unit: 'bytes' }, id } })
+        self.postMessage({
+          type: "progress",
+          payload: {
+            phase: "download",
+            progress: (totals.loaded / totals.total) * 100,
+            detail: {
+              current: totals.loaded,
+              total: totals.total,
+              unit: "bytes",
+            },
+            id,
+          },
+        });
       }
     }
-  }
+  };
 
-  const dtype = device === 'webgpu' ? 'fp16' : 'fp32'
+  const dtype = device === "webgpu" ? "fp16" : "fp32";
   try {
-    ;[model, processor] = await Promise.all([
-      SamModel.from_pretrained(MODEL_ID, { dtype, device, progress_callback } as Parameters<typeof SamModel.from_pretrained>[1]),
-      AutoProcessor.from_pretrained(MODEL_ID, { progress_callback })
-    ])
+    [model, processor] = await Promise.all([
+      SamModel.from_pretrained(MODEL_ID, {
+        dtype,
+        device,
+        progress_callback,
+      } as Parameters<typeof SamModel.from_pretrained>[1]),
+      AutoProcessor.from_pretrained(MODEL_ID, { progress_callback }),
+    ]);
   } catch (e) {
-    if (device === 'webgpu') {
-      const errorMsg = e instanceof Error ? e.message : String(e)
-      console.warn(`WebGPU model loading failed, falling back to WASM. Reason: ${errorMsg}`)
-      device = 'wasm'
-      ;[model, processor] = await Promise.all([
-        SamModel.from_pretrained(MODEL_ID, { dtype: 'fp32', device: 'wasm', progress_callback } as Parameters<typeof SamModel.from_pretrained>[1]),
-        AutoProcessor.from_pretrained(MODEL_ID, { progress_callback })
-      ])
-    } else throw e
+    if (device === "webgpu") {
+      const errorMsg = e instanceof Error ? e.message : String(e);
+      console.warn(
+        `WebGPU model loading failed, falling back to WASM. Reason: ${errorMsg}`,
+      );
+      device = "wasm";
+      [model, processor] = await Promise.all([
+        SamModel.from_pretrained(MODEL_ID, {
+          dtype: "fp32",
+          device: "wasm",
+          progress_callback,
+        } as Parameters<typeof SamModel.from_pretrained>[1]),
+        AutoProcessor.from_pretrained(MODEL_ID, { progress_callback }),
+      ]);
+    } else throw e;
   }
 
-  self.postMessage({ type: 'progress', payload: { phase: 'download', progress: 100, id } })
-  self.postMessage({ type: 'ready', payload: { id, device } })
+  self.postMessage({
+    type: "progress",
+    payload: { phase: "download", progress: 100, id },
+  });
+  self.postMessage({ type: "ready", payload: { id, device } });
 }
 
 // Encode image
 async function segmentImage(id: number, imageDataUrl: string): Promise<void> {
-  if (!model || !processor) throw new Error('Model not initialized')
+  if (!model || !processor) throw new Error("Model not initialized");
 
-  self.postMessage({ type: 'phase', payload: { phase: 'process', id } })
-  self.postMessage({ type: 'progress', payload: { phase: 'process', progress: 0, id } })
+  self.postMessage({ type: "phase", payload: { phase: "process", id } });
+  self.postMessage({
+    type: "progress",
+    payload: { phase: "process", progress: 0, id },
+  });
 
-  const image = await RawImage.read(imageDataUrl)
-  imageInputs = await (processor as unknown as (img: RawImage) => Promise<typeof imageInputs>)(image)
-  self.postMessage({ type: 'progress', payload: { phase: 'process', progress: 50, id } })
+  const image = await RawImage.read(imageDataUrl);
+  imageInputs = await (
+    processor as unknown as (img: RawImage) => Promise<typeof imageInputs>
+  )(image);
+  self.postMessage({
+    type: "progress",
+    payload: { phase: "process", progress: 50, id },
+  });
 
-  imageEmbeddings = await (model as unknown as { get_image_embeddings: (i: typeof imageInputs) => Promise<Record<string, Tensor>> }).get_image_embeddings(imageInputs)
-  self.postMessage({ type: 'progress', payload: { phase: 'process', progress: 100, id } })
-  self.postMessage({ type: 'segmented', payload: { id } })
+  imageEmbeddings = await (
+    model as unknown as {
+      get_image_embeddings: (
+        i: typeof imageInputs,
+      ) => Promise<Record<string, Tensor>>;
+    }
+  ).get_image_embeddings(imageInputs);
+  self.postMessage({
+    type: "progress",
+    payload: { phase: "process", progress: 100, id },
+  });
+  self.postMessage({ type: "segmented", payload: { id } });
 }
 
 // Decode mask
 async function decodeMask(id: number, points: PointPrompt[]): Promise<void> {
-  if (!model || !processor || !imageInputs || !imageEmbeddings) throw new Error('Image not segmented')
+  if (!model || !processor || !imageInputs || !imageEmbeddings)
+    throw new Error("Image not segmented");
 
-  const [reshaped, original] = [imageInputs.reshaped_input_sizes[0], imageInputs.original_sizes[0]]
-  const inputPoints = new Tensor('float32', points.flatMap(p => [p.point[0] * reshaped[1], p.point[1] * reshaped[0]]), [1, 1, points.length, 2])
-  const inputLabels = new Tensor('int64', points.map(p => BigInt(p.label)), [1, 1, points.length])
+  const [reshaped, original] = [
+    imageInputs.reshaped_input_sizes[0],
+    imageInputs.original_sizes[0],
+  ];
+  const inputPoints = new Tensor(
+    "float32",
+    points.flatMap((p) => [p.point[0] * reshaped[1], p.point[1] * reshaped[0]]),
+    [1, 1, points.length, 2],
+  );
+  const inputLabels = new Tensor(
+    "int64",
+    points.map((p) => BigInt(p.label)),
+    [1, 1, points.length],
+  );
 
-  const outputs = await (model as unknown as (i: Record<string, Tensor>) => Promise<{ pred_masks: Tensor; iou_scores: Tensor }>)({
-    ...imageEmbeddings, input_points: inputPoints, input_labels: inputLabels
-  })
+  const outputs = await (
+    model as unknown as (
+      i: Record<string, Tensor>,
+    ) => Promise<{ pred_masks: Tensor; iou_scores: Tensor }>
+  )({
+    ...imageEmbeddings,
+    input_points: inputPoints,
+    input_labels: inputLabels,
+  });
 
-  const masks = await (processor as unknown as { post_process_masks: (m: Tensor, o: [number, number][], r: [number, number][]) => Promise<Tensor[][]> })
-    .post_process_masks(outputs.pred_masks, imageInputs.original_sizes, imageInputs.reshaped_input_sizes)
+  const masks = await (
+    processor as unknown as {
+      post_process_masks: (
+        m: Tensor,
+        o: [number, number][],
+        r: [number, number][],
+      ) => Promise<Tensor[][]>;
+    }
+  ).post_process_masks(
+    outputs.pred_masks,
+    imageInputs.original_sizes,
+    imageInputs.reshaped_input_sizes,
+  );
 
-  const maskBuffer = (masks[0][0].data as Uint8Array).buffer.slice(0)
-  const scoresBuffer = new Float32Array(outputs.iou_scores.data as Float32Array).buffer
+  const maskBuffer = (masks[0][0].data as Uint8Array).buffer.slice(0);
+  const scoresBuffer = new Float32Array(outputs.iou_scores.data as Float32Array)
+    .buffer;
 
-  self.postMessage({ type: 'maskResult', payload: { mask: maskBuffer, width: original[1], height: original[0], scores: scoresBuffer, id } }, { transfer: [maskBuffer, scoresBuffer] })
+  self.postMessage(
+    {
+      type: "maskResult",
+      payload: {
+        mask: maskBuffer,
+        width: original[1],
+        height: original[0],
+        scores: scoresBuffer,
+        id,
+      },
+    },
+    { transfer: [maskBuffer, scoresBuffer] },
+  );
 }
 
 // Message handler
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
-  const id = payload?.id ?? 0
+  const { type, payload } = e.data;
+  const id = payload?.id ?? 0;
 
   try {
     switch (type) {
-      case 'init':
-        await loadModel(id)
-        break
-      case 'segment':
-        if (!model) await loadModel(id)
-        await segmentImage(id, payload.imageDataUrl)
-        break
-      case 'decodeMask':
-        await decodeMask(id, payload.points)
-        break
-      case 'reset':
-        imageInputs = imageEmbeddings = null
-        self.postMessage({ type: 'reset', payload: { id } })
-        break
-      case 'dispose':
-        imageInputs = imageEmbeddings = null
-        self.postMessage({ type: 'disposed', payload: { id } })
-        break
+      case "init":
+        await loadModel(id);
+        break;
+      case "segment":
+        if (!model) await loadModel(id);
+        await segmentImage(id, payload.imageDataUrl);
+        break;
+      case "decodeMask":
+        await decodeMask(id, payload.points);
+        break;
+      case "reset":
+        imageInputs = imageEmbeddings = null;
+        self.postMessage({ type: "reset", payload: { id } });
+        break;
+      case "dispose":
+        imageInputs = imageEmbeddings = null;
+        self.postMessage({ type: "disposed", payload: { id } });
+        break;
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: { message: (error as Error).message, id } })
+    self.postMessage({
+      type: "error",
+      payload: { message: (error as Error).message, id },
+    });
   }
-}
+};
diff --git a/src/workers/upscaler.worker.ts b/src/workers/upscaler.worker.ts
index c41614a6..dd1263d8 100644
--- a/src/workers/upscaler.worker.ts
+++ b/src/workers/upscaler.worker.ts
@@ -1,9 +1,9 @@
-import Upscaler from 'upscaler'
+import Upscaler from "upscaler";
 
-type ModelType = 'slim' | 'medium' | 'thick'
-type ScaleType = '2x' | '3x' | '4x'
+type ModelType = "slim" | "medium" | "thick";
+type ScaleType = "2x" | "3x" | "4x";
 
-let upscaler: InstanceType<typeof Upscaler> | null = null
+let upscaler: InstanceType<typeof Upscaler> | null = null;
 
 /**
  * Model loading strategy:
@@ -14,179 +14,209 @@ let upscaler: InstanceType<typeof Upscaler> | null = null
  * TF.js loadGraphModel/loadLayersModel supports remote URLs natively.
  */
 
-const CDN_MODELS: Record<string, Record<ScaleType, { path: string; modelType: string; scale: number }>> = {
+const CDN_MODELS: Record<
+  string,
+  Record<ScaleType, { path: string; modelType: string; scale: number }>
+> = {
   medium: {
-    '2x': { path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@1.0.0-beta.13/models/2x/model.json', modelType: 'layers', scale: 2 },
-    '3x': { path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@1.0.0-beta.13/models/3x/model.json', modelType: 'layers', scale: 3 },
-    '4x': { path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@1.0.0-beta.13/models/4x/model.json', modelType: 'layers', scale: 4 }
+    "2x": {
+      path: "https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@1.0.0-beta.10/models/2x/model.json",
+      modelType: "layers",
+      scale: 2,
+    },
+    "3x": {
+      path: "https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@1.0.0-beta.10/models/3x/model.json",
+      modelType: "layers",
+      scale: 3,
+    },
+    "4x": {
+      path: "https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-medium@1.0.0-beta.10/models/4x/model.json",
+      modelType: "layers",
+      scale: 4,
+    },
   },
   thick: {
-    '2x': { path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@1.0.0-beta.16/models/2x/model.json', modelType: 'layers', scale: 2 },
-    '3x': { path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@1.0.0-beta.16/models/3x/model.json', modelType: 'layers', scale: 3 },
-    '4x': { path: 'https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@1.0.0-beta.16/models/4x/model.json', modelType: 'layers', scale: 4 }
-  }
-}
+    "2x": {
+      path: "https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@1.0.0-beta.12/models/2x/model.json",
+      modelType: "layers",
+      scale: 2,
+    },
+    "3x": {
+      path: "https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@1.0.0-beta.12/models/3x/model.json",
+      modelType: "layers",
+      scale: 3,
+    },
+    "4x": {
+      path: "https://cdn.jsdelivr.net/npm/@upscalerjs/esrgan-thick@1.0.0-beta.12/models/4x/model.json",
+      modelType: "layers",
+      scale: 4,
+    },
+  },
+};
 
 const getModel = async (model: ModelType, scale: ScaleType) => {
   // Slim: bundled locally
-  if (model === 'slim') {
+  if (model === "slim") {
     const slimMap = {
-      '2x': () => import('@upscalerjs/esrgan-slim/2x'),
-      '3x': () => import('@upscalerjs/esrgan-slim/3x'),
-      '4x': () => import('@upscalerjs/esrgan-slim/4x')
-    }
-    return (await slimMap[scale]()).default
+      "2x": () => import("@upscalerjs/esrgan-slim/2x"),
+      "3x": () => import("@upscalerjs/esrgan-slim/3x"),
+      "4x": () => import("@upscalerjs/esrgan-slim/4x"),
+    };
+    return (await slimMap[scale]()).default;
   }
 
   // Medium / Thick: load from CDN
-  const cdnDef = CDN_MODELS[model]?.[scale]
-  if (!cdnDef) throw new Error(`Unknown model: ${model}/${scale}`)
-  return cdnDef
-}
+  const cdnDef = CDN_MODELS[model]?.[scale];
+  if (!cdnDef) throw new Error(`Unknown model: ${model}/${scale}`);
+  return cdnDef;
+};
 
 self.onmessage = async (e: MessageEvent) => {
-  const { type, payload } = e.data
+  const { type, payload } = e.data;
 
   try {
     switch (type) {
-      case 'load': {
+      case "load": {
         const { model, scale, id } = payload as {
-          model: ModelType
-          scale: ScaleType
-          id?: number
-        }
+          model: ModelType;
+          scale: ScaleType;
+          id?: number;
+        };
 
         // Dispose previous upscaler if exists
         if (upscaler) {
-          upscaler.dispose()
-          upscaler = null
+          upscaler.dispose();
+          upscaler = null;
         }
 
         // Signal start of download phase
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'download', id }
-        })
+          type: "phase",
+          payload: { phase: "download", id },
+        });
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'download',
+            phase: "download",
             progress: 0,
-            id
-          }
-        })
+            id,
+          },
+        });
 
-        const modelDef = await getModel(model, scale)
+        const modelDef = await getModel(model, scale);
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'download',
+            phase: "download",
             progress: 50,
-            id
-          }
-        })
+            id,
+          },
+        });
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        upscaler = new Upscaler({ model: modelDef as any })
+        upscaler = new Upscaler({ model: modelDef as any });
 
         self.postMessage({
-          type: 'progress',
+          type: "progress",
           payload: {
-            phase: 'download',
+            phase: "download",
             progress: 100,
-            id
-          }
-        })
+            id,
+          },
+        });
 
-        self.postMessage({ type: 'loaded', payload: { id } })
-        break
+        self.postMessage({ type: "loaded", payload: { id } });
+        break;
       }
 
-      case 'upscale': {
+      case "upscale": {
         if (!upscaler) {
-          throw new Error('Model not loaded')
+          throw new Error("Model not loaded");
         }
 
-        const { imageData, id } = payload as { imageData: ImageData; id: number }
+        const { imageData, id } = payload as {
+          imageData: ImageData;
+          id: number;
+        };
 
         // Signal start of process phase
         self.postMessage({
-          type: 'phase',
-          payload: { phase: 'process', id }
-        })
+          type: "phase",
+          payload: { phase: "process", id },
+        });
 
         // Upscale using ImageData directly, output as tensor to avoid base64 issues in worker
         const result = await upscaler.upscale(imageData, {
-          output: 'tensor',
+          output: "tensor",
           patchSize: 64,
           padding: 2,
           progress: (percent: number) => {
             // Emit standardized progress (percent is 0-1 from upscaler)
             self.postMessage({
-              type: 'progress',
+              type: "progress",
               payload: {
-                phase: 'process',
+                phase: "process",
                 progress: percent * 100,
                 detail: {
                   current: Math.round(percent * 100),
                   total: 100,
-                  unit: 'percent' as const
+                  unit: "percent" as const,
                 },
-                id
-              }
-            })
-          }
-        })
+                id,
+              },
+            });
+          },
+        });
 
         // Convert tensor to ImageData
         // Result tensor shape is [height, width, channels] (RGB, 3 channels)
-        const [height, width, channels] = result.shape
-        const data = await result.data()
-        result.dispose()
+        const [height, width, channels] = result.shape;
+        const data = await result.data();
+        result.dispose();
 
         // Create Uint8ClampedArray for ImageData (needs RGBA, 4 channels)
-        const pixelCount = width * height
-        const uint8Data = new Uint8ClampedArray(pixelCount * 4)
+        const pixelCount = width * height;
+        const uint8Data = new Uint8ClampedArray(pixelCount * 4);
 
         for (let i = 0; i < pixelCount; i++) {
-          const srcIdx = i * channels
-          const dstIdx = i * 4
-          uint8Data[dstIdx] = Math.round(data[srcIdx]) // R
-          uint8Data[dstIdx + 1] = Math.round(data[srcIdx + 1]) // G
-          uint8Data[dstIdx + 2] = Math.round(data[srcIdx + 2]) // B
-          uint8Data[dstIdx + 3] = 255 // A (fully opaque)
+          const srcIdx = i * channels;
+          const dstIdx = i * 4;
+          uint8Data[dstIdx] = Math.round(data[srcIdx]); // R
+          uint8Data[dstIdx + 1] = Math.round(data[srcIdx + 1]); // G
+          uint8Data[dstIdx + 2] = Math.round(data[srcIdx + 2]); // B
+          uint8Data[dstIdx + 3] = 255; // A (fully opaque)
         }
 
-        const resultImageData = new ImageData(uint8Data, width, height)
+        const resultImageData = new ImageData(uint8Data, width, height);
 
         // Transfer the buffer back to main thread for efficiency
         self.postMessage(
           {
-            type: 'result',
+            type: "result",
             payload: {
               imageData: resultImageData,
               width,
               height,
-              id
-            }
+              id,
+            },
           },
-          { transfer: [resultImageData.data.buffer] }
-        )
-        break
+          { transfer: [resultImageData.data.buffer] },
+        );
+        break;
       }
 
-      case 'dispose': {
+      case "dispose": {
         if (upscaler) {
-          upscaler.dispose()
-          upscaler = null
+          upscaler.dispose();
+          upscaler = null;
         }
-        self.postMessage({ type: 'disposed' })
-        break
+        self.postMessage({ type: "disposed" });
+        break;
       }
     }
   } catch (error) {
-    self.postMessage({ type: 'error', payload: (error as Error).message })
+    self.postMessage({ type: "error", payload: (error as Error).message });
   }
-}
+};
diff --git a/src/workers/webgpuCompute.ts b/src/workers/webgpuCompute.ts
index bcb4e3b1..3f766f05 100644
--- a/src/workers/webgpuCompute.ts
+++ b/src/workers/webgpuCompute.ts
@@ -4,11 +4,11 @@
  * with automatic CPU fallback when GPU is unavailable or fails
  */
 
-let device: GPUDevice | null = null
-let initialized = false
+let device: GPUDevice | null = null;
+let initialized = false;
 
 // Shader cache
-const pipelineCache = new Map<string, GPUComputePipeline>()
+const pipelineCache = new Map<string, GPUComputePipeline>();
 
 // ============================================================================
 // CPU Fallback Implementations
@@ -17,152 +17,172 @@ const pipelineCache = new Map<string, GPUComputePipeline>()
 /**
  * CPU Gaussian blur implementation (separable)
  */
-function gaussianBlurCPU(input: Float32Array, w: number, h: number, kernelSize: number): Float32Array {
-  const half = Math.floor(kernelSize / 2)
-  const sigma = kernelSize / 6
+function gaussianBlurCPU(
+  input: Float32Array,
+  w: number,
+  h: number,
+  kernelSize: number,
+): Float32Array {
+  const half = Math.floor(kernelSize / 2);
+  const sigma = kernelSize / 6;
 
   // Build Gaussian kernel
-  const kernel: number[] = []
-  let sum = 0
+  const kernel: number[] = [];
+  let sum = 0;
   for (let i = -half; i <= half; i++) {
-    const val = Math.exp(-(i * i) / (2 * sigma * sigma))
-    kernel.push(val)
-    sum += val
+    const val = Math.exp(-(i * i) / (2 * sigma * sigma));
+    kernel.push(val);
+    sum += val;
   }
-  for (let i = 0; i < kernel.length; i++) kernel[i] /= sum
+  for (let i = 0; i < kernel.length; i++) kernel[i] /= sum;
 
   // Horizontal pass
-  const temp = new Float32Array(w * h)
+  const temp = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let val = 0
+      let val = 0;
       for (let k = -half; k <= half; k++) {
-        const nx = Math.max(0, Math.min(w - 1, x + k))
-        val += input[y * w + nx] * kernel[k + half]
+        const nx = Math.max(0, Math.min(w - 1, x + k));
+        val += input[y * w + nx] * kernel[k + half];
       }
-      temp[y * w + x] = val
+      temp[y * w + x] = val;
     }
   }
 
   // Vertical pass
-  const result = new Float32Array(w * h)
+  const result = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let val = 0
+      let val = 0;
       for (let k = -half; k <= half; k++) {
-        const ny = Math.max(0, Math.min(h - 1, y + k))
-        val += temp[ny * w + x] * kernel[k + half]
+        const ny = Math.max(0, Math.min(h - 1, y + k));
+        val += temp[ny * w + x] * kernel[k + half];
       }
-      result[y * w + x] = val
+      result[y * w + x] = val;
     }
   }
 
-  return result
+  return result;
 }
 
 /**
  * CPU box blur implementation (separable)
  */
-function boxBlurCPU(input: Float32Array, w: number, h: number, kernelSize: number): Float32Array {
-  const half = Math.floor(kernelSize / 2)
+function boxBlurCPU(
+  input: Float32Array,
+  w: number,
+  h: number,
+  kernelSize: number,
+): Float32Array {
+  const half = Math.floor(kernelSize / 2);
 
   // Horizontal pass
-  const temp = new Float32Array(w * h)
+  const temp = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let sum = 0
+      let sum = 0;
       for (let k = -half; k <= half; k++) {
-        const nx = Math.max(0, Math.min(w - 1, x + k))
-        sum += input[y * w + nx]
+        const nx = Math.max(0, Math.min(w - 1, x + k));
+        sum += input[y * w + nx];
       }
-      temp[y * w + x] = sum / kernelSize
+      temp[y * w + x] = sum / kernelSize;
     }
   }
 
   // Vertical pass
-  const result = new Float32Array(w * h)
+  const result = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let sum = 0
+      let sum = 0;
       for (let k = -half; k <= half; k++) {
-        const ny = Math.max(0, Math.min(h - 1, y + k))
-        sum += temp[ny * w + x]
+        const ny = Math.max(0, Math.min(h - 1, y + k));
+        sum += temp[ny * w + x];
       }
-      result[y * w + x] = sum / kernelSize
+      result[y * w + x] = sum / kernelSize;
     }
   }
 
-  return result
+  return result;
 }
 
 /**
  * CPU erosion implementation (separable min filter)
  */
-function erodeMaskCPU(input: Float32Array, w: number, h: number, kernelSize: number): Float32Array {
-  const half = Math.floor(kernelSize / 2)
+function erodeMaskCPU(
+  input: Float32Array,
+  w: number,
+  h: number,
+  kernelSize: number,
+): Float32Array {
+  const half = Math.floor(kernelSize / 2);
 
   // Horizontal min
-  const temp = new Float32Array(w * h)
+  const temp = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let minVal = 255
+      let minVal = 255;
       for (let k = -half; k <= half; k++) {
-        const nx = Math.max(0, Math.min(w - 1, x + k))
-        minVal = Math.min(minVal, input[y * w + nx])
+        const nx = Math.max(0, Math.min(w - 1, x + k));
+        minVal = Math.min(minVal, input[y * w + nx]);
       }
-      temp[y * w + x] = minVal
+      temp[y * w + x] = minVal;
     }
   }
 
   // Vertical min
-  const result = new Float32Array(w * h)
+  const result = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let minVal = 255
+      let minVal = 255;
       for (let k = -half; k <= half; k++) {
-        const ny = Math.max(0, Math.min(h - 1, y + k))
-        minVal = Math.min(minVal, temp[ny * w + x])
+        const ny = Math.max(0, Math.min(h - 1, y + k));
+        minVal = Math.min(minVal, temp[ny * w + x]);
       }
-      result[y * w + x] = minVal
+      result[y * w + x] = minVal;
     }
   }
 
-  return result
+  return result;
 }
 
 /**
  * CPU dilation implementation (separable max filter)
  */
-function dilateMaskCPU(input: Float32Array, w: number, h: number, kernelSize: number): Float32Array {
-  const half = Math.floor(kernelSize / 2)
+function dilateMaskCPU(
+  input: Float32Array,
+  w: number,
+  h: number,
+  kernelSize: number,
+): Float32Array {
+  const half = Math.floor(kernelSize / 2);
 
   // Horizontal max
-  const temp = new Float32Array(w * h)
+  const temp = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let maxVal = 0
+      let maxVal = 0;
       for (let k = -half; k <= half; k++) {
-        const nx = Math.max(0, Math.min(w - 1, x + k))
-        maxVal = Math.max(maxVal, input[y * w + nx])
+        const nx = Math.max(0, Math.min(w - 1, x + k));
+        maxVal = Math.max(maxVal, input[y * w + nx]);
       }
-      temp[y * w + x] = maxVal
+      temp[y * w + x] = maxVal;
     }
   }
 
   // Vertical max
-  const result = new Float32Array(w * h)
+  const result = new Float32Array(w * h);
   for (let y = 0; y < h; y++) {
     for (let x = 0; x < w; x++) {
-      let maxVal = 0
+      let maxVal = 0;
       for (let k = -half; k <= half; k++) {
-        const ny = Math.max(0, Math.min(h - 1, y + k))
-        maxVal = Math.max(maxVal, temp[ny * w + x])
+        const ny = Math.max(0, Math.min(h - 1, y + k));
+        maxVal = Math.max(maxVal, temp[ny * w + x]);
       }
-      result[y * w + x] = maxVal
+      result[y * w + x] = maxVal;
     }
   }
 
-  return result
+  return result;
 }
 
 /**
@@ -172,19 +192,19 @@ function dilateMaskCPU(input: Float32Array, w: number, h: number, kernelSize: nu
 function colorMatchCPU(
   input: Float32Array,
   colorShift: [number, number, number],
-  faceSize: number
+  faceSize: number,
 ): Float32Array {
-  const result = new Float32Array(input.length)
-  const totalPixels = faceSize * faceSize
+  const result = new Float32Array(input.length);
+  const totalPixels = faceSize * faceSize;
 
   for (let c = 0; c < 3; c++) {
     for (let i = 0; i < totalPixels; i++) {
-      const idx = c * totalPixels + i
-      result[idx] = Math.max(0, Math.min(1, input[idx] + colorShift[c]))
+      const idx = c * totalPixels + i;
+      result[idx] = Math.max(0, Math.min(1, input[idx] + colorShift[c]));
     }
   }
 
-  return result
+  return result;
 }
 
 // ============================================================================
@@ -195,35 +215,35 @@ function colorMatchCPU(
  * Initialize WebGPU device
  */
 export async function initWebGPU(): Promise<boolean> {
-  if (initialized) return device !== null
+  if (initialized) return device !== null;
 
   try {
     if (!navigator.gpu) {
-      console.log('WebGPU not supported')
-      initialized = true
-      return false
+      console.log("WebGPU not supported");
+      initialized = true;
+      return false;
     }
 
-    const adapter = await navigator.gpu.requestAdapter()
+    const adapter = await navigator.gpu.requestAdapter();
     if (!adapter) {
-      console.log('No WebGPU adapter found')
-      initialized = true
-      return false
+      console.log("No WebGPU adapter found");
+      initialized = true;
+      return false;
     }
 
-    device = await adapter.requestDevice()
-    initialized = true
-    console.log('WebGPU compute initialized')
-    return true
+    device = await adapter.requestDevice();
+    initialized = true;
+    console.log("WebGPU compute initialized");
+    return true;
   } catch (e) {
-    console.warn('WebGPU init failed:', e)
-    initialized = true
-    return false
+    console.warn("WebGPU init failed:", e);
+    initialized = true;
+    return false;
   }
 }
 
 export function isWebGPUAvailable(): boolean {
-  return device !== null
+  return device !== null;
 }
 
 /**
@@ -267,7 +287,7 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
 
   output[idx] = sum;
 }
-`
+`;
 
 /**
  * Separable Box Blur
@@ -307,7 +327,7 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
 
   output[idx] = sum / f32(kernelSize);
 }
-`
+`;
 
 /**
  * Separable Erosion (min filter)
@@ -347,7 +367,7 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
 
   output[idx] = minVal;
 }
-`
+`;
 
 /**
  * Separable Dilation (max filter)
@@ -387,7 +407,7 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
 
   output[idx] = maxVal;
 }
-`
+`;
 
 /**
  * Inverse warp and blend shader
@@ -459,21 +479,24 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
     }
   }
 }
-`
+`;
 
-function getOrCreatePipeline(name: string, shaderCode: string): GPUComputePipeline {
-  if (!device) throw new Error('WebGPU not initialized')
+function getOrCreatePipeline(
+  name: string,
+  shaderCode: string,
+): GPUComputePipeline {
+  if (!device) throw new Error("WebGPU not initialized");
 
-  let pipeline = pipelineCache.get(name)
+  let pipeline = pipelineCache.get(name);
   if (!pipeline) {
-    const shaderModule = device.createShaderModule({ code: shaderCode })
+    const shaderModule = device.createShaderModule({ code: shaderCode });
     pipeline = device.createComputePipeline({
-      layout: 'auto',
-      compute: { module: shaderModule, entryPoint: 'main' }
-    })
-    pipelineCache.set(name, pipeline)
+      layout: "auto",
+      compute: { module: shaderModule, entryPoint: "main" },
+    });
+    pipelineCache.set(name, pipeline);
   }
-  return pipeline
+  return pipeline;
 }
 
 /**
@@ -486,116 +509,124 @@ async function runSeparableFilter(
   kernelSize: number,
   shaderCode: string,
   pipelineName: string,
-  kernel?: Float32Array
+  kernel?: Float32Array,
 ): Promise<Float32Array> {
-  if (!device) throw new Error('WebGPU not initialized')
+  if (!device) throw new Error("WebGPU not initialized");
 
-  const pipeline = getOrCreatePipeline(pipelineName, shaderCode)
-  const size = w * h
+  const pipeline = getOrCreatePipeline(pipelineName, shaderCode);
+  const size = w * h;
 
   // Create buffers
   const inputBuffer = device.createBuffer({
     size: size * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+  });
   const tempBuffer = device.createBuffer({
     size: size * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
+  });
   const outputBuffer = device.createBuffer({
     size: size * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
+  });
   const paramsBuffer = device.createBuffer({
     size: 16,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+  });
   const resultBuffer = device.createBuffer({
     size: size * 4,
-    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+  });
 
   // Kernel buffer for Gaussian blur
-  let kernelBuffer: GPUBuffer | null = null
+  let kernelBuffer: GPUBuffer | null = null;
   if (kernel) {
     kernelBuffer = device.createBuffer({
       size: kernel.length * 4,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    })
-    device.queue.writeBuffer(kernelBuffer, 0, new Float32Array(kernel))
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(kernelBuffer, 0, new Float32Array(kernel));
   }
 
-  device.queue.writeBuffer(inputBuffer, 0, new Float32Array(input))
+  device.queue.writeBuffer(inputBuffer, 0, new Float32Array(input));
 
-  const workgroups = Math.ceil(size / 256)
+  const workgroups = Math.ceil(size / 256);
 
   // Horizontal pass
-  device.queue.writeBuffer(paramsBuffer, 0, new Uint32Array([w, h, kernelSize, 0]))
+  device.queue.writeBuffer(
+    paramsBuffer,
+    0,
+    new Uint32Array([w, h, kernelSize, 0]),
+  );
 
   let bindGroupEntries: GPUBindGroupEntry[] = [
     { binding: 0, resource: { buffer: inputBuffer } },
     { binding: 1, resource: { buffer: tempBuffer } },
-    { binding: 2, resource: { buffer: paramsBuffer } }
-  ]
+    { binding: 2, resource: { buffer: paramsBuffer } },
+  ];
   if (kernelBuffer) {
-    bindGroupEntries.push({ binding: 3, resource: { buffer: kernelBuffer } })
+    bindGroupEntries.push({ binding: 3, resource: { buffer: kernelBuffer } });
   }
 
   const bindGroup1 = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
-    entries: bindGroupEntries
-  })
+    entries: bindGroupEntries,
+  });
 
-  let encoder = device.createCommandEncoder()
-  let pass = encoder.beginComputePass()
-  pass.setPipeline(pipeline)
-  pass.setBindGroup(0, bindGroup1)
-  pass.dispatchWorkgroups(workgroups)
-  pass.end()
-  device.queue.submit([encoder.finish()])
+  let encoder = device.createCommandEncoder();
+  let pass = encoder.beginComputePass();
+  pass.setPipeline(pipeline);
+  pass.setBindGroup(0, bindGroup1);
+  pass.dispatchWorkgroups(workgroups);
+  pass.end();
+  device.queue.submit([encoder.finish()]);
 
   // Vertical pass
-  device.queue.writeBuffer(paramsBuffer, 0, new Uint32Array([w, h, kernelSize, 1]))
+  device.queue.writeBuffer(
+    paramsBuffer,
+    0,
+    new Uint32Array([w, h, kernelSize, 1]),
+  );
 
   bindGroupEntries = [
     { binding: 0, resource: { buffer: tempBuffer } },
     { binding: 1, resource: { buffer: outputBuffer } },
-    { binding: 2, resource: { buffer: paramsBuffer } }
-  ]
+    { binding: 2, resource: { buffer: paramsBuffer } },
+  ];
   if (kernelBuffer) {
-    bindGroupEntries.push({ binding: 3, resource: { buffer: kernelBuffer } })
+    bindGroupEntries.push({ binding: 3, resource: { buffer: kernelBuffer } });
   }
 
   const bindGroup2 = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
-    entries: bindGroupEntries
-  })
+    entries: bindGroupEntries,
+  });
 
-  encoder = device.createCommandEncoder()
-  pass = encoder.beginComputePass()
-  pass.setPipeline(pipeline)
-  pass.setBindGroup(0, bindGroup2)
-  pass.dispatchWorkgroups(workgroups)
-  pass.end()
+  encoder = device.createCommandEncoder();
+  pass = encoder.beginComputePass();
+  pass.setPipeline(pipeline);
+  pass.setBindGroup(0, bindGroup2);
+  pass.dispatchWorkgroups(workgroups);
+  pass.end();
 
   // Copy result
-  encoder.copyBufferToBuffer(outputBuffer, 0, resultBuffer, 0, size * 4)
-  device.queue.submit([encoder.finish()])
+  encoder.copyBufferToBuffer(outputBuffer, 0, resultBuffer, 0, size * 4);
+  device.queue.submit([encoder.finish()]);
 
   // Read back
-  await resultBuffer.mapAsync(GPUMapMode.READ)
-  const result = new Float32Array(resultBuffer.getMappedRange().slice(0))
-  resultBuffer.unmap()
+  await resultBuffer.mapAsync(GPUMapMode.READ);
+  const result = new Float32Array(resultBuffer.getMappedRange().slice(0));
+  resultBuffer.unmap();
 
   // Cleanup
-  inputBuffer.destroy()
-  tempBuffer.destroy()
-  outputBuffer.destroy()
-  paramsBuffer.destroy()
-  resultBuffer.destroy()
-  kernelBuffer?.destroy()
-
-  return result
+  inputBuffer.destroy();
+  tempBuffer.destroy();
+  outputBuffer.destroy();
+  paramsBuffer.destroy();
+  resultBuffer.destroy();
+  kernelBuffer?.destroy();
+
+  return result;
 }
 
 // ============================================================================
@@ -609,22 +640,30 @@ async function gaussianBlurGPUImpl(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
-  const half = Math.floor(kernelSize / 2)
-  const sigma = kernelSize / 6
+  const half = Math.floor(kernelSize / 2);
+  const sigma = kernelSize / 6;
 
   // Build Gaussian kernel
-  const kernel = new Float32Array(kernelSize)
-  let sum = 0
+  const kernel = new Float32Array(kernelSize);
+  let sum = 0;
   for (let i = -half; i <= half; i++) {
-    const val = Math.exp(-(i * i) / (2 * sigma * sigma))
-    kernel[i + half] = val
-    sum += val
+    const val = Math.exp(-(i * i) / (2 * sigma * sigma));
+    kernel[i + half] = val;
+    sum += val;
   }
-  for (let i = 0; i < kernelSize; i++) kernel[i] /= sum
-
-  return runSeparableFilter(mask, w, h, kernelSize, gaussianBlurShader, 'gaussianBlur', kernel)
+  for (let i = 0; i < kernelSize; i++) kernel[i] /= sum;
+
+  return runSeparableFilter(
+    mask,
+    w,
+    h,
+    kernelSize,
+    gaussianBlurShader,
+    "gaussianBlur",
+    kernel,
+  );
 }
 
 /**
@@ -634,9 +673,9 @@ async function boxBlurGPUImpl(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
-  return runSeparableFilter(mask, w, h, kernelSize, boxBlurShader, 'boxBlur')
+  return runSeparableFilter(mask, w, h, kernelSize, boxBlurShader, "boxBlur");
 }
 
 /**
@@ -646,9 +685,9 @@ async function erodeMaskGPUImpl(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
-  return runSeparableFilter(mask, w, h, kernelSize, erodeShader, 'erode')
+  return runSeparableFilter(mask, w, h, kernelSize, erodeShader, "erode");
 }
 
 /**
@@ -658,9 +697,9 @@ async function dilateMaskGPUImpl(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
-  return runSeparableFilter(mask, w, h, kernelSize, dilateShader, 'dilate')
+  return runSeparableFilter(mask, w, h, kernelSize, dilateShader, "dilate");
 }
 
 // ============================================================================
@@ -675,16 +714,16 @@ export async function gaussianBlur(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
   if (device) {
     try {
-      return await gaussianBlurGPUImpl(mask, w, h, kernelSize)
+      return await gaussianBlurGPUImpl(mask, w, h, kernelSize);
     } catch (e) {
-      console.warn('GPU gaussianBlur failed, using CPU fallback:', e)
+      console.warn("GPU gaussianBlur failed, using CPU fallback:", e);
     }
   }
-  return gaussianBlurCPU(mask, w, h, kernelSize)
+  return gaussianBlurCPU(mask, w, h, kernelSize);
 }
 
 /**
@@ -695,16 +734,16 @@ export async function boxBlur(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
   if (device) {
     try {
-      return await boxBlurGPUImpl(mask, w, h, kernelSize)
+      return await boxBlurGPUImpl(mask, w, h, kernelSize);
     } catch (e) {
-      console.warn('GPU boxBlur failed, using CPU fallback:', e)
+      console.warn("GPU boxBlur failed, using CPU fallback:", e);
     }
   }
-  return boxBlurCPU(mask, w, h, kernelSize)
+  return boxBlurCPU(mask, w, h, kernelSize);
 }
 
 /**
@@ -715,16 +754,16 @@ export async function erodeMask(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
   if (device) {
     try {
-      return await erodeMaskGPUImpl(mask, w, h, kernelSize)
+      return await erodeMaskGPUImpl(mask, w, h, kernelSize);
     } catch (e) {
-      console.warn('GPU erodeMask failed, using CPU fallback:', e)
+      console.warn("GPU erodeMask failed, using CPU fallback:", e);
     }
   }
-  return erodeMaskCPU(mask, w, h, kernelSize)
+  return erodeMaskCPU(mask, w, h, kernelSize);
 }
 
 /**
@@ -735,16 +774,16 @@ export async function dilateMask(
   mask: Float32Array,
   w: number,
   h: number,
-  kernelSize: number
+  kernelSize: number,
 ): Promise<Float32Array> {
   if (device) {
     try {
-      return await dilateMaskGPUImpl(mask, w, h, kernelSize)
+      return await dilateMaskGPUImpl(mask, w, h, kernelSize);
     } catch (e) {
-      console.warn('GPU dilateMask failed, using CPU fallback:', e)
+      console.warn("GPU dilateMask failed, using CPU fallback:", e);
     }
   }
-  return dilateMaskCPU(mask, w, h, kernelSize)
+  return dilateMaskCPU(mask, w, h, kernelSize);
 }
 
 /**
@@ -761,62 +800,68 @@ export async function inverseWarpBlendGPU(
   by0: number,
   bw: number,
   bh: number,
-  faceSize: number
+  faceSize: number,
 ): Promise<Float32Array> {
-  if (!device) throw new Error('WebGPU not initialized')
+  if (!device) throw new Error("WebGPU not initialized");
 
-  const pipeline = getOrCreatePipeline('inverseWarpBlend', inverseWarpBlendShader)
+  const pipeline = getOrCreatePipeline(
+    "inverseWarpBlend",
+    inverseWarpBlendShader,
+  );
 
-  const imgSize = imgW * imgH * 3
-  const faceDataSize = faceSize * faceSize * 3
-  const maskSize = bw * bh
+  const imgSize = imgW * imgH * 3;
+  const faceDataSize = faceSize * faceSize * 3;
+  const maskSize = bw * bh;
 
   // Create buffers
   const originalBuffer = device.createBuffer({
     size: imgSize * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+  });
   const faceBuffer = device.createBuffer({
     size: faceDataSize * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+  });
   const maskBuffer = device.createBuffer({
     size: maskSize * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+  });
   const resultBuffer = device.createBuffer({
     size: imgSize * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST
-  })
+    usage:
+      GPUBufferUsage.STORAGE |
+      GPUBufferUsage.COPY_SRC |
+      GPUBufferUsage.COPY_DST,
+  });
   const paramsBuffer = device.createBuffer({
     size: 64, // Params struct size
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+  });
   const readbackBuffer = device.createBuffer({
     size: imgSize * 4,
-    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+  });
 
   // Write data
-  device.queue.writeBuffer(originalBuffer, 0, new Float32Array(originalImage))
-  device.queue.writeBuffer(faceBuffer, 0, new Float32Array(swappedFace))
-  device.queue.writeBuffer(maskBuffer, 0, new Float32Array(blendMask))
-  device.queue.writeBuffer(resultBuffer, 0, new Float32Array(originalImage)) // Start with original
+  device.queue.writeBuffer(originalBuffer, 0, new Float32Array(originalImage));
+  device.queue.writeBuffer(faceBuffer, 0, new Float32Array(swappedFace));
+  device.queue.writeBuffer(maskBuffer, 0, new Float32Array(blendMask));
+  device.queue.writeBuffer(resultBuffer, 0, new Float32Array(originalImage)); // Start with original
 
   // Params: imgW, imgH, bx0, by0, bw, bh, faceSize, pad, matrix[6]
-  const paramsData = new ArrayBuffer(64)
-  const paramsU32 = new Uint32Array(paramsData, 0, 8)
-  const paramsF32 = new Float32Array(paramsData, 32, 6)
-  paramsU32[0] = imgW
-  paramsU32[1] = imgH
-  paramsU32[2] = bx0
-  paramsU32[3] = by0
-  paramsU32[4] = bw
-  paramsU32[5] = bh
-  paramsU32[6] = faceSize
-  paramsU32[7] = 0
-  for (let i = 0; i < 6; i++) paramsF32[i] = matrix[i]
-  device.queue.writeBuffer(paramsBuffer, 0, paramsData)
+  const paramsData = new ArrayBuffer(64);
+  const paramsU32 = new Uint32Array(paramsData, 0, 8);
+  const paramsF32 = new Float32Array(paramsData, 32, 6);
+  paramsU32[0] = imgW;
+  paramsU32[1] = imgH;
+  paramsU32[2] = bx0;
+  paramsU32[3] = by0;
+  paramsU32[4] = bw;
+  paramsU32[5] = bh;
+  paramsU32[6] = faceSize;
+  paramsU32[7] = 0;
+  for (let i = 0; i < 6; i++) paramsF32[i] = matrix[i];
+  device.queue.writeBuffer(paramsBuffer, 0, paramsData);
 
   const bindGroup = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
@@ -825,36 +870,36 @@ export async function inverseWarpBlendGPU(
       { binding: 1, resource: { buffer: faceBuffer } },
       { binding: 2, resource: { buffer: maskBuffer } },
       { binding: 3, resource: { buffer: resultBuffer } },
-      { binding: 4, resource: { buffer: paramsBuffer } }
-    ]
-  })
+      { binding: 4, resource: { buffer: paramsBuffer } },
+    ],
+  });
 
-  const workgroups = Math.ceil(maskSize / 256)
+  const workgroups = Math.ceil(maskSize / 256);
 
-  const encoder = device.createCommandEncoder()
-  const pass = encoder.beginComputePass()
-  pass.setPipeline(pipeline)
-  pass.setBindGroup(0, bindGroup)
-  pass.dispatchWorkgroups(workgroups)
-  pass.end()
+  const encoder = device.createCommandEncoder();
+  const pass = encoder.beginComputePass();
+  pass.setPipeline(pipeline);
+  pass.setBindGroup(0, bindGroup);
+  pass.dispatchWorkgroups(workgroups);
+  pass.end();
 
-  encoder.copyBufferToBuffer(resultBuffer, 0, readbackBuffer, 0, imgSize * 4)
-  device.queue.submit([encoder.finish()])
+  encoder.copyBufferToBuffer(resultBuffer, 0, readbackBuffer, 0, imgSize * 4);
+  device.queue.submit([encoder.finish()]);
 
   // Read back
-  await readbackBuffer.mapAsync(GPUMapMode.READ)
-  const result = new Float32Array(readbackBuffer.getMappedRange().slice(0))
-  readbackBuffer.unmap()
+  await readbackBuffer.mapAsync(GPUMapMode.READ);
+  const result = new Float32Array(readbackBuffer.getMappedRange().slice(0));
+  readbackBuffer.unmap();
 
   // Cleanup
-  originalBuffer.destroy()
-  faceBuffer.destroy()
-  maskBuffer.destroy()
-  resultBuffer.destroy()
-  paramsBuffer.destroy()
-  readbackBuffer.destroy()
-
-  return result
+  originalBuffer.destroy();
+  faceBuffer.destroy();
+  maskBuffer.destroy();
+  resultBuffer.destroy();
+  paramsBuffer.destroy();
+  readbackBuffer.destroy();
+
+  return result;
 }
 
 /**
@@ -864,9 +909,9 @@ export async function inverseWarpBlendGPU(
 async function colorMatchGPUImpl(
   swappedFace: Float32Array,
   colorShift: [number, number, number],
-  faceSize: number
+  faceSize: number,
 ): Promise<Float32Array> {
-  if (!device) throw new Error('WebGPU not initialized')
+  if (!device) throw new Error("WebGPU not initialized");
 
   const shaderCode = `
 @group(0) @binding(0) var<storage, read> input: array<f32>;
@@ -891,71 +936,75 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
     output[srcIdx] = clamp(input[srcIdx] + shift[c], 0.0, 1.0);
   }
 }
-`
+`;
 
-  const cacheKey = 'colorMatch'
-  let pipeline = pipelineCache.get(cacheKey)
+  const cacheKey = "colorMatch";
+  let pipeline = pipelineCache.get(cacheKey);
   if (!pipeline) {
-    const shaderModule = device.createShaderModule({ code: shaderCode })
+    const shaderModule = device.createShaderModule({ code: shaderCode });
     pipeline = device.createComputePipeline({
-      layout: 'auto',
-      compute: { module: shaderModule, entryPoint: 'main' }
-    })
-    pipelineCache.set(cacheKey, pipeline)
+      layout: "auto",
+      compute: { module: shaderModule, entryPoint: "main" },
+    });
+    pipelineCache.set(cacheKey, pipeline);
   }
 
-  const totalSize = faceSize * faceSize * 3
+  const totalSize = faceSize * faceSize * 3;
 
   const inputBuffer = device.createBuffer({
     size: totalSize * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+  });
   const outputBuffer = device.createBuffer({
     size: totalSize * 4,
-    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-  })
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
+  });
   const paramsBuffer = device.createBuffer({
     size: 16,
-    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+  });
   const readbackBuffer = device.createBuffer({
     size: totalSize * 4,
-    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
-  })
+    usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+  });
 
-  device.queue.writeBuffer(inputBuffer, 0, new Float32Array(swappedFace))
-  device.queue.writeBuffer(paramsBuffer, 0, new Float32Array([colorShift[0], colorShift[1], colorShift[2], faceSize]))
+  device.queue.writeBuffer(inputBuffer, 0, new Float32Array(swappedFace));
+  device.queue.writeBuffer(
+    paramsBuffer,
+    0,
+    new Float32Array([colorShift[0], colorShift[1], colorShift[2], faceSize]),
+  );
 
   const bindGroup = device.createBindGroup({
     layout: pipeline.getBindGroupLayout(0),
     entries: [
       { binding: 0, resource: { buffer: inputBuffer } },
       { binding: 1, resource: { buffer: outputBuffer } },
-      { binding: 2, resource: { buffer: paramsBuffer } }
-    ]
-  })
-
-  const workgroups = Math.ceil((faceSize * faceSize) / 256)
-  const encoder = device.createCommandEncoder()
-  const pass = encoder.beginComputePass()
-  pass.setPipeline(pipeline)
-  pass.setBindGroup(0, bindGroup)
-  pass.dispatchWorkgroups(workgroups)
-  pass.end()
-
-  encoder.copyBufferToBuffer(outputBuffer, 0, readbackBuffer, 0, totalSize * 4)
-  device.queue.submit([encoder.finish()])
-
-  await readbackBuffer.mapAsync(GPUMapMode.READ)
-  const result = new Float32Array(readbackBuffer.getMappedRange().slice(0))
-  readbackBuffer.unmap()
-
-  inputBuffer.destroy()
-  outputBuffer.destroy()
-  paramsBuffer.destroy()
-  readbackBuffer.destroy()
-
-  return result
+      { binding: 2, resource: { buffer: paramsBuffer } },
+    ],
+  });
+
+  const workgroups = Math.ceil((faceSize * faceSize) / 256);
+  const encoder = device.createCommandEncoder();
+  const pass = encoder.beginComputePass();
+  pass.setPipeline(pipeline);
+  pass.setBindGroup(0, bindGroup);
+  pass.dispatchWorkgroups(workgroups);
+  pass.end();
+
+  encoder.copyBufferToBuffer(outputBuffer, 0, readbackBuffer, 0, totalSize * 4);
+  device.queue.submit([encoder.finish()]);
+
+  await readbackBuffer.mapAsync(GPUMapMode.READ);
+  const result = new Float32Array(readbackBuffer.getMappedRange().slice(0));
+  readbackBuffer.unmap();
+
+  inputBuffer.destroy();
+  outputBuffer.destroy();
+  paramsBuffer.destroy();
+  readbackBuffer.destroy();
+
+  return result;
 }
 
 /**
@@ -966,23 +1015,23 @@ fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
 export async function colorMatch(
   swappedFace: Float32Array,
   colorShift: [number, number, number],
-  faceSize: number
+  faceSize: number,
 ): Promise<Float32Array> {
   if (device) {
     try {
-      return await colorMatchGPUImpl(swappedFace, colorShift, faceSize)
+      return await colorMatchGPUImpl(swappedFace, colorShift, faceSize);
     } catch (e) {
-      console.warn('GPU colorMatch failed, using CPU fallback:', e)
+      console.warn("GPU colorMatch failed, using CPU fallback:", e);
     }
   }
-  return colorMatchCPU(swappedFace, colorShift, faceSize)
+  return colorMatchCPU(swappedFace, colorShift, faceSize);
 }
 
 /**
  * Dispose WebGPU resources
  */
 export function disposeWebGPU(): void {
-  pipelineCache.clear()
-  device = null
-  initialized = false
+  pipelineCache.clear();
+  device = null;
+  initialized = false;
 }
diff --git a/src/workflow/WorkflowPage.tsx b/src/workflow/WorkflowPage.tsx
index 48d183f9..91e10359 100644
--- a/src/workflow/WorkflowPage.tsx
+++ b/src/workflow/WorkflowPage.tsx
@@ -4,615 +4,928 @@
  * Top bar: Workflow tabs (like browser tabs) + Run All + Save + Settings.
  * Config and Results are shown inside the selected node card on the canvas (no right sidebar).
  */
-import { useEffect, useState, useCallback, useRef, useMemo, Fragment } from 'react'
-import ReactDOM from 'react-dom'
-import { useSearchParams } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { WorkflowCanvas } from './components/canvas/WorkflowCanvas'
-import { NodePalette } from './components/canvas/NodePalette'
-import { WorkflowList } from './components/WorkflowList'
-import { MonitorSidePanel } from './components/panels/MonitorSidePanel'
-import { useWorkflowStore, getDefaultNewWorkflowContent } from './stores/workflow.store'
-import { useExecutionStore } from './stores/execution.store'
-import { useUIStore } from './stores/ui.store'
-import { registryIpc, modelsIpc, storageIpc, workflowIpc } from './ipc/ipc-client'
-import { useModelsStore } from '@/stores/modelsStore'
-import { useApiKeyStore } from '@/stores/apiKeyStore'
-import { apiClient } from '@/api/client'
-import { useTemplateStore } from '@/stores/templateStore'
-import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
-import { History, X, Plus } from 'lucide-react'
-import { TemplatePickerDialog } from '@/components/templates/TemplatePickerDialog'
-import { TemplateDialog } from '@/components/templates/TemplateDialog'
-import { WorkflowGuide, useWorkflowGuide } from './components/WorkflowGuide'
-import { persistentStorage } from '@/lib/storage'
-import type { Template } from '@/types/template'
-import type { NodeTypeDefinition } from '@/workflow/types/node-defs'
-import { getOutputItemType } from './lib/outputDisplay'
-
-type ModelSyncStatus = 'idle' | 'loading' | 'synced' | 'error' | 'no-key' | 'unavailable'
-const WORKFLOW_API_UNAVAILABLE_MSG = 'Workflow API not available (run in Electron)'
-const isElectron = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('electron')
+import {
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+  useMemo,
+  Fragment,
+} from "react";
+import ReactDOM from "react-dom";
+import { useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { WorkflowCanvas } from "./components/canvas/WorkflowCanvas";
+import { NodePalette } from "./components/canvas/NodePalette";
+import { WorkflowList } from "./components/WorkflowList";
+import { MonitorSidePanel } from "./components/panels/MonitorSidePanel";
+import {
+  useWorkflowStore,
+  getDefaultNewWorkflowContent,
+} from "./stores/workflow.store";
+import { useExecutionStore } from "./stores/execution.store";
+import { useUIStore } from "./stores/ui.store";
+import {
+  registryIpc,
+  modelsIpc,
+  storageIpc,
+  workflowIpc,
+} from "./ipc/ipc-client";
+import { useModelsStore } from "@/stores/modelsStore";
+import { useApiKeyStore } from "@/stores/apiKeyStore";
+import { apiClient } from "@/api/client";
+import { useTemplateStore } from "@/stores/templateStore";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import { History, X, Plus, GitBranch, ChevronDown, Clock } from "lucide-react";
+import { TemplatePickerDialog } from "@/components/templates/TemplatePickerDialog";
+import { TemplateDialog } from "@/components/templates/TemplateDialog";
+import { WorkflowGuide, useWorkflowGuide } from "./components/WorkflowGuide";
+import { persistentStorage } from "@/lib/storage";
+import type { Template } from "@/types/template";
+import type { NodeTypeDefinition } from "@/workflow/types/node-defs";
+import { getOutputItemType } from "./lib/outputDisplay";
+
+type ModelSyncStatus =
+  | "idle"
+  | "loading"
+  | "synced"
+  | "error"
+  | "no-key"
+  | "unavailable";
+const WORKFLOW_API_UNAVAILABLE_MSG =
+  "Workflow API not available (run in Electron)";
+const isElectron =
+  typeof navigator !== "undefined" &&
+  navigator.userAgent.toLowerCase().includes("electron");
 function isWorkflowApiUnavailable(err: unknown): boolean {
-  const msg = err instanceof Error ? err.message : String(err)
-  return msg.includes(WORKFLOW_API_UNAVAILABLE_MSG)
+  const msg = err instanceof Error ? err.message : String(err);
+  return msg.includes(WORKFLOW_API_UNAVAILABLE_MSG);
 }
 
 /* ── Tab snapshot for multi-tab support ─────────────────────────────── */
 interface TabSnapshot {
-  tabId: string
-  workflowId: string | null
-  workflowName: string
-  nodes: unknown[]
-  edges: unknown[]
-  isDirty: boolean
+  tabId: string;
+  workflowId: string | null;
+  workflowName: string;
+  nodes: unknown[];
+  edges: unknown[];
+  isDirty: boolean;
+  createdAt?: number;
 }
 
 interface PersistedWorkflowSession {
-  version: 1
-  activeTabId: string
-  tabIdCounter: number
-  tabs: TabSnapshot[]
+  version: 1;
+  activeTabId: string;
+  tabIdCounter: number;
+  tabs: TabSnapshot[];
 }
 
-const WORKFLOW_SESSION_STORAGE_KEY = 'wavespeed_workflow_session_v1'
+const WORKFLOW_SESSION_STORAGE_KEY = "wavespeed_workflow_session_v1";
 
 function parseTabIndex(tabId: string): number {
-  const m = /^tab-(\d+)$/.exec(tabId)
-  return m ? Number(m[1]) : 1
+  const m = /^tab-(\d+)$/.exec(tabId);
+  return m ? Number(m[1]) : 1;
 }
 
 function sanitizeTabSnapshots(input: unknown): TabSnapshot[] {
-  if (!Array.isArray(input)) return []
-  const tabs: TabSnapshot[] = []
+  if (!Array.isArray(input)) return [];
+  const tabs: TabSnapshot[] = [];
   for (const raw of input) {
-    if (!raw || typeof raw !== 'object') continue
-    const r = raw as Record<string, unknown>
-    if (typeof r.tabId !== 'string') continue
+    if (!raw || typeof raw !== "object") continue;
+    const r = raw as Record<string, unknown>;
+    if (typeof r.tabId !== "string") continue;
     tabs.push({
       tabId: r.tabId,
-      workflowId: typeof r.workflowId === 'string' ? r.workflowId : null,
-      workflowName: typeof r.workflowName === 'string' ? r.workflowName : 'Untitled Workflow',
+      workflowId: typeof r.workflowId === "string" ? r.workflowId : null,
+      workflowName:
+        typeof r.workflowName === "string"
+          ? r.workflowName
+          : "Untitled Workflow",
       nodes: Array.isArray(r.nodes) ? r.nodes : [],
       edges: Array.isArray(r.edges) ? r.edges : [],
-      isDirty: Boolean(r.isDirty)
-    })
+      isDirty: Boolean(r.isDirty),
+    });
   }
-  return tabs
+  return tabs;
 }
 
-let tabIdCounter = 1
+let tabIdCounter = 1;
 
 /* ── Synchronous session hydration (avoids FOUC) ─────────────────────── */
-function hydrateSessionSync(): { tabs: TabSnapshot[]; activeTabId: string; restored: boolean } {
-  const parsed = persistentStorage.getSync<Partial<PersistedWorkflowSession>>(WORKFLOW_SESSION_STORAGE_KEY)
+function hydrateSessionSync(): {
+  tabs: TabSnapshot[];
+  activeTabId: string;
+  restored: boolean;
+} {
+  const parsed = persistentStorage.getSync<Partial<PersistedWorkflowSession>>(
+    WORKFLOW_SESSION_STORAGE_KEY,
+  );
   if (parsed) {
-    const restoredTabs = sanitizeTabSnapshots(parsed.tabs)
+    const restoredTabs = sanitizeTabSnapshots(parsed.tabs);
     if (restoredTabs.length > 0) {
-      const restoredActiveTabId = typeof parsed.activeTabId === 'string' &&
-        restoredTabs.some(t => t.tabId === parsed.activeTabId)
-        ? parsed.activeTabId
-        : restoredTabs[0].tabId
-
-      const maxTabIndex = restoredTabs.reduce((max, t) => Math.max(max, parseTabIndex(t.tabId)), 1)
-      const persistedCounter = typeof parsed.tabIdCounter === 'number' ? parsed.tabIdCounter : 1
-      tabIdCounter = Math.max(tabIdCounter, maxTabIndex, persistedCounter)
-
-      const active = restoredTabs.find(t => t.tabId === restoredActiveTabId) ?? restoredTabs[0]
+      const restoredActiveTabId =
+        typeof parsed.activeTabId === "string" &&
+        restoredTabs.some((t) => t.tabId === parsed.activeTabId)
+          ? parsed.activeTabId
+          : restoredTabs[0].tabId;
+
+      const maxTabIndex = restoredTabs.reduce(
+        (max, t) => Math.max(max, parseTabIndex(t.tabId)),
+        1,
+      );
+      const persistedCounter =
+        typeof parsed.tabIdCounter === "number" ? parsed.tabIdCounter : 1;
+      tabIdCounter = Math.max(tabIdCounter, maxTabIndex, persistedCounter);
+
+      const active =
+        restoredTabs.find((t) => t.tabId === restoredActiveTabId) ??
+        restoredTabs[0];
       useWorkflowStore.setState({
         workflowId: active.workflowId,
         workflowName: active.workflowName,
-        nodes: active.nodes as ReturnType<typeof useWorkflowStore.getState>['nodes'],
-        edges: active.edges as ReturnType<typeof useWorkflowStore.getState>['edges'],
-        isDirty: active.isDirty
-      })
-
-      return { tabs: restoredTabs, activeTabId: restoredActiveTabId, restored: true }
+        nodes: active.nodes as ReturnType<
+          typeof useWorkflowStore.getState
+        >["nodes"],
+        edges: active.edges as ReturnType<
+          typeof useWorkflowStore.getState
+        >["edges"],
+        isDirty: active.isDirty,
+      });
+
+      return {
+        tabs: restoredTabs,
+        activeTabId: restoredActiveTabId,
+        restored: true,
+      };
     }
   }
 
-  const { nodes, edges } = getDefaultNewWorkflowContent()
-  const defaultTab: TabSnapshot = { tabId: `tab-${tabIdCounter}`, workflowId: null, workflowName: 'Untitled Workflow', nodes, edges, isDirty: false }
-  useWorkflowStore.setState({ workflowId: null, workflowName: 'Untitled Workflow', nodes, edges, isDirty: false })
-  return { tabs: [defaultTab], activeTabId: defaultTab.tabId, restored: false }
+  const { nodes, edges } = getDefaultNewWorkflowContent();
+  const defaultTab: TabSnapshot = {
+    tabId: `tab-${tabIdCounter}`,
+    workflowId: null,
+    workflowName: "Untitled Workflow",
+    nodes,
+    edges,
+    isDirty: false,
+    createdAt: Date.now(),
+  };
+  useWorkflowStore.setState({
+    workflowId: null,
+    workflowName: "Untitled Workflow",
+    nodes,
+    edges,
+    isDirty: false,
+  });
+  return { tabs: [defaultTab], activeTabId: defaultTab.tabId, restored: false };
 }
 
-const _initialSession = hydrateSessionSync()
+const _initialSession = hydrateSessionSync();
 
 export function WorkflowPage() {
-  const { t } = useTranslation()
-  const [searchParams, setSearchParams] = useSearchParams()
-  const [nodeDefs, setNodeDefs] = useState<NodeTypeDefinition[]>([])
-  const workflowName = useWorkflowStore(s => s.workflowName)
-  const workflowId = useWorkflowStore(s => s.workflowId)
-  const isDirty = useWorkflowStore(s => s.isDirty)
-  const nodes = useWorkflowStore(s => s.nodes)
-  const edges = useWorkflowStore(s => s.edges)
-  const saveWorkflow = useWorkflowStore(s => s.saveWorkflow)
-  const loadWorkflow = useWorkflowStore(s => s.loadWorkflow)
-  const { loadTemplates, useTemplate, createTemplate } = useTemplateStore()
-  const { showNodePalette, showWorkflowPanel, showWorkflowResultsPanel,
-    toggleNodePalette, toggleWorkflowPanel, toggleWorkflowResultsPanel, selectedNodeId, previewSrc, previewItems, previewIndex, prevPreview, nextPreview, closePreview,
-    showNamingDialog, namingDialogDefault, resolveNamingDialog } = useUIStore()
-  const [showTemplateDialog, setShowTemplateDialog] = useState(false)
-  const guide = useWorkflowGuide()
-  const [guideStepKey, setGuideStepKey] = useState<string | null>(null)
-  const { cancelAll, activeExecutions } = useExecutionStore()
-  const initListeners = useExecutionStore(s => s.initListeners)
-  const wasRunning = useExecutionStore(s => s._wasRunning)
-  const nodeStatuses = useExecutionStore(s => s.nodeStatuses)
-  const isRunning = activeExecutions.size > 0
-  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null)
-  const [saveToast, setSaveToast] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle')
-  const [saveToastMsg, setSaveToastMsg] = useState('')
-  const [execToast, setExecToast] = useState<{ type: 'success' | 'error'; msg: string } | null>(null)
-  const [runCount, setRunCount] = useState(1)
-  const [isBatchRunning, setIsBatchRunning] = useState(false)
-  const runCancelRef = useRef(false)
+  const { t } = useTranslation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [nodeDefs, setNodeDefs] = useState<NodeTypeDefinition[]>([]);
+  const workflowName = useWorkflowStore((s) => s.workflowName);
+  const workflowId = useWorkflowStore((s) => s.workflowId);
+  const isDirty = useWorkflowStore((s) => s.isDirty);
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const edges = useWorkflowStore((s) => s.edges);
+  const saveWorkflow = useWorkflowStore((s) => s.saveWorkflow);
+  const loadWorkflow = useWorkflowStore((s) => s.loadWorkflow);
+  const { loadTemplates, useTemplate, createTemplate } = useTemplateStore();
+  const {
+    showNodePalette,
+    showWorkflowPanel,
+    showWorkflowResultsPanel,
+    toggleNodePalette,
+    toggleWorkflowPanel,
+    toggleWorkflowResultsPanel,
+    selectedNodeId,
+    previewSrc,
+    previewItems,
+    previewIndex,
+    prevPreview,
+    nextPreview,
+    closePreview,
+    showNamingDialog,
+    namingDialogDefault,
+    resolveNamingDialog,
+  } = useUIStore();
+  const [showTemplateDialog, setShowTemplateDialog] = useState(false);
+  const guide = useWorkflowGuide();
+  const [guideStepKey, setGuideStepKey] = useState<string | null>(null);
+  const { cancelAll, activeExecutions } = useExecutionStore();
+  const initListeners = useExecutionStore((s) => s.initListeners);
+  const wasRunning = useExecutionStore((s) => s._wasRunning);
+  const nodeStatuses = useExecutionStore((s) => s.nodeStatuses);
+  const isRunning = activeExecutions.size > 0;
+  const [lastSavedAt, setLastSavedAt] = useState<Date | null>(null);
+  const [saveToast, setSaveToast] = useState<
+    "idle" | "saving" | "saved" | "error"
+  >("idle");
+  const [saveToastMsg, setSaveToastMsg] = useState("");
+  const [execToast, setExecToast] = useState<{
+    type: "success" | "error";
+    msg: string;
+  } | null>(null);
+  const [runCount, setRunCount] = useState(1);
+  const [isBatchRunning, setIsBatchRunning] = useState(false);
+  const runCancelRef = useRef(false);
   const normalizedPreviewSrc = useMemo(() => {
-    if (!previewSrc) return ''
+    if (!previewSrc) return "";
     if (/^local-asset:\/\//i.test(previewSrc)) {
       try {
-        return decodeURIComponent(previewSrc.replace(/^local-asset:\/\//i, ''))
+        return decodeURIComponent(previewSrc.replace(/^local-asset:\/\//i, ""));
       } catch {
-        return previewSrc
+        return previewSrc;
       }
     }
-    return previewSrc
-  }, [previewSrc])
-  const previewTypeBase = normalizedPreviewSrc ? getOutputItemType(normalizedPreviewSrc) : null
+    return previewSrc;
+  }, [previewSrc]);
+  const previewTypeBase = normalizedPreviewSrc
+    ? getOutputItemType(normalizedPreviewSrc)
+    : null;
   // For blob: URLs, resolve the actual media type from the Blob's MIME
-  const [blobMediaType, setBlobMediaType] = useState<'video' | 'audio' | null>(null)
+  const [blobMediaType, setBlobMediaType] = useState<"video" | "audio" | null>(
+    null,
+  );
   useEffect(() => {
-    if (!previewSrc || !previewSrc.startsWith('blob:')) { setBlobMediaType(null); return }
-    let cancelled = false
-    fetch(previewSrc).then(r => r.blob()).then(blob => {
-      if (cancelled) return
-      if (blob.type.startsWith('audio/')) setBlobMediaType('audio')
-      else setBlobMediaType('video')
-    }).catch(() => { if (!cancelled) setBlobMediaType('video') })
-    return () => { cancelled = true }
-  }, [previewSrc])
-  const previewType = (previewSrc?.startsWith('blob:') && blobMediaType) ? blobMediaType : previewTypeBase
-  const previewIsImage = previewType === 'image'
-  const canNavigatePreview = previewIsImage && previewItems.length > 1
+    if (!previewSrc || !previewSrc.startsWith("blob:")) {
+      setBlobMediaType(null);
+      return;
+    }
+    let cancelled = false;
+    fetch(previewSrc)
+      .then((r) => r.blob())
+      .then((blob) => {
+        if (cancelled) return;
+        if (blob.type.startsWith("audio/")) setBlobMediaType("audio");
+        else setBlobMediaType("video");
+      })
+      .catch(() => {
+        if (!cancelled) setBlobMediaType("video");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [previewSrc]);
+  const previewType =
+    previewSrc?.startsWith("blob:") && blobMediaType
+      ? blobMediaType
+      : previewTypeBase;
+  const previewIsImage = previewType === "image";
+  const canNavigatePreview = previewIsImage && previewItems.length > 1;
 
   useEffect(() => {
-    if (!previewSrc) return
+    if (!previewSrc) return;
     const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault()
-        closePreview()
-        return
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closePreview();
+        return;
       }
-      if (!canNavigatePreview) return
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        prevPreview()
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        nextPreview()
+      if (!canNavigatePreview) return;
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        prevPreview();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        nextPreview();
       }
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [previewSrc, canNavigatePreview, prevPreview, nextPreview, closePreview])
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [previewSrc, canNavigatePreview, prevPreview, nextPreview, closePreview]);
 
   // Unified save handler with visual feedback
   const handleSave = useCallback(async () => {
-    setSaveToast('saving')
-    setSaveToastMsg('')
+    setSaveToast("saving");
+    setSaveToastMsg("");
     try {
-      await saveWorkflow()
-      setLastSavedAt(new Date())
-      invalidateWorkflowListCache()
-      setSaveToast('saved')
-      setTimeout(() => setSaveToast('idle'), 2000)
+      await saveWorkflow();
+      setLastSavedAt(new Date());
+      invalidateWorkflowListCache();
+      setSaveToast("saved");
+      setTimeout(() => setSaveToast("idle"), 2000);
     } catch (err) {
       // User cancelled naming dialog — not an error
-      const msg = err instanceof Error ? err.message : String(err)
+      const msg = err instanceof Error ? err.message : String(err);
       if (msg) {
-        setSaveToast('error')
-        setSaveToastMsg(msg)
-        setTimeout(() => setSaveToast('idle'), 3000)
+        setSaveToast("error");
+        setSaveToastMsg(msg);
+        setTimeout(() => setSaveToast("idle"), 3000);
       } else {
-        setSaveToast('idle')
+        setSaveToast("idle");
       }
     }
-  }, [saveWorkflow])
+  }, [saveWorkflow]);
 
   // ── Multi-tab state ────────────────────────────────────────────────
-  const [tabs, setTabs] = useState<TabSnapshot[]>(() => _initialSession.tabs)
-  const [activeTabId, setActiveTabId] = useState(() => _initialSession.activeTabId)
-  const [startupSessionReady, setStartupSessionReady] = useState(true)
-  const [restoredFromPersistedSession, setRestoredFromPersistedSession] = useState(_initialSession.restored)
-  const [hasRestoredLastWorkflow, setHasRestoredLastWorkflow] = useState(false)
+  const [tabs, setTabs] = useState<TabSnapshot[]>(() => _initialSession.tabs);
+  const [activeTabId, setActiveTabId] = useState(
+    () => _initialSession.activeTabId,
+  );
+  const [startupSessionReady, setStartupSessionReady] = useState(true);
+  const [restoredFromPersistedSession, setRestoredFromPersistedSession] =
+    useState(_initialSession.restored);
+  const [hasRestoredLastWorkflow, setHasRestoredLastWorkflow] = useState(false);
 
   // Save current store state into the active tab snapshot
   const saveCurrentTabSnapshot = useCallback(() => {
-    const state = useWorkflowStore.getState()
-    setTabs(prev => prev.map(t =>
-      t.tabId === activeTabId
-        ? { ...t, workflowId: state.workflowId, workflowName: state.workflowName, nodes: state.nodes, edges: state.edges, isDirty: state.isDirty }
-        : t
-    ))
-  }, [activeTabId])
+    const state = useWorkflowStore.getState();
+    setTabs((prev) =>
+      prev.map((t) =>
+        t.tabId === activeTabId
+          ? {
+              ...t,
+              workflowId: state.workflowId,
+              workflowName: state.workflowName,
+              nodes: state.nodes,
+              edges: state.edges,
+              isDirty: state.isDirty,
+            }
+          : t,
+      ),
+    );
+  }, [activeTabId]);
 
   // Switch to a tab: save current → restore target
-  const switchTab = useCallback((tabId: string) => {
-    if (tabId === activeTabId) return
-    saveCurrentTabSnapshot()
-    const target = tabs.find(t => t.tabId === tabId)
-    if (!target) return
-    // Restore store state from snapshot
-    useWorkflowStore.setState({
-      workflowId: target.workflowId,
-      workflowName: target.workflowName,
-      nodes: target.nodes as ReturnType<typeof useWorkflowStore.getState>['nodes'],
-      edges: target.edges as ReturnType<typeof useWorkflowStore.getState>['edges'],
-      isDirty: target.isDirty
-    })
-    setActiveTabId(tabId)
-  }, [activeTabId, tabs, saveCurrentTabSnapshot])
+  const switchTab = useCallback(
+    (tabId: string) => {
+      if (tabId === activeTabId) return;
+      saveCurrentTabSnapshot();
+      const target = tabs.find((t) => t.tabId === tabId);
+      if (!target) return;
+      // Restore store state from snapshot
+      useWorkflowStore.setState({
+        workflowId: target.workflowId,
+        workflowName: target.workflowName,
+        nodes: target.nodes as ReturnType<
+          typeof useWorkflowStore.getState
+        >["nodes"],
+        edges: target.edges as ReturnType<
+          typeof useWorkflowStore.getState
+        >["edges"],
+        isDirty: target.isDirty,
+      });
+      setActiveTabId(tabId);
+    },
+    [activeTabId, tabs, saveCurrentTabSnapshot],
+  );
 
   // New tab
   const addTab = useCallback(() => {
-    saveCurrentTabSnapshot()
-    tabIdCounter++
-    const newTabId = `tab-${tabIdCounter}`
+    saveCurrentTabSnapshot();
+    tabIdCounter++;
+    const newTabId = `tab-${tabIdCounter}`;
     // Generate a unique name that doesn't collide with existing tabs or persisted workflows
-    const baseName = 'Untitled Workflow'
-    const existingTabNames = new Set(tabs.map(t => t.workflowName))
-    let uniqueName = baseName
+    const baseName = "Untitled Workflow";
+    const existingTabNames = new Set(tabs.map((t) => t.workflowName));
+    let uniqueName = baseName;
     if (existingTabNames.has(uniqueName)) {
-      let counter = 2
-      while (existingTabNames.has(`${baseName} ${counter}`)) counter++
-      uniqueName = `${baseName} ${counter}`
+      let counter = 2;
+      while (existingTabNames.has(`${baseName} ${counter}`)) counter++;
+      uniqueName = `${baseName} ${counter}`;
     }
-    const { nodes, edges } = getDefaultNewWorkflowContent()
-    setTabs(prev => [...prev, { tabId: newTabId, workflowId: null, workflowName: uniqueName, nodes, edges, isDirty: false }])
-    useWorkflowStore.setState({ workflowId: null, workflowName: uniqueName, nodes, edges, isDirty: false })
-    setActiveTabId(newTabId)
+    const { nodes, edges } = getDefaultNewWorkflowContent();
+    setTabs((prev) => [
+      ...prev,
+      {
+        tabId: newTabId,
+        workflowId: null,
+        workflowName: uniqueName,
+        nodes,
+        edges,
+        isDirty: false,
+        createdAt: Date.now(),
+      },
+    ]);
+    useWorkflowStore.setState({
+      workflowId: null,
+      workflowName: uniqueName,
+      nodes,
+      edges,
+      isDirty: false,
+    });
+    setActiveTabId(newTabId);
     // Auto-scroll to show the newly created tab
     requestAnimationFrame(() => {
       if (wfTabScrollRef.current) {
-        wfTabScrollRef.current.scrollLeft = wfTabScrollRef.current.scrollWidth
+        wfTabScrollRef.current.scrollLeft = wfTabScrollRef.current.scrollWidth;
       }
-    })
-  }, [saveCurrentTabSnapshot, tabs])
+    });
+  }, [saveCurrentTabSnapshot, tabs]);
 
   // Tab rename — inline editing
-  const [editingTabId, setEditingTabId] = useState<string | null>(null)
-  const [editingTabName, setEditingTabName] = useState('')
-  const renameWorkflow = useWorkflowStore(s => s.renameWorkflow)
-
-  const startRenameTab = useCallback((tabId: string) => {
-    const tab = tabs.find(t => t.tabId === tabId)
-    if (!tab) return
-    setEditingTabId(tabId)
-    setEditingTabName(tab.workflowName)
-  }, [tabs])
+  const [editingTabId, setEditingTabId] = useState<string | null>(null);
+  const [editingTabName, setEditingTabName] = useState("");
+  const renameWorkflow = useWorkflowStore((s) => s.renameWorkflow);
+
+  const startRenameTab = useCallback(
+    (tabId: string) => {
+      const tab = tabs.find((t) => t.tabId === tabId);
+      if (!tab) return;
+      setEditingTabId(tabId);
+      setEditingTabName(tab.workflowName);
+    },
+    [tabs],
+  );
 
   const commitRenameTab = useCallback(async () => {
-    if (!editingTabId) return
-    const trimmed = editingTabName.trim()
+    if (!editingTabId) return;
+    const trimmed = editingTabName.trim();
     if (!trimmed) {
-      setEditingTabId(null)
-      return
+      setEditingTabId(null);
+      return;
     }
 
     // Check for duplicate name across all tabs (excluding self)
-    const isDuplicate = tabs.some(t => t.tabId !== editingTabId && t.workflowName === trimmed)
+    const isDuplicate = tabs.some(
+      (t) => t.tabId !== editingTabId && t.workflowName === trimmed,
+    );
     if (isDuplicate) {
-      setEditingTabId(null)
-      return
+      setEditingTabId(null);
+      return;
     }
 
     // If it's the active tab, also update the store and persist to backend
     if (editingTabId === activeTabId) {
-      await renameWorkflow(trimmed)
+      await renameWorkflow(trimmed);
       // Sync back the actual name (may have been deduplicated by backend)
-      const actualName = useWorkflowStore.getState().workflowName
-      setTabs(prev => prev.map(t => t.tabId === editingTabId ? { ...t, workflowName: actualName } : t))
-      invalidateWorkflowListCache()
+      const actualName = useWorkflowStore.getState().workflowName;
+      setTabs((prev) =>
+        prev.map((t) =>
+          t.tabId === editingTabId ? { ...t, workflowName: actualName } : t,
+        ),
+      );
+      invalidateWorkflowListCache();
     } else {
       // For non-active tabs, persist directly via IPC if it has a workflowId
-      const tab = tabs.find(t => t.tabId === editingTabId)
+      const tab = tabs.find((t) => t.tabId === editingTabId);
       if (tab?.workflowId) {
-        const result = await workflowIpc.rename(tab.workflowId, trimmed) as unknown as { finalName: string } | void
-        const actualName = (result && typeof result === 'object' && 'finalName' in result) ? result.finalName : trimmed
-        setTabs(prev => prev.map(t => t.tabId === editingTabId ? { ...t, workflowName: actualName } : t))
-        invalidateWorkflowListCache()
+        const result = (await workflowIpc.rename(
+          tab.workflowId,
+          trimmed,
+        )) as unknown as { finalName: string } | void;
+        const actualName =
+          result && typeof result === "object" && "finalName" in result
+            ? result.finalName
+            : trimmed;
+        setTabs((prev) =>
+          prev.map((t) =>
+            t.tabId === editingTabId ? { ...t, workflowName: actualName } : t,
+          ),
+        );
+        invalidateWorkflowListCache();
       } else {
-        setTabs(prev => prev.map(t => t.tabId === editingTabId ? { ...t, workflowName: trimmed } : t))
+        setTabs((prev) =>
+          prev.map((t) =>
+            t.tabId === editingTabId ? { ...t, workflowName: trimmed } : t,
+          ),
+        );
       }
     }
-    setEditingTabId(null)
-  }, [editingTabId, editingTabName, activeTabId, renameWorkflow, tabs])
+    setEditingTabId(null);
+  }, [editingTabId, editingTabName, activeTabId, renameWorkflow, tabs]);
 
   const cancelRenameTab = useCallback(() => {
-    setEditingTabId(null)
-  }, [])
+    setEditingTabId(null);
+  }, []);
 
   // ── Tab overflow detection (Chrome-like + button behavior) ──
-  const wfTabScrollRef = useRef<HTMLDivElement>(null)
-  const [wfTabsOverflow, setWfTabsOverflow] = useState(false)
+  const wfTabScrollRef = useRef<HTMLDivElement>(null);
+  const [wfTabsOverflow, setWfTabsOverflow] = useState(false);
 
+  // ── Tab list dropdown ──
+  const [wfTabListOpen, setWfTabListOpen] = useState(false);
+  const wfTabListRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
-    const el = wfTabScrollRef.current
-    if (!el) return
-    const check = () => setWfTabsOverflow(el.scrollWidth > el.clientWidth)
-    const ro = new ResizeObserver(check)
-    ro.observe(el)
-    check()
-    return () => ro.disconnect()
-  }, [tabs.length])
+    if (!wfTabListOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        wfTabListRef.current &&
+        !wfTabListRef.current.contains(e.target as Node)
+      ) {
+        setWfTabListOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [wfTabListOpen]);
+
+  // Dynamic title width measurement — use ResizeObserver for reliable sizing across languages
+  const wfTitleRef = useRef<HTMLHeadingElement>(null);
+  const [wfTitleWidth, setWfTitleWidth] = useState(200);
+  useEffect(() => {
+    const el = wfTitleRef.current;
+    if (!el) return;
+    const measure = () => {
+      const padding = 23 + 12; // left + right padding
+      const diagonal = 16; // diagonal slant width
+      const w = Math.ceil(el.scrollWidth) + padding + diagonal;
+      setWfTitleWidth(Math.max(w, 120)); // minimum 120px
+    };
+    // Measure immediately and after fonts load
+    measure();
+    requestAnimationFrame(measure);
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const el = wfTabScrollRef.current;
+    if (!el) return;
+    const check = () => setWfTabsOverflow(el.scrollWidth > el.clientWidth);
+    const ro = new ResizeObserver(check);
+    ro.observe(el);
+    check();
+    return () => ro.disconnect();
+  }, [tabs.length]);
 
   // ── Tab drag-to-reorder (browser-style) ──
-  const [dragTabId, setDragTabId] = useState<string | null>(null)
-  const [dropIndicator, setDropIndicator] = useState<{ tabId: string; side: 'left' | 'right' } | null>(null)
-
-  const handleTabDragStart = useCallback((e: React.DragEvent, tabId: string) => {
-    setDragTabId(tabId)
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', tabId)
-  }, [])
-
-  const handleTabDragOver = useCallback((e: React.DragEvent, tabId: string) => {
-    e.preventDefault()
-    e.dataTransfer.dropEffect = 'move'
-    if (!dragTabId || tabId === dragTabId) {
-      setDropIndicator(null)
-      return
-    }
-    // Determine left/right side based on mouse position within the tab
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-    const side = (e.clientX - rect.left) < rect.width / 2 ? 'left' : 'right'
-    setDropIndicator({ tabId, side })
-  }, [dragTabId])
-
-  const handleTabDrop = useCallback((e: React.DragEvent, targetTabId: string) => {
-    e.preventDefault()
-    if (!dragTabId || dragTabId === targetTabId) {
-      setDragTabId(null)
-      setDropIndicator(null)
-      return
-    }
-    const side = dropIndicator?.side ?? 'right'
-    setTabs(prev => {
-      const fromIdx = prev.findIndex(t => t.tabId === dragTabId)
-      const toIdx = prev.findIndex(t => t.tabId === targetTabId)
-      if (fromIdx === -1 || toIdx === -1) return prev
-      const next = [...prev]
-      const [moved] = next.splice(fromIdx, 1)
-      // Adjust insertion index after removal
-      const insertIdx = fromIdx < toIdx
-        ? (side === 'left' ? toIdx - 1 : toIdx)
-        : (side === 'left' ? toIdx : toIdx + 1)
-      next.splice(Math.max(0, insertIdx), 0, moved)
-      return next
-    })
-    setDragTabId(null)
-    setDropIndicator(null)
-  }, [dragTabId, dropIndicator])
+  const [dragTabId, setDragTabId] = useState<string | null>(null);
+  const [dropIndicator, setDropIndicator] = useState<{
+    tabId: string;
+    side: "left" | "right";
+  } | null>(null);
+
+  const handleTabDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      setDragTabId(tabId);
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", tabId);
+    },
+    [],
+  );
+
+  const handleTabDragOver = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      if (!dragTabId || tabId === dragTabId) {
+        setDropIndicator(null);
+        return;
+      }
+      // Determine left/right side based on mouse position within the tab
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      const side = e.clientX - rect.left < rect.width / 2 ? "left" : "right";
+      setDropIndicator({ tabId, side });
+    },
+    [dragTabId],
+  );
+
+  const handleTabDrop = useCallback(
+    (e: React.DragEvent, targetTabId: string) => {
+      e.preventDefault();
+      if (!dragTabId || dragTabId === targetTabId) {
+        setDragTabId(null);
+        setDropIndicator(null);
+        return;
+      }
+      const side = dropIndicator?.side ?? "right";
+      setTabs((prev) => {
+        const fromIdx = prev.findIndex((t) => t.tabId === dragTabId);
+        const toIdx = prev.findIndex((t) => t.tabId === targetTabId);
+        if (fromIdx === -1 || toIdx === -1) return prev;
+        const next = [...prev];
+        const [moved] = next.splice(fromIdx, 1);
+        // Adjust insertion index after removal
+        const insertIdx =
+          fromIdx < toIdx
+            ? side === "left"
+              ? toIdx - 1
+              : toIdx
+            : side === "left"
+              ? toIdx
+              : toIdx + 1;
+        next.splice(Math.max(0, insertIdx), 0, moved);
+        return next;
+      });
+      setDragTabId(null);
+      setDropIndicator(null);
+    },
+    [dragTabId, dropIndicator],
+  );
 
   const handleTabDragEnd = useCallback(() => {
-    setDragTabId(null)
-    setDropIndicator(null)
-  }, [])
+    setDragTabId(null);
+    setDropIndicator(null);
+  }, []);
 
   // Close tab — with unsaved changes confirmation
-  const [confirmCloseTabId, setConfirmCloseTabId] = useState<string | null>(null)
-
-  const doCloseTab = useCallback((tabId: string) => {
-    if (tabs.length <= 1) {
-      // Last tab — reset to a clean blank workflow (with default seed node)
-      const blankName = 'Untitled Workflow'
-      tabIdCounter++
-      const newTabId = `tab-${tabIdCounter}`
-      const { nodes, edges } = getDefaultNewWorkflowContent()
-      useWorkflowStore.setState({ workflowId: null, workflowName: blankName, nodes, edges, isDirty: false })
-      setTabs([{ tabId: newTabId, workflowId: null, workflowName: blankName, nodes, edges, isDirty: false }])
-      setActiveTabId(newTabId)
-      return
-    }
-    const remaining = tabs.filter(t => t.tabId !== tabId)
-    setTabs(remaining)
-    if (tabId === activeTabId) {
-      const target = remaining[remaining.length - 1]
-      useWorkflowStore.setState({
-        workflowId: target.workflowId,
-        workflowName: target.workflowName,
-        nodes: target.nodes as ReturnType<typeof useWorkflowStore.getState>['nodes'],
-        edges: target.edges as ReturnType<typeof useWorkflowStore.getState>['edges'],
-        isDirty: target.isDirty
-      })
-      setActiveTabId(target.tabId)
-    }
-  }, [tabs, activeTabId])
-
-  const closeTab = useCallback((tabId: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    const tab = tabs.find(t => t.tabId === tabId)
-    if (tab?.isDirty) {
-      setConfirmCloseTabId(tabId)
-    } else {
-      doCloseTab(tabId)
-    }
-  }, [tabs, doCloseTab])
+  const [confirmCloseTabId, setConfirmCloseTabId] = useState<string | null>(
+    null,
+  );
+
+  const doCloseTab = useCallback(
+    (tabId: string) => {
+      if (tabs.length <= 1) {
+        // Last tab — reset to a clean blank workflow (with default seed node)
+        const blankName = "Untitled Workflow";
+        tabIdCounter++;
+        const newTabId = `tab-${tabIdCounter}`;
+        const { nodes, edges } = getDefaultNewWorkflowContent();
+        useWorkflowStore.setState({
+          workflowId: null,
+          workflowName: blankName,
+          nodes,
+          edges,
+          isDirty: false,
+        });
+        setTabs([
+          {
+            tabId: newTabId,
+            workflowId: null,
+            workflowName: blankName,
+            nodes,
+            edges,
+            isDirty: false,
+            createdAt: Date.now(),
+          },
+        ]);
+        setActiveTabId(newTabId);
+        return;
+      }
+      const remaining = tabs.filter((t) => t.tabId !== tabId);
+      setTabs(remaining);
+      if (tabId === activeTabId) {
+        const target = remaining[remaining.length - 1];
+        useWorkflowStore.setState({
+          workflowId: target.workflowId,
+          workflowName: target.workflowName,
+          nodes: target.nodes as ReturnType<
+            typeof useWorkflowStore.getState
+          >["nodes"],
+          edges: target.edges as ReturnType<
+            typeof useWorkflowStore.getState
+          >["edges"],
+          isDirty: target.isDirty,
+        });
+        setActiveTabId(target.tabId);
+      }
+    },
+    [tabs, activeTabId],
+  );
+
+  const closeTab = useCallback(
+    (tabId: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      const tab = tabs.find((t) => t.tabId === tabId);
+      if (tab?.isDirty) {
+        setConfirmCloseTabId(tabId);
+      } else {
+        doCloseTab(tabId);
+      }
+    },
+    [tabs, doCloseTab],
+  );
 
   // ── Tab context menu (right-click) ──────────────────────────────────
-  const [tabContextMenu, setTabContextMenu] = useState<{ tabId: string; x: number; y: number } | null>(null)
-  const tabContextMenuRef = useRef<HTMLDivElement>(null)
+  const [tabContextMenu, setTabContextMenu] = useState<{
+    tabId: string;
+    x: number;
+    y: number;
+  } | null>(null);
+  const tabContextMenuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!tabContextMenu) return
+    if (!tabContextMenu) return;
     const handler = (e: MouseEvent) => {
-      if (tabContextMenuRef.current && !tabContextMenuRef.current.contains(e.target as Node)) {
-        setTabContextMenu(null)
-      }
-    }
-    document.addEventListener('mousedown', handler, true)
-    return () => document.removeEventListener('mousedown', handler, true)
-  }, [tabContextMenu])
-
-  const closeMultipleTabs = useCallback((tabIds: string[]) => {
-    // Filter out tabs that would leave us with zero tabs
-    const remaining = tabs.filter(t => !tabIds.includes(t.tabId))
-    if (remaining.length === 0) return
-    setTabs(remaining)
-    if (tabIds.includes(activeTabId)) {
-      const target = remaining[remaining.length - 1]
-      useWorkflowStore.setState({
-        workflowId: target.workflowId,
-        workflowName: target.workflowName,
-        nodes: target.nodes as ReturnType<typeof useWorkflowStore.getState>['nodes'],
-        edges: target.edges as ReturnType<typeof useWorkflowStore.getState>['edges'],
-        isDirty: target.isDirty
-      })
-      setActiveTabId(target.tabId)
-    }
-  }, [tabs, activeTabId])
-
-  const handleTabContextAction = useCallback((action: string) => {
-    if (!tabContextMenu) return
-    const { tabId } = tabContextMenu
-    setTabContextMenu(null)
-
-    switch (action) {
-      case 'close':
-        doCloseTab(tabId)
-        break
-      case 'closeOthers': {
-        const others = tabs.filter(t => t.tabId !== tabId).map(t => t.tabId)
-        closeMultipleTabs(others)
-        break
+      if (
+        tabContextMenuRef.current &&
+        !tabContextMenuRef.current.contains(e.target as Node)
+      ) {
+        setTabContextMenu(null);
       }
-      case 'closeRight': {
-        const idx = tabs.findIndex(t => t.tabId === tabId)
-        const rightTabs = tabs.slice(idx + 1).map(t => t.tabId)
-        if (rightTabs.length > 0) closeMultipleTabs(rightTabs)
-        break
-      }
-      case 'closeSaved': {
-        const savedTabs = tabs.filter(t => !t.isDirty && t.tabId !== tabId).map(t => t.tabId)
-        if (savedTabs.length > 0) closeMultipleTabs(savedTabs)
-        break
+    };
+    document.addEventListener("mousedown", handler, true);
+    return () => document.removeEventListener("mousedown", handler, true);
+  }, [tabContextMenu]);
+
+  const closeMultipleTabs = useCallback(
+    (tabIds: string[]) => {
+      // Filter out tabs that would leave us with zero tabs
+      const remaining = tabs.filter((t) => !tabIds.includes(t.tabId));
+      if (remaining.length === 0) return;
+      setTabs(remaining);
+      if (tabIds.includes(activeTabId)) {
+        const target = remaining[remaining.length - 1];
+        useWorkflowStore.setState({
+          workflowId: target.workflowId,
+          workflowName: target.workflowName,
+          nodes: target.nodes as ReturnType<
+            typeof useWorkflowStore.getState
+          >["nodes"],
+          edges: target.edges as ReturnType<
+            typeof useWorkflowStore.getState
+          >["edges"],
+          isDirty: target.isDirty,
+        });
+        setActiveTabId(target.tabId);
       }
-      case 'closeAll': {
-        // Keep one new tab with default seed node
-        saveCurrentTabSnapshot()
-        tabIdCounter++
-        const newTabId = `tab-${tabIdCounter}`
-        const { nodes, edges } = getDefaultNewWorkflowContent()
-        const newTab: TabSnapshot = { tabId: newTabId, workflowId: null, workflowName: 'Untitled Workflow', nodes, edges, isDirty: false }
-        setTabs([newTab])
-        useWorkflowStore.setState({ workflowId: null, workflowName: 'Untitled Workflow', nodes, edges, isDirty: false })
-        setActiveTabId(newTabId)
-        break
+    },
+    [tabs, activeTabId],
+  );
+
+  const handleTabContextAction = useCallback(
+    (action: string) => {
+      if (!tabContextMenu) return;
+      const { tabId } = tabContextMenu;
+      setTabContextMenu(null);
+
+      switch (action) {
+        case "close":
+          doCloseTab(tabId);
+          break;
+        case "closeOthers": {
+          const others = tabs
+            .filter((t) => t.tabId !== tabId)
+            .map((t) => t.tabId);
+          closeMultipleTabs(others);
+          break;
+        }
+        case "closeRight": {
+          const idx = tabs.findIndex((t) => t.tabId === tabId);
+          const rightTabs = tabs.slice(idx + 1).map((t) => t.tabId);
+          if (rightTabs.length > 0) closeMultipleTabs(rightTabs);
+          break;
+        }
+        case "closeSaved": {
+          const savedTabs = tabs
+            .filter((t) => !t.isDirty && t.tabId !== tabId)
+            .map((t) => t.tabId);
+          if (savedTabs.length > 0) closeMultipleTabs(savedTabs);
+          break;
+        }
+        case "closeAll": {
+          // Keep one new tab with default seed node
+          saveCurrentTabSnapshot();
+          tabIdCounter++;
+          const newTabId = `tab-${tabIdCounter}`;
+          const { nodes, edges } = getDefaultNewWorkflowContent();
+          const newTab: TabSnapshot = {
+            tabId: newTabId,
+            workflowId: null,
+            workflowName: "Untitled Workflow",
+            nodes,
+            edges,
+            isDirty: false,
+            createdAt: Date.now(),
+          };
+          setTabs([newTab]);
+          useWorkflowStore.setState({
+            workflowId: null,
+            workflowName: "Untitled Workflow",
+            nodes,
+            edges,
+            isDirty: false,
+          });
+          setActiveTabId(newTabId);
+          break;
+        }
       }
-    }
-  }, [tabContextMenu, tabs, doCloseTab, closeMultipleTabs, saveCurrentTabSnapshot])
+    },
+    [
+      tabContextMenu,
+      tabs,
+      doCloseTab,
+      closeMultipleTabs,
+      saveCurrentTabSnapshot,
+    ],
+  );
 
   // Keep active tab snapshot in sync
   useEffect(() => {
-    setTabs(prev => prev.map(t =>
-      t.tabId === activeTabId
-        ? { ...t, workflowId, workflowName, nodes, edges, isDirty }
-        : t
-    ))
-  }, [activeTabId, workflowId, workflowName, nodes, edges, isDirty])
+    setTabs((prev) =>
+      prev.map((t) =>
+        t.tabId === activeTabId
+          ? { ...t, workflowId, workflowName, nodes, edges, isDirty }
+          : t,
+      ),
+    );
+  }, [activeTabId, workflowId, workflowName, nodes, edges, isDirty]);
 
   // Persist current editing session for next app restart.
   useEffect(() => {
-    if (!startupSessionReady) return
+    if (!startupSessionReady) return;
     const timer = setTimeout(() => {
       persistentStorage.set(WORKFLOW_SESSION_STORAGE_KEY, {
         version: 1,
         activeTabId,
         tabIdCounter,
-        tabs
-      } satisfies PersistedWorkflowSession)
-    }, 300)
-    return () => clearTimeout(timer)
-  }, [startupSessionReady, tabs, activeTabId])
+        tabs,
+      } satisfies PersistedWorkflowSession);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [startupSessionReady, tabs, activeTabId]);
 
   // Auto-restore last workflow on first mount
   useEffect(() => {
-    if (!startupSessionReady || restoredFromPersistedSession) return
-    if (hasRestoredLastWorkflow) return
-    setHasRestoredLastWorkflow(true)
-
-    persistentStorage.get<string>('wavespeed_last_workflow_id').then(lastId => {
-      if (lastId) {
-        loadWorkflow(lastId).catch(() => {
-          persistentStorage.remove('wavespeed_last_workflow_id')
-        })
-      }
-    })
-  }, [startupSessionReady, restoredFromPersistedSession, hasRestoredLastWorkflow, loadWorkflow])
+    if (!startupSessionReady || restoredFromPersistedSession) return;
+    if (hasRestoredLastWorkflow) return;
+    setHasRestoredLastWorkflow(true);
+
+    persistentStorage
+      .get<string>("wavespeed_last_workflow_id")
+      .then((lastId) => {
+        if (lastId) {
+          loadWorkflow(lastId).catch(() => {
+            persistentStorage.remove("wavespeed_last_workflow_id");
+          });
+        }
+      });
+  }, [
+    startupSessionReady,
+    restoredFromPersistedSession,
+    hasRestoredLastWorkflow,
+    loadWorkflow,
+  ]);
 
   // Persist current workflow ID for next session restore
   useEffect(() => {
     if (workflowId) {
-      persistentStorage.set('wavespeed_last_workflow_id', workflowId)
+      persistentStorage.set("wavespeed_last_workflow_id", workflowId);
     }
-  }, [workflowId])
+  }, [workflowId]);
 
   // Load template from URL query param
   useEffect(() => {
-    const templateId = searchParams.get('template')
-    if (!templateId || !startupSessionReady) return
-    
+    const templateId = searchParams.get("template");
+    if (!templateId || !startupSessionReady) return;
+
     const loadTemplateData = async () => {
       try {
         // Load templates
-        await loadTemplates({ templateType: 'workflow' })
-        
+        await loadTemplates({ templateType: "workflow" });
+
         // Get the template by ID
-        const result = await window.workflowAPI?.invoke('template:get', { id: templateId }) as Template | null
+        const result = (await window.workflowAPI?.invoke("template:get", {
+          id: templateId,
+        })) as Template | null;
         if (!result || !result.workflowData) {
-          showIoToast('error', t('workflow.templateNotFound', 'Template not found'))
-          setSearchParams({}, { replace: true })
-          return
+          showIoToast(
+            "error",
+            t("workflow.templateNotFound", "Template not found"),
+          );
+          setSearchParams({}, { replace: true });
+          return;
         }
-        
+
         // Increment use count
-        await useTemplate(templateId)
-        
+        await useTemplate(templateId);
+
         // Create new workflow from template — generate fresh IDs to avoid UNIQUE constraint conflicts
-        const { graphDefinition } = result.workflowData
+        const { graphDefinition } = result.workflowData;
         const defMap = new Map(
-          nodeDefs.map(def => [
+          nodeDefs.map((def) => [
             def.type,
-            { params: def.params ?? [], inputs: def.inputs ?? [], outputs: def.outputs ?? [], label: def.label ?? def.type }
-          ])
-        )
+            {
+              params: def.params ?? [],
+              inputs: def.inputs ?? [],
+              outputs: def.outputs ?? [],
+              label: def.label ?? def.type,
+            },
+          ]),
+        );
         // Fetch models list to resolve modelInputSchema for ai-task nodes
-        let modelMap = new Map<string, unknown[]>()
+        let modelMap = new Map<string, unknown[]>();
         try {
-          const allModels = await modelsIpc.list()
-          modelMap = new Map((allModels ?? []).map((m: any) => [m.modelId, m.inputSchema ?? []]))
-        } catch { /* ignore */ }
+          const allModels = await modelsIpc.list();
+          modelMap = new Map(
+            (allModels ?? []).map((m: any) => [m.modelId, m.inputSchema ?? []]),
+          );
+        } catch {
+          /* ignore */
+        }
 
-        const idMap = new Map<string, string>()
+        const idMap = new Map<string, string>();
         graphDefinition.nodes.forEach((n: any) => {
-          idMap.set(String(n.id), crypto.randomUUID())
-        })
+          idMap.set(String(n.id), crypto.randomUUID());
+        });
         const wfNodes = graphDefinition.nodes.map((n: any) => {
-          const def = defMap.get(n.nodeType)
-          const meta = n.params?.__meta as Record<string, unknown> | undefined
-          let modelInputSchema = (meta?.modelInputSchema as unknown[]) ?? []
-          const label = (meta?.label as string) || (def ? def.label : n.nodeType)
-          const { __meta: _, ...cleanParams } = (n.params ?? {}) as Record<string, unknown>
+          const def = defMap.get(n.nodeType);
+          const meta = n.params?.__meta as Record<string, unknown> | undefined;
+          let modelInputSchema = (meta?.modelInputSchema as unknown[]) ?? [];
+          const label =
+            (meta?.label as string) || (def ? def.label : n.nodeType);
+          const { __meta: _, ...cleanParams } = (n.params ?? {}) as Record<
+            string,
+            unknown
+          >;
           // If modelInputSchema is empty but modelId exists, resolve from models list
-          const modelId = cleanParams.modelId as string | undefined
+          const modelId = cleanParams.modelId as string | undefined;
           if ((!modelInputSchema || modelInputSchema.length === 0) && modelId) {
-            modelInputSchema = (modelMap.get(modelId) as unknown[]) ?? []
+            modelInputSchema = (modelMap.get(modelId) as unknown[]) ?? [];
           }
           return {
             id: idMap.get(String(n.id)) ?? n.id,
-            type: 'custom',
+            type: "custom",
             position: n.position,
             data: {
               nodeType: n.nodeType,
@@ -622,512 +935,883 @@ export function WorkflowPage() {
               inputDefinitions: def?.inputs ?? [],
               outputDefinitions: def?.outputs ?? [],
               modelInputSchema,
-            }
-          }
-        })
+            },
+          };
+        });
         const wfEdges = graphDefinition.edges.map((e: any) => ({
           id: crypto.randomUUID(),
           source: idMap.get(String(e.sourceNodeId)) ?? e.sourceNodeId,
           target: idMap.get(String(e.targetNodeId)) ?? e.targetNodeId,
           sourceHandle: e.sourceOutputKey,
           targetHandle: e.targetInputKey,
-          type: 'custom',
-        }))
-        
+          type: "custom",
+        }));
+
         // Update workflow store
         useWorkflowStore.setState({
           workflowId: null,
           workflowName: result.name,
           nodes: wfNodes,
           edges: wfEdges,
-          isDirty: true
-        })
-        
-        showIoToast('success', `${t('workflow.templateLoaded', 'Template loaded')}: ${result.name}`)
-        
+          isDirty: true,
+        });
+
+        showIoToast(
+          "success",
+          `${t("workflow.templateLoaded", "Template loaded")}: ${result.name}`,
+        );
+
         // Clear the query param
-        setSearchParams({}, { replace: true })
+        setSearchParams({}, { replace: true });
       } catch (err) {
-        console.error('Failed to load template:', err)
-        showIoToast('error', t('workflow.templateLoadFailed', 'Failed to load template'))
-        setSearchParams({}, { replace: true })
+        console.error("Failed to load template:", err);
+        showIoToast(
+          "error",
+          t("workflow.templateLoadFailed", "Failed to load template"),
+        );
+        setSearchParams({}, { replace: true });
       }
-    }
-    
-    loadTemplateData()
+    };
+
+    loadTemplateData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams, startupSessionReady]) // Only depend on searchParams and startupSessionReady
+  }, [searchParams, startupSessionReady]); // Only depend on searchParams and startupSessionReady
 
   // Auto-save: when workflow has a name and is dirty, save after 2s debounce
   // Triggers on: param changes, connections, model switches, node adds/removes
   useEffect(() => {
-    if (!isDirty || !workflowId || !workflowName || /^Untitled Workflow(\s+\d+)?$/.test(workflowName)) return
+    if (
+      !isDirty ||
+      !workflowId ||
+      !workflowName ||
+      /^Untitled Workflow(\s+\d+)?$/.test(workflowName)
+    )
+      return;
     const timer = setTimeout(async () => {
       try {
-        await saveWorkflow()
-        setLastSavedAt(new Date())
-      } catch { /* naming dialog may cancel */ }
-    }, 2000)
-    return () => clearTimeout(timer)
-  }, [isDirty, workflowId, workflowName, nodes, edges, saveWorkflow])
+        await saveWorkflow();
+        setLastSavedAt(new Date());
+      } catch {
+        /* naming dialog may cancel */
+      }
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [isDirty, workflowId, workflowName, nodes, edges, saveWorkflow]);
 
   // Auto-save after execution completes
   useEffect(() => {
-    if (!isRunning && workflowId && workflowName && !/^Untitled Workflow(\s+\d+)?$/.test(workflowName)) {
-      saveWorkflow().then(() => setLastSavedAt(new Date())).catch(() => {})
+    if (
+      !isRunning &&
+      workflowId &&
+      workflowName &&
+      !/^Untitled Workflow(\s+\d+)?$/.test(workflowName)
+    ) {
+      saveWorkflow()
+        .then(() => setLastSavedAt(new Date()))
+        .catch(() => {});
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isRunning])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRunning]);
 
   // Show in-canvas toast when ALL executions finish (wasRunning transitions to false)
-  const prevWasRunning = useRef(false)
+  const prevWasRunning = useRef(false);
   useEffect(() => {
     if (prevWasRunning.current && !wasRunning && !isRunning) {
-      const hasError = Object.values(nodeStatuses).some(s => s === 'error')
+      const hasError = Object.values(nodeStatuses).some((s) => s === "error");
       setExecToast({
-        type: hasError ? 'error' : 'success',
-        msg: hasError ? 'Workflow completed with errors' : 'All nodes executed successfully'
-      })
-      setTimeout(() => setExecToast(null), 4000)
+        type: hasError ? "error" : "success",
+        msg: hasError
+          ? "Workflow completed with errors"
+          : "All nodes executed successfully",
+      });
+      setTimeout(() => setExecToast(null), 4000);
     }
-    prevWasRunning.current = wasRunning
-  }, [wasRunning, isRunning, nodeStatuses])
+    prevWasRunning.current = wasRunning;
+  }, [wasRunning, isRunning, nodeStatuses]);
 
   // Model loading state
-  const [modelSyncStatus, setModelSyncStatus] = useState<ModelSyncStatus>('idle')
-  const [modelSyncError, setModelSyncError] = useState('')
-  const [, setModelCount] = useState(0)
+  const [modelSyncStatus, setModelSyncStatus] =
+    useState<ModelSyncStatus>("idle");
+  const [modelSyncError, setModelSyncError] = useState("");
+  const [, setModelCount] = useState(0);
 
   // API key state
-  const apiKey = useApiKeyStore(s => s.apiKey)
-  const hasAttemptedLoad = useApiKeyStore(s => s.hasAttemptedLoad)
-  const loadApiKey = useApiKeyStore(s => s.loadApiKey)
+  const apiKey = useApiKeyStore((s) => s.apiKey);
+  const hasAttemptedLoad = useApiKeyStore((s) => s.hasAttemptedLoad);
+  const loadApiKey = useApiKeyStore((s) => s.loadApiKey);
 
   // Global Ctrl+S handler (works even when focus is in input/textarea)
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      const ctrlOrCmd = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? e.metaKey : e.ctrlKey
-      if (ctrlOrCmd && e.key === 's') {
-        e.preventDefault()
-        handleSave()
+      const ctrlOrCmd =
+        navigator.platform.toUpperCase().indexOf("MAC") >= 0
+          ? e.metaKey
+          : e.ctrlKey;
+      if (ctrlOrCmd && e.key === "s") {
+        e.preventDefault();
+        handleSave();
       }
-    }
-    window.addEventListener('keydown', onKeyDown, true) // capture phase
-    return () => window.removeEventListener('keydown', onKeyDown, true)
-  }, [handleSave])
+    };
+    window.addEventListener("keydown", onKeyDown, true); // capture phase
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [handleSave]);
 
   // Global Ctrl/Cmd+W handler — close active tab
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      const ctrlOrCmd = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? e.metaKey : e.ctrlKey
-      if (ctrlOrCmd && e.key === 'w') {
-        e.preventDefault()
-        const tab = tabs.find(t => t.tabId === activeTabId)
+      const ctrlOrCmd =
+        navigator.platform.toUpperCase().indexOf("MAC") >= 0
+          ? e.metaKey
+          : e.ctrlKey;
+      if (ctrlOrCmd && e.key === "w") {
+        e.preventDefault();
+        const tab = tabs.find((t) => t.tabId === activeTabId);
         if (tab?.isDirty) {
-          setConfirmCloseTabId(activeTabId)
+          setConfirmCloseTabId(activeTabId);
         } else {
-          doCloseTab(activeTabId)
+          doCloseTab(activeTabId);
         }
       }
-    }
-    window.addEventListener('keydown', onKeyDown, true)
-    return () => window.removeEventListener('keydown', onKeyDown, true)
-  }, [tabs, activeTabId, doCloseTab])
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [tabs, activeTabId, doCloseTab]);
 
   // Init
   useEffect(() => {
-    registryIpc.getAll().then(defs => setNodeDefs(defs ?? [])).catch(console.error)
-    initListeners()
-    loadApiKey()
-  }, [initListeners, loadApiKey])
+    registryIpc
+      .getAll()
+      .then((defs) => setNodeDefs(defs ?? []))
+      .catch(console.error);
+    initListeners();
+    loadApiKey();
+  }, [initListeners, loadApiKey]);
 
   // Model sync
-  const desktopModels = useModelsStore(s => s.models)
-  const isLoadingModels = useModelsStore(s => s.isLoading)
-  const modelsError = useModelsStore(s => s.error)
-  const fetchModels = useModelsStore(s => s.fetchModels)
+  const desktopModels = useModelsStore((s) => s.models);
+  const isLoadingModels = useModelsStore((s) => s.isLoading);
+  const modelsError = useModelsStore((s) => s.error);
+  const fetchModels = useModelsStore((s) => s.fetchModels);
 
   const syncModels = useCallback(async () => {
-    if (!apiKey) { setModelSyncStatus('no-key'); return }
-    setModelSyncStatus('loading'); setModelSyncError('')
-    try { await fetchModels(true) } catch (err) {
+    if (!apiKey) {
+      setModelSyncStatus("no-key");
+      return;
+    }
+    setModelSyncStatus("loading");
+    setModelSyncError("");
+    try {
+      await fetchModels(true);
+    } catch (err) {
       if (isWorkflowApiUnavailable(err)) {
-        setModelSyncStatus('unavailable')
+        setModelSyncStatus("unavailable");
       } else {
-        setModelSyncStatus('error'); setModelSyncError(err instanceof Error ? err.message : 'Failed')
+        setModelSyncStatus("error");
+        setModelSyncError(err instanceof Error ? err.message : "Failed");
       }
     }
-  }, [apiKey, fetchModels])
+  }, [apiKey, fetchModels]);
 
   useEffect(() => {
     if (hasAttemptedLoad) {
-      if (!apiKey) setModelSyncStatus('no-key')
-      else if (desktopModels.length === 0 && !isLoadingModels) syncModels()
+      if (!apiKey) setModelSyncStatus("no-key");
+      else if (desktopModels.length === 0 && !isLoadingModels) syncModels();
     }
-  }, [hasAttemptedLoad, apiKey, desktopModels.length, isLoadingModels, syncModels])
+  }, [
+    hasAttemptedLoad,
+    apiKey,
+    desktopModels.length,
+    isLoadingModels,
+    syncModels,
+  ]);
 
   useEffect(() => {
     if (desktopModels.length > 0) {
-      modelsIpc.sync(desktopModels).then(() => { setModelSyncStatus('synced'); setModelCount(desktopModels.length) })
-        .catch(err => {
-          if (isWorkflowApiUnavailable(err)) setModelSyncStatus('unavailable')
-          else { setModelSyncStatus('error'); setModelSyncError(err instanceof Error ? err.message : 'Sync failed') }
+      modelsIpc
+        .sync(desktopModels)
+        .then(() => {
+          setModelSyncStatus("synced");
+          setModelCount(desktopModels.length);
         })
+        .catch((err) => {
+          if (isWorkflowApiUnavailable(err)) setModelSyncStatus("unavailable");
+          else {
+            setModelSyncStatus("error");
+            setModelSyncError(
+              err instanceof Error ? err.message : "Sync failed",
+            );
+          }
+        });
     }
-  }, [desktopModels])
+  }, [desktopModels]);
 
   useEffect(() => {
     if (modelsError) {
-      if (modelsError.includes(WORKFLOW_API_UNAVAILABLE_MSG)) setModelSyncStatus('unavailable')
-      else { setModelSyncStatus('error'); setModelSyncError(modelsError) }
+      if (modelsError.includes(WORKFLOW_API_UNAVAILABLE_MSG))
+        setModelSyncStatus("unavailable");
+      else {
+        setModelSyncStatus("error");
+        setModelSyncError(modelsError);
+      }
     }
-  }, [modelsError])
-
-
+  }, [modelsError]);
 
   // Run All — browser execution only (in-process via runAllInBrowser)
   const handleRunAll = async (times = 1) => {
-    if (nodes.length === 0) return
+    if (nodes.length === 0) return;
 
     // Pre-run: optimize prompts for nodes with "Optimize On Run" enabled
-    const { updateNodeParams } = useWorkflowStore.getState()
+    const { updateNodeParams } = useWorkflowStore.getState();
     for (const n of nodes) {
-      const settings = (n.data?.params?.__optimizerSettings as Record<string, unknown> | undefined) ?? {}
-      const enabled = Boolean(settings.optimizeOnRun ?? settings.autoOptimize)
-      if (!enabled) continue
-
-      const fieldToOptimize: 'text' | 'prompt' | null = (() => {
-        if (n.data?.nodeType === 'input/text-input') return 'text'
-        if (typeof n.data?.params?.prompt === 'string') return 'prompt'
-        if (typeof n.data?.params?.text === 'string') return 'text'
-        return null
-      })()
-      if (!fieldToOptimize) continue
-
-      const sourceText = String(n.data.params[fieldToOptimize] ?? '')
-      if (!sourceText.trim()) continue
-
-      const lastManual = typeof settings.lastManualOptimizedText === 'string' ? settings.lastManualOptimizedText : ''
-      if (lastManual && lastManual === sourceText) continue
-
-      const { optimizeOnRun: _o, autoOptimize: _l, lastManualOptimizedText: _m, ...settingsForApi } = settings
+      const settings =
+        (n.data?.params?.__optimizerSettings as
+          | Record<string, unknown>
+          | undefined) ?? {};
+      const enabled = Boolean(settings.optimizeOnRun ?? settings.autoOptimize);
+      if (!enabled) continue;
+
+      const fieldToOptimize: "text" | "prompt" | null = (() => {
+        if (n.data?.nodeType === "input/text-input") return "text";
+        if (typeof n.data?.params?.prompt === "string") return "prompt";
+        if (typeof n.data?.params?.text === "string") return "text";
+        return null;
+      })();
+      if (!fieldToOptimize) continue;
+
+      const sourceText = String(n.data.params[fieldToOptimize] ?? "");
+      if (!sourceText.trim()) continue;
+
+      const lastManual =
+        typeof settings.lastManualOptimizedText === "string"
+          ? settings.lastManualOptimizedText
+          : "";
+      if (lastManual && lastManual === sourceText) continue;
+
+      const {
+        optimizeOnRun: _o,
+        autoOptimize: _l,
+        lastManualOptimizedText: _m,
+        ...settingsForApi
+      } = settings;
       try {
-        const optimized = await apiClient.optimizePrompt({ ...settingsForApi, text: sourceText })
+        const optimized = await apiClient.optimizePrompt({
+          ...settingsForApi,
+          text: sourceText,
+        });
         if (optimized && optimized !== sourceText) {
-          updateNodeParams(n.id, { ...n.data.params, [fieldToOptimize]: optimized })
+          updateNodeParams(n.id, {
+            ...n.data.params,
+            [fieldToOptimize]: optimized,
+          });
         }
       } catch (err) {
-        console.warn('Optimize on run failed for node', n.id, err)
+        console.warn("Optimize on run failed for node", n.id, err);
       }
     }
 
     // Re-read nodes after optimization may have updated params
-    const latestNodes = useWorkflowStore.getState().nodes
-    const runAllInBrowser = useExecutionStore.getState().runAllInBrowser
-    const browserNodes = latestNodes.map(n => ({
+    const latestNodes = useWorkflowStore.getState().nodes;
+    const runAllInBrowser = useExecutionStore.getState().runAllInBrowser;
+    const browserNodes = latestNodes.map((n) => ({
       id: n.id,
       data: {
-        nodeType: n.data?.nodeType ?? '',
-        params: { ...(n.data?.params ?? {}), __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] } },
-        label: n.data?.label
-      }
-    }))
-    const browserEdges = edges.map(e => ({ source: e.source, target: e.target, sourceHandle: e.sourceHandle ?? undefined, targetHandle: e.targetHandle ?? undefined }))
-    const runTimes = Math.max(1, Math.min(99, Math.floor(times || 1)))
-    runCancelRef.current = false
-    setIsBatchRunning(true)
+        nodeType: n.data?.nodeType ?? "",
+        params: {
+          ...(n.data?.params ?? {}),
+          __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] },
+        },
+        label: n.data?.label,
+      },
+    }));
+    const browserEdges = edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle ?? undefined,
+      targetHandle: e.targetHandle ?? undefined,
+    }));
+    const runTimes = Math.max(1, Math.min(99, Math.floor(times || 1)));
+    runCancelRef.current = false;
+    setIsBatchRunning(true);
     try {
       for (let i = 0; i < runTimes; i++) {
-        if (runCancelRef.current) break
-        await runAllInBrowser(browserNodes, browserEdges)
+        if (runCancelRef.current) break;
+        await runAllInBrowser(browserNodes, browserEdges);
       }
     } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err)
-      setExecToast({ type: 'error', msg: msg || t('workflow.runFailed', 'Run failed') })
-      setTimeout(() => setExecToast(null), 4000)
+      const msg = err instanceof Error ? err.message : String(err);
+      setExecToast({
+        type: "error",
+        msg: msg || t("workflow.runFailed", "Run failed"),
+      });
+      setTimeout(() => setExecToast(null), 4000);
     } finally {
-      setIsBatchRunning(false)
+      setIsBatchRunning(false);
     }
-  }
-
+  };
 
   // Import / Export with toast feedback
-  const [ioToast, setIoToast] = useState<{ type: 'success' | 'error'; msg: string } | null>(null)
-  const showIoToast = (type: 'success' | 'error', msg: string) => {
-    setIoToast({ type, msg })
-    setTimeout(() => setIoToast(null), 3000)
-  }
+  const [ioToast, setIoToast] = useState<{
+    type: "success" | "error";
+    msg: string;
+  } | null>(null);
+  const showIoToast = (type: "success" | "error", msg: string) => {
+    setIoToast({ type, msg });
+    setTimeout(() => setIoToast(null), 3000);
+  };
 
   const handleImport = useCallback(async () => {
     try {
-      const result = await storageIpc.importWorkflowJson() as { id?: string; name?: string; error?: string } | null
-      if (!result) return // user cancelled
+      const result = (await storageIpc.importWorkflowJson()) as {
+        id?: string;
+        name?: string;
+        error?: string;
+      } | null;
+      if (!result) return; // user cancelled
       if (result.error) {
-        showIoToast('error', result.error)
-        return
+        showIoToast("error", result.error);
+        return;
       }
       if (result.id) {
         // Open in new tab
-        saveCurrentTabSnapshot()
-        tabIdCounter++
-        const newTabId = `tab-${tabIdCounter}`
-        setTabs(prev => [...prev, { tabId: newTabId, workflowId: null, workflowName: 'Loading...', nodes: [], edges: [], isDirty: false }])
-        setActiveTabId(newTabId)
-        await loadWorkflow(result.id)
-        showIoToast('success', `${t('workflow.imported', 'Imported')} "${result.name}"`)
-        invalidateWorkflowListCache()
+        saveCurrentTabSnapshot();
+        tabIdCounter++;
+        const newTabId = `tab-${tabIdCounter}`;
+        setTabs((prev) => [
+          ...prev,
+          {
+            tabId: newTabId,
+            workflowId: null,
+            workflowName: "Loading...",
+            nodes: [],
+            edges: [],
+            isDirty: false,
+            createdAt: Date.now(),
+          },
+        ]);
+        setActiveTabId(newTabId);
+        await loadWorkflow(result.id);
+        showIoToast(
+          "success",
+          `${t("workflow.imported", "Imported")} "${result.name}"`,
+        );
+        invalidateWorkflowListCache();
       }
     } catch (err) {
-      console.error('Import failed:', err)
-      showIoToast('error', t('workflow.importFailed', 'Import failed'))
+      console.error("Import failed:", err);
+      showIoToast("error", t("workflow.importFailed", "Import failed"));
     }
-  }, [loadWorkflow, saveCurrentTabSnapshot, t])
+  }, [loadWorkflow, saveCurrentTabSnapshot, t]);
 
   const handleExport = useCallback(async () => {
     try {
-      const wfNodes = nodes.map(n => ({
-        id: n.id, nodeType: n.data.nodeType, position: n.position,
-        params: { ...(n.data.params ?? {}), __meta: { label: n.data.label, modelInputSchema: n.data.modelInputSchema ?? [] } }
-      }))
-      const wfEdges = useWorkflowStore.getState().edges.map(e => ({ id: e.id, sourceNodeId: e.source, targetNodeId: e.target, sourceOutputKey: e.sourceHandle ?? 'output', targetInputKey: e.targetHandle ?? 'input' }))
-      const idForExport = workflowId ?? ''
-      const nameForExport = workflowName || 'Untitled Workflow'
-      await storageIpc.exportWorkflowJson(idForExport, nameForExport, { nodes: wfNodes, edges: wfEdges })
-      showIoToast('success', t('workflow.exported', 'Exported successfully'))
+      const wfNodes = nodes.map((n) => ({
+        id: n.id,
+        nodeType: n.data.nodeType,
+        position: n.position,
+        params: {
+          ...(n.data.params ?? {}),
+          __meta: {
+            label: n.data.label,
+            modelInputSchema: n.data.modelInputSchema ?? [],
+          },
+        },
+      }));
+      const wfEdges = useWorkflowStore.getState().edges.map((e) => ({
+        id: e.id,
+        sourceNodeId: e.source,
+        targetNodeId: e.target,
+        sourceOutputKey: e.sourceHandle ?? "output",
+        targetInputKey: e.targetHandle ?? "input",
+      }));
+      const idForExport = workflowId ?? "";
+      const nameForExport = workflowName || "Untitled Workflow";
+      await storageIpc.exportWorkflowJson(idForExport, nameForExport, {
+        nodes: wfNodes,
+        edges: wfEdges,
+      });
+      showIoToast("success", t("workflow.exported", "Exported successfully"));
     } catch (err) {
-      console.error('Export failed:', err)
-      showIoToast('error', t('workflow.exportFailed', 'Export failed'))
+      console.error("Export failed:", err);
+      showIoToast("error", t("workflow.exportFailed", "Export failed"));
     }
-  }, [workflowId, workflowName, nodes, t])
+  }, [workflowId, workflowName, nodes, t]);
 
-  const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false)
+  const [showSaveTemplateDialog, setShowSaveTemplateDialog] = useState(false);
 
   const handleSaveAsTemplate = useCallback(() => {
-    if (!workflowId) return
-    setShowSaveTemplateDialog(true)
-  }, [workflowId])
-
-  const handleSaveTemplateConfirm = useCallback(async (data: import('@/components/templates/TemplateDialog').TemplateFormData) => {
-    try {
-      const wfNodes = nodes.map(n => ({
-        id: n.id, nodeType: n.data.nodeType, position: n.position,
-        params: { ...(n.data.params ?? {}), __meta: { label: n.data.label, modelInputSchema: n.data.modelInputSchema ?? [] } }
-      }))
-      const wfEdges = useWorkflowStore.getState().edges.map(e => ({ id: e.id, sourceNodeId: e.source, targetNodeId: e.target, sourceOutputKey: e.sourceHandle ?? 'output', targetInputKey: e.targetHandle ?? 'input' }))
-      const nodeTypes = Array.from(new Set(nodes.map(n => n.data.nodeType)))
-
-      await createTemplate({
-        name: data.name,
-        description: data.description || null,
-        tags: data.tags,
-        thumbnail: data.thumbnail || null,
-        type: 'custom',
-        templateType: 'workflow',
-        workflowData: {
-          category: data.category || 'ai-generation',
-          graphDefinition: { nodes: wfNodes, edges: wfEdges },
-          nodeTypes,
-          nodeCount: nodes.length,
-          useCases: []
-        }
-      })
-      showIoToast('success', t('workflow.templateSaved', 'Saved as template'))
-    } catch (err) {
-      console.error('Save template failed:', err)
-      showIoToast('error', t('workflow.saveTemplateFailed', 'Failed to save template'))
-    }
-  }, [nodes, createTemplate, t])
+    if (!workflowId) return;
+    setShowSaveTemplateDialog(true);
+  }, [workflowId]);
+
+  const handleSaveTemplateConfirm = useCallback(
+    async (
+      data: import("@/components/templates/TemplateDialog").TemplateFormData,
+    ) => {
+      try {
+        const wfNodes = nodes.map((n) => ({
+          id: n.id,
+          nodeType: n.data.nodeType,
+          position: n.position,
+          params: {
+            ...(n.data.params ?? {}),
+            __meta: {
+              label: n.data.label,
+              modelInputSchema: n.data.modelInputSchema ?? [],
+            },
+          },
+        }));
+        const wfEdges = useWorkflowStore.getState().edges.map((e) => ({
+          id: e.id,
+          sourceNodeId: e.source,
+          targetNodeId: e.target,
+          sourceOutputKey: e.sourceHandle ?? "output",
+          targetInputKey: e.targetHandle ?? "input",
+        }));
+        const nodeTypes = Array.from(
+          new Set(nodes.map((n) => n.data.nodeType)),
+        );
+
+        await createTemplate({
+          name: data.name,
+          description: data.description || null,
+          tags: data.tags,
+          thumbnail: data.thumbnail || null,
+          type: "custom",
+          templateType: "workflow",
+          workflowData: {
+            category: data.category || "ai-generation",
+            graphDefinition: { nodes: wfNodes, edges: wfEdges },
+            nodeTypes,
+            nodeCount: nodes.length,
+            useCases: [],
+          },
+        });
+        showIoToast(
+          "success",
+          t("workflow.templateSaved", "Saved as template"),
+        );
+      } catch (err) {
+        console.error("Save template failed:", err);
+        showIoToast(
+          "error",
+          t("workflow.saveTemplateFailed", "Failed to save template"),
+        );
+      }
+    },
+    [nodes, createTemplate, t],
+  );
 
   return (
     <div className="flex flex-col h-full relative">
       {/* ── Status banner ──────────────────────────────────────── */}
-      {modelSyncStatus === 'no-key' && (
+      {modelSyncStatus === "no-key" && (
         <div className="flex items-center gap-2 px-4 py-1.5 bg-orange-500/10 border-b border-orange-500/30 text-xs text-orange-400">
           <span>API key not set.</span>
         </div>
       )}
-      {modelSyncStatus === 'loading' && (
-        <div className="px-4 py-1.5 bg-blue-500/10 border-b border-blue-500/30 text-xs text-blue-400 animate-pulse">Loading models...</div>
+      {modelSyncStatus === "loading" && (
+        <div className="px-4 py-1.5 bg-blue-500/10 border-b border-blue-500/30 text-xs text-blue-400 animate-pulse">
+          Loading models...
+        </div>
       )}
-      {modelSyncStatus === 'unavailable' && (
+      {modelSyncStatus === "unavailable" && (
         <div className="flex items-center gap-2 px-4 py-1.5 bg-muted/50 border-b border-border text-xs text-muted-foreground">
-          <span>{t('workflow.modelSyncDesktopOnly', 'Model sync is available in the WaveSpeed Desktop app.')}</span>
+          <span>
+            {t(
+              "workflow.modelSyncDesktopOnly",
+              "Model sync is available in the WaveSpeed Desktop app.",
+            )}
+          </span>
         </div>
       )}
-      {modelSyncStatus === 'error' && (
+      {modelSyncStatus === "error" && (
         <div className="flex items-center gap-2 px-4 py-1.5 bg-red-500/10 border-b border-red-500/30 text-xs text-red-400">
           <span>Models failed: {modelSyncError}</span>
-          <button onClick={syncModels} className="underline hover:text-red-300">Retry</button>
+          <button onClick={syncModels} className="underline hover:text-red-300">
+            Retry
+          </button>
         </div>
       )}
 
       {/* ── Toolbar — unified header ──────────────────────────── */}
-      <div className="relative">
-        <div className="flex items-center border-b border-border px-2 gap-1.5 h-12">
-
-          {/* Tabs — unified style with Playground */}
-        <div ref={wfTabScrollRef} className="flex-1 min-w-0 overflow-x-auto hide-scrollbar">
-          <div className="flex items-center w-max">
-          {tabs.map((tab, tabIdx) => {
-            const isActive = tab.tabId === activeTabId
-            const isEditing = editingTabId === tab.tabId
-            return (
-              <Fragment key={tab.tabId}>
-                {tabIdx > 0 && <div className="w-px h-4 bg-border/70 shrink-0 mx-0.5" />}
-              <div
-                draggable={!isEditing}
-                onDragStart={e => handleTabDragStart(e, tab.tabId)}
-                onDragOver={e => handleTabDragOver(e, tab.tabId)}
-                onDrop={e => handleTabDrop(e, tab.tabId)}
-                onDragEnd={handleTabDragEnd}
-                onClick={() => switchTab(tab.tabId)}
-                onContextMenu={e => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  setTabContextMenu({ tabId: tab.tabId, x: e.clientX, y: e.clientY })
-                }}
-                className={`group relative flex h-8 items-center gap-1.5 px-3 text-xs transition-all cursor-pointer select-none shrink-0 max-w-[160px] hover:bg-primary/10 dark:hover:bg-muted/60
-                  ${dragTabId === tab.tabId ? 'opacity-40' : ''}
-                  ${isActive
-                    ? 'bg-primary/15 dark:bg-primary/10 text-foreground font-medium'
-                    : 'bg-primary/[0.06] dark:bg-muted/20 text-muted-foreground'}`}
-              >
-                {/* Drop indicator line */}
-                {dropIndicator?.tabId === tab.tabId && dropIndicator.side === 'left' && (
-                  <div className="absolute -left-px top-1 bottom-1 w-0.5 rounded-full bg-primary" />
-                )}
-                {dropIndicator?.tabId === tab.tabId && dropIndicator.side === 'right' && (
-                  <div className="absolute -right-px top-1 bottom-1 w-0.5 rounded-full bg-primary" />
-                )}
-                {isEditing ? (
-                  <input
-                    type="text"
-                    value={editingTabName}
-                    onChange={e => setEditingTabName(e.target.value)}
-                    onBlur={commitRenameTab}
-                    onKeyDown={e => {
-                      e.stopPropagation()
-                      if (e.key === 'Enter') commitRenameTab()
-                      if (e.key === 'Escape') cancelRenameTab()
+      <div className="relative" style={{ zIndex: 2 }}>
+        {/* Page title block — matches other pages' title style, extends below tab bar with diagonal */}
+        <div
+          className="absolute left-0 top-0 z-[2] flex items-center bg-background"
+          style={{
+            height: 60,
+            width: wfTitleWidth,
+            paddingLeft: 23,
+            paddingRight: 12,
+            paddingTop: 2,
+            clipPath: `polygon(0 0, 100% 0, 100% 40px, calc(100% - 16px) 100%, 0 100%)`,
+          }}
+        >
+          <h1
+            ref={wfTitleRef}
+            className="text-xl md:text-2xl font-bold tracking-tight flex items-center gap-2 whitespace-nowrap"
+          >
+            <GitBranch className="h-5 w-5 text-primary" />
+            {t("nav.workflow")}
+          </h1>
+        </div>
+        {/* Border line following the diagonal shape */}
+        <svg
+          className="absolute left-0 top-0 z-[2] pointer-events-none"
+          style={{ width: wfTitleWidth, height: 60 }}
+          fill="none"
+        >
+          <line
+            x1="0"
+            y1="60"
+            x2={wfTitleWidth - 16}
+            y2="60"
+            className="stroke-border"
+            strokeWidth="1"
+            vectorEffect="non-scaling-stroke"
+          />
+          <line
+            x1={wfTitleWidth - 16}
+            y1="60"
+            x2={wfTitleWidth}
+            y2="40"
+            className="stroke-border"
+            strokeWidth="1"
+            vectorEffect="non-scaling-stroke"
+          />
+        </svg>
+        <div
+          className="flex items-center border-b border-border px-2 gap-1.5 h-10 bg-background"
+          style={{ paddingLeft: wfTitleWidth }}
+        >
+          {/* Tab list dropdown button */}
+          <div ref={wfTabListRef} className="relative shrink-0">
+            <button
+              onClick={() => setWfTabListOpen(!wfTabListOpen)}
+              className={`flex items-center justify-center w-7 h-7 rounded-md transition-colors shrink-0 ${
+                wfTabListOpen
+                  ? "bg-primary/15 text-primary"
+                  : "text-muted-foreground hover:text-foreground hover:bg-muted"
+              }`}
+              title={t("workflow.allTabs", "All Tabs")}
+            >
+              <ChevronDown
+                className={`h-4 w-4 transition-transform ${wfTabListOpen ? "rotate-180" : ""}`}
+              />
+            </button>
+            {wfTabListOpen && (
+              <div className="absolute z-50 mt-1 left-0 min-w-[320px] max-h-[400px] overflow-y-auto rounded-xl border border-border/80 bg-popover shadow-xl animate-in fade-in-0 zoom-in-95">
+                <div className="p-1.5">
+                  {tabs.length === 0 ? (
+                    <div className="py-4 text-center text-xs text-muted-foreground">
+                      {t("workflow.noTabs", "No open tabs")}
+                    </div>
+                  ) : (
+                    tabs.map((tab) => (
+                      <div
+                        key={tab.tabId}
+                        onClick={() => {
+                          switchTab(tab.tabId);
+                          setWfTabListOpen(false);
+                        }}
+                        className={`group flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-xs transition-colors cursor-pointer hover:bg-accent hover:text-accent-foreground ${
+                          tab.tabId === activeTabId
+                            ? "bg-primary/10 text-foreground font-medium"
+                            : ""
+                        }`}
+                      >
+                        <GitBranch className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                        <div className="flex-1 min-w-0">
+                          <div className="truncate font-medium">
+                            {tab.workflowName}
+                          </div>
+                          {tab.createdAt && (
+                            <div className="flex items-center gap-0.5 text-[10px] text-muted-foreground mt-0.5">
+                              <Clock className="h-2.5 w-2.5" />
+                              {new Date(tab.createdAt).toLocaleTimeString([], {
+                                hour: "2-digit",
+                                minute: "2-digit",
+                              })}
+                            </div>
+                          )}
+                        </div>
+                        {tab.isDirty && (
+                          <span className="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />
+                        )}
+                        {tab.tabId === activeTabId && (
+                          <span className="text-[9px] bg-primary/20 text-primary rounded px-1 py-0.5 font-medium shrink-0">
+                            active
+                          </span>
+                        )}
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            closeTab(tab.tabId, e);
+                          }}
+                          className="rounded p-0.5 opacity-0 group-hover:opacity-100 hover:bg-muted transition-opacity shrink-0 text-muted-foreground hover:text-foreground"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </div>
+                    ))
+                  )}
+                </div>
+                <div className="border-t border-border/60 p-1.5">
+                  <button
+                    onClick={() => {
+                      addTab();
+                      setWfTabListOpen(false);
                     }}
-                    onClick={e => e.stopPropagation()}
-                    autoFocus
-                    className={`flex-1 min-w-0 bg-transparent border-b text-xs outline-none px-0 py-0 ${
-                      editingTabName.trim() && tabs.some(t => t.tabId !== editingTabId && t.workflowName === editingTabName.trim())
-                        ? 'border-red-500 text-red-400'
-                        : 'border-primary'
-                    }`}
-                  />
-                ) : (
-                  <span className="truncate flex-1" onDoubleClick={e => { e.stopPropagation(); startRenameTab(tab.tabId) }}>{tab.workflowName}</span>
-                )}
-                {!isEditing && tab.isDirty && <span className="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />}
-                {!isEditing && (
-                  <button onClick={(e) => closeTab(tab.tabId, e)}
-                    className="ml-1 rounded p-0.5 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-muted text-muted-foreground hover:text-foreground">
-                    <X className="h-3 w-3" />
+                    className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    {t("workflow.newTab", "New Tab")}
                   </button>
-                )}
+                </div>
               </div>
-              </Fragment>
-            )
-          })}
-          {/* + button inside scroll area: visible when tabs don't overflow */}
-          {!wfTabsOverflow && (
-            <button onClick={addTab}
-              className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 mx-1"
-              title={t('workflow.newTab', 'New tab')}>
-              <Plus className="h-4 w-4" />
-            </button>
-          )}
+            )}
           </div>
-        </div>
-        {/* + button fixed outside: visible only when tabs overflow */}
-        {wfTabsOverflow && (
-          <button onClick={addTab}
-            className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-            title={t('workflow.newTab', 'New tab')}>
-            <Plus className="h-4 w-4" />
-          </button>
-        )}
-
-        <div className="w-px h-5 bg-border mx-1" />
-
-        {/* Last saved indicator */}
-        {lastSavedAt && (
-          <span className="text-[10px] text-muted-foreground">
-            {t('workflow.savedAt', 'Saved')} {lastSavedAt.toLocaleTimeString()}
-          </span>
-        )}
-        {isDirty && workflowId && (
-          <span className="text-[10px] text-orange-400">{t('workflow.unsaved', 'unsaved')}</span>
-        )}
-
-        {/* Spacer — limited so tabs don't push into run controls */}
-        <div className="w-4 shrink-0" />
 
-        {/* Right: Run controls */}
-        <div className="flex items-center gap-1.5" data-guide="run-controls">
-          <div className="flex items-center rounded-lg overflow-hidden shadow-sm">
-            {/* Run button — disabled in browser (no execution API) */}
-            <Tooltip delayDuration={0}>
-              <TooltipTrigger asChild>
+          {/* Tabs — unified style with Playground */}
+          <div
+            ref={wfTabScrollRef}
+            className="flex-1 min-w-0 overflow-x-auto hide-scrollbar"
+            onWheel={(e) => {
+              if (wfTabScrollRef.current && e.deltaY !== 0) {
+                e.preventDefault();
+                wfTabScrollRef.current.scrollLeft += e.deltaY;
+              }
+            }}
+          >
+            <div className="flex items-center w-max gap-1.5">
+              {tabs.map((tab) => {
+                const isActive = tab.tabId === activeTabId;
+                const isEditing = editingTabId === tab.tabId;
+                return (
+                  <Fragment key={tab.tabId}>
+                    <div
+                      draggable={!isEditing}
+                      onDragStart={(e) => handleTabDragStart(e, tab.tabId)}
+                      onDragOver={(e) => handleTabDragOver(e, tab.tabId)}
+                      onDrop={(e) => handleTabDrop(e, tab.tabId)}
+                      onDragEnd={handleTabDragEnd}
+                      onClick={() => switchTab(tab.tabId)}
+                      onContextMenu={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setTabContextMenu({
+                          tabId: tab.tabId,
+                          x: e.clientX,
+                          y: e.clientY,
+                        });
+                      }}
+                      className={`group relative flex h-8 items-center gap-1.5 px-3 text-xs transition-all cursor-pointer select-none shrink-0 max-w-[160px] hover:bg-primary/10 dark:hover:bg-muted/60
+                  ${dragTabId === tab.tabId ? "opacity-40" : ""}
+                  ${
+                    isActive
+                      ? "bg-primary/15 dark:bg-primary/10 text-foreground font-medium"
+                      : "bg-primary/[0.06] dark:bg-muted/20 text-muted-foreground"
+                  }`}
+                    >
+                      {/* Drop indicator line */}
+                      {dropIndicator?.tabId === tab.tabId &&
+                        dropIndicator.side === "left" && (
+                          <div className="absolute -left-px top-1 bottom-1 w-0.5 rounded-full bg-primary" />
+                        )}
+                      {dropIndicator?.tabId === tab.tabId &&
+                        dropIndicator.side === "right" && (
+                          <div className="absolute -right-px top-1 bottom-1 w-0.5 rounded-full bg-primary" />
+                        )}
+                      {isEditing ? (
+                        <input
+                          type="text"
+                          value={editingTabName}
+                          onChange={(e) => setEditingTabName(e.target.value)}
+                          onBlur={commitRenameTab}
+                          onKeyDown={(e) => {
+                            e.stopPropagation();
+                            if (e.key === "Enter") commitRenameTab();
+                            if (e.key === "Escape") cancelRenameTab();
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                          autoFocus
+                          className={`flex-1 min-w-0 bg-transparent border-b text-xs outline-none px-0 py-0 ${
+                            editingTabName.trim() &&
+                            tabs.some(
+                              (t) =>
+                                t.tabId !== editingTabId &&
+                                t.workflowName === editingTabName.trim(),
+                            )
+                              ? "border-red-500 text-red-400"
+                              : "border-primary"
+                          }`}
+                        />
+                      ) : (
+                        <span
+                          className="truncate flex-1"
+                          onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            startRenameTab(tab.tabId);
+                          }}
+                        >
+                          {tab.workflowName}
+                        </span>
+                      )}
+                      {!isEditing && tab.isDirty && (
+                        <span className="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />
+                      )}
+                      {!isEditing && (
+                        <button
+                          onClick={(e) => closeTab(tab.tabId, e)}
+                          className="ml-1 rounded p-0.5 opacity-0 group-hover:opacity-100 transition-opacity hover:bg-muted text-muted-foreground hover:text-foreground"
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      )}
+                    </div>
+                  </Fragment>
+                );
+              })}
+              {/* + button inside scroll area: visible when tabs don't overflow */}
+              {!wfTabsOverflow && (
                 <button
-                  className="h-7 px-3 flex items-center gap-1.5 bg-blue-600 text-white text-[11px] font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  disabled={nodes.length === 0 || isRunning || isBatchRunning}
-                  onClick={() => handleRunAll(runCount)}
+                  onClick={addTab}
+                  className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0 mx-1"
+                  title={t("workflow.newTab", "New tab")}
                 >
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
-                <polygon points="6,3 20,12 6,21" />
-              </svg>
-                  {isRunning || isBatchRunning ? t('workflow.running', 'Running...') : t('workflow.runWorkflow', 'Run')}
+                  <Plus className="h-4 w-4" />
                 </button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                {nodes.length === 0 ? t('workflow.addNodesToRun', 'Add nodes to run') : t('workflow.runWorkflow', 'Run')}
-              </TooltipContent>
-            </Tooltip>
-            {/* Run count */}
-            <div className="h-7 flex items-center bg-[hsl(var(--muted))] border-l border-[hsl(var(--border))]">
-              <input
-                type="number"
-                min={1}
-                max={99}
-                value={runCount}
-                onChange={e => setRunCount(Math.max(1, Math.min(99, Number(e.target.value) || 1)))}
-                className="w-10 h-full bg-transparent px-1 text-xs text-center text-foreground focus:outline-none dark:[color-scheme:dark]"
-                title={t('workflow.runCount', 'Run count')}
-              />
+              )}
             </div>
           </div>
-          {/* Cancel button */}
-          {(isRunning || isBatchRunning) && (
+          {/* + button fixed outside: visible only when tabs overflow */}
+          {wfTabsOverflow && (
             <button
-              className="h-7 w-7 rounded-lg flex items-center justify-center bg-red-900/60 text-red-300 hover:bg-red-800/70 transition-colors"
-              onClick={() => {
-                runCancelRef.current = true
-                if (workflowId) cancelAll(workflowId)
-              }}
-              title={t('workflow.cancelAll', 'Cancel All')}
+              onClick={addTab}
+              className="flex items-center justify-center w-7 h-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
+              title={t("workflow.newTab", "New tab")}
             >
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
-              </svg>
+              <Plus className="h-4 w-4" />
             </button>
           )}
-        </div>
-        {/* Monitor side panel toggle */}
-        <span className="flex items-center gap-1.5 mr-2">
-        <MonitorToggleBtn />
-        </span>
+
+          <div className="w-px h-5 bg-border mx-1" />
+
+          {/* Last saved indicator */}
+          {lastSavedAt && (
+            <span className="text-[10px] text-muted-foreground">
+              {t("workflow.savedAt", "Saved")}{" "}
+              {lastSavedAt.toLocaleTimeString()}
+            </span>
+          )}
+          {isDirty && workflowId && (
+            <span className="text-[10px] text-orange-400">
+              {t("workflow.unsaved", "unsaved")}
+            </span>
+          )}
+
+          {/* Right: Run controls */}
+          <div className="flex items-center gap-1.5" data-guide="run-controls">
+            <div className="flex items-center rounded-lg overflow-hidden shadow-sm">
+              {/* Run button — disabled in browser (no execution API) */}
+              <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <button
+                    className="h-7 px-3 flex items-center gap-1.5 bg-blue-600 text-white text-[11px] font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    disabled={nodes.length === 0 || isRunning || isBatchRunning}
+                    onClick={() => handleRunAll(runCount)}
+                  >
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      stroke="none"
+                    >
+                      <polygon points="6,3 20,12 6,21" />
+                    </svg>
+                    {isRunning || isBatchRunning
+                      ? t("workflow.running", "Running...")
+                      : t("workflow.runWorkflow", "Run")}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  {nodes.length === 0
+                    ? t("workflow.addNodesToRun", "Add nodes to run")
+                    : t("workflow.runWorkflow", "Run")}
+                </TooltipContent>
+              </Tooltip>
+              {/* Run count */}
+              <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <div className="h-7 flex items-center bg-[hsl(var(--muted))] border-l border-[hsl(var(--border))]">
+                    <input
+                      type="number"
+                      min={1}
+                      max={99}
+                      value={runCount}
+                      onChange={(e) =>
+                        setRunCount(
+                          Math.max(
+                            1,
+                            Math.min(99, Number(e.target.value) || 1),
+                          ),
+                        )
+                      }
+                      className="w-10 h-full bg-transparent px-1 text-xs text-center text-foreground focus:outline-none dark:[color-scheme:dark]"
+                    />
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  {t("workflow.runCount", "Run count")}
+                </TooltipContent>
+              </Tooltip>
+            </div>
+            {/* Cancel button */}
+            {(isRunning || isBatchRunning) && (
+              <Tooltip delayDuration={0}>
+                <TooltipTrigger asChild>
+                  <button
+                    className="h-7 w-7 rounded-lg flex items-center justify-center bg-red-900/60 text-red-300 hover:bg-red-800/70 transition-colors"
+                    onClick={() => {
+                      runCancelRef.current = true;
+                      if (workflowId) cancelAll(workflowId);
+                    }}
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  {t("workflow.cancelAll", "Cancel All")}
+                </TooltipContent>
+              </Tooltip>
+            )}
+          </div>
+          {/* Monitor side panel toggle */}
+          <span className="flex items-center gap-1.5 mr-2">
+            <MonitorToggleBtn />
+          </span>
         </div>
         {/* Border line extending under titlebar overlay */}
-        {isElectron && <div className="absolute bottom-0 right-0 w-[140px] h-px bg-border" />}
+        {isElectron && (
+          <div className="absolute bottom-0 right-0 w-[140px] h-px bg-border" />
+        )}
       </div>
 
       {/* ── Main content ───────────────────────────────────────── */}
       <div className="flex flex-1 min-h-0 overflow-hidden relative">
-
         {/* Canvas area */}
         <div className="flex-1 min-w-0 relative">
           {/* Left floating toolbar (like right-side zoom controls) */}
@@ -1135,41 +1819,90 @@ export function WorkflowPage() {
             {/* Add Node — distinct plus icon (square with plus) */}
             <Tooltip delayDuration={0}>
               <TooltipTrigger asChild>
-                <button onClick={toggleNodePalette}
+                <button
+                  onClick={toggleNodePalette}
                   data-guide="node-palette-btn"
-                  className={`flex items-center justify-center w-9 h-9 rounded-t-lg transition-colors ${showNodePalette ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`}>
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <rect x="3" y="3" width="18" height="18" rx="2" /><line x1="12" y1="8" x2="12" y2="16" /><line x1="8" y1="12" x2="16" y2="12" />
+                  className={`flex items-center justify-center w-9 h-9 rounded-t-lg transition-colors ${showNodePalette ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`}
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <rect x="3" y="3" width="18" height="18" rx="2" />
+                    <line x1="12" y1="8" x2="12" y2="16" />
+                    <line x1="8" y1="12" x2="16" y2="12" />
                   </svg>
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">{t('workflow.nodes', 'Add Node')}</TooltipContent>
+              <TooltipContent side="right">
+                {t("workflow.nodes", "Add Node")}
+              </TooltipContent>
             </Tooltip>
             <div className="h-px bg-border" />
             {/* Workflow management — folder/list icon */}
             <Tooltip delayDuration={0}>
               <TooltipTrigger asChild>
-                <button onClick={toggleWorkflowPanel}
-                  className={`flex items-center justify-center w-9 h-9 transition-colors ${showWorkflowPanel ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`}>
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <line x1="8" y1="6" x2="21" y2="6" /><line x1="8" y1="12" x2="21" y2="12" /><line x1="8" y1="18" x2="21" y2="18" /><line x1="3" y1="6" x2="3.01" y2="6" /><line x1="3" y1="12" x2="3.01" y2="12" /><line x1="3" y1="18" x2="3.01" y2="18" />
+                <button
+                  onClick={toggleWorkflowPanel}
+                  className={`flex items-center justify-center w-9 h-9 transition-colors ${showWorkflowPanel ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`}
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <line x1="8" y1="6" x2="21" y2="6" />
+                    <line x1="8" y1="12" x2="21" y2="12" />
+                    <line x1="8" y1="18" x2="21" y2="18" />
+                    <line x1="3" y1="6" x2="3.01" y2="6" />
+                    <line x1="3" y1="12" x2="3.01" y2="12" />
+                    <line x1="3" y1="18" x2="3.01" y2="18" />
                   </svg>
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">{t('workflow.workflows', 'Manage Workflows')}</TooltipContent>
+              <TooltipContent side="right">
+                {t("workflow.workflows", "Manage Workflows")}
+              </TooltipContent>
             </Tooltip>
             <div className="h-px bg-border" />
             {/* Templates — puzzle/layout icon */}
             <Tooltip delayDuration={0}>
               <TooltipTrigger asChild>
-                <button onClick={() => setShowTemplateDialog(true)}
-                  className={`flex items-center justify-center w-9 h-9 transition-colors ${showTemplateDialog ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`}>
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5z" /><path d="M14 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5z" /><path d="M4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4z" /><path d="M14 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4z" />
+                <button
+                  onClick={() => setShowTemplateDialog(true)}
+                  className={`flex items-center justify-center w-9 h-9 transition-colors ${showTemplateDialog ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`}
+                >
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5z" />
+                    <path d="M14 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V5z" />
+                    <path d="M4 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4z" />
+                    <path d="M14 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4z" />
                   </svg>
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">{t('templates.title', 'Templates')}</TooltipContent>
+              <TooltipContent side="right">
+                {t("templates.title", "Templates")}
+              </TooltipContent>
             </Tooltip>
             <div className="h-px bg-border" />
             {/* Help / Guide */}
@@ -1179,12 +1912,25 @@ export function WorkflowPage() {
                   onClick={guide.show}
                   className="flex items-center justify-center w-9 h-9 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
                 >
-                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                    <circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>
+                  <svg
+                    width="15"
+                    height="15"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                    <line x1="12" y1="17" x2="12.01" y2="17" />
                   </svg>
                 </button>
               </TooltipTrigger>
-              <TooltipContent side="right">{t('workflow.guide.welcome.title', 'Guide')}</TooltipContent>
+              <TooltipContent side="right">
+                {t("workflow.guide.welcome.title", "Guide")}
+              </TooltipContent>
             </Tooltip>
             <div className="h-px bg-border" />
             {/* More menu (Import / Export / Save) */}
@@ -1202,7 +1948,10 @@ export function WorkflowPage() {
           {/* Left drawer panels as overlay with padding */}
           {showNodePalette && (
             <>
-              <div className="absolute inset-0 z-20" onClick={toggleNodePalette} />
+              <div
+                className="absolute inset-0 z-20"
+                onClick={toggleNodePalette}
+              />
               <div className="absolute top-4 left-14 bottom-4 z-30 rounded-xl overflow-hidden shadow-xl border border-border">
                 <NodePalette definitions={nodeDefs} />
               </div>
@@ -1210,34 +1959,68 @@ export function WorkflowPage() {
           )}
           {showWorkflowPanel && (
             <>
-              <div className="absolute inset-0 z-20" onClick={toggleWorkflowPanel} />
+              <div
+                className="absolute inset-0 z-20"
+                onClick={toggleWorkflowPanel}
+              />
               <div className="absolute top-4 left-14 bottom-4 z-30 rounded-xl overflow-hidden shadow-xl border border-border">
-                <WorkflowList onOpen={async (id) => {
-                  const existingTab = tabs.find(t => t.workflowId === id)
-                  if (existingTab) {
-                    switchTab(existingTab.tabId)
-                  } else {
-                    saveCurrentTabSnapshot()
-                    tabIdCounter++
-                    const newTabId = `tab-${tabIdCounter}`
-                    setTabs(prev => [...prev, { tabId: newTabId, workflowId: null, workflowName: 'Loading...', nodes: [], edges: [], isDirty: false }])
-                    setActiveTabId(newTabId)
-                    await loadWorkflow(id)
-                  }
-                }} onDelete={(deletedId) => {
-                  const tabToClose = tabs.find(t => t.workflowId === deletedId)
-                  if (tabToClose) {
-                    if (tabs.length <= 1) {
-                      const blankName = 'Untitled Workflow'
-                      const { nodes, edges } = getDefaultNewWorkflowContent()
-                      useWorkflowStore.setState({ workflowId: null, workflowName: blankName, nodes, edges, isDirty: false })
-                      setTabs([{ ...tabToClose, workflowId: null, workflowName: blankName, nodes, edges, isDirty: false }])
+                <WorkflowList
+                  onOpen={async (id) => {
+                    const existingTab = tabs.find((t) => t.workflowId === id);
+                    if (existingTab) {
+                      switchTab(existingTab.tabId);
                     } else {
-                      doCloseTab(tabToClose.tabId)
+                      saveCurrentTabSnapshot();
+                      tabIdCounter++;
+                      const newTabId = `tab-${tabIdCounter}`;
+                      setTabs((prev) => [
+                        ...prev,
+                        {
+                          tabId: newTabId,
+                          workflowId: null,
+                          workflowName: "Loading...",
+                          nodes: [],
+                          edges: [],
+                          isDirty: false,
+                          createdAt: Date.now(),
+                        },
+                      ]);
+                      setActiveTabId(newTabId);
+                      await loadWorkflow(id);
+                    }
+                  }}
+                  onDelete={(deletedId) => {
+                    const tabToClose = tabs.find(
+                      (t) => t.workflowId === deletedId,
+                    );
+                    if (tabToClose) {
+                      if (tabs.length <= 1) {
+                        const blankName = "Untitled Workflow";
+                        const { nodes, edges } = getDefaultNewWorkflowContent();
+                        useWorkflowStore.setState({
+                          workflowId: null,
+                          workflowName: blankName,
+                          nodes,
+                          edges,
+                          isDirty: false,
+                        });
+                        setTabs([
+                          {
+                            ...tabToClose,
+                            workflowId: null,
+                            workflowName: blankName,
+                            nodes,
+                            edges,
+                            isDirty: false,
+                          },
+                        ]);
+                      } else {
+                        doCloseTab(tabToClose.tabId);
+                      }
                     }
-                  }
-                  invalidateWorkflowListCache()
-                }} />
+                    invalidateWorkflowListCache();
+                  }}
+                />
               </div>
             </>
           )}
@@ -1248,7 +2031,10 @@ export function WorkflowPage() {
           {/* Right drawer panel as overlay with padding (mirrors left drawers) */}
           {showWorkflowResultsPanel && (
             <>
-              <div className="absolute inset-0 z-20" onClick={toggleWorkflowResultsPanel} />
+              <div
+                className="absolute inset-0 z-20"
+                onClick={toggleWorkflowResultsPanel}
+              />
               <div className="absolute top-1 right-4 bottom-4 z-30 rounded-xl overflow-hidden shadow-xl border border-border">
                 <MonitorSidePanel workflowId={workflowId} />
               </div>
@@ -1259,36 +2045,60 @@ export function WorkflowPage() {
 
       {/* Preview overlay — covers the canvas area only (absolute within the page) */}
       {previewSrc && (
-        <div className="absolute inset-0 z-[999] flex flex-col bg-black/85"
-          onClick={closePreview} style={{ cursor: 'default' }}>
+        <div
+          className="absolute inset-0 z-[999] flex flex-col bg-black/85"
+          onClick={closePreview}
+          style={{ cursor: "default" }}
+        >
           <div className="flex-1 flex items-center justify-center p-6 min-h-0 overflow-hidden">
-            {previewType === '3d' ? (
+            {previewType === "3d" ? (
               <ModelViewerOverlay src={previewSrc} />
-            ) : previewType === 'video' ? (
-              <video src={previewSrc} controls autoPlay
-                className="max-w-[80%] max-h-full rounded-xl shadow-2xl" onClick={e => e.stopPropagation()} />
-            ) : previewType === 'audio' ? (
-              <div className="w-[80%] max-w-[700px] rounded-xl shadow-2xl bg-[hsl(var(--card))] p-6" onClick={e => e.stopPropagation()}>
+            ) : previewType === "video" ? (
+              <video
+                src={previewSrc}
+                controls
+                autoPlay
+                className="max-w-[80%] max-h-full rounded-xl shadow-2xl"
+                onClick={(e) => e.stopPropagation()}
+              />
+            ) : previewType === "audio" ? (
+              <div
+                className="w-[80%] max-w-[700px] rounded-xl shadow-2xl bg-[hsl(var(--card))] p-6"
+                onClick={(e) => e.stopPropagation()}
+              >
                 <audio src={previewSrc} controls autoPlay className="w-full" />
               </div>
             ) : (
-              <div className="relative max-w-[80%] max-h-full flex items-center justify-center" onClick={e => e.stopPropagation()}>
+              <div
+                className="relative max-w-[80%] max-h-full flex items-center justify-center"
+                onClick={(e) => e.stopPropagation()}
+              >
                 {canNavigatePreview && (
                   <button
                     className="absolute left-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full bg-black/45 text-white hover:bg-black/65 transition-colors"
-                    onClick={e => { e.stopPropagation(); prevPreview() }}
-                    title={t('workflow.previousImage', 'Previous image')}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      prevPreview();
+                    }}
+                    title={t("workflow.previousImage", "Previous image")}
                   >
                     ←
                   </button>
                 )}
-                <img src={previewSrc} alt="Preview"
-                  className="max-w-full rounded-xl shadow-2xl object-contain" style={{ maxHeight: 'calc(100vh - 120px)' }} />
+                <img
+                  src={previewSrc}
+                  alt="Preview"
+                  className="max-w-full rounded-xl shadow-2xl object-contain"
+                  style={{ maxHeight: "calc(100vh - 120px)" }}
+                />
                 {canNavigatePreview && (
                   <button
                     className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-9 h-9 rounded-full bg-black/45 text-white hover:bg-black/65 transition-colors"
-                    onClick={e => { e.stopPropagation(); nextPreview() }}
-                    title={t('workflow.nextImage', 'Next image')}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      nextPreview();
+                    }}
+                    title={t("workflow.nextImage", "Next image")}
                   >
                     →
                   </button>
@@ -1298,14 +2108,24 @@ export function WorkflowPage() {
           </div>
           <div className="py-3 text-center text-white/40 text-xs select-none flex-shrink-0">
             {canNavigatePreview
-              ? t('workflow.previewNavHint', { current: previewIndex + 1, total: previewItems.length, defaultValue: 'Use ← / → to navigate images ({{current}}/{{total}})' })
-              : t('workflow.clickAnywhereToClose', 'Click anywhere to close')}
+              ? t("workflow.previewNavHint", {
+                  current: previewIndex + 1,
+                  total: previewItems.length,
+                  defaultValue:
+                    "Use ← / → to navigate images ({{current}}/{{total}})",
+                })
+              : t("workflow.clickAnywhereToClose", "Click anywhere to close")}
           </div>
         </div>
       )}
 
       {/* Naming dialog */}
-      {showNamingDialog && <NamingDialog defaultValue={namingDialogDefault} onConfirm={resolveNamingDialog} />}
+      {showNamingDialog && (
+        <NamingDialog
+          defaultValue={namingDialogDefault}
+          onConfirm={resolveNamingDialog}
+        />
+      )}
 
       {/* Workflow Template Picker Dialog */}
       <TemplatePickerDialog
@@ -1314,46 +2134,79 @@ export function WorkflowPage() {
         templateType="workflow"
         onUseTemplate={async (template) => {
           if (template.workflowData?.graphDefinition) {
-            saveCurrentTabSnapshot()
-            tabIdCounter++
-            const newTabId = `tab-${tabIdCounter}`
-            setTabs(prev => [...prev, { tabId: newTabId, workflowId: null, workflowName: template.name, nodes: [], edges: [], isDirty: false }])
-            setActiveTabId(newTabId)
+            saveCurrentTabSnapshot();
+            tabIdCounter++;
+            const newTabId = `tab-${tabIdCounter}`;
+            setTabs((prev) => [
+              ...prev,
+              {
+                tabId: newTabId,
+                workflowId: null,
+                workflowName: template.name,
+                nodes: [],
+                edges: [],
+                isDirty: false,
+                createdAt: Date.now(),
+              },
+            ]);
+            setActiveTabId(newTabId);
 
             // Build a definition map from already-loaded nodeDefs
             const defMap = new Map(
-              nodeDefs.map(def => [
+              nodeDefs.map((def) => [
                 def.type,
-                { params: def.params ?? [], inputs: def.inputs ?? [], outputs: def.outputs ?? [], label: def.label ?? def.type }
-              ])
-            )
+                {
+                  params: def.params ?? [],
+                  inputs: def.inputs ?? [],
+                  outputs: def.outputs ?? [],
+                  label: def.label ?? def.type,
+                },
+              ]),
+            );
 
             // Fetch models list to resolve modelInputSchema for ai-task nodes
-            let modelMap = new Map<string, unknown[]>()
+            let modelMap = new Map<string, unknown[]>();
             try {
-              const allModels = await modelsIpc.list()
-              modelMap = new Map((allModels ?? []).map((m: any) => [m.modelId, m.inputSchema ?? []]))
-            } catch { /* ignore — schemas will be empty */ }
+              const allModels = await modelsIpc.list();
+              modelMap = new Map(
+                (allModels ?? []).map((m: any) => [
+                  m.modelId,
+                  m.inputSchema ?? [],
+                ]),
+              );
+            } catch {
+              /* ignore — schemas will be empty */
+            }
 
-            const gd = template.workflowData.graphDefinition
-            const idMap = new Map<string, string>()
+            const gd = template.workflowData.graphDefinition;
+            const idMap = new Map<string, string>();
             const newNodes = (gd.nodes ?? []).map((n: any) => {
-              const newId = `node-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
-              idMap.set(n.id, newId)
-              const def = defMap.get(n.nodeType)
+              const newId = `node-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+              idMap.set(n.id, newId);
+              const def = defMap.get(n.nodeType);
               // Extract __meta (same as loadWorkflow does)
-              const meta = n.params?.__meta as Record<string, unknown> | undefined
-              let modelInputSchema = (meta?.modelInputSchema as unknown[]) ?? []
-              const label = (meta?.label as string) || (def ? def.label : n.nodeType)
-              const { __meta: _, ...cleanParams } = (n.params ?? {}) as Record<string, unknown>
+              const meta = n.params?.__meta as
+                | Record<string, unknown>
+                | undefined;
+              let modelInputSchema =
+                (meta?.modelInputSchema as unknown[]) ?? [];
+              const label =
+                (meta?.label as string) || (def ? def.label : n.nodeType);
+              const { __meta: _, ...cleanParams } = (n.params ?? {}) as Record<
+                string,
+                unknown
+              >;
               // If modelInputSchema is empty but modelId exists, resolve from models list
-              const modelId = cleanParams.modelId as string | undefined
-              if ((!modelInputSchema || modelInputSchema.length === 0) && modelId) {
-                modelInputSchema = (modelMap.get(modelId) as unknown[]) ?? []
+              const modelId = cleanParams.modelId as string | undefined;
+              if (
+                (!modelInputSchema || modelInputSchema.length === 0) &&
+                modelId
+              ) {
+                modelInputSchema = (modelMap.get(modelId) as unknown[]) ?? [];
               }
               return {
                 id: newId,
-                type: 'custom',
+                type: "custom",
                 position: n.position ?? { x: 0, y: 0 },
                 data: {
                   nodeType: n.nodeType,
@@ -1363,17 +2216,17 @@ export function WorkflowPage() {
                   inputDefinitions: def?.inputs ?? [],
                   outputDefinitions: def?.outputs ?? [],
                   modelInputSchema,
-                }
-              }
-            })
+                },
+              };
+            });
             const newEdges = (gd.edges ?? []).map((e: any) => ({
               id: `edge-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
               source: idMap.get(e.sourceNodeId) ?? e.sourceNodeId,
               target: idMap.get(e.targetNodeId) ?? e.targetNodeId,
-              sourceHandle: e.sourceOutputKey ?? 'output',
-              targetHandle: e.targetInputKey ?? 'input',
-              type: 'custom',
-            }))
+              sourceHandle: e.sourceOutputKey ?? "output",
+              targetHandle: e.targetInputKey ?? "input",
+              type: "custom",
+            }));
 
             useWorkflowStore.setState({
               workflowId: null,
@@ -1381,8 +2234,11 @@ export function WorkflowPage() {
               nodes: newNodes,
               edges: newEdges,
               isDirty: true,
-            })
-            showIoToast('success', `${t('workflow.templateLoaded', 'Loaded template')} "${template.name}"`)
+            });
+            showIoToast(
+              "success",
+              `${t("workflow.templateLoaded", "Loaded template")} "${template.name}"`,
+            );
           }
         }}
       />
@@ -1399,17 +2255,33 @@ export function WorkflowPage() {
 
       {/* Close tab confirmation dialog */}
       {confirmCloseTabId && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60" onClick={() => setConfirmCloseTabId(null)}>
-          <div className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl" onClick={e => e.stopPropagation()}>
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+          onClick={() => setConfirmCloseTabId(null)}
+        >
+          <div
+            className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
             <h3 className="text-sm font-semibold mb-1">Unsaved Changes</h3>
-            <p className="text-xs text-muted-foreground mb-4">This workflow has unsaved changes. Are you sure you want to close it?</p>
+            <p className="text-xs text-muted-foreground mb-4">
+              This workflow has unsaved changes. Are you sure you want to close
+              it?
+            </p>
             <div className="flex justify-end gap-2">
-              <button onClick={() => setConfirmCloseTabId(null)}
-                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors">
+              <button
+                onClick={() => setConfirmCloseTabId(null)}
+                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
                 Cancel
               </button>
-              <button onClick={() => { doCloseTab(confirmCloseTabId); setConfirmCloseTabId(null) }}
-                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors">
+              <button
+                onClick={() => {
+                  doCloseTab(confirmCloseTabId);
+                  setConfirmCloseTabId(null);
+                }}
+                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors"
+              >
                 Discard & Close
               </button>
             </div>
@@ -1418,192 +2290,295 @@ export function WorkflowPage() {
       )}
 
       {/* Tab context menu (right-click) */}
-      {tabContextMenu && (() => {
-        const idx = tabs.findIndex(t => t.tabId === tabContextMenu.tabId)
-        const hasRight = idx < tabs.length - 1
-        const hasSaved = tabs.some(t => !t.isDirty && t.tabId !== tabContextMenu.tabId)
-        return (
-          <div ref={tabContextMenuRef}
-            className="fixed z-[9999] w-48 rounded-lg border border-border bg-popover shadow-xl py-1 text-xs"
-            style={{ left: tabContextMenu.x, top: tabContextMenu.y }}>
-            <button onClick={() => handleTabContextAction('close')}
-              className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors">
-              {t('workflow.tabClose', 'Close')}
-            </button>
-            <button onClick={() => handleTabContextAction('closeOthers')} disabled={tabs.length <= 1}
-              className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
-              {t('workflow.tabCloseOthers', 'Close Others')}
-            </button>
-            <button onClick={() => handleTabContextAction('closeRight')} disabled={!hasRight}
-              className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
-              {t('workflow.tabCloseRight', 'Close to the Right')}
-            </button>
-            <button onClick={() => handleTabContextAction('closeSaved')} disabled={!hasSaved}
-              className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
-              {t('workflow.tabCloseSaved', 'Close Saved')}
-            </button>
-            <div className="border-t border-border my-1" />
-            <button onClick={() => handleTabContextAction('closeAll')}
-              className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors text-red-500 dark:text-red-400">
-              {t('workflow.tabCloseAll', 'Close All')}
-            </button>
-          </div>
-        )
-      })()}
+      {tabContextMenu &&
+        (() => {
+          const idx = tabs.findIndex((t) => t.tabId === tabContextMenu.tabId);
+          const hasRight = idx < tabs.length - 1;
+          const hasSaved = tabs.some(
+            (t) => !t.isDirty && t.tabId !== tabContextMenu.tabId,
+          );
+          return (
+            <div
+              ref={tabContextMenuRef}
+              className="fixed z-[9999] w-48 rounded-lg border border-border bg-popover shadow-xl py-1 text-xs"
+              style={{ left: tabContextMenu.x, top: tabContextMenu.y }}
+            >
+              <button
+                onClick={() => handleTabContextAction("close")}
+                className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors"
+              >
+                {t("workflow.tabClose", "Close")}
+              </button>
+              <button
+                onClick={() => handleTabContextAction("closeOthers")}
+                disabled={tabs.length <= 1}
+                className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {t("workflow.tabCloseOthers", "Close Others")}
+              </button>
+              <button
+                onClick={() => handleTabContextAction("closeRight")}
+                disabled={!hasRight}
+                className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {t("workflow.tabCloseRight", "Close to the Right")}
+              </button>
+              <button
+                onClick={() => handleTabContextAction("closeSaved")}
+                disabled={!hasSaved}
+                className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                {t("workflow.tabCloseSaved", "Close Saved")}
+              </button>
+              <div className="border-t border-border my-1" />
+              <button
+                onClick={() => handleTabContextAction("closeAll")}
+                className="w-full text-left px-3 py-1.5 hover:bg-accent transition-colors text-red-500 dark:text-red-400"
+              >
+                {t("workflow.tabCloseAll", "Close All")}
+              </button>
+            </div>
+          );
+        })()}
 
       {/* Toasts — stacked at bottom center */}
       <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[1000] flex flex-col items-center gap-2">
-        {saveToast !== 'idle' && (
-          <div className={`px-4 py-2 rounded-lg shadow-lg text-xs font-medium
-            ${saveToast === 'saving' ? 'bg-blue-500/90 text-white' :
-              saveToast === 'saved' ? 'bg-green-500/90 text-white' :
-              'bg-red-500/90 text-white'}`}>
-            {saveToast === 'saving' && t('workflow.saving', 'Saving...')}
-            {saveToast === 'saved' && `✓ ${t('workflow.saved', 'Saved')}`}
-            {saveToast === 'error' && `✕ ${t('workflow.saveFailed', 'Save failed')}${saveToastMsg ? `: ${saveToastMsg}` : ''}`}
+        {saveToast !== "idle" && (
+          <div
+            className={`px-4 py-2 rounded-lg shadow-lg text-xs font-medium
+            ${
+              saveToast === "saving"
+                ? "bg-blue-500/90 text-white"
+                : saveToast === "saved"
+                  ? "bg-green-500/90 text-white"
+                  : "bg-red-500/90 text-white"
+            }`}
+          >
+            {saveToast === "saving" && t("workflow.saving", "Saving...")}
+            {saveToast === "saved" && `✓ ${t("workflow.saved", "Saved")}`}
+            {saveToast === "error" &&
+              `✕ ${t("workflow.saveFailed", "Save failed")}${saveToastMsg ? `: ${saveToastMsg}` : ""}`}
           </div>
         )}
         {execToast && (
-          <div className={`px-4 py-2.5 rounded-lg shadow-lg text-xs font-medium flex items-center gap-2
-            ${execToast.type === 'success' ? 'bg-green-500/90 text-white' : 'bg-red-500/90 text-white'}`}>
-            <span>{execToast.type === 'success' ? '✓' : '⚠'}</span>
+          <div
+            className={`px-4 py-2.5 rounded-lg shadow-lg text-xs font-medium flex items-center gap-2
+            ${execToast.type === "success" ? "bg-green-500/90 text-white" : "bg-red-500/90 text-white"}`}
+          >
+            <span>{execToast.type === "success" ? "✓" : "⚠"}</span>
             <span>{execToast.msg}</span>
-            <button onClick={() => setExecToast(null)} className="ml-1 opacity-70 hover:opacity-100">✕</button>
+            <button
+              onClick={() => setExecToast(null)}
+              className="ml-1 opacity-70 hover:opacity-100"
+            >
+              ✕
+            </button>
           </div>
         )}
         {ioToast && (
-          <div className={`px-4 py-2 rounded-lg shadow-lg text-xs font-medium
-            ${ioToast.type === 'success' ? 'bg-green-500/90 text-white' : 'bg-red-500/90 text-white'}`}>
-            {ioToast.type === 'success' ? '✓' : '✕'} {ioToast.msg}
+          <div
+            className={`px-4 py-2 rounded-lg shadow-lg text-xs font-medium
+            ${ioToast.type === "success" ? "bg-green-500/90 text-white" : "bg-red-500/90 text-white"}`}
+          >
+            {ioToast.type === "success" ? "✓" : "✕"} {ioToast.msg}
           </div>
         )}
       </div>
 
       {/* Workflow Guide */}
-      <WorkflowGuide open={guide.open} onClose={guide.dismiss} onStepChange={setGuideStepKey} />
+      <WorkflowGuide
+        open={guide.open}
+        onClose={guide.dismiss}
+        onStepChange={setGuideStepKey}
+      />
     </div>
-  )
+  );
 }
 
 /* ── Naming Dialog Component ───────────────────────────────────────── */
 
 /** Same format as auto-name in workflow.store when saving forRun (so dialog can pre-fill). */
 function defaultWorkflowName() {
-  return `Workflow ${new Date().toISOString().slice(0, 19).replace('T', ' ')}`
+  return `Workflow ${new Date().toISOString().slice(0, 19).replace("T", " ")}`;
 }
 
-function NamingDialog({ defaultValue, onConfirm }: { defaultValue: string; onConfirm: (result: { name: string; overwriteId?: string } | null) => void }) {
-  const { t } = useTranslation()
+function NamingDialog({
+  defaultValue,
+  onConfirm,
+}: {
+  defaultValue: string;
+  onConfirm: (result: { name: string; overwriteId?: string } | null) => void;
+}) {
+  const { t } = useTranslation();
   const [value, setValue] = useState(() => {
-    const d = defaultValue
-    if (!d || /^Untitled Workflow(\s+\d+)?$/.test(d)) return defaultWorkflowName()
-    return d
-  })
-  const [existingWorkflows, setExistingWorkflows] = useState<Array<{ id: string; name: string }>>([])
-  const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false)
-  const currentWorkflowId = useWorkflowStore(s => s.workflowId)
+    const d = defaultValue;
+    if (!d || /^Untitled Workflow(\s+\d+)?$/.test(d))
+      return defaultWorkflowName();
+    return d;
+  });
+  const [existingWorkflows, setExistingWorkflows] = useState<
+    Array<{ id: string; name: string }>
+  >([]);
+  const [showOverwriteConfirm, setShowOverwriteConfirm] = useState(false);
+  const currentWorkflowId = useWorkflowStore((s) => s.workflowId);
 
   // Load existing workflow names on mount
   useEffect(() => {
-    workflowIpc.list().then(list => {
-      setExistingWorkflows((list ?? []).filter(w => w.id !== currentWorkflowId).map(w => ({ id: w.id, name: w.name })))
-    }).catch(() => {})
-  }, [currentWorkflowId])
+    workflowIpc
+      .list()
+      .then((list) => {
+        setExistingWorkflows(
+          (list ?? [])
+            .filter((w) => w.id !== currentWorkflowId)
+            .map((w) => ({ id: w.id, name: w.name })),
+        );
+      })
+      .catch(() => {});
+  }, [currentWorkflowId]);
 
-  const trimmed = value.trim()
-  const duplicateWorkflow = trimmed.length > 0 ? existingWorkflows.find(w => w.name === trimmed) : undefined
+  const trimmed = value.trim();
+  const duplicateWorkflow =
+    trimmed.length > 0
+      ? existingWorkflows.find((w) => w.name === trimmed)
+      : undefined;
 
   const handleSubmit = () => {
-    if (!trimmed) return
+    if (!trimmed) return;
     if (duplicateWorkflow) {
-      setShowOverwriteConfirm(true)
-      return
+      setShowOverwriteConfirm(true);
+      return;
     }
-    onConfirm({ name: trimmed })
-  }
+    onConfirm({ name: trimmed });
+  };
 
   const handleOverwrite = () => {
     if (duplicateWorkflow) {
-      onConfirm({ name: trimmed, overwriteId: duplicateWorkflow.id })
+      onConfirm({ name: trimmed, overwriteId: duplicateWorkflow.id });
     }
-  }
+  };
 
   if (showOverwriteConfirm && duplicateWorkflow) {
     return (
-      <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60" onClick={() => setShowOverwriteConfirm(false)}>
-        <div className="w-[360px] rounded-xl border border-border bg-card p-5 shadow-xl" onClick={e => e.stopPropagation()}>
-          <h3 className="text-sm font-semibold mb-1">{t('workflow.overwriteWorkflow', 'Overwrite Workflow')}</h3>
+      <div
+        className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+        onClick={() => setShowOverwriteConfirm(false)}
+      >
+        <div
+          className="w-[360px] rounded-xl border border-border bg-card p-5 shadow-xl"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <h3 className="text-sm font-semibold mb-1">
+            {t("workflow.overwriteWorkflow", "Overwrite Workflow")}
+          </h3>
           <p className="text-xs text-muted-foreground mb-4">
-            {t('workflow.overwriteConfirm', { name: trimmed, defaultValue: 'A workflow named "{{name}}" already exists. Do you want to overwrite it?' })}
+            {t("workflow.overwriteConfirm", {
+              name: trimmed,
+              defaultValue:
+                'A workflow named "{{name}}" already exists. Do you want to overwrite it?',
+            })}
           </p>
           <div className="flex justify-end gap-2">
-            <button onClick={() => setShowOverwriteConfirm(false)}
-              className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors">
-              {t('workflow.cancel', 'Cancel')}
+            <button
+              onClick={() => setShowOverwriteConfirm(false)}
+              className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+            >
+              {t("workflow.cancel", "Cancel")}
             </button>
-            <button onClick={handleOverwrite}
-              className="px-4 py-1.5 rounded-md text-xs font-medium bg-orange-500 text-white hover:bg-orange-600 transition-colors">
-              {t('workflow.overwrite', 'Overwrite')}
+            <button
+              onClick={handleOverwrite}
+              className="px-4 py-1.5 rounded-md text-xs font-medium bg-orange-500 text-white hover:bg-orange-600 transition-colors"
+            >
+              {t("workflow.overwrite", "Overwrite")}
             </button>
           </div>
         </div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60" onClick={() => onConfirm(null)}>
-      <div className="w-[360px] rounded-xl border border-border bg-card p-5 shadow-xl" onClick={e => e.stopPropagation()}>
-        <h3 className="text-sm font-semibold mb-1">{t('workflow.nameYourWorkflow', 'Name your workflow')}</h3>
-        <p className="text-xs text-muted-foreground mb-3">{t('workflow.nameYourWorkflowDesc', 'Give it a name to save to disk.')}</p>
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+      onClick={() => onConfirm(null)}
+    >
+      <div
+        className="w-[360px] rounded-xl border border-border bg-card p-5 shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h3 className="text-sm font-semibold mb-1">
+          {t("workflow.nameYourWorkflow", "Name your workflow")}
+        </h3>
+        <p className="text-xs text-muted-foreground mb-3">
+          {t(
+            "workflow.nameYourWorkflowDesc",
+            "Give it a name to save to disk.",
+          )}
+        </p>
         <input
           type="text"
           value={value}
-          onChange={e => setValue(e.target.value)}
-          onKeyDown={e => e.key === 'Enter' && handleSubmit()}
-          placeholder={t('workflow.nameYourWorkflowPlaceholder', 'e.g. Product Image Pipeline')}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && handleSubmit()}
+          placeholder={t(
+            "workflow.nameYourWorkflowPlaceholder",
+            "e.g. Product Image Pipeline",
+          )}
           autoFocus
-          className={`w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 mb-1 ${duplicateWorkflow ? 'border-orange-500 focus:ring-orange-500/50' : 'border-input focus:ring-primary'}`}
+          className={`w-full rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 mb-1 ${duplicateWorkflow ? "border-orange-500 focus:ring-orange-500/50" : "border-input focus:ring-primary"}`}
         />
         {duplicateWorkflow && (
-          <p className="text-[11px] text-orange-400 mb-2">{t('workflow.nameExists', 'A workflow with this name already exists. Saving will overwrite it.')}</p>
+          <p className="text-[11px] text-orange-400 mb-2">
+            {t(
+              "workflow.nameExists",
+              "A workflow with this name already exists. Saving will overwrite it.",
+            )}
+          </p>
         )}
         {!duplicateWorkflow && <div className="mb-2" />}
         <div className="flex justify-end gap-2">
-          <button onClick={() => onConfirm(null)}
-            className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors">
-            {t('workflow.cancel', 'Cancel')}
+          <button
+            onClick={() => onConfirm(null)}
+            className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {t("workflow.cancel", "Cancel")}
           </button>
-          <button onClick={handleSubmit} disabled={!trimmed}
-            className="px-4 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
-            {t('workflow.save', 'Save')}
+          <button
+            onClick={handleSubmit}
+            disabled={!trimmed}
+            className="px-4 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            {t("workflow.save", "Save")}
           </button>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 /* ── History Dropdown — quick switch to saved workflows ─────────────── */
 
 /** Module-level cache so the list persists across open/close cycles */
-let _workflowListCache: Array<{ id: string; name: string; updatedAt: string }> | null = null
-let _workflowListCacheTime = 0
-const CACHE_TTL = 30_000 // refresh after 30 seconds
+let _workflowListCache: Array<{
+  id: string;
+  name: string;
+  updatedAt: string;
+}> | null = null;
+let _workflowListCacheTime = 0;
+const CACHE_TTL = 30_000; // refresh after 30 seconds
 
 /** Call this to invalidate the cache after save/create/delete */
 export function invalidateWorkflowListCache() {
-  _workflowListCache = null
-  _workflowListCacheTime = 0
+  _workflowListCache = null;
+  _workflowListCacheTime = 0;
 }
 
 /* ── Monitor Toggle Button ─────────────────────────────────────────── */
 function MonitorToggleBtn() {
-  const { t } = useTranslation()
-  const showPanel = useUIStore(s => s.showWorkflowResultsPanel)
-  const togglePanel = useUIStore(s => s.toggleWorkflowResultsPanel)
-  const runSessions = useExecutionStore(s => s.runSessions)
-  const activeRuns = runSessions.filter(s => s.status === 'running').length
+  const { t } = useTranslation();
+  const showPanel = useUIStore((s) => s.showWorkflowResultsPanel);
+  const togglePanel = useUIStore((s) => s.toggleWorkflowResultsPanel);
+  const runSessions = useExecutionStore((s) => s.runSessions);
+  const activeRuns = runSessions.filter((s) => s.status === "running").length;
 
   return (
     <Tooltip delayDuration={0}>
@@ -1612,8 +2587,8 @@ function MonitorToggleBtn() {
           onClick={togglePanel}
           className={`relative h-7 px-2 rounded-md border transition-colors flex items-center gap-1.5 ${
             showPanel
-              ? 'border-primary/50 bg-primary/10 text-primary'
-              : 'border-[hsl(var(--border))] text-muted-foreground hover:text-foreground hover:bg-accent'
+              ? "border-primary/50 bg-primary/10 text-primary"
+              : "border-[hsl(var(--border))] text-muted-foreground hover:text-foreground hover:bg-accent"
           }`}
         >
           <History className="w-3.5 h-3.5" />
@@ -1624,141 +2599,246 @@ function MonitorToggleBtn() {
           )}
         </button>
       </TooltipTrigger>
-      <TooltipContent side="bottom">{t('workflow.executionMonitor', 'History')}</TooltipContent>
+      <TooltipContent side="bottom">
+        {t("workflow.executionMonitor", "History")}
+      </TooltipContent>
     </Tooltip>
-  )
+  );
 }
 
 /* ── More Menu — collapsed Import / Export / Save ──────────────────── */
-function MoreMenu({ workflowId, onImport, onExport, onSave, onSaveAsTemplate, className, 'data-guide': dataGuide, position = 'top' }: {
-  workflowId: string | null
-  onImport: () => void
-  onExport: () => void
-  onSave: () => void
-  onSaveAsTemplate: () => void
-  className?: string
-  'data-guide'?: string
-  position?: 'top' | 'left'
+function MoreMenu({
+  workflowId,
+  onImport,
+  onExport,
+  onSave,
+  onSaveAsTemplate,
+  className,
+  "data-guide": dataGuide,
+  position = "top",
+}: {
+  workflowId: string | null;
+  onImport: () => void;
+  onExport: () => void;
+  onSave: () => void;
+  onSaveAsTemplate: () => void;
+  className?: string;
+  "data-guide"?: string;
+  position?: "top" | "left";
 }) {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-  const dropdownRef = useRef<HTMLDivElement>(null)
-  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 })
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [dropdownPos, setDropdownPos] = useState<{ top: number; left: number }>(
+    { top: 0, left: 0 },
+  );
 
   useEffect(() => {
-    if (!open) return
+    if (!open) return;
     const handler = (e: PointerEvent) => {
-      const target = e.target as Node
-      if (ref.current && !ref.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) setOpen(false)
-    }
-    const keyHandler = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
-    window.addEventListener('pointerdown', handler, true)
-    window.addEventListener('keydown', keyHandler)
+      const target = e.target as Node;
+      if (
+        ref.current &&
+        !ref.current.contains(target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target)
+      )
+        setOpen(false);
+    };
+    const keyHandler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", handler, true);
+    window.addEventListener("keydown", keyHandler);
     return () => {
-      window.removeEventListener('pointerdown', handler, true)
-      window.removeEventListener('keydown', keyHandler)
-    }
-  }, [open])
+      window.removeEventListener("pointerdown", handler, true);
+      window.removeEventListener("keydown", keyHandler);
+    };
+  }, [open]);
 
   const handleToggle = useCallback(() => {
     if (!open && ref.current) {
-      const rect = ref.current.getBoundingClientRect()
-      if (position === 'left') {
-        setDropdownPos({ top: rect.top, left: rect.right + 8 })
+      const rect = ref.current.getBoundingClientRect();
+      if (position === "left") {
+        setDropdownPos({ top: rect.top, left: rect.right + 8 });
       } else {
-        setDropdownPos({ top: rect.bottom + 4, left: rect.right - 144 })
+        setDropdownPos({ top: rect.bottom + 4, left: rect.right - 144 });
       }
     }
-    setOpen(v => !v)
-  }, [open, position])
+    setOpen((v) => !v);
+  }, [open, position]);
 
   return (
-    <div className={`relative ${className ?? ''}`} ref={ref} data-guide={dataGuide}>
+    <div
+      className={`relative ${className ?? ""}`}
+      ref={ref}
+      data-guide={dataGuide}
+    >
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
           <button
             onClick={handleToggle}
             className={`flex items-center justify-center transition-colors ${
-              position === 'left'
-                ? `w-9 h-9 rounded-b-lg ${open ? 'bg-accent text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`
-                : `h-7 w-7 rounded-md ${open ? 'bg-accent text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`
+              position === "left"
+                ? `w-9 h-9 rounded-b-lg ${open ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`
+                : `h-7 w-7 rounded-md ${open ? "bg-accent text-foreground" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`
             }`}
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
-              <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>
+              <circle cx="12" cy="5" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="12" cy="19" r="2" />
             </svg>
           </button>
         </TooltipTrigger>
-        {!open && <TooltipContent side={position === 'left' ? 'right' : 'left'}>{t('workflow.more', 'More')}</TooltipContent>}
+        {!open && (
+          <TooltipContent side={position === "left" ? "right" : "left"}>
+            {t("workflow.more", "More")}
+          </TooltipContent>
+        )}
       </Tooltip>
-      {open && ReactDOM.createPortal(
-        <div ref={dropdownRef} className="fixed z-[9999] w-36 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-xl py-1"
-          style={{ top: dropdownPos.top, left: dropdownPos.left }}>
-          <button onClick={() => { onImport(); setOpen(false) }}
-            className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-            </svg>
-            {t('workflow.import', 'Import')}
-          </button>
-          <button onClick={() => { onExport(); setOpen(false) }}
-            className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
-            </svg>
-            {t('workflow.export', 'Export')}
-          </button>
-          {workflowId && (
-            <button onClick={() => { onSaveAsTemplate(); setOpen(false) }}
-              className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2">
-              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
+      {open &&
+        ReactDOM.createPortal(
+          <div
+            ref={dropdownRef}
+            className="fixed z-[9999] w-36 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-xl py-1"
+            style={{ top: dropdownPos.top, left: dropdownPos.left }}
+          >
+            <button
+              onClick={() => {
+                onImport();
+                setOpen(false);
+              }}
+              className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2"
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
               </svg>
-              {t('workflow.saveAsTemplate', 'Save as Template')}
+              {t("workflow.import", "Import")}
             </button>
-          )}
-          <button onClick={() => { onSave(); setOpen(false) }}
-            className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/>
-            </svg>
-            {t('workflow.save', 'Save')}
-          </button>
-        </div>,
-        document.body
-      )}
+            <button
+              onClick={() => {
+                onExport();
+                setOpen(false);
+              }}
+              className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2"
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
+              </svg>
+              {t("workflow.export", "Export")}
+            </button>
+            {workflowId && (
+              <button
+                onClick={() => {
+                  onSaveAsTemplate();
+                  setOpen(false);
+                }}
+                className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2"
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                  <polyline points="17 21 17 13 7 13 7 21" />
+                  <polyline points="7 3 7 8 15 8" />
+                </svg>
+                {t("workflow.saveAsTemplate", "Save as Template")}
+              </button>
+            )}
+            <button
+              onClick={() => {
+                onSave();
+                setOpen(false);
+              }}
+              className="w-full px-3 py-1.5 text-xs text-left hover:bg-[hsl(var(--accent))] transition-colors flex items-center gap-2"
+            >
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+                <polyline points="17 21 17 13 7 13 7 21" />
+                <polyline points="7 3 7 8 15 8" />
+              </svg>
+              {t("workflow.save", "Save")}
+            </button>
+          </div>,
+          document.body,
+        )}
     </div>
-  )
+  );
 }
 
 /* ── 3D Model Viewer for preview overlay ───────────────────────────── */
 function ModelViewerOverlay({ src }: { src: string }) {
-  const containerRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    import('@google/model-viewer').catch(() => {})
-  }, [])
+    import("@google/model-viewer").catch(() => {});
+  }, []);
 
   useEffect(() => {
-    if (!containerRef.current) return
-    const el = document.createElement('model-viewer') as HTMLElement
-    el.setAttribute('src', src)
-    el.setAttribute('camera-controls', '')
-    el.setAttribute('auto-rotate', '')
-    el.setAttribute('shadow-intensity', '1')
-    el.setAttribute('environment-image', 'neutral')
-    el.style.width = '100%'
-    el.style.height = '100%'
-    el.style.borderRadius = '12px'
-    el.style.background = 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)'
-    containerRef.current.innerHTML = ''
-    containerRef.current.appendChild(el)
-    return () => { if (containerRef.current) containerRef.current.innerHTML = '' }
-  }, [src])
+    if (!containerRef.current) return;
+    const el = document.createElement("model-viewer") as HTMLElement;
+    el.setAttribute("src", src);
+    el.setAttribute("camera-controls", "");
+    el.setAttribute("auto-rotate", "");
+    el.setAttribute("shadow-intensity", "1");
+    el.setAttribute("environment-image", "neutral");
+    el.style.width = "100%";
+    el.style.height = "100%";
+    el.style.borderRadius = "12px";
+    el.style.background =
+      "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)";
+    containerRef.current.innerHTML = "";
+    containerRef.current.appendChild(el);
+    return () => {
+      if (containerRef.current) containerRef.current.innerHTML = "";
+    };
+  }, [src]);
 
   return (
-    <div ref={containerRef} onClick={e => e.stopPropagation()}
-      className="w-[80%] max-w-[800px] h-[70vh] rounded-xl shadow-2xl overflow-hidden" />
-  )
+    <div
+      ref={containerRef}
+      onClick={(e) => e.stopPropagation()}
+      className="w-[80%] max-w-[800px] h-[70vh] rounded-xl shadow-2xl overflow-hidden"
+    />
+  );
 }
diff --git a/src/workflow/browser/ffmpeg-helpers.ts b/src/workflow/browser/ffmpeg-helpers.ts
index e55f9175..0a66a594 100644
--- a/src/workflow/browser/ffmpeg-helpers.ts
+++ b/src/workflow/browser/ffmpeg-helpers.ts
@@ -4,122 +4,193 @@
  */
 
 interface ConvertOptions {
-  videoCodec?: string
-  videoBitrate?: string
-  audioCodec?: string
-  audioBitrate?: string
-  resolution?: string
+  videoCodec?: string;
+  videoBitrate?: string;
+  audioCodec?: string;
+  audioBitrate?: string;
+  resolution?: string;
 }
 
 interface WorkerResult {
-  data: ArrayBuffer
-  filename: string
+  data: ArrayBuffer;
+  filename: string;
 }
 
 function createWorkerPromise<T>(
-  handler: (worker: Worker, resolve: (v: T) => void, reject: (e: Error) => void) => void
+  handler: (
+    worker: Worker,
+    resolve: (v: T) => void,
+    reject: (e: Error) => void,
+  ) => void,
 ): Promise<T> {
   const worker = new Worker(
-    new URL('../../workers/ffmpeg.worker.ts', import.meta.url),
-    { type: 'module' }
-  )
+    new URL("../../workers/ffmpeg.worker.ts", import.meta.url),
+    { type: "module" },
+  );
   return new Promise<T>((resolve, reject) => {
-    handler(worker, resolve, reject)
+    handler(worker, resolve, reject);
   }).finally(() => {
-    worker.postMessage({ type: 'dispose' })
-    worker.terminate()
-  })
+    worker.postMessage({ type: "dispose" });
+    worker.terminate();
+  });
 }
 
-async function urlToArrayBuffer(url: string): Promise<{ buffer: ArrayBuffer; name: string }> {
-  const resp = await fetch(url)
-  if (!resp.ok) throw new Error(`Failed to fetch ${url}: ${resp.status}`)
-  const buffer = await resp.arrayBuffer()
-  const name = url.split('/').pop() || 'input'
-  return { buffer, name }
+async function urlToArrayBuffer(
+  url: string,
+): Promise<{ buffer: ArrayBuffer; name: string }> {
+  const resp = await fetch(url);
+  if (!resp.ok) throw new Error(`Failed to fetch ${url}: ${resp.status}`);
+  const buffer = await resp.arrayBuffer();
+  const name = url.split("/").pop() || "input";
+  return { buffer, name };
 }
 
 const MIME_MAP: Record<string, string> = {
-  mp4: 'video/mp4', webm: 'video/webm', mov: 'video/quicktime',
-  avi: 'video/x-msvideo', mkv: 'video/x-matroska',
-  mp3: 'audio/mpeg', wav: 'audio/wav', ogg: 'audio/ogg',
-  flac: 'audio/flac', aac: 'audio/aac', m4a: 'audio/mp4',
-  png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg',
-  webp: 'image/webp', gif: 'image/gif', bmp: 'image/bmp',
-}
+  mp4: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  avi: "video/x-msvideo",
+  mkv: "video/x-matroska",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  flac: "audio/flac",
+  aac: "audio/aac",
+  m4a: "audio/mp4",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  gif: "image/gif",
+  bmp: "image/bmp",
+};
 
 function resultToBlobUrl(result: WorkerResult): string {
-  const ext = (result.filename.split('.').pop() || '').toLowerCase()
-  const mime = MIME_MAP[ext] || 'application/octet-stream'
-  const blob = new Blob([result.data], { type: mime })
-  return URL.createObjectURL(blob)
+  const ext = (result.filename.split(".").pop() || "").toLowerCase();
+  const mime = MIME_MAP[ext] || "application/octet-stream";
+  const blob = new Blob([result.data], { type: mime });
+  return URL.createObjectURL(blob);
 }
 
-export async function ffmpegMerge(inputUrls: string[], format: string): Promise<string> {
-  const fetched = await Promise.all(inputUrls.map(urlToArrayBuffer))
-  const files = fetched.map(f => f.buffer)
-  const fileNames = fetched.map(f => f.name)
+export async function ffmpegMerge(
+  inputUrls: string[],
+  format: string,
+): Promise<string> {
+  const fetched = await Promise.all(inputUrls.map(urlToArrayBuffer));
+  const files = fetched.map((f) => f.buffer);
+  const fileNames = fetched.map((f) => f.name);
 
-  const result = await createWorkerPromise<WorkerResult>((worker, resolve, reject) => {
-    const id = 0
-    worker.onmessage = (e) => {
-      if (e.data.type === 'result' && e.data.payload.id === id) {
-        resolve({ data: e.data.payload.data, filename: e.data.payload.filename })
-      } else if (e.data.type === 'error') {
-        reject(new Error(e.data.payload))
-      }
-    }
-    worker.postMessage(
-      { type: 'merge', payload: { files, fileNames, outputFormat: format, outputExt: format, id } },
-      { transfer: files }
-    )
-  })
+  const result = await createWorkerPromise<WorkerResult>(
+    (worker, resolve, reject) => {
+      const id = 0;
+      worker.onmessage = (e) => {
+        if (e.data.type === "result" && e.data.payload.id === id) {
+          resolve({
+            data: e.data.payload.data,
+            filename: e.data.payload.filename,
+          });
+        } else if (e.data.type === "error") {
+          reject(new Error(e.data.payload));
+        }
+      };
+      worker.postMessage(
+        {
+          type: "merge",
+          payload: {
+            files,
+            fileNames,
+            outputFormat: format,
+            outputExt: format,
+            id,
+          },
+        },
+        { transfer: files },
+      );
+    },
+  );
 
-  return resultToBlobUrl(result)
+  return resultToBlobUrl(result);
 }
 
 export async function ffmpegTrim(
-  inputUrl: string, startTime: number, endTime: number, format: string
+  inputUrl: string,
+  startTime: number,
+  endTime: number,
+  format: string,
 ): Promise<string> {
-  const { buffer, name } = await urlToArrayBuffer(inputUrl)
+  const { buffer, name } = await urlToArrayBuffer(inputUrl);
 
-  const result = await createWorkerPromise<WorkerResult>((worker, resolve, reject) => {
-    const id = 0
-    worker.onmessage = (e) => {
-      if (e.data.type === 'result' && e.data.payload.id === id) {
-        resolve({ data: e.data.payload.data, filename: e.data.payload.filename })
-      } else if (e.data.type === 'error') {
-        reject(new Error(e.data.payload))
-      }
-    }
-    worker.postMessage(
-      { type: 'trim', payload: { file: buffer, fileName: name, startTime, endTime, outputFormat: format, outputExt: format, id } },
-      { transfer: [buffer] }
-    )
-  })
+  const result = await createWorkerPromise<WorkerResult>(
+    (worker, resolve, reject) => {
+      const id = 0;
+      worker.onmessage = (e) => {
+        if (e.data.type === "result" && e.data.payload.id === id) {
+          resolve({
+            data: e.data.payload.data,
+            filename: e.data.payload.filename,
+          });
+        } else if (e.data.type === "error") {
+          reject(new Error(e.data.payload));
+        }
+      };
+      worker.postMessage(
+        {
+          type: "trim",
+          payload: {
+            file: buffer,
+            fileName: name,
+            startTime,
+            endTime,
+            outputFormat: format,
+            outputExt: format,
+            id,
+          },
+        },
+        { transfer: [buffer] },
+      );
+    },
+  );
 
-  return resultToBlobUrl(result)
+  return resultToBlobUrl(result);
 }
 
 export async function ffmpegConvert(
-  inputUrl: string, outputFormat: string, outputExt: string, options?: ConvertOptions
+  inputUrl: string,
+  outputFormat: string,
+  outputExt: string,
+  options?: ConvertOptions,
 ): Promise<string> {
-  const { buffer, name } = await urlToArrayBuffer(inputUrl)
+  const { buffer, name } = await urlToArrayBuffer(inputUrl);
 
-  const result = await createWorkerPromise<WorkerResult>((worker, resolve, reject) => {
-    const id = 0
-    worker.onmessage = (e) => {
-      if (e.data.type === 'result' && e.data.payload.id === id) {
-        resolve({ data: e.data.payload.data, filename: e.data.payload.filename })
-      } else if (e.data.type === 'error') {
-        reject(new Error(e.data.payload))
-      }
-    }
-    worker.postMessage(
-      { type: 'convert', payload: { file: buffer, fileName: name, outputFormat, outputExt, options, id } },
-      { transfer: [buffer] }
-    )
-  })
+  const result = await createWorkerPromise<WorkerResult>(
+    (worker, resolve, reject) => {
+      const id = 0;
+      worker.onmessage = (e) => {
+        if (e.data.type === "result" && e.data.payload.id === id) {
+          resolve({
+            data: e.data.payload.data,
+            filename: e.data.payload.filename,
+          });
+        } else if (e.data.type === "error") {
+          reject(new Error(e.data.payload));
+        }
+      };
+      worker.postMessage(
+        {
+          type: "convert",
+          payload: {
+            file: buffer,
+            fileName: name,
+            outputFormat,
+            outputExt,
+            options,
+            id,
+          },
+        },
+        { transfer: [buffer] },
+      );
+    },
+  );
 
-  return resultToBlobUrl(result)
+  return resultToBlobUrl(result);
 }
diff --git a/src/workflow/browser/node-definitions.ts b/src/workflow/browser/node-definitions.ts
index 9d7dbdf0..8a0d62dc 100644
--- a/src/workflow/browser/node-definitions.ts
+++ b/src/workflow/browser/node-definitions.ts
@@ -2,329 +2,520 @@
  * Node type definitions for browser (no Electron).
  * Mirrors the definitions used in electron/workflow/nodes so the palette and config UI work.
  */
-import type { NodeTypeDefinition } from '@/workflow/types/node-defs'
+import type { NodeTypeDefinition } from "@/workflow/types/node-defs";
 
 // ─── Input ─────────────────────────────────────────────────────────────────
 export const mediaUploadDef: NodeTypeDefinition = {
-  type: 'input/media-upload',
-  category: 'input',
-  label: 'Upload',
-  inputs: [{ key: 'media', label: 'Media', dataType: 'url', required: false }],
-  outputs: [{ key: 'output', label: 'URL', dataType: 'url', required: true }],
+  type: "input/media-upload",
+  category: "input",
+  label: "Upload",
+  inputs: [{ key: "media", label: "Media", dataType: "url", required: false }],
+  outputs: [{ key: "output", label: "URL", dataType: "url", required: true }],
   params: [
-    { key: 'uploadedUrl', label: 'URL', type: 'string', dataType: 'url', connectable: false, default: '' },
-    { key: 'mediaType', label: 'Type', type: 'string', dataType: 'text', connectable: false, default: '' },
-    { key: 'fileName', label: 'File', type: 'string', dataType: 'text', connectable: false, default: '' }
-  ]
-}
+    {
+      key: "uploadedUrl",
+      label: "URL",
+      type: "string",
+      dataType: "url",
+      connectable: false,
+      default: "",
+    },
+    {
+      key: "mediaType",
+      label: "Type",
+      type: "string",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+    {
+      key: "fileName",
+      label: "File",
+      type: "string",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+  ],
+};
 
 export const textInputDef: NodeTypeDefinition = {
-  type: 'input/text-input',
-  category: 'input',
-  label: 'Text',
+  type: "input/text-input",
+  category: "input",
+  label: "Text",
   inputs: [],
-  outputs: [{ key: 'output', label: 'Text', dataType: 'text', required: true }],
+  outputs: [{ key: "output", label: "Text", dataType: "text", required: true }],
   params: [
-    { key: 'text', label: 'Text', type: 'textarea', dataType: 'text', connectable: false, default: '' }
-  ]
-}
+    {
+      key: "text",
+      label: "Text",
+      type: "textarea",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+  ],
+};
 
 // ─── AI Task ───────────────────────────────────────────────────────────────
 export const aiTaskDef: NodeTypeDefinition = {
-  type: 'ai-task/run',
-  category: 'ai-task',
-  label: '',
+  type: "ai-task/run",
+  category: "ai-task",
+  label: "",
   inputs: [],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'url', required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "url", required: true },
+  ],
   params: [
-    { key: 'modelId', label: 'Model', type: 'string', dataType: 'text', connectable: false, default: '' }
-  ]
-}
+    {
+      key: "modelId",
+      label: "Model",
+      type: "string",
+      dataType: "text",
+      connectable: false,
+      default: "",
+    },
+  ],
+};
 
 // ─── Output ────────────────────────────────────────────────────────────────
 export const fileExportDef: NodeTypeDefinition = {
-  type: 'output/file',
-  category: 'output',
-  label: 'File Export',
-  inputs: [{ key: 'url', label: 'URL', dataType: 'url', required: true }],
+  type: "output/file",
+  category: "output",
+  label: "File Export",
+  inputs: [{ key: "url", label: "URL", dataType: "url", required: true }],
   outputs: [],
   params: [
-    { key: 'outputDir', label: 'Output Directory', type: 'string', default: '' },
-    { key: 'filename', label: 'Filename Prefix', type: 'string', default: 'output' },
     {
-      key: 'format',
-      label: 'Format',
-      type: 'select',
-      default: 'auto',
+      key: "outputDir",
+      label: "Output Directory",
+      type: "string",
+      default: "",
+    },
+    {
+      key: "filename",
+      label: "Filename Prefix",
+      type: "string",
+      default: "output",
+    },
+    {
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "auto",
       options: [
-        { label: 'Auto', value: 'auto' },
-        { label: 'MP4', value: 'mp4' },
-        { label: 'PNG', value: 'png' },
-        { label: 'JPG', value: 'jpg' },
-        { label: 'MP3', value: 'mp3' },
-        { label: 'WAV', value: 'wav' }
-      ]
-    }
-  ]
-}
+        { label: "Auto", value: "auto" },
+        { label: "MP4", value: "mp4" },
+        { label: "PNG", value: "png" },
+        { label: "JPG", value: "jpg" },
+        { label: "MP3", value: "mp3" },
+        { label: "WAV", value: "wav" },
+      ],
+    },
+  ],
+};
 
 export const previewDisplayDef: NodeTypeDefinition = {
-  type: 'output/preview',
-  category: 'output',
-  label: 'Preview',
-  inputs: [{ key: 'input', label: 'URL', dataType: 'url', required: true }],
+  type: "output/preview",
+  category: "output",
+  label: "Preview",
+  inputs: [{ key: "input", label: "URL", dataType: "url", required: true }],
   outputs: [],
   params: [
-    { key: 'autoDetect', label: 'Auto-detect Type', type: 'boolean', default: true },
     {
-      key: 'forceType',
-      label: 'Force Type',
-      type: 'select',
-      default: 'auto',
+      key: "autoDetect",
+      label: "Auto-detect Type",
+      type: "boolean",
+      default: true,
+    },
+    {
+      key: "forceType",
+      label: "Force Type",
+      type: "select",
+      default: "auto",
       options: [
-        { label: 'Auto', value: 'auto' },
-        { label: 'Image', value: 'image' },
-        { label: 'Video', value: 'video' },
-        { label: 'Audio', value: 'audio' },
-        { label: '3D Model', value: '3d' }
-      ]
-    }
-  ]
-}
+        { label: "Auto", value: "auto" },
+        { label: "Image", value: "image" },
+        { label: "Video", value: "video" },
+        { label: "Audio", value: "audio" },
+        { label: "3D Model", value: "3d" },
+      ],
+    },
+  ],
+};
 
 // ─── Free tools ─────────────────────────────────────────────────────────────
 const IMAGE_ENHANCER_OPTS = [
-  { label: 'Slim (fast)', value: 'slim' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'Thick (quality)', value: 'thick' }
-]
+  { label: "Slim (fast)", value: "slim" },
+  { label: "Medium", value: "medium" },
+  { label: "Thick (quality)", value: "thick" },
+];
 const SCALE_OPTS = [
-  { label: '2×', value: '2x' },
-  { label: '3×', value: '3x' },
-  { label: '4×', value: '4x' }
-]
+  { label: "2×", value: "2x" },
+  { label: "3×", value: "3x" },
+  { label: "4×", value: "4x" },
+];
 
 export const imageEnhancerDef: NodeTypeDefinition = {
-  type: 'free-tool/image-enhancer',
-  category: 'free-tool',
-  label: 'Image Enhancer',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
+  type: "free-tool/image-enhancer",
+  category: "free-tool",
+  label: "Image Enhancer",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
   params: [
-    { key: 'model', label: 'Model', type: 'select', default: 'slim', dataType: 'text', connectable: false, options: IMAGE_ENHANCER_OPTS },
-    { key: 'scale', label: 'Scale', type: 'select', default: '2x', dataType: 'text', connectable: false, options: SCALE_OPTS }
-  ]
-}
+    {
+      key: "model",
+      label: "Model",
+      type: "select",
+      default: "slim",
+      dataType: "text",
+      connectable: false,
+      options: IMAGE_ENHANCER_OPTS,
+    },
+    {
+      key: "scale",
+      label: "Scale",
+      type: "select",
+      default: "2x",
+      dataType: "text",
+      connectable: false,
+      options: SCALE_OPTS,
+    },
+  ],
+};
 
 export const backgroundRemoverDef: NodeTypeDefinition = {
-  type: 'free-tool/background-remover',
-  category: 'free-tool',
-  label: 'Background Remover',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
+  type: "free-tool/background-remover",
+  category: "free-tool",
+  label: "Background Remover",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
   params: [
     {
-      key: 'model',
-      label: 'Model',
-      type: 'select',
-      default: 'isnet_fp16',
-      dataType: 'text',
+      key: "model",
+      label: "Model",
+      type: "select",
+      default: "isnet_fp16",
+      dataType: "text",
       connectable: false,
       options: [
-        { label: 'ISNet Quint8 (fast)', value: 'isnet_quint8' },
-        { label: 'ISNet FP16', value: 'isnet_fp16' },
-        { label: 'ISNet (quality)', value: 'isnet' }
-      ]
-    }
-  ]
-}
+        { label: "ISNet Quint8 (fast)", value: "isnet_quint8" },
+        { label: "ISNet FP16", value: "isnet_fp16" },
+        { label: "ISNet (quality)", value: "isnet" },
+      ],
+    },
+  ],
+};
 
 export const faceEnhancerDef: NodeTypeDefinition = {
-  type: 'free-tool/face-enhancer',
-  category: 'free-tool',
-  label: 'Face Enhancer',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
-  params: []
-}
+  type: "free-tool/face-enhancer",
+  category: "free-tool",
+  label: "Face Enhancer",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
+  params: [],
+};
 
 export const videoEnhancerDef: NodeTypeDefinition = {
-  type: 'free-tool/video-enhancer',
-  category: 'free-tool',
-  label: 'Video Enhancer',
-  inputs: [{ key: 'input', label: 'Video', dataType: 'video', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'video', required: true }],
+  type: "free-tool/video-enhancer",
+  category: "free-tool",
+  label: "Video Enhancer",
+  inputs: [{ key: "input", label: "Video", dataType: "video", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "video", required: true },
+  ],
   params: [
-    { key: 'model', label: 'Model', type: 'select', default: 'slim', dataType: 'text', connectable: false, options: IMAGE_ENHANCER_OPTS },
-    { key: 'scale', label: 'Scale', type: 'select', default: '2x', dataType: 'text', connectable: false, options: SCALE_OPTS }
-  ]
-}
+    {
+      key: "model",
+      label: "Model",
+      type: "select",
+      default: "slim",
+      dataType: "text",
+      connectable: false,
+      options: IMAGE_ENHANCER_OPTS,
+    },
+    {
+      key: "scale",
+      label: "Scale",
+      type: "select",
+      default: "2x",
+      dataType: "text",
+      connectable: false,
+      options: SCALE_OPTS,
+    },
+  ],
+};
 
 export const faceSwapperDef: NodeTypeDefinition = {
-  type: 'free-tool/face-swapper',
-  category: 'free-tool',
-  label: 'Face Swapper',
+  type: "free-tool/face-swapper",
+  category: "free-tool",
+  label: "Face Swapper",
   inputs: [
-    { key: 'source', label: 'Source Face', dataType: 'image', required: true },
-    { key: 'target', label: 'Target Image', dataType: 'image', required: true }
+    { key: "source", label: "Source Face", dataType: "image", required: true },
+    { key: "target", label: "Target Image", dataType: "image", required: true },
+  ],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
   ],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
-  params: []
-}
+  params: [],
+};
 
 export const imageEraserDef: NodeTypeDefinition = {
-  type: 'free-tool/image-eraser',
-  category: 'free-tool',
-  label: 'Image Eraser',
+  type: "free-tool/image-eraser",
+  category: "free-tool",
+  label: "Image Eraser",
   inputs: [
-    { key: 'input', label: 'Image', dataType: 'image', required: true },
-    { key: 'mask_image', label: 'Mask', dataType: 'image', required: true }
+    { key: "input", label: "Image", dataType: "image", required: true },
+    { key: "mask_image", label: "Mask", dataType: "image", required: true },
   ],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
-  params: []
-}
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
+  params: [],
+};
 
 export const segmentAnythingDef: NodeTypeDefinition = {
-  type: 'free-tool/segment-anything',
-  category: 'free-tool',
-  label: 'Segment Anything',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Mask', dataType: 'image', required: true }],
-  params: [{ key: 'invertMask', label: 'Invert Mask', type: 'boolean', default: false }]
-}
+  type: "free-tool/segment-anything",
+  category: "free-tool",
+  label: "Segment Anything",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Mask", dataType: "image", required: true },
+  ],
+  params: [
+    {
+      key: "invertMask",
+      label: "Invert Mask",
+      type: "boolean",
+      default: false,
+    },
+  ],
+};
 
 const VIDEO_FORMATS = [
-  { label: 'MP4 (H.264)', value: 'mp4-h264' },
-  { label: 'MP4 (H.265/HEVC)', value: 'mp4-h265' },
-  { label: 'WebM (VP9)', value: 'webm-vp9' },
-  { label: 'WebM (VP8)', value: 'webm-vp8' },
-  { label: 'MOV', value: 'mov' },
-  { label: 'AVI', value: 'avi' },
-  { label: 'MKV', value: 'mkv' }
-]
+  { label: "MP4 (H.264)", value: "mp4-h264" },
+  { label: "MP4 (H.265/HEVC)", value: "mp4-h265" },
+  { label: "WebM (VP9)", value: "webm-vp9" },
+  { label: "WebM (VP8)", value: "webm-vp8" },
+  { label: "MOV", value: "mov" },
+  { label: "AVI", value: "avi" },
+  { label: "MKV", value: "mkv" },
+];
 const QUALITY_PRESETS = [
-  { label: 'Low (Fast)', value: 'low' },
-  { label: 'Medium', value: 'medium' },
-  { label: 'High', value: 'high' },
-  { label: 'Ultra', value: 'ultra' }
-]
+  { label: "Low (Fast)", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "High", value: "high" },
+  { label: "Ultra", value: "ultra" },
+];
 const RESOLUTION_PRESETS = [
-  { label: 'Original', value: 'original' },
-  { label: '1080p', value: '1920:1080' },
-  { label: '720p', value: '1280:720' },
-  { label: '480p', value: '854:480' }
-]
+  { label: "Original", value: "original" },
+  { label: "1080p", value: "1920:1080" },
+  { label: "720p", value: "1280:720" },
+  { label: "480p", value: "854:480" },
+];
 
 export const videoConverterDef: NodeTypeDefinition = {
-  type: 'free-tool/video-converter',
-  category: 'free-tool',
-  label: 'Video Converter',
-  inputs: [{ key: 'input', label: 'Video', dataType: 'video', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'video', required: true }],
+  type: "free-tool/video-converter",
+  category: "free-tool",
+  label: "Video Converter",
+  inputs: [{ key: "input", label: "Video", dataType: "video", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "video", required: true },
+  ],
   params: [
-    { key: 'format', label: 'Format', type: 'select', default: 'mp4-h264', dataType: 'text', connectable: false, options: VIDEO_FORMATS },
-    { key: 'quality', label: 'Quality', type: 'select', default: 'medium', dataType: 'text', connectable: false, options: QUALITY_PRESETS },
-    { key: 'resolution', label: 'Resolution', type: 'select', default: 'original', dataType: 'text', connectable: false, options: RESOLUTION_PRESETS }
-  ]
-}
+    {
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "mp4-h264",
+      dataType: "text",
+      connectable: false,
+      options: VIDEO_FORMATS,
+    },
+    {
+      key: "quality",
+      label: "Quality",
+      type: "select",
+      default: "medium",
+      dataType: "text",
+      connectable: false,
+      options: QUALITY_PRESETS,
+    },
+    {
+      key: "resolution",
+      label: "Resolution",
+      type: "select",
+      default: "original",
+      dataType: "text",
+      connectable: false,
+      options: RESOLUTION_PRESETS,
+    },
+  ],
+};
 
-const AUDIO_FORMATS = ['mp3', 'wav', 'flac', 'm4a', 'ogg'].map(v => ({ label: v.toUpperCase(), value: v }))
+const AUDIO_FORMATS = ["mp3", "wav", "flac", "m4a", "ogg"].map((v) => ({
+  label: v.toUpperCase(),
+  value: v,
+}));
 
 export const audioConverterDef: NodeTypeDefinition = {
-  type: 'free-tool/audio-converter',
-  category: 'free-tool',
-  label: 'Audio Converter',
-  inputs: [{ key: 'input', label: 'Audio', dataType: 'audio', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'audio', required: true }],
+  type: "free-tool/audio-converter",
+  category: "free-tool",
+  label: "Audio Converter",
+  inputs: [{ key: "input", label: "Audio", dataType: "audio", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "audio", required: true },
+  ],
   params: [
-    { key: 'format', label: 'Format', type: 'select', default: 'mp3', dataType: 'text', connectable: false, options: AUDIO_FORMATS }
-  ]
-}
+    {
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "mp3",
+      dataType: "text",
+      connectable: false,
+      options: AUDIO_FORMATS,
+    },
+  ],
+};
 
-const IMAGE_FORMATS = ['png', 'jpg', 'webp', 'gif', 'bmp'].map(v => ({ label: v.toUpperCase(), value: v }))
+const IMAGE_FORMATS = ["png", "jpg", "webp", "gif", "bmp"].map((v) => ({
+  label: v.toUpperCase(),
+  value: v,
+}));
 
 export const imageConverterDef: NodeTypeDefinition = {
-  type: 'free-tool/image-converter',
-  category: 'free-tool',
-  label: 'Image Converter',
-  inputs: [{ key: 'input', label: 'Image', dataType: 'image', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'image', required: true }],
+  type: "free-tool/image-converter",
+  category: "free-tool",
+  label: "Image Converter",
+  inputs: [{ key: "input", label: "Image", dataType: "image", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "image", required: true },
+  ],
   params: [
-    { key: 'format', label: 'Format', type: 'select', default: 'png', dataType: 'text', connectable: false, options: IMAGE_FORMATS }
-  ]
-}
+    {
+      key: "format",
+      label: "Format",
+      type: "select",
+      default: "png",
+      dataType: "text",
+      connectable: false,
+      options: IMAGE_FORMATS,
+    },
+  ],
+};
 
 export const mediaTrimmerDef: NodeTypeDefinition = {
-  type: 'free-tool/media-trimmer',
-  category: 'free-tool',
-  label: 'Media Trimmer',
-  inputs: [{ key: 'input', label: 'Media', dataType: 'video', required: true }],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'url', required: true }],
+  type: "free-tool/media-trimmer",
+  category: "free-tool",
+  label: "Media Trimmer",
+  inputs: [{ key: "input", label: "Media", dataType: "video", required: true }],
+  outputs: [
+    { key: "output", label: "Output", dataType: "url", required: true },
+  ],
   params: [
-    { key: 'startTime', label: 'Start (s)', type: 'number', dataType: 'text', default: 0, connectable: false, validation: { min: 0, step: 0.1 } },
-    { key: 'endTime', label: 'End (s)', type: 'number', dataType: 'text', default: 10, connectable: false, validation: { min: 0, step: 0.1 } },
-    { key: 'format', label: 'Output Format', type: 'string', dataType: 'text', default: 'mp4', connectable: false }
-  ]
-}
+    {
+      key: "startTime",
+      label: "Start (s)",
+      type: "number",
+      dataType: "text",
+      default: 0,
+      connectable: false,
+      validation: { min: 0, step: 0.1 },
+    },
+    {
+      key: "endTime",
+      label: "End (s)",
+      type: "number",
+      dataType: "text",
+      default: 10,
+      connectable: false,
+      validation: { min: 0, step: 0.1 },
+    },
+    {
+      key: "format",
+      label: "Output Format",
+      type: "string",
+      dataType: "text",
+      default: "mp4",
+      connectable: false,
+    },
+  ],
+};
 
 export const mediaMergerDef: NodeTypeDefinition = {
-  type: 'free-tool/media-merger',
-  category: 'free-tool',
-  label: 'Media Merger',
+  type: "free-tool/media-merger",
+  category: "free-tool",
+  label: "Media Merger",
   inputs: [
-    { key: 'input1', label: 'Input 1', dataType: 'video', required: true },
-    { key: 'input2', label: 'Input 2', dataType: 'video', required: true },
-    { key: 'input3', label: 'Input 3', dataType: 'video', required: false },
-    { key: 'input4', label: 'Input 4', dataType: 'video', required: false },
-    { key: 'input5', label: 'Input 5', dataType: 'video', required: false }
+    { key: "input1", label: "Input 1", dataType: "video", required: true },
+    { key: "input2", label: "Input 2", dataType: "video", required: true },
+    { key: "input3", label: "Input 3", dataType: "video", required: false },
+    { key: "input4", label: "Input 4", dataType: "video", required: false },
+    { key: "input5", label: "Input 5", dataType: "video", required: false },
+  ],
+  outputs: [
+    { key: "output", label: "Output", dataType: "video", required: true },
   ],
-  outputs: [{ key: 'output', label: 'Output', dataType: 'video', required: true }],
   params: [
     {
-      key: 'format',
-      label: 'Output Format',
-      type: 'select',
-      dataType: 'text',
-      default: 'mp4',
+      key: "format",
+      label: "Output Format",
+      type: "select",
+      dataType: "text",
+      default: "mp4",
       connectable: false,
       options: [
-        { label: 'MP4', value: 'mp4' },
-        { label: 'WebM', value: 'webm' },
-        { label: 'MOV', value: 'mov' },
-        { label: 'MKV', value: 'mkv' }
-      ]
-    }
-  ]
-}
+        { label: "MP4", value: "mp4" },
+        { label: "WebM", value: "webm" },
+        { label: "MOV", value: "mov" },
+        { label: "MKV", value: "mkv" },
+      ],
+    },
+  ],
+};
 
 // ─── Helper / processing ──────────────────────────────────────────────────
 /** Concatenate multiple values into one array. Connect any number of inputs; empty slots are skipped. */
 export const concatDef: NodeTypeDefinition = {
-  type: 'processing/concat',
-  category: 'processing',
-  label: 'Concat',
+  type: "processing/concat",
+  category: "processing",
+  label: "Concat",
   inputs: [
-    { key: 'value1', label: 'Value 1', dataType: 'any', required: true },
-    { key: 'value2', label: 'Value 2', dataType: 'any', required: true },
-    { key: 'value3', label: 'Value 3', dataType: 'any', required: false },
-    { key: 'value4', label: 'Value 4', dataType: 'any', required: false },
-    { key: 'value5', label: 'Value 5', dataType: 'any', required: false }
-  ],
-  outputs: [{ key: 'output', label: 'Array', dataType: 'any', required: true }],
-  params: []
-}
+    { key: "value1", label: "Value 1", dataType: "any", required: true },
+    { key: "value2", label: "Value 2", dataType: "any", required: true },
+    { key: "value3", label: "Value 3", dataType: "any", required: false },
+    { key: "value4", label: "Value 4", dataType: "any", required: false },
+    { key: "value5", label: "Value 5", dataType: "any", required: false },
+  ],
+  outputs: [{ key: "output", label: "Array", dataType: "any", required: true }],
+  params: [],
+};
 
 /** Select one value from an array by index (0-based). Connect an array output (e.g. from Concat). */
 export const selectDef: NodeTypeDefinition = {
-  type: 'processing/select',
-  category: 'processing',
-  label: 'Select',
-  inputs: [{ key: 'input', label: 'Array', dataType: 'any', required: true }],
-  outputs: [{ key: 'output', label: 'Value', dataType: 'any', required: true }],
+  type: "processing/select",
+  category: "processing",
+  label: "Select",
+  inputs: [{ key: "input", label: "Array", dataType: "any", required: true }],
+  outputs: [{ key: "output", label: "Value", dataType: "any", required: true }],
   params: [
-    { key: 'index', label: 'Index', type: 'number', default: 0, connectable: false, validation: { min: 0, step: 1 } }
-  ]
-}
+    {
+      key: "index",
+      label: "Index",
+      type: "number",
+      default: 0,
+      connectable: false,
+      validation: { min: 0, step: 1 },
+    },
+  ],
+};
 
 // ─── All definitions (registry:get-all) ───────────────────────────────────
 export const BROWSER_NODE_DEFINITIONS: NodeTypeDefinition[] = [
@@ -346,5 +537,5 @@ export const BROWSER_NODE_DEFINITIONS: NodeTypeDefinition[] = [
   mediaTrimmerDef,
   mediaMergerDef,
   concatDef,
-  selectDef
-]
+  selectDef,
+];
diff --git a/src/workflow/browser/run-in-browser.ts b/src/workflow/browser/run-in-browser.ts
index ba5da564..91e57666 100644
--- a/src/workflow/browser/run-in-browser.ts
+++ b/src/workflow/browser/run-in-browser.ts
@@ -2,8 +2,8 @@
  * Run workflow in the browser (no Electron).
  * Uses apiClient for AI tasks and free-tool-runner for free-tool nodes.
  */
-import { apiClient } from '@/api/client'
-import { topologicalLevels, type SimpleEdge } from '@/workflow/lib/topological'
+import { apiClient } from "@/api/client";
+import { topologicalLevels, type SimpleEdge } from "@/workflow/lib/topological";
 import {
   runImageEnhancer,
   runBackgroundRemover,
@@ -11,118 +11,164 @@ import {
   runVideoEnhancer,
   runFaceSwapper,
   runImageEraser,
-  runSegmentAnything
-} from '@/workflow/lib/free-tool-runner'
-import { normalizePayloadArrays } from '@/lib/schemaToForm'
-import { BROWSER_NODE_DEFINITIONS } from './node-definitions'
-import { ffmpegMerge, ffmpegTrim, ffmpegConvert } from './ffmpeg-helpers'
-import type { ModelParamSchema } from '@/workflow/types/node-defs'
-import { useModelsStore } from '@/stores/modelsStore'
+  runSegmentAnything,
+} from "@/workflow/lib/free-tool-runner";
+import { normalizePayloadArrays } from "@/lib/schemaToForm";
+import { BROWSER_NODE_DEFINITIONS } from "./node-definitions";
+import { ffmpegMerge, ffmpegTrim, ffmpegConvert } from "./ffmpeg-helpers";
+import type { ModelParamSchema } from "@/workflow/types/node-defs";
+import { useModelsStore } from "@/stores/modelsStore";
 
-const SKIP_KEYS = new Set(['modelId', '__meta', '__locks', '__nodeWidth', '__nodeHeight'])
+const SKIP_KEYS = new Set([
+  "modelId",
+  "__meta",
+  "__locks",
+  "__nodeWidth",
+  "__nodeHeight",
+]);
 
-const nodeDefMap = new Map(BROWSER_NODE_DEFINITIONS.map(d => [d.type, d]))
+const nodeDefMap = new Map(BROWSER_NODE_DEFINITIONS.map((d) => [d.type, d]));
 
 export interface BrowserNode {
-  id: string
-  data: { nodeType: string; params?: Record<string, unknown> }
+  id: string;
+  data: { nodeType: string; params?: Record<string, unknown> };
 }
 
 export interface BrowserEdge {
-  source: string
-  target: string
-  sourceHandle?: string | null
-  targetHandle?: string | null
+  source: string;
+  target: string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
 }
 
 export interface RunInBrowserCallbacks {
-  onNodeStatus: (nodeId: string, status: 'running' | 'confirmed' | 'error', errorMessage?: string) => void
-  onProgress: (nodeId: string, progress: number, message?: string) => void
-  onNodeComplete: (nodeId: string, result: { urls: string[]; cost: number; durationMs?: number }) => void
+  onNodeStatus: (
+    nodeId: string,
+    status: "running" | "confirmed" | "error",
+    errorMessage?: string,
+  ) => void;
+  onProgress: (nodeId: string, progress: number, message?: string) => void;
+  onNodeComplete: (
+    nodeId: string,
+    result: { urls: string[]; cost: number; durationMs?: number },
+  ) => void;
 }
 
 interface NodeResult {
-  outputUrl: string
-  resultMetadata: Record<string, unknown>
+  outputUrl: string;
+  resultMetadata: Record<string, unknown>;
 }
 
 function buildApiParams(
   params: Record<string, unknown>,
-  inputs: Record<string, unknown>
+  inputs: Record<string, unknown>,
 ): Record<string, unknown> {
-  const out: Record<string, unknown> = {}
-  const meta = params.__meta as Record<string, unknown> | undefined
-  const schema = (meta?.modelInputSchema ?? []) as Array<{ name: string; default?: unknown; enum?: string[] }>
+  const out: Record<string, unknown> = {};
+  const meta = params.__meta as Record<string, unknown> | undefined;
+  const schema = (meta?.modelInputSchema ?? []) as Array<{
+    name: string;
+    default?: unknown;
+    enum?: string[];
+  }>;
   for (const s of schema) {
-    if (SKIP_KEYS.has(s.name) || s.name.startsWith('__')) continue
-    if (s.default !== undefined && s.default !== null && s.default !== '') out[s.name] = s.default
-    else if (s.enum?.length) out[s.name] = s.enum[0]
+    if (SKIP_KEYS.has(s.name) || s.name.startsWith("__")) continue;
+    if (s.default !== undefined && s.default !== null && s.default !== "")
+      out[s.name] = s.default;
+    else if (s.enum?.length) out[s.name] = s.enum[0];
   }
   for (const [key, value] of Object.entries(params)) {
-    if (SKIP_KEYS.has(key) || key.startsWith('__')) continue
-    if (value !== undefined && value !== null && value !== '') out[key] = value
+    if (SKIP_KEYS.has(key) || key.startsWith("__")) continue;
+    if (value !== undefined && value !== null && value !== "") out[key] = value;
   }
   for (const [key, value] of Object.entries(inputs)) {
-    if (key.startsWith('__arrayInput_')) {
-      const paramName = key.slice('__arrayInput_'.length)
-      const indexMap = value as Record<number, string>
-      const existing = Array.isArray(out[paramName]) ? [...(out[paramName] as unknown[])] : []
-      for (const [idx, val] of Object.entries(indexMap)) existing[Number(idx)] = val
-      out[paramName] = existing.filter(v => v !== undefined && v !== null && v !== '')
-    } else if (value !== undefined && value !== null && value !== '') {
-      out[key] = Array.isArray(value) ? value : String(value)
+    if (key.startsWith("__arrayInput_")) {
+      const paramName = key.slice("__arrayInput_".length);
+      const indexMap = value as Record<number, string>;
+      const existing = Array.isArray(out[paramName])
+        ? [...(out[paramName] as unknown[])]
+        : [];
+      for (const [idx, val] of Object.entries(indexMap))
+        existing[Number(idx)] = val;
+      out[paramName] = existing.filter(
+        (v) => v !== undefined && v !== null && v !== "",
+      );
+    } else if (value !== undefined && value !== null && value !== "") {
+      out[key] = Array.isArray(value) ? value : String(value);
     }
   }
-  if (typeof out.seed === 'number' && (out.seed as number) < 0) delete out.seed
+  if (typeof out.seed === "number" && (out.seed as number) < 0) delete out.seed;
 
   // Coerce integer schema fields to whole numbers before sending to API
   for (const s of schema) {
-    if ((s as Record<string, unknown>).type === 'integer' && out[s.name] !== undefined && out[s.name] !== null) {
-      const n = Number(out[s.name])
-      if (!Number.isNaN(n)) out[s.name] = Math.round(n)
+    if (
+      (s as Record<string, unknown>).type === "integer" &&
+      out[s.name] !== undefined &&
+      out[s.name] !== null
+    ) {
+      const n = Number(out[s.name]);
+      if (!Number.isNaN(n)) out[s.name] = Math.round(n);
     }
   }
 
-  return normalizePayloadArrays(out, [])
+  return normalizePayloadArrays(out, []);
 }
 
 function resolveInputs(
   nodeId: string,
   _nodeMap: Map<string, BrowserNode>,
-  edges: { source: string; target: string; sourceHandle: string; targetHandle: string }[],
-  results: Map<string, NodeResult>
+  edges: {
+    source: string;
+    target: string;
+    sourceHandle: string;
+    targetHandle: string;
+  }[],
+  results: Map<string, NodeResult>,
 ): Record<string, unknown> {
-  const inputs: Record<string, unknown> = {}
-  const incoming = edges.filter(e => e.target === nodeId)
+  const inputs: Record<string, unknown> = {};
+  const incoming = edges.filter((e) => e.target === nodeId);
   for (const e of incoming) {
-    const res = results.get(e.source)
-    if (!res) continue
-    let outputValue: unknown = res.resultMetadata[e.sourceHandle] ?? res.resultMetadata.output ?? res.resultMetadata.resultUrl ?? res.outputUrl
-    if (outputValue === undefined) outputValue = res.outputUrl
+    const res = results.get(e.source);
+    if (!res) continue;
+    let outputValue: unknown =
+      res.resultMetadata[e.sourceHandle] ??
+      res.resultMetadata.output ??
+      res.resultMetadata.resultUrl ??
+      res.outputUrl;
+    if (outputValue === undefined) outputValue = res.outputUrl;
 
-    const targetKey = e.targetHandle
-    const arrayMatch = /^(.+)\[(\d+)\]$/.exec(targetKey)
+    const targetKey = e.targetHandle;
+    const arrayMatch = /^(.+)\[(\d+)\]$/.exec(targetKey);
     if (arrayMatch) {
-      const paramName = arrayMatch[1]
-      const index = parseInt(arrayMatch[2], 10)
-      const mapKey = `__arrayInput_${paramName}`
-      if (!inputs[mapKey]) (inputs as Record<string, unknown>)[mapKey] = {} as Record<number, string>
-      ((inputs as Record<string, unknown>)[mapKey] as Record<number, string>)[index] = String(outputValue)
-    } else if (targetKey.startsWith('param-')) {
-      inputs[targetKey.slice(6)] = Array.isArray(outputValue) ? outputValue : String(outputValue)
-    } else if (targetKey.startsWith('input-')) {
-      inputs[targetKey.slice(6)] = Array.isArray(outputValue) ? outputValue : String(outputValue)
+      const paramName = arrayMatch[1];
+      const index = parseInt(arrayMatch[2], 10);
+      const mapKey = `__arrayInput_${paramName}`;
+      if (!inputs[mapKey])
+        (inputs as Record<string, unknown>)[mapKey] = {} as Record<
+          number,
+          string
+        >;
+      ((inputs as Record<string, unknown>)[mapKey] as Record<number, string>)[
+        index
+      ] = String(outputValue);
+    } else if (targetKey.startsWith("param-")) {
+      inputs[targetKey.slice(6)] = Array.isArray(outputValue)
+        ? outputValue
+        : String(outputValue);
+    } else if (targetKey.startsWith("input-")) {
+      inputs[targetKey.slice(6)] = Array.isArray(outputValue)
+        ? outputValue
+        : String(outputValue);
     } else {
-      inputs[targetKey] = outputValue
+      inputs[targetKey] = outputValue;
     }
   }
-  return inputs
+  return inputs;
 }
 
 function isEmpty(v: unknown): boolean {
-  if (v === undefined || v === null || v === '') return true
-  if (Array.isArray(v) && v.length === 0) return true
-  return false
+  if (v === undefined || v === null || v === "") return true;
+  if (Array.isArray(v) && v.length === 0) return true;
+  return false;
 }
 
 /**
@@ -132,575 +178,908 @@ function isEmpty(v: unknown): boolean {
 function validateNodeInputs(
   nodeType: string,
   params: Record<string, unknown>,
-  inputs: Record<string, unknown>
+  inputs: Record<string, unknown>,
 ): string[] {
-  const missing: string[] = []
+  const missing: string[] = [];
 
-  if (nodeType === 'ai-task/run') {
-    const meta = params.__meta as Record<string, unknown> | undefined
-    const schema = (meta?.modelInputSchema ?? []) as ModelParamSchema[]
+  if (nodeType === "ai-task/run") {
+    const meta = params.__meta as Record<string, unknown> | undefined;
+    const schema = (meta?.modelInputSchema ?? []) as ModelParamSchema[];
     for (const field of schema) {
-      if (!field.required) continue
-      const val = inputs[field.name] ?? params[field.name]
+      if (!field.required) continue;
+      const val = inputs[field.name] ?? params[field.name];
       if (isEmpty(val) && isEmpty(field.default)) {
-        missing.push(field.label || field.name)
+        missing.push(field.label || field.name);
       }
     }
-    return missing
+    return missing;
   }
 
-  const def = nodeDefMap.get(nodeType)
+  const def = nodeDefMap.get(nodeType);
   if (def) {
     for (const inp of def.inputs) {
-      if (!inp.required) continue
-      const val = inputs[inp.key] ?? inputs[`input-${inp.key}`] ?? params[inp.key]
+      if (!inp.required) continue;
+      const val =
+        inputs[inp.key] ?? inputs[`input-${inp.key}`] ?? params[inp.key];
       if (isEmpty(val)) {
-        missing.push(inp.label || inp.key)
+        missing.push(inp.label || inp.key);
       }
     }
   }
-  return missing
+  return missing;
 }
 
-function base64ToDataUrl(base64: string, mime = 'image/png'): string {
-  if (base64.startsWith('data:')) return base64
-  return `data:${mime};base64,${base64}`
+function base64ToDataUrl(base64: string, mime = "image/png"): string {
+  if (base64.startsWith("data:")) return base64;
+  return `data:${mime};base64,${base64}`;
 }
 
 /** Collect nodeId and all nodes that feed into it (upstream subgraph). */
-function upstreamNodeIds(nodeId: string, simpleEdges: SimpleEdge[]): Set<string> {
-  const out = new Set<string>([nodeId])
-  const reverse = new Map<string, string[]>()
+function upstreamNodeIds(
+  nodeId: string,
+  simpleEdges: SimpleEdge[],
+): Set<string> {
+  const out = new Set<string>([nodeId]);
+  const reverse = new Map<string, string[]>();
   for (const e of simpleEdges) {
-    const list = reverse.get(e.targetNodeId) ?? []
-    list.push(e.sourceNodeId)
-    reverse.set(e.targetNodeId, list)
+    const list = reverse.get(e.targetNodeId) ?? [];
+    list.push(e.sourceNodeId);
+    reverse.set(e.targetNodeId, list);
   }
-  let queue = [nodeId]
+  let queue = [nodeId];
   while (queue.length > 0) {
-    const next: string[] = []
+    const next: string[] = [];
     for (const id of queue) {
       for (const src of reverse.get(id) ?? []) {
         if (!out.has(src)) {
-          out.add(src)
-          next.push(src)
+          out.add(src);
+          next.push(src);
         }
       }
     }
-    queue = next
+    queue = next;
   }
-  return out
+  return out;
 }
 
 /** Collect a node and all its downstream (forward) dependents. */
-function downstreamNodeIds(nodeId: string, simpleEdges: SimpleEdge[]): Set<string> {
-  const out = new Set<string>([nodeId])
-  const forward = new Map<string, string[]>()
+function downstreamNodeIds(
+  nodeId: string,
+  simpleEdges: SimpleEdge[],
+): Set<string> {
+  const out = new Set<string>([nodeId]);
+  const forward = new Map<string, string[]>();
   for (const e of simpleEdges) {
-    const list = forward.get(e.sourceNodeId) ?? []
-    list.push(e.targetNodeId)
-    forward.set(e.sourceNodeId, list)
+    const list = forward.get(e.sourceNodeId) ?? [];
+    list.push(e.targetNodeId);
+    forward.set(e.sourceNodeId, list);
   }
-  let queue = [nodeId]
+  let queue = [nodeId];
   while (queue.length > 0) {
-    const next: string[] = []
+    const next: string[] = [];
     for (const id of queue) {
       for (const tgt of forward.get(id) ?? []) {
         if (!out.has(tgt)) {
-          out.add(tgt)
-          next.push(tgt)
+          out.add(tgt);
+          next.push(tgt);
         }
       }
     }
-    queue = next
+    queue = next;
   }
-  return out
+  return out;
 }
 
-
 /** Cache blob→CDN URL mappings so the same blob is only uploaded once across runs */
-const blobToCdnCache = new Map<string, string>()
+const blobToCdnCache = new Map<string, string>();
 
 export async function executeWorkflowInBrowser(
   nodes: BrowserNode[],
   edges: BrowserEdge[],
   callbacks: RunInBrowserCallbacks,
-  options?: { runOnlyNodeId?: string; continueFromNodeId?: string; existingResults?: Map<string, string>; signal?: AbortSignal }
+  options?: {
+    runOnlyNodeId?: string;
+    continueFromNodeId?: string;
+    existingResults?: Map<string, string>;
+    signal?: AbortSignal;
+  },
 ): Promise<void> {
-  const signal = options?.signal
+  const signal = options?.signal;
   const throwIfAborted = (): void => {
-    if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError')
-  }
-  const simpleEdges: SimpleEdge[] = edges.map(e => ({
+    if (signal?.aborted) throw new DOMException("Cancelled", "AbortError");
+  };
+  const simpleEdges: SimpleEdge[] = edges.map((e) => ({
     sourceNodeId: e.source,
-    targetNodeId: e.target
-  }))
-  const allNodeIds = nodes.map(n => n.id)
-  let nodeIds: string[]
-  let filteredNodes: BrowserNode[]
-  let filteredEdges: BrowserEdge[]
+    targetNodeId: e.target,
+  }));
+  const allNodeIds = nodes.map((n) => n.id);
+  let nodeIds: string[];
+  let filteredNodes: BrowserNode[];
+  let filteredEdges: BrowserEdge[];
   /** Nodes whose results should be reused (not re-executed) in continueFrom mode */
-  let skipNodeIds: Set<string> | null = null
-  if (options?.continueFromNodeId && allNodeIds.includes(options.continueFromNodeId)) {
+  let skipNodeIds: Set<string> | null = null;
+  if (
+    options?.continueFromNodeId &&
+    allNodeIds.includes(options.continueFromNodeId)
+  ) {
     // Run the target node + all downstream; include upstream in the graph but skip executing them
-    const downstream = downstreamNodeIds(options.continueFromNodeId, simpleEdges)
-    const upstream = upstreamNodeIds(options.continueFromNodeId, simpleEdges)
+    const downstream = downstreamNodeIds(
+      options.continueFromNodeId,
+      simpleEdges,
+    );
+    const upstream = upstreamNodeIds(options.continueFromNodeId, simpleEdges);
     // The subgraph is upstream ∪ downstream so edges resolve correctly
-    const subset = new Set([...upstream, ...downstream])
-    nodeIds = allNodeIds.filter(id => subset.has(id))
-    filteredNodes = nodes.filter(n => subset.has(n.id))
-    filteredEdges = edges.filter(e => subset.has(e.source) && subset.has(e.target))
+    const subset = new Set([...upstream, ...downstream]);
+    nodeIds = allNodeIds.filter((id) => subset.has(id));
+    filteredNodes = nodes.filter((n) => subset.has(n.id));
+    filteredEdges = edges.filter(
+      (e) => subset.has(e.source) && subset.has(e.target),
+    );
     // Skip upstream nodes (except the target node itself) — they keep their previous results
-    skipNodeIds = new Set([...upstream].filter(id => !downstream.has(id)))
-  } else if (options?.runOnlyNodeId && allNodeIds.includes(options.runOnlyNodeId)) {
-    const subset = upstreamNodeIds(options.runOnlyNodeId, simpleEdges)
-    nodeIds = allNodeIds.filter(id => subset.has(id))
-    filteredNodes = nodes.filter(n => subset.has(n.id))
-    filteredEdges = edges.filter(e => subset.has(e.source) && subset.has(e.target))
+    skipNodeIds = new Set([...upstream].filter((id) => !downstream.has(id)));
+  } else if (
+    options?.runOnlyNodeId &&
+    allNodeIds.includes(options.runOnlyNodeId)
+  ) {
+    const subset = upstreamNodeIds(options.runOnlyNodeId, simpleEdges);
+    nodeIds = allNodeIds.filter((id) => subset.has(id));
+    filteredNodes = nodes.filter((n) => subset.has(n.id));
+    filteredEdges = edges.filter(
+      (e) => subset.has(e.source) && subset.has(e.target),
+    );
     // Only execute the target node itself; upstream nodes reuse existing results
-    skipNodeIds = new Set([...subset].filter(id => id !== options.runOnlyNodeId))
+    skipNodeIds = new Set(
+      [...subset].filter((id) => id !== options.runOnlyNodeId),
+    );
   } else {
-    nodeIds = allNodeIds
-    filteredNodes = nodes
-    filteredEdges = edges
+    nodeIds = allNodeIds;
+    filteredNodes = nodes;
+    filteredEdges = edges;
   }
-  const nodeMap = new Map(filteredNodes.map(n => [n.id, n]))
-  const edgesWithHandles = filteredEdges.map(e => ({
+  const nodeMap = new Map(filteredNodes.map((n) => [n.id, n]));
+  const edgesWithHandles = filteredEdges.map((e) => ({
     source: e.source,
     target: e.target,
-    sourceHandle: e.sourceHandle ?? 'output',
-    targetHandle: e.targetHandle ?? 'input'
-  }))
-  const simpleEdgesSubgraph: SimpleEdge[] = filteredEdges.map(e => ({
+    sourceHandle: e.sourceHandle ?? "output",
+    targetHandle: e.targetHandle ?? "input",
+  }));
+  const simpleEdgesSubgraph: SimpleEdge[] = filteredEdges.map((e) => ({
     sourceNodeId: e.source,
-    targetNodeId: e.target
-  }))
-  const results = new Map<string, NodeResult>()
-  const failedNodes = new Set<string>()
-  const levels = topologicalLevels(nodeIds, simpleEdgesSubgraph)
-  const upstreamMap = new Map<string, string[]>()
+    targetNodeId: e.target,
+  }));
+  const results = new Map<string, NodeResult>();
+  const failedNodes = new Set<string>();
+  const levels = topologicalLevels(nodeIds, simpleEdgesSubgraph);
+  const upstreamMap = new Map<string, string[]>();
   for (const e of simpleEdgesSubgraph) {
-    const deps = upstreamMap.get(e.targetNodeId) ?? []
-    deps.push(e.sourceNodeId)
-    upstreamMap.set(e.targetNodeId, deps)
+    const deps = upstreamMap.get(e.targetNodeId) ?? [];
+    deps.push(e.sourceNodeId);
+    upstreamMap.set(e.targetNodeId, deps);
   }
 
   for (const level of levels) {
-    throwIfAborted()
+    throwIfAborted();
     // Stop the entire workflow if any node has failed
-    if (failedNodes.size > 0) break
-    await Promise.all(level.map(async nodeId => {
-      throwIfAborted()
-      // If another node in this batch failed, skip remaining
-      if (failedNodes.size > 0) return
-      const upstreams = upstreamMap.get(nodeId) ?? []
-      if (upstreams.some(uid => failedNodes.has(uid))) {
-        failedNodes.add(nodeId)
-        callbacks.onNodeStatus(nodeId, 'error', 'Skipped: upstream node failed')
-        return
-      }
+    if (failedNodes.size > 0) break;
+    await Promise.all(
+      level.map(async (nodeId) => {
+        throwIfAborted();
+        // If another node in this batch failed, skip remaining
+        if (failedNodes.size > 0) return;
+        const upstreams = upstreamMap.get(nodeId) ?? [];
+        if (upstreams.some((uid) => failedNodes.has(uid))) {
+          failedNodes.add(nodeId);
+          callbacks.onNodeStatus(
+            nodeId,
+            "error",
+            "Skipped: upstream node failed",
+          );
+          return;
+        }
 
-      const node = nodeMap.get(nodeId)
-      if (!node) return
-      const nodeType = node.data.nodeType
-      const params = node.data.params ?? {}
-
-      // continueFrom: skip upstream nodes — use existing results so downstream can resolve inputs
-      if (skipNodeIds?.has(nodeId)) {
-        const existingUrl = options?.existingResults?.get(nodeId)
-        const existingOutput = existingUrl || String(params.uploadedUrl ?? params.text ?? params.prompt ?? params.output ?? '')
-        if (existingOutput) {
-          results.set(nodeId, { outputUrl: existingOutput, resultMetadata: { output: existingOutput } })
+        const node = nodeMap.get(nodeId);
+        if (!node) return;
+        const nodeType = node.data.nodeType;
+        const params = node.data.params ?? {};
+
+        // continueFrom: skip upstream nodes — use existing results so downstream can resolve inputs
+        if (skipNodeIds?.has(nodeId)) {
+          const existingUrl = options?.existingResults?.get(nodeId);
+          const existingOutput =
+            existingUrl ||
+            String(
+              params.uploadedUrl ??
+                params.text ??
+                params.prompt ??
+                params.output ??
+                "",
+            );
+          if (existingOutput) {
+            results.set(nodeId, {
+              outputUrl: existingOutput,
+              resultMetadata: { output: existingOutput },
+            });
+          }
+          return;
         }
-        return
-      }
 
-      const inputs = resolveInputs(nodeId, nodeMap, edgesWithHandles, results)
+        const inputs = resolveInputs(
+          nodeId,
+          nodeMap,
+          edgesWithHandles,
+          results,
+        );
 
-      // Validate required fields before running
-      const missingFields = validateNodeInputs(nodeType, params, inputs)
-      if (missingFields.length > 0) {
-        failedNodes.add(nodeId)
-        callbacks.onNodeStatus(nodeId, 'error', `Missing required fields: ${missingFields.join(', ')}`)
-        return
-      }
+        // Validate required fields before running
+        const missingFields = validateNodeInputs(nodeType, params, inputs);
+        if (missingFields.length > 0) {
+          failedNodes.add(nodeId);
+          callbacks.onNodeStatus(
+            nodeId,
+            "error",
+            `Missing required fields: ${missingFields.join(", ")}`,
+          );
+          return;
+        }
 
-      callbacks.onNodeStatus(nodeId, 'running')
-      const start = Date.now()
-      const onProgress = (p: number, msg?: string) => callbacks.onProgress(nodeId, p, msg)
+        callbacks.onNodeStatus(nodeId, "running");
+        const start = Date.now();
+        const onProgress = (p: number, msg?: string) =>
+          callbacks.onProgress(nodeId, p, msg);
 
-      try {
-        if (nodeType === 'ai-task/run') {
-          const modelId = String(params.modelId ?? '')
-          if (!modelId) {
-            throw new Error('No model selected.')
-          }
-          const apiParams = buildApiParams(params, inputs)
-          callbacks.onProgress(nodeId, 5, `Running ${modelId}...`)
-          const result = await apiClient.run(modelId, apiParams, { signal })
-          const outputUrl = Array.isArray(result.outputs) && result.outputs.length > 0
-            ? String(result.outputs[0])
-            : ''
-          const durationMs = Date.now() - start
-          const model = useModelsStore.getState().getModelById(modelId)
-          const cost = model?.base_price ?? 0
-          results.set(nodeId, {
-            outputUrl,
-            resultMetadata: {
-              output: outputUrl,
-              resultUrl: outputUrl,
-              resultUrls: Array.isArray(result.outputs) ? result.outputs.map(String) : [outputUrl],
-              modelId,
-              raw: result
+        try {
+          if (nodeType === "ai-task/run") {
+            const modelId = String(params.modelId ?? "");
+            if (!modelId) {
+              throw new Error("No model selected.");
             }
-          })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, {
-            urls: Array.isArray(result.outputs) ? result.outputs.map(String) : [outputUrl],
-            cost,
-            durationMs
-          })
-          return
-        }
+            const apiParams = buildApiParams(params, inputs);
+            callbacks.onProgress(nodeId, 5, `Running ${modelId}...`);
+            const result = await apiClient.run(modelId, apiParams, { signal });
+            const outputUrl =
+              Array.isArray(result.outputs) && result.outputs.length > 0
+                ? String(result.outputs[0])
+                : "";
+            const durationMs = Date.now() - start;
+            const model = useModelsStore.getState().getModelById(modelId);
+            const cost = model?.base_price ?? 0;
+            results.set(nodeId, {
+              outputUrl,
+              resultMetadata: {
+                output: outputUrl,
+                resultUrl: outputUrl,
+                resultUrls: Array.isArray(result.outputs)
+                  ? result.outputs.map(String)
+                  : [outputUrl],
+                modelId,
+                raw: result,
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: Array.isArray(result.outputs)
+                ? result.outputs.map(String)
+                : [outputUrl],
+              cost,
+              durationMs,
+            });
+            return;
+          }
 
-        if (nodeType === 'input/media-upload') {
-          let url = String(inputs.media ?? params.uploadedUrl ?? '')
-          if (!url) throw new Error('No file uploaded or connected.')
-
-          // If the URL is still a blob: URL, the CDN upload hasn't completed yet.
-          // Fetch the blob and upload it to CDN before passing downstream.
-          if (url.startsWith('blob:')) {
-            // Check cache first — avoid re-uploading the same blob
-            const cached = blobToCdnCache.get(url)
-            if (cached) {
-              url = cached
-            } else {
-              callbacks.onProgress(nodeId, 10, 'Uploading file to CDN...')
-              try {
-                const resp = await fetch(url)
-                const blob = await resp.blob()
-                const fileName = String(params.fileName ?? 'upload')
-                const file = new File([blob], fileName, { type: blob.type })
-                const cdnUrl = await apiClient.uploadFile(file, signal)
-                blobToCdnCache.set(url, cdnUrl)
-                url = cdnUrl
-              } catch (uploadErr) {
-                throw new Error(`Failed to upload file to CDN: ${uploadErr instanceof Error ? uploadErr.message : String(uploadErr)}`)
+          if (nodeType === "input/media-upload") {
+            let url = String(inputs.media ?? params.uploadedUrl ?? "");
+            if (!url) throw new Error("No file uploaded or connected.");
+
+            // If the URL is still a blob: URL, the CDN upload hasn't completed yet.
+            // Fetch the blob and upload it to CDN before passing downstream.
+            if (url.startsWith("blob:")) {
+              // Check cache first — avoid re-uploading the same blob
+              const cached = blobToCdnCache.get(url);
+              if (cached) {
+                url = cached;
+              } else {
+                callbacks.onProgress(nodeId, 10, "Uploading file to CDN...");
+                try {
+                  const resp = await fetch(url);
+                  const blob = await resp.blob();
+                  const fileName = String(params.fileName ?? "upload");
+                  const file = new File([blob], fileName, { type: blob.type });
+                  const cdnUrl = await apiClient.uploadFile(file, signal);
+                  blobToCdnCache.set(url, cdnUrl);
+                  url = cdnUrl;
+                } catch (uploadErr) {
+                  throw new Error(
+                    `Failed to upload file to CDN: ${uploadErr instanceof Error ? uploadErr.message : String(uploadErr)}`,
+                  );
+                }
               }
             }
+
+            results.set(nodeId, {
+              outputUrl: url,
+              resultMetadata: { output: url, resultUrl: url },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [url],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
           }
 
-          results.set(nodeId, { outputUrl: url, resultMetadata: { output: url, resultUrl: url } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [url], cost: 0, durationMs: Date.now() - start })
-          return
-        }
+          if (nodeType === "input/text-input") {
+            const text = String(params.text ?? params.prompt ?? "");
+            results.set(nodeId, {
+              outputUrl: text,
+              resultMetadata: { output: text, text },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [text],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
 
-        if (nodeType === 'input/text-input') {
-          const text = String(params.text ?? params.prompt ?? '')
-          results.set(nodeId, { outputUrl: text, resultMetadata: { output: text, text } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [text], cost: 0, durationMs: Date.now() - start })
-          return
-        }
+          if (nodeType === "output/preview") {
+            const url = String(inputs.input ?? "");
+            if (!url) throw new Error("No URL provided for preview.");
+            results.set(nodeId, {
+              outputUrl: url,
+              resultMetadata: { previewUrl: url },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [url],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
 
-        if (nodeType === 'output/preview') {
-          const url = String(inputs.input ?? '')
-          if (!url) throw new Error('No URL provided for preview.')
-          results.set(nodeId, { outputUrl: url, resultMetadata: { previewUrl: url } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [url], cost: 0, durationMs: Date.now() - start })
-          return
-        }
+          if (nodeType === "output/file") {
+            const url = String(inputs.url ?? inputs.input ?? "");
+            if (!url) throw new Error("No URL provided for export.");
+            const filenamePrefix =
+              String(params.filename ?? "output").replace(
+                /[<>:"/\\|?*]/g,
+                "_",
+              ) || "output";
+            const format = String(params.format ?? "auto");
+            const ext =
+              format === "auto"
+                ? guessExtFromUrl(url)
+                : format.replace(/^\./, "").toLowerCase();
+            const fileName = `${filenamePrefix}_${Date.now()}.${ext || "png"}`;
 
-        if (nodeType === 'output/file') {
-          const url = String(inputs.url ?? inputs.input ?? '')
-          if (!url) throw new Error('No URL provided for export.')
-          const filenamePrefix = String(params.filename ?? 'output').replace(/[<>:"/\\|?*]/g, '_') || 'output'
-          const format = String(params.format ?? 'auto')
-          const ext = format === 'auto' ? guessExtFromUrl(url) : format.replace(/^\./, '').toLowerCase()
-          const fileName = `${filenamePrefix}_${Date.now()}.${ext || 'png'}`
-
-          const isElectron = typeof window !== 'undefined' && !!window.electronAPI?.saveFileSilent
-          if (isElectron) {
-            // Electron: save silently to outputDir via IPC (no dialog)
-            const outputDir = String(params.outputDir || '')
-            const result = await window.electronAPI!.saveFileSilent(url, outputDir, fileName)
-            if (!result.success) throw new Error(result.error || 'Save failed')
-          } else {
-            // Browser: download via <a download> + blob
-            try {
-              const resp = await fetch(url)
-              if (!resp.ok) throw new Error(`Download failed: HTTP ${resp.status}`)
-              const blob = await resp.blob()
-              const blobUrl = URL.createObjectURL(blob)
-              const a = document.createElement('a')
-              a.href = blobUrl
-              a.download = fileName
-              a.style.display = 'none'
-              document.body.appendChild(a)
-              a.click()
-              setTimeout(() => {
-                document.body.removeChild(a)
-                URL.revokeObjectURL(blobUrl)
-              }, 100)
-            } catch {
-              window.open(url, '_blank')
+            const isElectron =
+              typeof window !== "undefined" &&
+              !!window.electronAPI?.saveFileSilent;
+            if (isElectron) {
+              // Electron: save silently to outputDir via IPC (no dialog)
+              const outputDir = String(params.outputDir || "");
+              const result = await window.electronAPI!.saveFileSilent(
+                url,
+                outputDir,
+                fileName,
+              );
+              if (!result.success)
+                throw new Error(result.error || "Save failed");
+            } else {
+              // Browser: download via <a download> + blob
+              try {
+                const resp = await fetch(url);
+                if (!resp.ok)
+                  throw new Error(`Download failed: HTTP ${resp.status}`);
+                const blob = await resp.blob();
+                const blobUrl = URL.createObjectURL(blob);
+                const a = document.createElement("a");
+                a.href = blobUrl;
+                a.download = fileName;
+                a.style.display = "none";
+                document.body.appendChild(a);
+                a.click();
+                setTimeout(() => {
+                  document.body.removeChild(a);
+                  URL.revokeObjectURL(blobUrl);
+                }, 100);
+              } catch {
+                window.open(url, "_blank");
+              }
             }
-          }
 
-          results.set(nodeId, { outputUrl: url, resultMetadata: { output: url, exportedFileName: fileName } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [url], cost: 0, durationMs: Date.now() - start })
-          return
-        }
+            results.set(nodeId, {
+              outputUrl: url,
+              resultMetadata: { output: url, exportedFileName: fileName },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [url],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
 
-        // Free-tool nodes
-        if (nodeType === 'free-tool/image-enhancer') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const base64 = await runImageEnhancer(inputUrl, params as { model?: string; scale?: string }, onProgress)
-          const dataUrl = base64ToDataUrl(base64)
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/background-remover') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const base64 = await runBackgroundRemover(inputUrl, params as { model?: string }, onProgress)
-          const dataUrl = base64ToDataUrl(base64)
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/face-enhancer') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const base64 = await runFaceEnhancer(inputUrl, params, onProgress)
-          const dataUrl = base64ToDataUrl(base64)
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/video-enhancer') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const base64 = await runVideoEnhancer(inputUrl, params as { model?: string; scale?: string }, onProgress)
-          const dataUrl = base64ToDataUrl(base64, 'video/webm')
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/face-swapper') {
-          const sourceUrl = String(inputs.source ?? params.source ?? '')
-          const targetUrl = String(inputs.target ?? params.target ?? '')
-          if (!sourceUrl || !targetUrl) throw new Error('Missing source or target image')
-          const base64 = await runFaceSwapper(sourceUrl, targetUrl, params, onProgress)
-          const dataUrl = base64ToDataUrl(base64)
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/image-eraser') {
-          const imageUrl = String(inputs.input ?? params.input ?? '')
-          const maskUrl = String(inputs.mask_image ?? params.mask_image ?? '')
-          if (!imageUrl || !maskUrl) throw new Error('Missing image or mask')
-          const base64 = await runImageEraser(imageUrl, maskUrl, params, onProgress)
-          const dataUrl = base64ToDataUrl(base64)
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/segment-anything') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const base64 = await runSegmentAnything(
-            inputUrl,
-            params as { pointX?: number; pointY?: number; __segmentPoints?: string; __previewMask?: string; invertMask?: boolean },
-            onProgress
-          )
-          const dataUrl = base64ToDataUrl(base64)
-          results.set(nodeId, { outputUrl: dataUrl, resultMetadata: { output: dataUrl, resultUrl: dataUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [dataUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
+          // Free-tool nodes
+          if (nodeType === "free-tool/image-enhancer") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const base64 = await runImageEnhancer(
+              inputUrl,
+              params as { model?: string; scale?: string },
+              onProgress,
+            );
+            const dataUrl = base64ToDataUrl(base64);
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/background-remover") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const base64 = await runBackgroundRemover(
+              inputUrl,
+              params as { model?: string },
+              onProgress,
+            );
+            const dataUrl = base64ToDataUrl(base64);
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/face-enhancer") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const base64 = await runFaceEnhancer(inputUrl, params, onProgress);
+            const dataUrl = base64ToDataUrl(base64);
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/video-enhancer") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const base64 = await runVideoEnhancer(
+              inputUrl,
+              params as { model?: string; scale?: string },
+              onProgress,
+            );
+            const dataUrl = base64ToDataUrl(base64, "video/webm");
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/face-swapper") {
+            const sourceUrl = String(inputs.source ?? params.source ?? "");
+            const targetUrl = String(inputs.target ?? params.target ?? "");
+            if (!sourceUrl || !targetUrl)
+              throw new Error("Missing source or target image");
+            const base64 = await runFaceSwapper(
+              sourceUrl,
+              targetUrl,
+              params,
+              onProgress,
+            );
+            const dataUrl = base64ToDataUrl(base64);
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/image-eraser") {
+            const imageUrl = String(inputs.input ?? params.input ?? "");
+            const maskUrl = String(
+              inputs.mask_image ?? params.mask_image ?? "",
+            );
+            if (!imageUrl || !maskUrl) throw new Error("Missing image or mask");
+            const base64 = await runImageEraser(
+              imageUrl,
+              maskUrl,
+              params,
+              onProgress,
+            );
+            const dataUrl = base64ToDataUrl(base64);
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/segment-anything") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const base64 = await runSegmentAnything(
+              inputUrl,
+              params as {
+                pointX?: number;
+                pointY?: number;
+                __segmentPoints?: string;
+                __previewMask?: string;
+                invertMask?: boolean;
+              },
+              onProgress,
+            );
+            const dataUrl = base64ToDataUrl(base64);
+            results.set(nodeId, {
+              outputUrl: dataUrl,
+              resultMetadata: { output: dataUrl, resultUrl: dataUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [dataUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
 
-        // FFmpeg-based free-tool nodes (converter / merger / trimmer)
-        if (nodeType === 'free-tool/media-merger') {
-          const inputKeys = ['input1', 'input2', 'input3', 'input4', 'input5']
-          const inputUrls: string[] = []
-          for (const key of inputKeys) {
-            const val = String(inputs[key] ?? params[key] ?? '')
-            if (val) inputUrls.push(val)
+          // FFmpeg-based free-tool nodes (converter / merger / trimmer)
+          if (nodeType === "free-tool/media-merger") {
+            const inputKeys = [
+              "input1",
+              "input2",
+              "input3",
+              "input4",
+              "input5",
+            ];
+            const inputUrls: string[] = [];
+            for (const key of inputKeys) {
+              const val = String(inputs[key] ?? params[key] ?? "");
+              if (val) inputUrls.push(val);
+            }
+            if (inputUrls.length < 2)
+              throw new Error("Media merger requires at least two inputs.");
+            const format = String(params.format ?? "mp4").toLowerCase();
+            onProgress(10, "Merging media...");
+            const blobUrl = await ffmpegMerge(inputUrls, format);
+            onProgress(100, "Merge completed.");
+            results.set(nodeId, {
+              outputUrl: blobUrl,
+              resultMetadata: {
+                output: blobUrl,
+                resultUrl: blobUrl,
+                resultUrls: [blobUrl],
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [blobUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
           }
-          if (inputUrls.length < 2) throw new Error('Media merger requires at least two inputs.')
-          const format = String(params.format ?? 'mp4').toLowerCase()
-          onProgress(10, 'Merging media...')
-          const blobUrl = await ffmpegMerge(inputUrls, format)
-          onProgress(100, 'Merge completed.')
-          results.set(nodeId, { outputUrl: blobUrl, resultMetadata: { output: blobUrl, resultUrl: blobUrl, resultUrls: [blobUrl] } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [blobUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/media-trimmer') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const startTime = Number(params.startTime ?? 0)
-          const endTime = Number(params.endTime ?? 10)
-          if (!Number.isFinite(startTime) || !Number.isFinite(endTime) || endTime <= startTime) {
-            throw new Error('Invalid trim range: endTime must be greater than startTime.')
+          if (nodeType === "free-tool/media-trimmer") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const startTime = Number(params.startTime ?? 0);
+            const endTime = Number(params.endTime ?? 10);
+            if (
+              !Number.isFinite(startTime) ||
+              !Number.isFinite(endTime) ||
+              endTime <= startTime
+            ) {
+              throw new Error(
+                "Invalid trim range: endTime must be greater than startTime.",
+              );
+            }
+            const format = String(params.format ?? "mp4").toLowerCase();
+            onProgress(10, "Trimming media...");
+            const blobUrl = await ffmpegTrim(
+              inputUrl,
+              startTime,
+              endTime,
+              format,
+            );
+            onProgress(100, "Trim completed.");
+            results.set(nodeId, {
+              outputUrl: blobUrl,
+              resultMetadata: {
+                output: blobUrl,
+                resultUrl: blobUrl,
+                resultUrls: [blobUrl],
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [blobUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
           }
-          const format = String(params.format ?? 'mp4').toLowerCase()
-          onProgress(10, 'Trimming media...')
-          const blobUrl = await ffmpegTrim(inputUrl, startTime, endTime, format)
-          onProgress(100, 'Trim completed.')
-          results.set(nodeId, { outputUrl: blobUrl, resultMetadata: { output: blobUrl, resultUrl: blobUrl, resultUrls: [blobUrl] } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [blobUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/video-converter') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const formatId = String(params.format ?? 'mp4-h264')
-          const qualityId = String(params.quality ?? 'medium')
-          const resolution = String(params.resolution ?? 'original')
-          const FORMAT_MAP: Record<string, { ext: string; videoCodec: string; audioCodec: string }> = {
-            'mp4-h264': { ext: 'mp4', videoCodec: 'libx264', audioCodec: 'aac' },
-            'mp4-h265': { ext: 'mp4', videoCodec: 'libx265', audioCodec: 'aac' },
-            'webm-vp9': { ext: 'webm', videoCodec: 'libvpx-vp9', audioCodec: 'libopus' },
-            'webm-vp8': { ext: 'webm', videoCodec: 'libvpx', audioCodec: 'libvorbis' },
-            'mov': { ext: 'mov', videoCodec: 'libx264', audioCodec: 'aac' },
-            'avi': { ext: 'avi', videoCodec: 'libx264', audioCodec: 'aac' },
-            'mkv': { ext: 'mkv', videoCodec: 'libx264', audioCodec: 'aac' },
-            'mp4': { ext: 'mp4', videoCodec: 'libx264', audioCodec: 'aac' },
-            'webm': { ext: 'webm', videoCodec: 'libvpx-vp9', audioCodec: 'libopus' },
+          if (nodeType === "free-tool/video-converter") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const formatId = String(params.format ?? "mp4-h264");
+            const qualityId = String(params.quality ?? "medium");
+            const resolution = String(params.resolution ?? "original");
+            const FORMAT_MAP: Record<
+              string,
+              { ext: string; videoCodec: string; audioCodec: string }
+            > = {
+              "mp4-h264": {
+                ext: "mp4",
+                videoCodec: "libx264",
+                audioCodec: "aac",
+              },
+              "mp4-h265": {
+                ext: "mp4",
+                videoCodec: "libx265",
+                audioCodec: "aac",
+              },
+              "webm-vp9": {
+                ext: "webm",
+                videoCodec: "libvpx-vp9",
+                audioCodec: "libopus",
+              },
+              "webm-vp8": {
+                ext: "webm",
+                videoCodec: "libvpx",
+                audioCodec: "libvorbis",
+              },
+              mov: { ext: "mov", videoCodec: "libx264", audioCodec: "aac" },
+              avi: { ext: "avi", videoCodec: "libx264", audioCodec: "aac" },
+              mkv: { ext: "mkv", videoCodec: "libx264", audioCodec: "aac" },
+              mp4: { ext: "mp4", videoCodec: "libx264", audioCodec: "aac" },
+              webm: {
+                ext: "webm",
+                videoCodec: "libvpx-vp9",
+                audioCodec: "libopus",
+              },
+            };
+            const BITRATE_MAP: Record<
+              string,
+              { video: string; audio: string }
+            > = {
+              low: { video: "1M", audio: "96k" },
+              medium: { video: "5M", audio: "128k" },
+              high: { video: "10M", audio: "192k" },
+              ultra: { video: "20M", audio: "320k" },
+            };
+            const fmtCfg = FORMAT_MAP[formatId] ?? FORMAT_MAP["mp4-h264"];
+            const bitrate = BITRATE_MAP[qualityId] ?? BITRATE_MAP.medium;
+            onProgress(10, "Converting video...");
+            const blobUrl = await ffmpegConvert(
+              inputUrl,
+              formatId,
+              fmtCfg.ext,
+              {
+                videoCodec: fmtCfg.videoCodec,
+                videoBitrate: bitrate.video,
+                audioCodec: fmtCfg.audioCodec,
+                audioBitrate: bitrate.audio,
+                resolution: resolution !== "original" ? resolution : undefined,
+              },
+            );
+            onProgress(100, "Video conversion completed.");
+            results.set(nodeId, {
+              outputUrl: blobUrl,
+              resultMetadata: {
+                output: blobUrl,
+                resultUrl: blobUrl,
+                resultUrls: [blobUrl],
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [blobUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
           }
-          const BITRATE_MAP: Record<string, { video: string; audio: string }> = {
-            low: { video: '1M', audio: '96k' }, medium: { video: '5M', audio: '128k' },
-            high: { video: '10M', audio: '192k' }, ultra: { video: '20M', audio: '320k' },
+          if (nodeType === "free-tool/audio-converter") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const format = String(params.format ?? "mp3").toLowerCase();
+            onProgress(10, "Converting audio...");
+            const blobUrl = await ffmpegConvert(inputUrl, format, format);
+            onProgress(100, "Audio conversion completed.");
+            results.set(nodeId, {
+              outputUrl: blobUrl,
+              resultMetadata: {
+                output: blobUrl,
+                resultUrl: blobUrl,
+                resultUrls: [blobUrl],
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [blobUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "free-tool/image-converter") {
+            const inputUrl = String(inputs.input ?? params.input ?? "");
+            if (!inputUrl) throw new Error("Missing input");
+            const format = String(params.format ?? "png").toLowerCase();
+            onProgress(10, "Converting image...");
+            const blobUrl = await ffmpegConvert(inputUrl, format, format);
+            onProgress(100, "Image conversion completed.");
+            results.set(nodeId, {
+              outputUrl: blobUrl,
+              resultMetadata: {
+                output: blobUrl,
+                resultUrl: blobUrl,
+                resultUrls: [blobUrl],
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [blobUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
           }
-          const fmtCfg = FORMAT_MAP[formatId] ?? FORMAT_MAP['mp4-h264']
-          const bitrate = BITRATE_MAP[qualityId] ?? BITRATE_MAP.medium
-          onProgress(10, 'Converting video...')
-          const blobUrl = await ffmpegConvert(inputUrl, formatId, fmtCfg.ext, {
-            videoCodec: fmtCfg.videoCodec, videoBitrate: bitrate.video,
-            audioCodec: fmtCfg.audioCodec, audioBitrate: bitrate.audio,
-            resolution: resolution !== 'original' ? resolution : undefined,
-          })
-          onProgress(100, 'Video conversion completed.')
-          results.set(nodeId, { outputUrl: blobUrl, resultMetadata: { output: blobUrl, resultUrl: blobUrl, resultUrls: [blobUrl] } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [blobUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/audio-converter') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const format = String(params.format ?? 'mp3').toLowerCase()
-          onProgress(10, 'Converting audio...')
-          const blobUrl = await ffmpegConvert(inputUrl, format, format)
-          onProgress(100, 'Audio conversion completed.')
-          results.set(nodeId, { outputUrl: blobUrl, resultMetadata: { output: blobUrl, resultUrl: blobUrl, resultUrls: [blobUrl] } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [blobUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'free-tool/image-converter') {
-          const inputUrl = String(inputs.input ?? params.input ?? '')
-          if (!inputUrl) throw new Error('Missing input')
-          const format = String(params.format ?? 'png').toLowerCase()
-          onProgress(10, 'Converting image...')
-          const blobUrl = await ffmpegConvert(inputUrl, format, format)
-          onProgress(100, 'Image conversion completed.')
-          results.set(nodeId, { outputUrl: blobUrl, resultMetadata: { output: blobUrl, resultUrl: blobUrl, resultUrls: [blobUrl] } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [blobUrl], cost: 0, durationMs: Date.now() - start })
-          return
-        }
 
-        // Helper / processing nodes
-        if (nodeType === 'processing/concat') {
-          const VALUE_KEYS = ['value1', 'value2', 'value3', 'value4', 'value5']
-          const arr: string[] = []
-          for (const key of VALUE_KEYS) {
-            const v = inputs[key] ?? params[key]
-            if (v === undefined || v === null) continue
-            if (Array.isArray(v)) {
-              for (const item of v) {
-                if (item !== undefined && item !== null && item !== '') arr.push(String(item))
+          // Helper / processing nodes
+          if (nodeType === "processing/concat") {
+            const VALUE_KEYS = [
+              "value1",
+              "value2",
+              "value3",
+              "value4",
+              "value5",
+            ];
+            const arr: string[] = [];
+            for (const key of VALUE_KEYS) {
+              const v = inputs[key] ?? params[key];
+              if (v === undefined || v === null) continue;
+              if (Array.isArray(v)) {
+                for (const item of v) {
+                  if (item !== undefined && item !== null && item !== "")
+                    arr.push(String(item));
+                }
+              } else {
+                const s = String(v).trim();
+                if (s) arr.push(s);
               }
+            }
+            if (arr.length === 0)
+              throw new Error("Concat requires at least one non-empty value.");
+            results.set(nodeId, {
+              outputUrl: arr[0],
+              resultMetadata: {
+                output: arr,
+                resultUrl: arr[0],
+                resultUrls: arr,
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: arr,
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
+          }
+          if (nodeType === "processing/select") {
+            const raw = inputs.input ?? params.input;
+            let arr: string[];
+            if (Array.isArray(raw)) {
+              arr = raw
+                .filter((x): x is string => x !== undefined && x !== null)
+                .map(String);
+            } else if (raw !== undefined && raw !== null && raw !== "") {
+              const s = String(raw).trim();
+              arr = s.includes(",")
+                ? s
+                    .split(",")
+                    .map((x) => x.trim())
+                    .filter(Boolean)
+                : [s];
             } else {
-              const s = String(v).trim()
-              if (s) arr.push(s)
+              arr = [];
             }
+            const index = Math.floor(Number(params.index ?? 0));
+            if (index < 0 || index >= arr.length) {
+              throw new Error(
+                `Index ${index} out of range (array length ${arr.length}).`,
+              );
+            }
+            const value = arr[index];
+            results.set(nodeId, {
+              outputUrl: value,
+              resultMetadata: {
+                output: value,
+                resultUrl: value,
+                resultUrls: [value],
+              },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [value],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
+            return;
           }
-          if (arr.length === 0) throw new Error('Concat requires at least one non-empty value.')
-          results.set(nodeId, {
-            outputUrl: arr[0],
-            resultMetadata: { output: arr, resultUrl: arr[0], resultUrls: arr }
-          })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: arr, cost: 0, durationMs: Date.now() - start })
-          return
-        }
-        if (nodeType === 'processing/select') {
-          const raw = inputs.input ?? params.input
-          let arr: string[]
-          if (Array.isArray(raw)) {
-            arr = raw.filter((x): x is string => x !== undefined && x !== null).map(String)
-          } else if (raw !== undefined && raw !== null && raw !== '') {
-            const s = String(raw).trim()
-            arr = s.includes(',') ? s.split(',').map(x => x.trim()).filter(Boolean) : [s]
+
+          // Unsupported node type — treat as pass-through if it has a single input
+          const inputUrl = String(
+            inputs.input ?? inputs.media ?? params.uploadedUrl ?? "",
+          );
+          if (inputUrl) {
+            results.set(nodeId, {
+              outputUrl: inputUrl,
+              resultMetadata: { output: inputUrl },
+            });
+            callbacks.onNodeStatus(nodeId, "confirmed");
+            callbacks.onNodeComplete(nodeId, {
+              urls: [inputUrl],
+              cost: 0,
+              durationMs: Date.now() - start,
+            });
           } else {
-            arr = []
-          }
-          const index = Math.floor(Number(params.index ?? 0))
-          if (index < 0 || index >= arr.length) {
-            throw new Error(`Index ${index} out of range (array length ${arr.length}).`)
+            throw new Error(`Unsupported node type in browser: ${nodeType}`);
           }
-          const value = arr[index]
-          results.set(nodeId, {
-            outputUrl: value,
-            resultMetadata: { output: value, resultUrl: value, resultUrls: [value] }
-          })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [value], cost: 0, durationMs: Date.now() - start })
-          return
+        } catch (err) {
+          failedNodes.add(nodeId);
+          const msg = err instanceof Error ? err.message : String(err);
+          callbacks.onNodeStatus(nodeId, "error", msg);
         }
-
-        // Unsupported node type — treat as pass-through if it has a single input
-        const inputUrl = String(inputs.input ?? inputs.media ?? params.uploadedUrl ?? '')
-        if (inputUrl) {
-          results.set(nodeId, { outputUrl: inputUrl, resultMetadata: { output: inputUrl } })
-          callbacks.onNodeStatus(nodeId, 'confirmed')
-          callbacks.onNodeComplete(nodeId, { urls: [inputUrl], cost: 0, durationMs: Date.now() - start })
-        } else {
-          throw new Error(`Unsupported node type in browser: ${nodeType}`)
-        }
-      } catch (err) {
-        failedNodes.add(nodeId)
-        const msg = err instanceof Error ? err.message : String(err)
-        callbacks.onNodeStatus(nodeId, 'error', msg)
-      }
-    }))
+      }),
+    );
   }
 }
 
 function guessExtFromUrl(url: string): string {
-  const p = url.toLowerCase().split('?')[0]
-  const m = p.match(/\.(\w{2,4})$/)
-  if (m) return m[1]
-  if (p.includes('video') || p.includes('mp4')) return 'mp4'
-  if (p.includes('audio') || p.includes('mp3')) return 'mp3'
-  return 'png'
+  const p = url.toLowerCase().split("?")[0];
+  const m = p.match(/\.(\w{2,4})$/);
+  if (m) return m[1];
+  if (p.includes("video") || p.includes("mp4")) return "mp4";
+  if (p.includes("audio") || p.includes("mp3")) return "mp3";
+  return "png";
 }
diff --git a/src/workflow/browser/workflow-api.ts b/src/workflow/browser/workflow-api.ts
index dea40383..b36d281e 100644
--- a/src/workflow/browser/workflow-api.ts
+++ b/src/workflow/browser/workflow-api.ts
@@ -3,124 +3,140 @@
  * Persists workflows in localStorage and serves static node definitions.
  * Execution, cost, history, and file storage are not supported in browser.
  */
-import * as storage from './workflow-storage'
-import { BROWSER_NODE_DEFINITIONS } from './node-definitions'
-import type { CreateWorkflowInput, SaveWorkflowInput } from '@/workflow/types/ipc'
-import type { Workflow } from '@/workflow/types/workflow'
-import type { BudgetConfig, ApiKeyConfig } from '@/workflow/types/ipc'
-import type { NodeExecutionRecord } from '@/workflow/types/execution'
+import * as storage from "./workflow-storage";
+import { BROWSER_NODE_DEFINITIONS } from "./node-definitions";
+import type {
+  CreateWorkflowInput,
+  SaveWorkflowInput,
+} from "@/workflow/types/ipc";
+import type { Workflow } from "@/workflow/types/workflow";
+import type { BudgetConfig, ApiKeyConfig } from "@/workflow/types/ipc";
+import type { NodeExecutionRecord } from "@/workflow/types/execution";
 
-const NOT_AVAILABLE = 'Not available in browser (run in Electron for full workflow features).'
+const NOT_AVAILABLE =
+  "Not available in browser (run in Electron for full workflow features).";
 
-const listeners = new Map<string, Set<(args: unknown) => void>>()
+const listeners = new Map<string, Set<(args: unknown) => void>>();
 
 function emit(channel: string, args: unknown): void {
-  listeners.get(channel)?.forEach(cb => cb(args))
+  listeners.get(channel)?.forEach((cb) => cb(args));
 }
 
 async function handleInvoke(channel: string, args?: unknown): Promise<unknown> {
   switch (channel) {
-    case 'registry:get-all':
-      return BROWSER_NODE_DEFINITIONS
+    case "registry:get-all":
+      return BROWSER_NODE_DEFINITIONS;
 
-    case 'workflow:create': {
-      const input = args as CreateWorkflowInput
-      return storage.createWorkflow(input.name)
+    case "workflow:create": {
+      const input = args as CreateWorkflowInput;
+      return storage.createWorkflow(input.name);
     }
-    case 'workflow:save': {
-      const input = args as SaveWorkflowInput
-      storage.updateWorkflow(input.id, input.name, { nodes: input.nodes, edges: input.edges }, input.status)
-      return undefined
+    case "workflow:save": {
+      const input = args as SaveWorkflowInput;
+      storage.updateWorkflow(
+        input.id,
+        input.name,
+        { nodes: input.nodes, edges: input.edges },
+        input.status,
+      );
+      return undefined;
     }
-    case 'workflow:load': {
-      const { id } = args as { id: string }
-      const wf = storage.getWorkflowById(id)
-      if (!wf) throw new Error(`Workflow ${id} not found`)
-      return wf
+    case "workflow:load": {
+      const { id } = args as { id: string };
+      const wf = storage.getWorkflowById(id);
+      if (!wf) throw new Error(`Workflow ${id} not found`);
+      return wf;
     }
-    case 'workflow:list':
-      return storage.listWorkflows()
-    case 'workflow:rename': {
-      const { id, name } = args as { id: string; name: string }
-      storage.renameWorkflow(id, name)
-      const wf = storage.getWorkflowById(id)
-      return { finalName: wf?.name ?? name }
+    case "workflow:list":
+      return storage.listWorkflows();
+    case "workflow:rename": {
+      const { id, name } = args as { id: string; name: string };
+      storage.renameWorkflow(id, name);
+      const wf = storage.getWorkflowById(id);
+      return { finalName: wf?.name ?? name };
     }
-    case 'workflow:delete': {
-      const { id } = args as { id: string }
-      storage.deleteWorkflow(id)
-      return undefined
+    case "workflow:delete": {
+      const { id } = args as { id: string };
+      storage.deleteWorkflow(id);
+      return undefined;
     }
-    case 'workflow:duplicate': {
-      const { id } = args as { id: string }
-      return storage.duplicateWorkflow(id)
+    case "workflow:duplicate": {
+      const { id } = args as { id: string };
+      return storage.duplicateWorkflow(id);
     }
 
-    case 'cost:estimate':
-      return { totalEstimated: 0, breakdown: [], withinBudget: true }
-    case 'cost:get-budget':
-      return { perExecutionLimit: 100, dailyLimit: 100 } as BudgetConfig
-    case 'cost:set-budget':
-      return undefined
-    case 'cost:get-daily-spend':
-      return 0
+    case "cost:estimate":
+      return { totalEstimated: 0, breakdown: [], withinBudget: true };
+    case "cost:get-budget":
+      return { perExecutionLimit: 100, dailyLimit: 100 } as BudgetConfig;
+    case "cost:set-budget":
+      return undefined;
+    case "cost:get-daily-spend":
+      return 0;
 
-    case 'history:list': {
-      const { nodeId } = args as { nodeId: string }
-      return [] as NodeExecutionRecord[]
+    case "history:list": {
+      const { nodeId } = args as { nodeId: string };
+      return [] as NodeExecutionRecord[];
     }
-    case 'history:set-current':
-    case 'history:star':
-    case 'history:score':
-    case 'history:delete':
-    case 'history:delete-all':
-      return undefined
+    case "history:set-current":
+    case "history:star":
+    case "history:score":
+    case "history:delete":
+    case "history:delete-all":
+      return undefined;
 
-    case 'settings:get-api-keys':
+    case "settings:get-api-keys":
       try {
-        const raw = typeof window !== 'undefined' ? localStorage.getItem('wavespeed_api_key') : null
-        return { wavespeedKey: raw ?? '' } as ApiKeyConfig
+        const raw =
+          typeof window !== "undefined"
+            ? localStorage.getItem("wavespeed_api_key")
+            : null;
+        return { wavespeedKey: raw ?? "" } as ApiKeyConfig;
       } catch {
-        return {} as ApiKeyConfig
+        return {} as ApiKeyConfig;
       }
-    case 'settings:set-api-keys':
-      return undefined
+    case "settings:set-api-keys":
+      return undefined;
 
-    case 'models:sync':
-      return undefined
-    case 'models:list':
-      return []
-    case 'models:search':
-      return []
-    case 'models:get-schema':
-      return null
+    case "models:sync":
+      return undefined;
+    case "models:list":
+      return [];
+    case "models:search":
+      return [];
+    case "models:get-schema":
+      return null;
 
-    case 'execution:run-all':
-    case 'execution:run-node':
-    case 'execution:continue-from':
-    case 'execution:retry':
-    case 'execution:cancel':
-      return Promise.reject(new Error(`Execution ${NOT_AVAILABLE}`))
+    case "execution:run-all":
+    case "execution:run-node":
+    case "execution:continue-from":
+    case "execution:retry":
+    case "execution:cancel":
+      return Promise.reject(new Error(`Execution ${NOT_AVAILABLE}`));
 
     default:
-      if (channel.startsWith('storage:') || channel.startsWith('upload:') || channel.startsWith('free-tool:')) {
-        return Promise.reject(new Error(NOT_AVAILABLE))
+      if (
+        channel.startsWith("storage:") ||
+        channel.startsWith("upload:") ||
+        channel.startsWith("free-tool:")
+      ) {
+        return Promise.reject(new Error(NOT_AVAILABLE));
       }
-      return Promise.reject(new Error(`Unknown channel: ${channel}`))
+      return Promise.reject(new Error(`Unknown channel: ${channel}`));
   }
 }
 
 export const browserWorkflowAPI = {
   invoke(channel: string, args?: unknown): Promise<unknown> {
-    return Promise.resolve(handleInvoke(channel, args))
+    return Promise.resolve(handleInvoke(channel, args));
   },
 
   on(channel: string, callback: (...a: unknown[]) => void): void {
-    if (!listeners.has(channel)) listeners.set(channel, new Set())
-    listeners.get(channel)!.add(callback as (args: unknown) => void)
+    if (!listeners.has(channel)) listeners.set(channel, new Set());
+    listeners.get(channel)!.add(callback as (args: unknown) => void);
   },
 
   removeListener(channel: string, _callback: (...a: unknown[]) => void): void {
-    listeners.delete(channel)
-  }
-}
+    listeners.delete(channel);
+  },
+};
diff --git a/src/workflow/browser/workflow-storage.ts b/src/workflow/browser/workflow-storage.ts
index 96a62f95..4ec21485 100644
--- a/src/workflow/browser/workflow-storage.ts
+++ b/src/workflow/browser/workflow-storage.ts
@@ -2,154 +2,165 @@
  * In-browser workflow persistence (localStorage).
  * Used when running without Electron so users can create/edit workflows in the browser.
  */
-import { v4 as uuidv4 } from 'uuid'
-import type { Workflow, GraphDefinition } from '@/workflow/types/workflow'
-import type { WorkflowSummary } from '@/workflow/types/ipc'
+import { v4 as uuidv4 } from "uuid";
+import type { Workflow, GraphDefinition } from "@/workflow/types/workflow";
+import type { WorkflowSummary } from "@/workflow/types/ipc";
 
-const STORAGE_KEY = 'wavespeed_workflows'
+const STORAGE_KEY = "wavespeed_workflows";
 
 interface StoredWorkflow {
-  id: string
-  name: string
-  createdAt: string
-  updatedAt: string
-  graphDefinition: GraphDefinition
-  status: Workflow['status']
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  graphDefinition: GraphDefinition;
+  status: Workflow["status"];
 }
 
 function loadAll(): StoredWorkflow[] {
-  if (typeof window === 'undefined') return []
+  if (typeof window === "undefined") return [];
   try {
-    const raw = localStorage.getItem(STORAGE_KEY)
-    const parsed = raw ? JSON.parse(raw) : []
-    return Array.isArray(parsed) ? parsed : []
+    const raw = localStorage.getItem(STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed) ? parsed : [];
   } catch {
-    return []
+    return [];
   }
 }
 
 function saveAll(workflows: StoredWorkflow[]): void {
-  if (typeof window === 'undefined') return
+  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(workflows))
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(workflows));
   } catch {
     // quota or disabled
   }
 }
 
-function ensureUniqueName(workflows: StoredWorkflow[], name: string, excludeId: string | null): string {
-  const trimmed = (name || '').trim() || 'Untitled Workflow'
-  const names = new Set(workflows.filter(w => w.id !== excludeId).map(w => w.name))
-  if (!names.has(trimmed)) return trimmed
-  let n = 2
-  while (names.has(`${trimmed} (${n})`)) n++
-  return `${trimmed} (${n})`
+function ensureUniqueName(
+  workflows: StoredWorkflow[],
+  name: string,
+  excludeId: string | null,
+): string {
+  const trimmed = (name || "").trim() || "Untitled Workflow";
+  const names = new Set(
+    workflows.filter((w) => w.id !== excludeId).map((w) => w.name),
+  );
+  if (!names.has(trimmed)) return trimmed;
+  let n = 2;
+  while (names.has(`${trimmed} (${n})`)) n++;
+  return `${trimmed} (${n})`;
 }
 
 export function createWorkflow(name: string): Workflow {
-  const workflows = loadAll()
-  const id = uuidv4()
-  const now = new Date().toISOString()
-  const finalName = ensureUniqueName(workflows, name, null)
+  const workflows = loadAll();
+  const id = uuidv4();
+  const now = new Date().toISOString();
+  const finalName = ensureUniqueName(workflows, name, null);
   const wf: StoredWorkflow = {
     id,
     name: finalName,
     createdAt: now,
     updatedAt: now,
     graphDefinition: { nodes: [], edges: [] },
-    status: 'draft'
-  }
-  workflows.unshift(wf)
-  saveAll(workflows)
-  return { ...wf }
+    status: "draft",
+  };
+  workflows.unshift(wf);
+  saveAll(workflows);
+  return { ...wf };
 }
 
 export function getWorkflowById(id: string): Workflow | null {
-  const workflows = loadAll()
-  const w = workflows.find(w => w.id === id)
-  return w ? { ...w } : null
+  const workflows = loadAll();
+  const w = workflows.find((w) => w.id === id);
+  return w ? { ...w } : null;
 }
 
 export function listWorkflows(): WorkflowSummary[] {
-  const workflows = loadAll()
-  return workflows.map(w => ({
+  const workflows = loadAll();
+  return workflows.map((w) => ({
     id: w.id,
     name: w.name,
     createdAt: w.createdAt,
     updatedAt: w.updatedAt,
     status: w.status,
-    nodeCount: w.graphDefinition?.nodes?.length ?? 0
-  }))
+    nodeCount: w.graphDefinition?.nodes?.length ?? 0,
+  }));
 }
 
 export function updateWorkflow(
   id: string,
   name: string,
   graphDefinition: GraphDefinition,
-  status?: Workflow['status']
+  status?: Workflow["status"],
 ): void {
-  const workflows = loadAll()
-  const idx = workflows.findIndex(w => w.id === id)
-  if (idx === -1) return
-  const existing = workflows[idx]
-  const now = new Date().toISOString()
-  const finalName = name !== existing.name ? ensureUniqueName(workflows, name, id) : name
+  const workflows = loadAll();
+  const idx = workflows.findIndex((w) => w.id === id);
+  if (idx === -1) return;
+  const existing = workflows[idx];
+  const now = new Date().toISOString();
+  const finalName =
+    name !== existing.name ? ensureUniqueName(workflows, name, id) : name;
   workflows[idx] = {
     ...existing,
     name: finalName,
     updatedAt: now,
     graphDefinition,
-    ...(status != null && { status })
-  }
-  saveAll(workflows)
+    ...(status != null && { status }),
+  };
+  saveAll(workflows);
 }
 
 export function renameWorkflow(id: string, newName: string): string {
-  const workflows = loadAll()
-  const idx = workflows.findIndex(w => w.id === id)
-  if (idx === -1) return newName
-  const finalName = ensureUniqueName(workflows, newName, id)
-  workflows[idx] = { ...workflows[idx], name: finalName, updatedAt: new Date().toISOString() }
-  saveAll(workflows)
-  return finalName
+  const workflows = loadAll();
+  const idx = workflows.findIndex((w) => w.id === id);
+  if (idx === -1) return newName;
+  const finalName = ensureUniqueName(workflows, newName, id);
+  workflows[idx] = {
+    ...workflows[idx],
+    name: finalName,
+    updatedAt: new Date().toISOString(),
+  };
+  saveAll(workflows);
+  return finalName;
 }
 
 export function deleteWorkflow(id: string): void {
-  const workflows = loadAll().filter(w => w.id !== id)
-  saveAll(workflows)
+  const workflows = loadAll().filter((w) => w.id !== id);
+  saveAll(workflows);
 }
 
 /**
  * Clone a workflow: new id, name "${originalName} (copy)" (deduplicated), same graph with new node/edge IDs.
  */
 export function duplicateWorkflow(sourceId: string): Workflow {
-  const workflows = loadAll()
-  const source = workflows.find(w => w.id === sourceId)
-  if (!source) throw new Error(`Workflow ${sourceId} not found`)
+  const workflows = loadAll();
+  const source = workflows.find((w) => w.id === sourceId);
+  if (!source) throw new Error(`Workflow ${sourceId} not found`);
 
-  const id = uuidv4()
-  const now = new Date().toISOString()
-  const copyName = ensureUniqueName(workflows, `${source.name} (copy)`, null)
+  const id = uuidv4();
+  const now = new Date().toISOString();
+  const copyName = ensureUniqueName(workflows, `${source.name} (copy)`, null);
 
-  const nodeIdMap = new Map<string, string>()
+  const nodeIdMap = new Map<string, string>();
   for (const n of source.graphDefinition?.nodes ?? []) {
-    nodeIdMap.set(n.id, uuidv4())
+    nodeIdMap.set(n.id, uuidv4());
   }
 
   const clonedNodes = (source.graphDefinition?.nodes ?? []).map((n) => ({
     ...n,
     id: nodeIdMap.get(n.id)!,
     workflowId: id,
-    currentOutputId: null as string | null
-  }))
+    currentOutputId: null as string | null,
+  }));
 
   const clonedEdges = (source.graphDefinition?.edges ?? []).map((e) => ({
     ...e,
     id: uuidv4(),
     workflowId: id,
     sourceNodeId: nodeIdMap.get(e.sourceNodeId)!,
-    targetNodeId: nodeIdMap.get(e.targetNodeId)!
-  }))
+    targetNodeId: nodeIdMap.get(e.targetNodeId)!,
+  }));
 
   const cloned: StoredWorkflow = {
     id,
@@ -157,9 +168,9 @@ export function duplicateWorkflow(sourceId: string): Workflow {
     createdAt: now,
     updatedAt: now,
     graphDefinition: { nodes: clonedNodes, edges: clonedEdges },
-    status: 'draft'
-  }
-  workflows.unshift(cloned)
-  saveAll(workflows)
-  return { ...cloned }
+    status: "draft",
+  };
+  workflows.unshift(cloned);
+  saveAll(workflows);
+  return { ...cloned };
 }
diff --git a/src/workflow/components/SegmentPointPicker.tsx b/src/workflow/components/SegmentPointPicker.tsx
index ebffbfb0..3e948af2 100644
--- a/src/workflow/components/SegmentPointPicker.tsx
+++ b/src/workflow/components/SegmentPointPicker.tsx
@@ -3,328 +3,401 @@
  * Hover = real-time preview, left click = add include point, right click = add exclude point.
  * Uses SAM worker to encode image once, then decodes mask in real-time.
  */
-import { useState, useCallback, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { Button } from '@/components/ui/button'
-import { Star, X, Trash2, Loader2 } from 'lucide-react'
-import { useSegmentAnythingWorker, type MaskResult } from '@/hooks/useSegmentAnythingWorker'
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Star, X, Trash2, Loader2 } from "lucide-react";
+import {
+  useSegmentAnythingWorker,
+  type MaskResult,
+} from "@/hooks/useSegmentAnythingWorker";
 
 export interface SegmentPoint {
-  point: [number, number]
-  label: 0 | 1
+  point: [number, number];
+  label: 0 | 1;
 }
 
 interface SegmentPointPickerProps {
-  referenceImageUrl: string
-  onComplete: (points: SegmentPoint[], maskBlob?: Blob) => void
-  onClose: () => void
+  referenceImageUrl: string;
+  onComplete: (points: SegmentPoint[], maskBlob?: Blob) => void;
+  onClose: () => void;
 }
 
-const MASK_COLOR = { r: 0, g: 114, b: 189 }
-const clamp = (x: number) => Math.max(0, Math.min(1, x))
+const MASK_COLOR = { r: 0, g: 114, b: 189 };
+const clamp = (x: number) => Math.max(0, Math.min(1, x));
 
-export function SegmentPointPicker({ referenceImageUrl, onComplete, onClose }: SegmentPointPickerProps) {
-  const { t } = useTranslation()
-  const containerRef = useRef<HTMLDivElement>(null)
-  const maskCanvasRef = useRef<HTMLCanvasElement>(null)
+export function SegmentPointPicker({
+  referenceImageUrl,
+  onComplete,
+  onClose,
+}: SegmentPointPickerProps) {
+  const { t } = useTranslation();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const maskCanvasRef = useRef<HTMLCanvasElement>(null);
 
   // Fixed points (clicked)
-  const [points, setPoints] = useState<SegmentPoint[]>([])
-  const pointsRef = useRef<SegmentPoint[]>([])
-  pointsRef.current = points
+  const [points, setPoints] = useState<SegmentPoint[]>([]);
+  const pointsRef = useRef<SegmentPoint[]>([]);
+  pointsRef.current = points;
 
   // Image state
-  const [imageSize, setImageSize] = useState({ width: 400, height: 300 })
-  const [naturalSize, setNaturalSize] = useState({ width: 400, height: 300 })
-  const [loaded, setLoaded] = useState(false)
-  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null)
+  const [imageSize, setImageSize] = useState({ width: 400, height: 300 });
+  const [naturalSize, setNaturalSize] = useState({ width: 400, height: 300 });
+  const [loaded, setLoaded] = useState(false);
+  const [imageDataUrl, setImageDataUrl] = useState<string | null>(null);
 
   // Worker state
-  const [encoding, setEncoding] = useState(false)
-  const [encoded, setEncoded] = useState(false)
-  const [lastMask, setLastMask] = useState<MaskResult | null>(null)
-  const [error, setError] = useState<string | null>(null)
+  const [encoding, setEncoding] = useState(false);
+  const [encoded, setEncoded] = useState(false);
+  const [lastMask, setLastMask] = useState<MaskResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
   // Decode queue
-  const decodingRef = useRef(false)
-  const pendingDecodeRef = useRef<SegmentPoint[] | null>(null)
-  const isHoveringRef = useRef(false)
-  const lastHoverRef = useRef<{ x: number; y: number } | null>(null)
+  const decodingRef = useRef(false);
+  const pendingDecodeRef = useRef<SegmentPoint[] | null>(null);
+  const isHoveringRef = useRef(false);
+  const lastHoverRef = useRef<{ x: number; y: number } | null>(null);
 
-  const {
-    segmentImage,
-    decodeMask,
-    dispose
-  } = useSegmentAnythingWorker({
-    onError: (msg) => setError(msg)
-  })
+  const { segmentImage, decodeMask, dispose } = useSegmentAnythingWorker({
+    onError: (msg) => setError(msg),
+  });
 
   // ── Load image & convert to data URL ──
   useEffect(() => {
-    if (!referenceImageUrl?.trim()) { setLoaded(true); return }
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-    img.onload = () => {
-      const maxW = 700, maxH = 500
-      let w = img.width, h = img.height
-      if (w > maxW) { h = (h * maxW) / w; w = maxW }
-      if (h > maxH) { w = (w * maxH) / h; h = maxH }
-      setImageSize({ width: Math.round(w), height: Math.round(h) })
-      setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight })
-      const canvas = document.createElement('canvas')
-      canvas.width = img.naturalWidth
-      canvas.height = img.naturalHeight
-      canvas.getContext('2d')!.drawImage(img, 0, 0)
-      setImageDataUrl(canvas.toDataURL('image/png'))
-      setLoaded(true)
+    if (!referenceImageUrl?.trim()) {
+      setLoaded(true);
+      return;
     }
-    img.onerror = () => setLoaded(true)
-    img.src = referenceImageUrl
-  }, [referenceImageUrl])
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const maxW = 700,
+        maxH = 500;
+      let w = img.width,
+        h = img.height;
+      if (w > maxW) {
+        h = (h * maxW) / w;
+        w = maxW;
+      }
+      if (h > maxH) {
+        w = (w * maxH) / h;
+        h = maxH;
+      }
+      setImageSize({ width: Math.round(w), height: Math.round(h) });
+      setNaturalSize({ width: img.naturalWidth, height: img.naturalHeight });
+      const canvas = document.createElement("canvas");
+      canvas.width = img.naturalWidth;
+      canvas.height = img.naturalHeight;
+      canvas.getContext("2d")!.drawImage(img, 0, 0);
+      setImageDataUrl(canvas.toDataURL("image/png"));
+      setLoaded(true);
+    };
+    img.onerror = () => setLoaded(true);
+    img.src = referenceImageUrl;
+  }, [referenceImageUrl]);
 
   // ── Encode image with SAM ──
-  const encodingRef = useRef(false)
+  const encodingRef = useRef(false);
   useEffect(() => {
-    if (!loaded || !imageDataUrl || encoded || encodingRef.current) return
-    encodingRef.current = true
-    let cancelled = false
+    if (!loaded || !imageDataUrl || encoded || encodingRef.current) return;
+    encodingRef.current = true;
+    let cancelled = false;
     const run = async () => {
-      setEncoding(true)
-      setError(null)
+      setEncoding(true);
+      setError(null);
       try {
-        await segmentImage(imageDataUrl)
-        if (!cancelled) setEncoded(true)
+        await segmentImage(imageDataUrl);
+        if (!cancelled) setEncoded(true);
       } catch (e) {
-        if (!cancelled) setError(e instanceof Error ? e.message : String(e))
+        if (!cancelled) setError(e instanceof Error ? e.message : String(e));
       } finally {
-        if (!cancelled) setEncoding(false)
-        encodingRef.current = false
+        if (!cancelled) setEncoding(false);
+        encodingRef.current = false;
       }
-    }
-    run()
-    return () => { cancelled = true }
-  }, [loaded, imageDataUrl, encoded, segmentImage])
+    };
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [loaded, imageDataUrl, encoded, segmentImage]);
 
   // ── Init mask canvas ──
   useEffect(() => {
-    const canvas = maskCanvasRef.current
-    if (!canvas || !loaded) return
-    canvas.width = naturalSize.width
-    canvas.height = naturalSize.height
-  }, [loaded, naturalSize])
+    const canvas = maskCanvasRef.current;
+    if (!canvas || !loaded) return;
+    canvas.width = naturalSize.width;
+    canvas.height = naturalSize.height;
+  }, [loaded, naturalSize]);
 
   // ── Draw mask overlay ──
   const drawMask = useCallback((result: MaskResult) => {
-    const canvas = maskCanvasRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext('2d', { willReadFrequently: true })
-    if (!ctx) return
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    const canvas = maskCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-    const numMasks = result.scores.length
-    let bestIdx = 0
+    const numMasks = result.scores.length;
+    let bestIdx = 0;
     for (let i = 1; i < numMasks; i++) {
-      if (result.scores[i] > result.scores[bestIdx]) bestIdx = i
+      if (result.scores[i] > result.scores[bestIdx]) bestIdx = i;
     }
-    const ppm = result.width * result.height
-    const off = bestIdx * ppm
-    const imageData = ctx.createImageData(result.width, result.height)
-    const d = imageData.data
+    const ppm = result.width * result.height;
+    const off = bestIdx * ppm;
+    const imageData = ctx.createImageData(result.width, result.height);
+    const d = imageData.data;
     for (let i = 0; i < ppm; i++) {
       if (result.mask[off + i] === 1) {
-        const o = i * 4
-        d[o] = MASK_COLOR.r; d[o + 1] = MASK_COLOR.g; d[o + 2] = MASK_COLOR.b; d[o + 3] = 180
+        const o = i * 4;
+        d[o] = MASK_COLOR.r;
+        d[o + 1] = MASK_COLOR.g;
+        d[o + 2] = MASK_COLOR.b;
+        d[o + 3] = 180;
       }
     }
     if (canvas.width !== result.width || canvas.height !== result.height) {
-      const tmp = document.createElement('canvas')
-      tmp.width = result.width; tmp.height = result.height
-      tmp.getContext('2d')!.putImageData(imageData, 0, 0)
-      ctx.drawImage(tmp, 0, 0, canvas.width, canvas.height)
+      const tmp = document.createElement("canvas");
+      tmp.width = result.width;
+      tmp.height = result.height;
+      tmp.getContext("2d")!.putImageData(imageData, 0, 0);
+      ctx.drawImage(tmp, 0, 0, canvas.width, canvas.height);
     } else {
-      ctx.putImageData(imageData, 0, 0)
+      ctx.putImageData(imageData, 0, 0);
     }
-  }, [])
+  }, []);
 
   const clearMask = useCallback(() => {
-    const canvas = maskCanvasRef.current
+    const canvas = maskCanvasRef.current;
     if (canvas) {
-      const ctx = canvas.getContext('2d')
-      if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height)
+      const ctx = canvas.getContext("2d");
+      if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
     }
-  }, [])
+  }, []);
 
   // ── Decode with queue (shared by hover + click) ──
-  const runDecode = useCallback(async (pts: SegmentPoint[]) => {
-    if (!encoded || pts.length === 0) {
-      clearMask()
-      // Only clear lastMask if these are fixed points (no hover)
-      return
-    }
-    if (decodingRef.current) {
-      pendingDecodeRef.current = pts
-      return
-    }
-    decodingRef.current = true
-    try {
-      const result = await decodeMask(pts.map(p => ({ point: p.point, label: p.label })))
-      // Only draw if still relevant (hovering or these are fixed points)
-      if (isHoveringRef.current || pts === pointsRef.current || pts.length === pointsRef.current.length) {
-        drawMask(result)
+  const runDecode = useCallback(
+    async (pts: SegmentPoint[]) => {
+      if (!encoded || pts.length === 0) {
+        clearMask();
+        // Only clear lastMask if these are fixed points (no hover)
+        return;
       }
-      // Update lastMask only for fixed-point decodes (when no hover point appended)
-      // We check: if the pts length matches fixed points, it's a fixed decode
-      if (pts.length === pointsRef.current.length) {
-        setLastMask(result)
+      if (decodingRef.current) {
+        pendingDecodeRef.current = pts;
+        return;
       }
-    } catch (e) {
-      console.error('Decode error:', e)
-    } finally {
-      decodingRef.current = false
-      const pending = pendingDecodeRef.current
-      if (pending) {
-        pendingDecodeRef.current = null
-        runDecode(pending)
+      decodingRef.current = true;
+      try {
+        const result = await decodeMask(
+          pts.map((p) => ({ point: p.point, label: p.label })),
+        );
+        // Only draw if still relevant (hovering or these are fixed points)
+        if (
+          isHoveringRef.current ||
+          pts === pointsRef.current ||
+          pts.length === pointsRef.current.length
+        ) {
+          drawMask(result);
+        }
+        // Update lastMask only for fixed-point decodes (when no hover point appended)
+        // We check: if the pts length matches fixed points, it's a fixed decode
+        if (pts.length === pointsRef.current.length) {
+          setLastMask(result);
+        }
+      } catch (e) {
+        console.error("Decode error:", e);
+      } finally {
+        decodingRef.current = false;
+        const pending = pendingDecodeRef.current;
+        if (pending) {
+          pendingDecodeRef.current = null;
+          runDecode(pending);
+        }
       }
-    }
-  }, [encoded, decodeMask, drawMask, clearMask])
+    },
+    [encoded, decodeMask, drawMask, clearMask],
+  );
 
   // ── Decode fixed points when they change ──
   useEffect(() => {
     if (points.length === 0) {
       // If hovering, keep hover preview; otherwise clear
       if (!isHoveringRef.current) {
-        clearMask()
-        setLastMask(null)
+        clearMask();
+        setLastMask(null);
       }
-      return
+      return;
     }
-    runDecode(points)
-  }, [points, runDecode, clearMask])
+    runDecode(points);
+  }, [points, runDecode, clearMask]);
 
   // ── Hover decode ──
-  const decodeHover = useCallback((hoverPt: SegmentPoint) => {
-    // Combine fixed points + hover point
-    const allPts = [...pointsRef.current, hoverPt]
-    runDecode(allPts)
-  }, [runDecode])
+  const decodeHover = useCallback(
+    (hoverPt: SegmentPoint) => {
+      // Combine fixed points + hover point
+      const allPts = [...pointsRef.current, hoverPt];
+      runDecode(allPts);
+    },
+    [runDecode],
+  );
 
   // ── Mouse handlers ──
-  const getNormalizedCoords = useCallback((e: React.MouseEvent<HTMLDivElement>): [number, number] | null => {
-    const container = containerRef.current
-    if (!container) return null
-    const rect = container.getBoundingClientRect()
-    return [clamp((e.clientX - rect.left) / rect.width), clamp((e.clientY - rect.top) / rect.height)]
-  }, [])
+  const getNormalizedCoords = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>): [number, number] | null => {
+      const container = containerRef.current;
+      if (!container) return null;
+      const rect = container.getBoundingClientRect();
+      return [
+        clamp((e.clientX - rect.left) / rect.width),
+        clamp((e.clientY - rect.top) / rect.height),
+      ];
+    },
+    [],
+  );
 
-  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (!encoded) return
-    isHoveringRef.current = true
-    const coords = getNormalizedCoords(e)
-    if (!coords) return
-    const [x, y] = coords
-    // Throttle: skip if same pixel area
-    if (lastHoverRef.current && Math.abs(lastHoverRef.current.x - x) < 0.005 && Math.abs(lastHoverRef.current.y - y) < 0.005) return
-    lastHoverRef.current = { x, y }
-    decodeHover({ point: [x, y], label: 1 })
-  }, [encoded, getNormalizedCoords, decodeHover])
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!encoded) return;
+      isHoveringRef.current = true;
+      const coords = getNormalizedCoords(e);
+      if (!coords) return;
+      const [x, y] = coords;
+      // Throttle: skip if same pixel area
+      if (
+        lastHoverRef.current &&
+        Math.abs(lastHoverRef.current.x - x) < 0.005 &&
+        Math.abs(lastHoverRef.current.y - y) < 0.005
+      )
+        return;
+      lastHoverRef.current = { x, y };
+      decodeHover({ point: [x, y], label: 1 });
+    },
+    [encoded, getNormalizedCoords, decodeHover],
+  );
 
   const handleMouseLeave = useCallback(() => {
-    isHoveringRef.current = false
-    lastHoverRef.current = null
+    isHoveringRef.current = false;
+    lastHoverRef.current = null;
     // Restore to fixed-points-only mask
     if (pointsRef.current.length > 0) {
-      runDecode(pointsRef.current)
+      runDecode(pointsRef.current);
     } else {
-      clearMask()
+      clearMask();
     }
-  }, [runDecode, clearMask])
+  }, [runDecode, clearMask]);
 
-  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.button !== 0 && e.button !== 2) return
-    e.preventDefault()
-    e.stopPropagation()
-    if (!encoded) return
-    const coords = getNormalizedCoords(e)
-    if (!coords) return
-    const label = e.button === 2 ? 0 : 1
-    setPoints(prev => [...prev, { point: [coords[0], coords[1]], label: label as 0 | 1 }])
-  }, [encoded, getNormalizedCoords])
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (e.button !== 0 && e.button !== 2) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (!encoded) return;
+      const coords = getNormalizedCoords(e);
+      if (!coords) return;
+      const label = e.button === 2 ? 0 : 1;
+      setPoints((prev) => [
+        ...prev,
+        { point: [coords[0], coords[1]], label: label as 0 | 1 },
+      ]);
+    },
+    [encoded, getNormalizedCoords],
+  );
 
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-  }, [])
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
 
   const handleClear = useCallback(() => {
-    setPoints([])
-    setLastMask(null)
-    clearMask()
-  }, [clearMask])
+    setPoints([]);
+    setLastMask(null);
+    clearMask();
+  }, [clearMask]);
 
   // ── Export mask as PNG blob ──
   const exportMaskBlob = useCallback(async (): Promise<Blob | undefined> => {
-    if (!lastMask) return undefined
-    const { mask, width, height, scores } = lastMask
-    let bestIdx = 0
+    if (!lastMask) return undefined;
+    const { mask, width, height, scores } = lastMask;
+    let bestIdx = 0;
     for (let i = 1; i < scores.length; i++) {
-      if (scores[i] > scores[bestIdx]) bestIdx = i
+      if (scores[i] > scores[bestIdx]) bestIdx = i;
     }
-    const ppm = width * height
-    const off = bestIdx * ppm
-    const canvas = document.createElement('canvas')
-    canvas.width = width; canvas.height = height
-    const ctx = canvas.getContext('2d')!
-    const imageData = ctx.createImageData(width, height)
-    const d = imageData.data
+    const ppm = width * height;
+    const off = bestIdx * ppm;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d")!;
+    const imageData = ctx.createImageData(width, height);
+    const d = imageData.data;
     for (let i = 0; i < ppm; i++) {
-      const v = mask[off + i] === 1 ? 255 : 0
-      const o = i * 4
-      d[o] = v; d[o + 1] = v; d[o + 2] = v; d[o + 3] = v ? 255 : 0
+      const v = mask[off + i] === 1 ? 255 : 0;
+      const o = i * 4;
+      d[o] = v;
+      d[o + 1] = v;
+      d[o + 2] = v;
+      d[o + 3] = v ? 255 : 0;
     }
-    ctx.putImageData(imageData, 0, 0)
+    ctx.putImageData(imageData, 0, 0);
     return new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob(blob => blob ? resolve(blob) : reject(new Error('Failed to export mask')), 'image/png')
-    })
-  }, [lastMask])
+      canvas.toBlob(
+        (blob) =>
+          blob ? resolve(blob) : reject(new Error("Failed to export mask")),
+        "image/png",
+      );
+    });
+  }, [lastMask]);
 
   const handleDone = useCallback(async () => {
-    const maskBlob = await exportMaskBlob()
+    const maskBlob = await exportMaskBlob();
     if (points.length === 0) {
-      onComplete([{ point: [0.5, 0.5], label: 1 }], maskBlob)
+      onComplete([{ point: [0.5, 0.5], label: 1 }], maskBlob);
     } else {
-      onComplete(points, maskBlob)
+      onComplete(points, maskBlob);
     }
-    onClose()
-  }, [points, exportMaskBlob, onComplete, onClose])
+    onClose();
+  }, [points, exportMaskBlob, onComplete, onClose]);
 
   // Cleanup worker on unmount
   useEffect(() => {
-    return () => { dispose() }
-  }, [dispose])
+    return () => {
+      dispose();
+    };
+  }, [dispose]);
 
   const statusText = encoding
-    ? t('workflow.segmentPointPicker.encoding')
+    ? t("workflow.segmentPointPicker.encoding")
     : !encoded
-      ? t('workflow.segmentPointPicker.waitingEncode')
-      : null
+      ? t("workflow.segmentPointPicker.waitingEncode")
+      : null;
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
-      <DialogContent className="max-w-3xl p-0 gap-0" onClick={e => e.stopPropagation()}>
+      <DialogContent
+        className="max-w-3xl p-0 gap-0"
+        onClick={(e) => e.stopPropagation()}
+      >
         <DialogHeader className="p-4 pb-2">
-          <DialogTitle>{t('workflow.segmentPointPicker.title')}</DialogTitle>
+          <DialogTitle>{t("workflow.segmentPointPicker.title")}</DialogTitle>
         </DialogHeader>
         <div className="px-4 pb-2">
           {!loaded ? (
-            <div className="flex items-center justify-center bg-muted rounded-lg" style={{ height: 300 }}>
+            <div
+              className="flex items-center justify-center bg-muted rounded-lg"
+              style={{ height: 300 }}
+            >
               <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
             </div>
           ) : (
             <div
               ref={containerRef}
-              className={`relative mx-auto bg-muted rounded-lg overflow-hidden select-none ${encoded ? 'cursor-crosshair' : 'cursor-wait'}`}
+              className={`relative mx-auto bg-muted rounded-lg overflow-hidden select-none ${encoded ? "cursor-crosshair" : "cursor-wait"}`}
               style={{ width: imageSize.width, height: imageSize.height }}
               onMouseDown={handleClick}
               onMouseMove={handleMouseMove}
@@ -346,12 +419,18 @@ export function SegmentPointPicker({ referenceImageUrl, onComplete, onClose }: S
                 <div
                   key={i}
                   className="absolute pointer-events-none transform -translate-x-1/2 -translate-y-1/2"
-                  style={{ left: `${pt.point[0] * 100}%`, top: `${pt.point[1] * 100}%` }}
+                  style={{
+                    left: `${pt.point[0] * 100}%`,
+                    top: `${pt.point[1] * 100}%`,
+                  }}
                 >
                   {pt.label === 1 ? (
                     <Star className="h-6 w-6 text-yellow-400 fill-yellow-400 drop-shadow-lg" />
                   ) : (
-                    <X className="h-6 w-6 text-red-500 drop-shadow-lg" strokeWidth={3} />
+                    <X
+                      className="h-6 w-6 text-red-500 drop-shadow-lg"
+                      strokeWidth={3}
+                    />
                   )}
                 </div>
               ))}
@@ -359,7 +438,7 @@ export function SegmentPointPicker({ referenceImageUrl, onComplete, onClose }: S
                 <div className="absolute inset-0 flex items-center justify-center bg-black/40 rounded-lg">
                   <div className="flex items-center gap-2 text-white text-sm">
                     <Loader2 className="h-5 w-5 animate-spin" />
-                    {t('workflow.segmentPointPicker.encoding')}
+                    {t("workflow.segmentPointPicker.encoding")}
                   </div>
                 </div>
               )}
@@ -370,7 +449,8 @@ export function SegmentPointPicker({ referenceImageUrl, onComplete, onClose }: S
         <div className="px-4 py-3 border-t bg-muted/30 flex items-center justify-between gap-4">
           <div className="flex items-center gap-2">
             <span className="text-xs text-muted-foreground">
-              {t('workflow.segmentPointPicker.hint')} ({points.length} {t('workflow.segmentPointPicker.points')})
+              {t("workflow.segmentPointPicker.hint")} ({points.length}{" "}
+              {t("workflow.segmentPointPicker.points")})
             </span>
             {statusText && (
               <span className="text-xs text-blue-400 flex items-center gap-1">
@@ -380,19 +460,28 @@ export function SegmentPointPicker({ referenceImageUrl, onComplete, onClose }: S
             )}
           </div>
           <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={handleClear} disabled={points.length === 0}>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleClear}
+              disabled={points.length === 0}
+            >
               <Trash2 className="h-4 w-4 mr-1" />
-              {t('workflow.segmentPointPicker.clear')}
+              {t("workflow.segmentPointPicker.clear")}
             </Button>
             <Button variant="outline" size="sm" onClick={onClose}>
-              {t('common.cancel')}
+              {t("common.cancel")}
             </Button>
-            <Button size="sm" onClick={handleDone} disabled={encoding || (points.length > 0 && !lastMask)}>
-              {t('workflow.segmentPointPicker.done')}
+            <Button
+              size="sm"
+              onClick={handleDone}
+              disabled={encoding || (points.length > 0 && !lastMask)}
+            >
+              {t("workflow.segmentPointPicker.done")}
             </Button>
           </div>
         </div>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/src/workflow/components/WorkflowGuide.tsx b/src/workflow/components/WorkflowGuide.tsx
index eac25e95..d64a0652 100644
--- a/src/workflow/components/WorkflowGuide.tsx
+++ b/src/workflow/components/WorkflowGuide.tsx
@@ -12,138 +12,137 @@
  *   - fill-rule: evenodd creates the "hole"
  *   - CSS transition on the path for smooth animation between steps
  */
-import { useState, useEffect, useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from '@/components/ui/button'
-import { persistentStorage } from '@/lib/storage'
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { persistentStorage } from "@/lib/storage";
 
 /* ── Constants ─────────────────────────────────────────────────────── */
 
-const GUIDE_COMPLETED_KEY = 'wavespeed_workflow_guide_completed'
-const GUIDE_WELCOME_SHOWN_KEY = 'wavespeed_workflow_guide_welcome_shown'
-const STAGE_PADDING = 8
-const STAGE_RADIUS = 8
-const POPOVER_GAP = 12
+const GUIDE_COMPLETED_KEY = "wavespeed_workflow_guide_completed";
+const GUIDE_WELCOME_SHOWN_KEY = "wavespeed_workflow_guide_welcome_shown";
+const STAGE_PADDING = 8;
+const STAGE_RADIUS = 8;
+const POPOVER_GAP = 12;
 
 /* ── Public hook ───────────────────────────────────────────────────── */
 
 export function useWorkflowGuide() {
-  const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false);
 
   useEffect(() => {
-    persistentStorage.get<string>(GUIDE_COMPLETED_KEY).then(v => {
-      if (v !== '1') setOpen(true)
-    })
-  }, [])
+    persistentStorage.get<string>(GUIDE_COMPLETED_KEY).then((v) => {
+      if (v !== "1") setOpen(true);
+    });
+  }, []);
 
-  const show = useCallback(() => setOpen(true), [])
+  const show = useCallback(() => setOpen(true), []);
   const dismiss = useCallback(() => {
-    setOpen(false)
-    persistentStorage.set(GUIDE_COMPLETED_KEY, '1')
-  }, [])
+    setOpen(false);
+    persistentStorage.set(GUIDE_COMPLETED_KEY, "1");
+  }, []);
 
-  return { open, show, dismiss }
+  return { open, show, dismiss };
 }
 
 /* ── Step definitions ──────────────────────────────────────────────── */
 
-type PopoverSide = 'top' | 'right' | 'bottom' | 'left'
+type PopoverSide = "top" | "right" | "bottom" | "left";
 
 interface GuideStepDef {
   /** i18n key suffix under workflow.guide.* */
-  key: string
+  key: string;
   /** CSS selector for the target element (null = centered modal) */
-  target: string | null
+  target: string | null;
   /** Preferred popover side */
-  side: PopoverSide
+  side: PopoverSide;
   /** Whether to show the AI Task feature list */
-  showAIFeatures?: boolean
+  showAIFeatures?: boolean;
   /** Callback to prepare UI before showing this step */
-  prepare?: () => void
+  prepare?: () => void;
 }
 
 function buildSteps(actions: {
-  openNodePalette: () => void
-  closeNodePalette: () => void
+  openNodePalette: () => void;
+  closeNodePalette: () => void;
 }): GuideStepDef[] {
   return [
     {
-      key: 'welcome',
+      key: "welcome",
       target: null,
-      side: 'bottom',
+      side: "bottom",
     },
     {
-      key: 'nodePaletteBtn',
+      key: "nodePaletteBtn",
       target: '[data-guide="node-palette-btn"]',
-      side: 'bottom',
+      side: "right",
       prepare: actions.closeNodePalette,
     },
     {
-      key: 'nodePalette',
+      key: "nodePalette",
       target: '[data-guide="node-palette"]',
-      side: 'right',
+      side: "right",
       prepare: actions.openNodePalette,
     },
     {
-      key: 'aiTask',
+      key: "aiTask",
       target: '[data-guide="node-palette"]',
-      side: 'right',
+      side: "right",
       showAIFeatures: true,
     },
     {
-      key: 'canvas',
+      key: "canvas",
       target: '[data-guide="canvas"]',
-      side: 'top',
+      side: "top",
+      prepare: actions.closeNodePalette,
     },
     {
-      key: 'canvasTools',
+      key: "canvasTools",
       target: '[data-guide="canvas-tools"]',
-      side: 'bottom',
-    },
-    {
-      key: 'config',
-      target: '[data-guide="canvas"]',
-      side: 'top',
+      side: "left",
     },
     {
-      key: 'run',
+      key: "run",
       target: '[data-guide="run-controls"]',
-      side: 'bottom',
+      side: "bottom",
     },
     {
-      key: 'templates',
+      key: "moreMenu",
       target: '[data-guide="toolbar-more"]',
-      side: 'bottom',
+      side: "right",
     },
-  ]
+  ];
 }
 
 /* ── Geometry helpers ──────────────────────────────────────────────── */
 
 interface Rect {
-  x: number; y: number; w: number; h: number
+  x: number;
+  y: number;
+  w: number;
+  h: number;
 }
 
 function getElementRect(selector: string | null): Rect | null {
-  if (!selector) return null
-  const el = document.querySelector(selector)
-  if (!el) return null
-  const r = el.getBoundingClientRect()
-  return { x: r.left, y: r.top, w: r.width, h: r.height }
+  if (!selector) return null;
+  const el = document.querySelector(selector);
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  return { x: r.left, y: r.top, w: r.width, h: r.height };
 }
 
 /** Expand rect by padding on each side */
 function padRect(r: Rect, p: number): Rect {
-  return { x: r.x - p, y: r.y - p, w: r.w + p * 2, h: r.h + p * 2 }
+  return { x: r.x - p, y: r.y - p, w: r.w + p * 2, h: r.h + p * 2 };
 }
 
 /** Clamp rect to viewport boundaries so cutout never overflows */
 function clampRect(r: Rect, vw: number, vh: number): Rect {
-  const x = Math.max(0, r.x)
-  const y = Math.max(0, r.y)
-  const right = Math.min(vw, r.x + r.w)
-  const bottom = Math.min(vh, r.y + r.h)
-  return { x, y, w: Math.max(0, right - x), h: Math.max(0, bottom - y) }
+  const x = Math.max(0, r.x);
+  const y = Math.max(0, r.y);
+  const right = Math.min(vw, r.x + r.w);
+  const bottom = Math.min(vh, r.y + r.h);
+  return { x, y, w: Math.max(0, right - x), h: Math.max(0, bottom - y) };
 }
 
 /**
@@ -151,13 +150,18 @@ function clampRect(r: Rect, vw: number, vh: number): Rect {
  * rounded-rect cutout. Uses fill-rule: evenodd so the inner shape
  * is subtracted from the outer.
  */
-function buildOverlayPath(vw: number, vh: number, cutout: Rect | null, radius: number): string {
+function buildOverlayPath(
+  vw: number,
+  vh: number,
+  cutout: Rect | null,
+  radius: number,
+): string {
   // Outer rect (clockwise)
-  const outer = `M0,0 H${vw} V${vh} H0 Z`
-  if (!cutout) return outer
+  const outer = `M0,0 H${vw} V${vh} H0 Z`;
+  if (!cutout) return outer;
 
-  const { x, y, w, h } = cutout
-  const r = Math.min(radius, w / 2, h / 2)
+  const { x, y, w, h } = cutout;
+  const r = Math.min(radius, w / 2, h / 2);
 
   // Inner rounded rect (counter-clockwise for evenodd)
   const inner = [
@@ -170,22 +174,22 @@ function buildOverlayPath(vw: number, vh: number, cutout: Rect | null, radius: n
     `A${r},${r} 0 0 1 ${x},${y + h - r}`,
     `V${y + r}`,
     `A${r},${r} 0 0 1 ${x + r},${y}`,
-    'Z',
-  ].join(' ')
+    "Z",
+  ].join(" ");
 
-  return `${outer} ${inner}`
+  return `${outer} ${inner}`;
 }
 
 /* ── Popover positioning ───────────────────────────────────────────── */
 
 interface PopoverPos {
-  top: number
-  left: number
-  actualSide: PopoverSide
+  top: number;
+  left: number;
+  actualSide: PopoverSide;
 }
 
-const POPOVER_WIDTH = 340
-const POPOVER_EST_HEIGHT = 400
+const POPOVER_WIDTH = 340;
+const POPOVER_EST_HEIGHT = 400;
 
 function computePopoverPos(
   targetRect: Rect | null,
@@ -198,181 +202,216 @@ function computePopoverPos(
     return {
       top: Math.max(40, (vh - POPOVER_EST_HEIGHT) / 2),
       left: (vw - POPOVER_WIDTH) / 2,
-      actualSide: 'bottom',
-    }
+      actualSide: "bottom",
+    };
   }
 
-  const padded = padRect(targetRect, STAGE_PADDING)
-  const cx = padded.x + padded.w / 2
+  const padded = padRect(targetRect, STAGE_PADDING);
+  const cx = padded.x + padded.w / 2;
 
-  const tryOrder: PopoverSide[] = [side, 'bottom', 'right', 'left', 'top']
+  const tryOrder: PopoverSide[] = [side, "bottom", "right", "left", "top"];
 
   for (const s of tryOrder) {
-    let top = 0
-    let left = 0
+    let top = 0;
+    let left = 0;
 
     switch (s) {
-      case 'bottom':
-        top = padded.y + padded.h + POPOVER_GAP
-        left = cx - POPOVER_WIDTH / 2
-        break
-      case 'top':
-        top = padded.y - POPOVER_GAP - POPOVER_EST_HEIGHT
-        left = cx - POPOVER_WIDTH / 2
-        break
-      case 'right':
-        top = padded.y
-        left = padded.x + padded.w + POPOVER_GAP
-        break
-      case 'left':
-        top = padded.y
-        left = padded.x - POPOVER_GAP - POPOVER_WIDTH
-        break
+      case "bottom":
+        top = padded.y + padded.h + POPOVER_GAP;
+        left = cx - POPOVER_WIDTH / 2;
+        break;
+      case "top":
+        top = padded.y - POPOVER_GAP - POPOVER_EST_HEIGHT;
+        left = cx - POPOVER_WIDTH / 2;
+        break;
+      case "right":
+        top = padded.y;
+        left = padded.x + padded.w + POPOVER_GAP;
+        break;
+      case "left":
+        top = padded.y;
+        left = padded.x - POPOVER_GAP - POPOVER_WIDTH;
+        break;
     }
 
     // Clamp to viewport
-    left = Math.max(8, Math.min(left, vw - POPOVER_WIDTH - 8))
-    top = Math.max(8, Math.min(top, vh - POPOVER_EST_HEIGHT - 8))
+    left = Math.max(8, Math.min(left, vw - POPOVER_WIDTH - 8));
+    top = Math.max(8, Math.min(top, vh - POPOVER_EST_HEIGHT - 8));
 
     // Check if it fits without overlapping the target
-    const popRect: Rect = { x: left, y: top, w: POPOVER_WIDTH, h: POPOVER_EST_HEIGHT }
+    const popRect: Rect = {
+      x: left,
+      y: top,
+      w: POPOVER_WIDTH,
+      h: POPOVER_EST_HEIGHT,
+    };
     if (!rectsOverlap(popRect, padded) || s === tryOrder[tryOrder.length - 1]) {
-      return { top, left, actualSide: s }
+      return { top, left, actualSide: s };
     }
   }
 
   // Fallback
-  return { top: 8, left: (vw - POPOVER_WIDTH) / 2, actualSide: 'bottom' }
+  return { top: 8, left: (vw - POPOVER_WIDTH) / 2, actualSide: "bottom" };
 }
 
 function rectsOverlap(a: Rect, b: Rect): boolean {
-  return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
+  return (
+    a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y
+  );
 }
 
 /* ── Main component ────────────────────────────────────────────────── */
 
 interface WorkflowGuideProps {
-  open: boolean
-  onClose: () => void
+  open: boolean;
+  onClose: () => void;
   /** Called when the active step changes; receives the step key */
-  onStepChange?: (stepKey: string | null) => void
+  onStepChange?: (stepKey: string | null) => void;
 }
 
-export function WorkflowGuide({ open, onClose, onStepChange }: WorkflowGuideProps) {
-  const { t } = useTranslation()
-  const [step, setStep] = useState(0)
-  const [targetRect, setTargetRect] = useState<Rect | null>(null)
-  const [viewportSize, setViewportSize] = useState({ w: window.innerWidth, h: window.innerHeight })
-
-  const steps = useMemo(() => buildSteps({
-    openNodePalette: () => {
-      const btn = document.querySelector('[data-guide="node-palette-btn"]') as HTMLElement | null
-      // If palette is not visible, click the button to open it
-      const palette = document.querySelector('[data-guide="node-palette"]')
-      if (!palette && btn) btn.click()
-    },
-    closeNodePalette: () => {
-      // If palette is visible, we want it closed for this step
-      const palette = document.querySelector('[data-guide="node-palette"]')
-      const btn = document.querySelector('[data-guide="node-palette-btn"]') as HTMLElement | null
-      if (palette && btn) btn.click()
-    },
-  }), [])
-
-  const total = steps.length
-  const current = steps[step]
+export function WorkflowGuide({
+  open,
+  onClose,
+  onStepChange,
+}: WorkflowGuideProps) {
+  const { t } = useTranslation();
+  const [step, setStep] = useState(0);
+  const [targetRect, setTargetRect] = useState<Rect | null>(null);
+  const [viewportSize, setViewportSize] = useState({
+    w: window.innerWidth,
+    h: window.innerHeight,
+  });
+
+  const steps = useMemo(
+    () =>
+      buildSteps({
+        openNodePalette: () => {
+          const btn = document.querySelector(
+            '[data-guide="node-palette-btn"]',
+          ) as HTMLElement | null;
+          // If palette is not visible, click the button to open it
+          const palette = document.querySelector('[data-guide="node-palette"]');
+          if (!palette && btn) btn.click();
+        },
+        closeNodePalette: () => {
+          // If palette is visible, we want it closed for this step
+          const palette = document.querySelector('[data-guide="node-palette"]');
+          const btn = document.querySelector(
+            '[data-guide="node-palette-btn"]',
+          ) as HTMLElement | null;
+          if (palette && btn) btn.click();
+        },
+      }),
+    [],
+  );
+
+  const total = steps.length;
+  const current = steps[step];
 
   // Measure target element and viewport
   const measure = useCallback(() => {
-    setViewportSize({ w: window.innerWidth, h: window.innerHeight })
-    if (!current) return
-    const rect = getElementRect(current.target)
-    setTargetRect(rect)
-  }, [current])
+    setViewportSize({ w: window.innerWidth, h: window.innerHeight });
+    if (!current) return;
+    const rect = getElementRect(current.target);
+    setTargetRect(rect);
+  }, [current]);
 
   // Run prepare callback and measure on step change
   useEffect(() => {
-    if (!open) return
-    current?.prepare?.()
+    if (!open) return;
+    current?.prepare?.();
     // Small delay to let DOM update after prepare
-    const timer = setTimeout(measure, 80)
-    return () => clearTimeout(timer)
-  }, [open, step, current, measure])
+    const timer = setTimeout(measure, 80);
+    return () => clearTimeout(timer);
+  }, [open, step, current, measure]);
 
   // Periodic measurement for resize/scroll (throttled to ~100ms)
   useEffect(() => {
-    if (!open) return
-    const interval = setInterval(measure, 100)
-    window.addEventListener('resize', measure)
+    if (!open) return;
+    const interval = setInterval(measure, 100);
+    window.addEventListener("resize", measure);
     return () => {
-      clearInterval(interval)
-      window.removeEventListener('resize', measure)
-    }
-  }, [open, measure])
+      clearInterval(interval);
+      window.removeEventListener("resize", measure);
+    };
+  }, [open, measure]);
 
   // Keyboard navigation
   useEffect(() => {
-    if (!open) return
+    if (!open) return;
     const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') { onClose(); return }
-      if (e.key === 'ArrowRight' || e.key === 'Enter') {
-        e.preventDefault()
-        if (step < total - 1) setStep(s => s + 1)
-        else onClose()
+      if (e.key === "Escape") {
+        onClose();
+        return;
       }
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        if (step > 0) setStep(s => s - 1)
+      if (e.key === "ArrowRight" || e.key === "Enter") {
+        e.preventDefault();
+        if (step < total - 1) setStep((s) => s + 1);
+        else onClose();
       }
-    }
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [open, step, total, onClose])
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (step > 0) setStep((s) => s - 1);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, step, total, onClose]);
 
   // When opening: start at step 0 (welcome) only if welcome was never shown; otherwise start at step 1 so welcome appears only once
   useEffect(() => {
-    if (!open) return
-    persistentStorage.get<string>(GUIDE_WELCOME_SHOWN_KEY).then(v => {
-      setStep(v === '1' ? 1 : 0)
-    })
-  }, [open])
+    if (!open) return;
+    persistentStorage.get<string>(GUIDE_WELCOME_SHOWN_KEY).then((v) => {
+      setStep(v === "1" ? 1 : 0);
+    });
+  }, [open]);
 
   // Mark welcome as shown once we display it, so it only ever appears once
   useEffect(() => {
-    if (open && steps[step]?.key === 'welcome') {
-      persistentStorage.set(GUIDE_WELCOME_SHOWN_KEY, '1')
+    if (open && steps[step]?.key === "welcome") {
+      persistentStorage.set(GUIDE_WELCOME_SHOWN_KEY, "1");
     }
-  }, [open, step, steps])
+  }, [open, step, steps]);
 
   // Notify parent of step changes
   useEffect(() => {
     if (open) {
-      onStepChange?.(steps[step]?.key ?? null)
+      onStepChange?.(steps[step]?.key ?? null);
     } else {
-      onStepChange?.(null)
+      onStepChange?.(null);
     }
-  }, [open, step, steps, onStepChange])
+  }, [open, step, steps, onStepChange]);
 
-  if (!open) return null
+  if (!open) return null;
 
-  const { w: vw, h: vh } = viewportSize
-  const cutout = targetRect ? clampRect(padRect(targetRect, STAGE_PADDING), vw, vh) : null
-  const pathD = buildOverlayPath(vw, vh, cutout, STAGE_RADIUS)
-  const popPos = computePopoverPos(targetRect, current.side, vw, vh)
+  const { w: vw, h: vh } = viewportSize;
+  const cutout = targetRect
+    ? clampRect(padRect(targetRect, STAGE_PADDING), vw, vh)
+    : null;
+  const pathD = buildOverlayPath(vw, vh, cutout, STAGE_RADIUS);
+  const popPos = computePopoverPos(targetRect, current.side, vw, vh);
 
   return (
-    <div className="fixed inset-0 z-[99999]" role="dialog" aria-modal="true" aria-label="Workflow Guide">
+    <div
+      className="fixed inset-0 z-[99999]"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Workflow Guide"
+    >
       {/* SVG overlay with cutout */}
-      <svg className="absolute inset-0 w-full h-full" style={{ pointerEvents: 'none' }}>
+      <svg
+        className="absolute inset-0 w-full h-full"
+        style={{ pointerEvents: "none" }}
+      >
         <path
           d={pathD}
           fill="rgba(0,0,0,0.65)"
           fillRule="evenodd"
           style={{
-            transition: 'd 0.3s ease-in-out',
-            pointerEvents: 'auto',
+            transition: "d 0.3s ease-in-out",
+            pointerEvents: "auto",
           }}
-          onClick={e => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
         />
         {/* Highlight border around cutout for dark mode visibility */}
         {cutout && cutout.w > 0 && cutout.h > 0 && (
@@ -386,7 +425,10 @@ export function WorkflowGuide({ open, onClose, onStepChange }: WorkflowGuideProp
             fill="none"
             stroke="rgba(99,152,255,0.7)"
             strokeWidth={2}
-            style={{ transition: 'x 0.3s ease-in-out, y 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out' }}
+            style={{
+              transition:
+                "x 0.3s ease-in-out, y 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out",
+            }}
           />
         )}
       </svg>
@@ -394,42 +436,55 @@ export function WorkflowGuide({ open, onClose, onStepChange }: WorkflowGuideProp
       {/* Clickable backdrop (outside cutout) to prevent interaction */}
       <div
         className="absolute inset-0"
-        style={{ pointerEvents: 'auto' }}
-        onClick={e => {
+        style={{ pointerEvents: "auto" }}
+        onClick={(e) => {
           // Only close if clicking the dark overlay area, not the cutout
-          if (!cutout) return
-          const { clientX: mx, clientY: my } = e
-          const inCutout = mx >= cutout.x && mx <= cutout.x + cutout.w &&
-                           my >= cutout.y && my <= cutout.y + cutout.h
-          if (!inCutout) e.stopPropagation()
+          if (!cutout) return;
+          const { clientX: mx, clientY: my } = e;
+          const inCutout =
+            mx >= cutout.x &&
+            mx <= cutout.x + cutout.w &&
+            my >= cutout.y &&
+            my <= cutout.y + cutout.h;
+          if (!inCutout) e.stopPropagation();
         }}
       />
 
       {/* Popover */}
       <div
-        className="absolute z-[100000] rounded-xl border border-border bg-card shadow-2xl overflow-hidden"
+        className="absolute z-[100000] rounded-xl border border-border bg-card shadow-2xl overflow-hidden flex flex-col"
         style={{
           top: popPos.top,
           left: popPos.left,
           width: POPOVER_WIDTH,
           maxHeight: `calc(100vh - ${popPos.top + 16}px)`,
-          pointerEvents: 'auto',
-          transition: 'top 0.3s ease-in-out, left 0.3s ease-in-out',
+          pointerEvents: "auto",
+          transition: "top 0.3s ease-in-out, left 0.3s ease-in-out",
         }}
       >
-        {/* Content */}
-        <div className="px-5 pt-5 pb-3 overflow-y-auto" style={{ maxHeight: `calc(100vh - ${popPos.top + 80}px)` }}>
+        {/* Content — scrollable */}
+        <div className="px-5 pt-5 pb-3 overflow-y-auto flex-1 min-h-0">
           <h3 className="text-sm font-semibold mb-2 text-foreground">
             {t(`workflow.guide.${current.key}.title`, current.key)}
           </h3>
           <p className="text-xs text-muted-foreground leading-relaxed whitespace-pre-line">
-            {t(`workflow.guide.${current.key}.desc`, '')}
+            {t(`workflow.guide.${current.key}.desc`, "")}
           </p>
           {/* AI Task feature highlights */}
           {current.showAIFeatures && (
             <ul className="mt-3 space-y-1.5">
-              {(['modelSwitch', 'dynamicParams', 'costEstimate', 'upstream'] as const).map(k => (
-                <li key={k} className="flex items-start gap-2 text-xs text-muted-foreground">
+              {(
+                [
+                  "modelSwitch",
+                  "dynamicParams",
+                  "costEstimate",
+                  "upstream",
+                ] as const
+              ).map((k) => (
+                <li
+                  key={k}
+                  className="flex items-start gap-2 text-xs text-muted-foreground"
+                >
                   <span className="mt-0.5 text-primary shrink-0">•</span>
                   <span>{t(`workflow.guide.aiTask.features.${k}`, k)}</span>
                 </li>
@@ -438,8 +493,8 @@ export function WorkflowGuide({ open, onClose, onStepChange }: WorkflowGuideProp
           )}
         </div>
 
-        {/* Footer */}
-        <div className="px-5 pb-4 pt-2 flex items-center justify-between">
+        {/* Footer — always visible, never clipped */}
+        <div className="px-5 pb-4 pt-2 flex items-center justify-between shrink-0 border-t border-border/40">
           {/* Progress dots */}
           <div className="flex items-center gap-1.5">
             {steps.map((_, i) => (
@@ -448,10 +503,10 @@ export function WorkflowGuide({ open, onClose, onStepChange }: WorkflowGuideProp
                 onClick={() => setStep(i)}
                 className={`w-1.5 h-1.5 rounded-full transition-all duration-200 ${
                   i === step
-                    ? 'bg-primary w-4'
+                    ? "bg-primary w-4"
                     : i < step
-                      ? 'bg-primary/50'
-                      : 'bg-muted-foreground/30 hover:bg-muted-foreground/50'
+                      ? "bg-primary/50"
+                      : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
                 }`}
                 aria-label={`Step ${i + 1}`}
               />
@@ -464,27 +519,31 @@ export function WorkflowGuide({ open, onClose, onStepChange }: WorkflowGuideProp
               onClick={onClose}
               className="text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1"
             >
-              {t('workflow.guide.skip', 'Skip')}
+              {t("workflow.guide.skip", "Skip")}
             </button>
             {step > 0 && (
-              <Button variant="ghost" size="sm" onClick={() => setStep(s => s - 1)}>
-                {t('workflow.guide.prev', 'Back')}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setStep((s) => s - 1)}
+              >
+                {t("workflow.guide.prev", "Back")}
               </Button>
             )}
             <Button
               size="sm"
               onClick={() => {
-                if (step < total - 1) setStep(s => s + 1)
-                else onClose()
+                if (step < total - 1) setStep((s) => s + 1);
+                else onClose();
               }}
             >
               {step === total - 1
-                ? t('workflow.guide.finish', 'Get Started')
-                : t('workflow.guide.next', 'Next')}
+                ? t("workflow.guide.finish", "Get Started")
+                : t("workflow.guide.next", "Next")}
             </Button>
           </div>
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/WorkflowList.tsx b/src/workflow/components/WorkflowList.tsx
index f76c582c..2f0812d6 100644
--- a/src/workflow/components/WorkflowList.tsx
+++ b/src/workflow/components/WorkflowList.tsx
@@ -2,255 +2,334 @@
  * Workflow list — left-side panel (same style as NodePalette).
  * Click = open, double-click name = rename, right-click = context menu.
  */
-import { useEffect, useState, useCallback, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { workflowIpc, storageIpc } from '../ipc/ipc-client'
-import { useWorkflowStore } from '../stores/workflow.store'
-import { useUIStore } from '../stores/ui.store'
-import { Input } from '@/components/ui/input'
-import type { WorkflowSummary } from '@/workflow/types/ipc'
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { workflowIpc, storageIpc } from "../ipc/ipc-client";
+import { useWorkflowStore } from "../stores/workflow.store";
+import { useUIStore } from "../stores/ui.store";
+import { Input } from "@/components/ui/input";
+import type { WorkflowSummary } from "@/workflow/types/ipc";
 
 function formatBytes(bytes: number): string {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${(bytes / Math.pow(k, i)).toFixed(i > 1 ? 1 : 0)} ${sizes[i]}`
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(i > 1 ? 1 : 0)} ${sizes[i]}`;
 }
 
 interface WorkflowListProps {
-  onOpen?: (id: string) => Promise<void>
-  onDelete?: (id: string) => void
+  onOpen?: (id: string) => Promise<void>;
+  onDelete?: (id: string) => void;
 }
 
 interface ContextMenuState {
-  wfId: string
-  x: number
-  y: number
+  wfId: string;
+  x: number;
+  y: number;
 }
 
 export function WorkflowList({ onOpen, onDelete }: WorkflowListProps) {
-  const { t } = useTranslation()
-  const [workflows, setWorkflows] = useState<WorkflowSummary[]>([])
-  const [diskUsage, setDiskUsage] = useState<Record<string, number>>({})
-  const [newName, setNewName] = useState('')
-  const [cleaning, setCleaning] = useState<string | null>(null)
-  const [renamingId, setRenamingId] = useState<string | null>(null)
-  const [renamingValue, setRenamingValue] = useState('')
-  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null)
-  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null)
-  const [dragging, setDragging] = useState(false)
-  const { loadWorkflow, newWorkflow } = useWorkflowStore()
-  const currentWorkflowId = useWorkflowStore(s => s.workflowId)
-  const toggleWorkflowPanel = useUIStore(s => s.toggleWorkflowPanel)
-  const width = useUIStore(s => s.sidebarWidth)
-  const setSidebarWidth = useUIStore(s => s.setSidebarWidth)
-  const contextMenuRef = useRef<HTMLDivElement>(null)
+  const { t } = useTranslation();
+  const [workflows, setWorkflows] = useState<WorkflowSummary[]>([]);
+  const [diskUsage, setDiskUsage] = useState<Record<string, number>>({});
+  const [newName, setNewName] = useState("");
+  const [cleaning, setCleaning] = useState<string | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renamingValue, setRenamingValue] = useState("");
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const { loadWorkflow, newWorkflow } = useWorkflowStore();
+  const currentWorkflowId = useWorkflowStore((s) => s.workflowId);
+  const toggleWorkflowPanel = useUIStore((s) => s.toggleWorkflowPanel);
+  const width = useUIStore((s) => s.sidebarWidth);
+  const setSidebarWidth = useUIStore((s) => s.setSidebarWidth);
+  const contextMenuRef = useRef<HTMLDivElement>(null);
 
   const refresh = useCallback(() => {
-    workflowIpc.list().then(list => {
-      setWorkflows(list ?? [])
-      ;(list ?? []).forEach(wf => {
-        storageIpc.getWorkflowDiskUsage(wf.id).then(size => {
-          setDiskUsage(prev => ({ ...prev, [wf.id]: size }))
-        }).catch(() => {})
+    workflowIpc
+      .list()
+      .then((list) => {
+        setWorkflows(list ?? []);
+        (list ?? []).forEach((wf) => {
+          storageIpc
+            .getWorkflowDiskUsage(wf.id)
+            .then((size) => {
+              setDiskUsage((prev) => ({ ...prev, [wf.id]: size }));
+            })
+            .catch(() => {});
+        });
       })
-    }).catch(() => {})
-  }, [])
+      .catch(() => {});
+  }, []);
 
-  useEffect(() => { refresh() }, [refresh])
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
 
   // Close context menu on click outside
   useEffect(() => {
-    if (!contextMenu) return
+    if (!contextMenu) return;
     const handler = (e: MouseEvent) => {
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        setContextMenu(null)
+      if (
+        contextMenuRef.current &&
+        !contextMenuRef.current.contains(e.target as Node)
+      ) {
+        setContextMenu(null);
       }
-    }
-    document.addEventListener('mousedown', handler, true)
-    return () => document.removeEventListener('mousedown', handler, true)
-  }, [contextMenu])
+    };
+    document.addEventListener("mousedown", handler, true);
+    return () => document.removeEventListener("mousedown", handler, true);
+  }, [contextMenu]);
 
   const handleCreate = async () => {
-    if (!newName.trim()) return
-    const trimmed = newName.trim()
+    if (!newName.trim()) return;
+    const trimmed = newName.trim();
 
     // Check for duplicate name
-    const duplicate = workflows.find(w => w.name === trimmed)
+    const duplicate = workflows.find((w) => w.name === trimmed);
     if (duplicate) {
       // Name already taken — don't create
-      return
+      return;
     }
 
-    await newWorkflow(trimmed)
-    setNewName('')
-    refresh()
-  }
+    await newWorkflow(trimmed);
+    setNewName("");
+    refresh();
+  };
 
   const handleOpen = async (id: string) => {
     if (onOpen) {
-      await onOpen(id)
+      await onOpen(id);
     } else {
-      await loadWorkflow(id)
+      await loadWorkflow(id);
     }
-  }
+  };
 
   const handleDelete = async (id: string) => {
-    await workflowIpc.delete(id)
-    await storageIpc.deleteWorkflowFiles(id).catch(() => {})
-    setConfirmDeleteId(null)
-    onDelete?.(id)
-    refresh()
-  }
+    await workflowIpc.delete(id);
+    await storageIpc.deleteWorkflowFiles(id).catch(() => {});
+    setConfirmDeleteId(null);
+    onDelete?.(id);
+    refresh();
+  };
 
   const startRename = (wf: WorkflowSummary) => {
-    setRenamingId(wf.id)
-    setRenamingValue(wf.name)
-    setContextMenu(null)
-  }
+    setRenamingId(wf.id);
+    setRenamingValue(wf.name);
+    setContextMenu(null);
+  };
 
   const commitRename = async () => {
-    if (!renamingId) return
-    const trimmed = renamingValue.trim()
-    if (!trimmed) { setRenamingId(null); return }
+    if (!renamingId) return;
+    const trimmed = renamingValue.trim();
+    if (!trimmed) {
+      setRenamingId(null);
+      return;
+    }
 
     // Check for duplicate name in the current list (excluding self)
-    const duplicate = workflows.find(w => w.id !== renamingId && w.name === trimmed)
+    const duplicate = workflows.find(
+      (w) => w.id !== renamingId && w.name === trimmed,
+    );
     if (duplicate) {
       // Name already taken — don't allow
-      setRenamingId(null)
-      return
+      setRenamingId(null);
+      return;
     }
 
-    const result = await workflowIpc.rename(renamingId, trimmed) as unknown as { finalName: string } | void
-    const actualName = (result && typeof result === 'object' && 'finalName' in result) ? result.finalName : trimmed
+    const result = (await workflowIpc.rename(
+      renamingId,
+      trimmed,
+    )) as unknown as { finalName: string } | void;
+    const actualName =
+      result && typeof result === "object" && "finalName" in result
+        ? result.finalName
+        : trimmed;
 
     if (currentWorkflowId === renamingId) {
-      useWorkflowStore.getState().setWorkflowName(actualName)
+      useWorkflowStore.getState().setWorkflowName(actualName);
     }
-    setRenamingId(null)
-    refresh()
-  }
+    setRenamingId(null);
+    refresh();
+  };
 
   const handleCleanOutputs = async (id: string) => {
-    setCleaning(id)
-    setContextMenu(null)
+    setCleaning(id);
+    setContextMenu(null);
     try {
-      await storageIpc.cleanWorkflowOutputs(id)
-      const size = await storageIpc.getWorkflowDiskUsage(id)
-      setDiskUsage(prev => ({ ...prev, [id]: size }))
-    } catch (err) { console.error('Clean failed:', err) }
-    setCleaning(null)
-  }
-
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    setDragging(true)
-    const startX = e.clientX
-    const startWidth = width
-    const onMove = (ev: MouseEvent) => {
-      setSidebarWidth(startWidth + (ev.clientX - startX))
-    }
-    const onUp = () => {
-      setDragging(false)
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
+      await storageIpc.cleanWorkflowOutputs(id);
+      const size = await storageIpc.getWorkflowDiskUsage(id);
+      setDiskUsage((prev) => ({ ...prev, [id]: size }));
+    } catch (err) {
+      console.error("Clean failed:", err);
     }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [width, setSidebarWidth])
+    setCleaning(null);
+  };
+
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setDragging(true);
+      const startX = e.clientX;
+      const startWidth = width;
+      const onMove = (ev: MouseEvent) => {
+        setSidebarWidth(startWidth + (ev.clientX - startX));
+      };
+      const onUp = () => {
+        setDragging(false);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [width, setSidebarWidth],
+  );
 
-  const totalDiskUsage = Object.values(diskUsage).reduce((sum, v) => sum + v, 0)
+  const totalDiskUsage = Object.values(diskUsage).reduce(
+    (sum, v) => sum + v,
+    0,
+  );
 
   return (
-    <div className="border-r border-border bg-card text-card-foreground flex flex-col relative overflow-hidden h-full"
-      style={{ width, minWidth: 0 }}>
+    <div
+      className="border-r border-border bg-card text-card-foreground flex flex-col relative overflow-hidden h-full"
+      style={{ width, minWidth: 0 }}
+    >
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
-        <span className="font-semibold text-xs">{t('workflow.workflows', 'Workflows')}</span>
-        <button onClick={toggleWorkflowPanel} className="text-muted-foreground hover:text-foreground text-xs px-1" title={t('common.close', 'Close')}>
+        <span className="font-semibold text-xs">
+          {t("workflow.workflows", "Workflows")}
+        </span>
+        <button
+          onClick={toggleWorkflowPanel}
+          className="text-muted-foreground hover:text-foreground text-xs px-1"
+          title={t("common.close", "Close")}
+        >
           ✕
         </button>
       </div>
 
       {/* Create new */}
       <div className="px-2.5 py-2 border-b border-border flex gap-1.5">
-        <Input value={newName} onChange={e => setNewName(e.target.value)} placeholder={t('workflow.newWorkflowName', 'New workflow...')}
-          onKeyDown={e => e.key === 'Enter' && handleCreate()}
-          className={`flex-1 h-7 text-xs ${newName.trim() && workflows.some(w => w.name === newName.trim()) ? 'border-red-500 focus-visible:ring-red-500/50' : ''}`} />
-        <button onClick={handleCreate} disabled={!newName.trim() || workflows.some(w => w.name === newName.trim())}
-          className="h-7 px-2 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors">
+        <Input
+          value={newName}
+          onChange={(e) => setNewName(e.target.value)}
+          placeholder={t("workflow.newWorkflowName", "New workflow...")}
+          onKeyDown={(e) => e.key === "Enter" && handleCreate()}
+          className={`flex-1 h-7 text-xs ${newName.trim() && workflows.some((w) => w.name === newName.trim()) ? "border-red-500 focus-visible:ring-red-500/50" : ""}`}
+        />
+        <button
+          onClick={handleCreate}
+          disabled={
+            !newName.trim() || workflows.some((w) => w.name === newName.trim())
+          }
+          className="h-7 px-2 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+        >
           +
         </button>
       </div>
 
       {/* Workflow list */}
       <div className="flex-1 overflow-y-auto py-1">
-        {workflows.map(wf => {
-          const usage = diskUsage[wf.id]
-          const isActive = currentWorkflowId === wf.id
+        {workflows.map((wf) => {
+          const usage = diskUsage[wf.id];
+          const isActive = currentWorkflowId === wf.id;
           return (
-            <div key={wf.id}
+            <div
+              key={wf.id}
               onClick={() => handleOpen(wf.id)}
-              onContextMenu={e => {
-                e.preventDefault()
-                e.stopPropagation()
-                setContextMenu({ wfId: wf.id, x: e.clientX, y: e.clientY })
+              onContextMenu={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setContextMenu({ wfId: wf.id, x: e.clientX, y: e.clientY });
               }}
               className={`group flex items-center gap-1.5 px-2.5 py-2 mx-1 rounded-md cursor-pointer text-xs transition-colors
-                ${isActive ? 'bg-primary/10 text-foreground' : 'text-muted-foreground hover:bg-accent hover:text-foreground'}`}
+                ${isActive ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"}`}
             >
               <div className="flex-1 min-w-0">
                 {renamingId === wf.id ? (
                   <input
                     type="text"
                     value={renamingValue}
-                    onChange={e => setRenamingValue(e.target.value)}
+                    onChange={(e) => setRenamingValue(e.target.value)}
                     onBlur={commitRename}
-                    onKeyDown={e => {
-                      e.stopPropagation()
-                      if (e.key === 'Enter') commitRename()
-                      if (e.key === 'Escape') setRenamingId(null)
+                    onKeyDown={(e) => {
+                      e.stopPropagation();
+                      if (e.key === "Enter") commitRename();
+                      if (e.key === "Escape") setRenamingId(null);
                     }}
-                    onClick={e => e.stopPropagation()}
+                    onClick={(e) => e.stopPropagation()}
                     autoFocus
                     className={`w-full text-xs font-medium bg-transparent border-b outline-none ${
-                      renamingValue.trim() && workflows.some(w => w.id !== renamingId && w.name === renamingValue.trim())
-                        ? 'border-red-500 text-red-400'
-                        : 'border-primary'
+                      renamingValue.trim() &&
+                      workflows.some(
+                        (w) =>
+                          w.id !== renamingId &&
+                          w.name === renamingValue.trim(),
+                      )
+                        ? "border-red-500 text-red-400"
+                        : "border-primary"
                     }`}
                   />
                 ) : (
-                  <div className="font-medium truncate" onDoubleClick={e => {
-                    e.stopPropagation()
-                    startRename(wf)
-                  }}>{wf.name}</div>
+                  <div
+                    className="font-medium truncate"
+                    onDoubleClick={(e) => {
+                      e.stopPropagation();
+                      startRename(wf);
+                    }}
+                  >
+                    {wf.name}
+                  </div>
                 )}
                 <div className="text-[10px] text-muted-foreground/70 flex items-center gap-1.5 mt-0.5">
                   <span>{wf.nodeCount} nodes</span>
                   {usage !== undefined && usage > 0 && (
                     <>
                       <span>·</span>
-                      <span className={usage > 100 * 1024 * 1024 ? 'text-orange-400' : ''}>{formatBytes(usage)}</span>
+                      <span
+                        className={
+                          usage > 100 * 1024 * 1024 ? "text-orange-400" : ""
+                        }
+                      >
+                        {formatBytes(usage)}
+                      </span>
                     </>
                   )}
                 </div>
               </div>
               {/* Delete — visible on hover */}
-              <button onClick={e => { e.stopPropagation(); setConfirmDeleteId(wf.id) }}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmDeleteId(wf.id);
+                }}
                 className="w-6 h-6 flex items-center justify-center rounded text-muted-foreground hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100 flex-shrink-0"
-                title={t('workflow.deleteWorkflow', 'Delete')}>
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                title={t("workflow.deleteWorkflow", "Delete")}
+              >
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="3 6 5 6 21 6" />
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                 </svg>
               </button>
             </div>
-          )
+          );
         })}
         {workflows.length === 0 && (
           <div className="px-3 py-4 text-xs text-muted-foreground text-center">
-            {t('workflow.noWorkflowsYet', 'No workflows yet')}
+            {t("workflow.noWorkflowsYet", "No workflows yet")}
           </div>
         )}
       </div>
@@ -258,9 +337,22 @@ export function WorkflowList({ onOpen, onDelete }: WorkflowListProps) {
       {/* Footer — storage info */}
       <div className="px-3 py-2 border-t border-border text-[10px] text-muted-foreground/60 flex items-center justify-between">
         <span>{formatBytes(totalDiskUsage)}</span>
-        <button onClick={() => storageIpc.openArtifactsFolder()} className="hover:text-foreground transition-colors" title={t('workflow.openStorageFolder', 'Open storage folder')}>
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+        <button
+          onClick={() => storageIpc.openArtifactsFolder()}
+          className="hover:text-foreground transition-colors"
+          title={t("workflow.openStorageFolder", "Open storage folder")}
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
           </svg>
         </button>
       </div>
@@ -268,89 +360,166 @@ export function WorkflowList({ onOpen, onDelete }: WorkflowListProps) {
       {/* Resize handle */}
       <div
         onMouseDown={onResizeStart}
-        className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors ${dragging ? 'bg-primary' : 'hover:bg-primary/50'}`}
+        className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors ${dragging ? "bg-primary" : "hover:bg-primary/50"}`}
       />
 
       {/* ── Context menu (right-click) ────────────────────────── */}
-      {contextMenu && (() => {
-        const wf = workflows.find(w => w.id === contextMenu.wfId)
-        if (!wf) return null
-        const usage = diskUsage[wf.id]
-        return (
-          <div ref={contextMenuRef}
-            className="fixed z-[9999] w-44 rounded-lg border border-border bg-popover shadow-xl py-1 text-xs"
-            style={{ left: contextMenu.x, top: contextMenu.y }}>
-            {/* Rename */}
-            <button
-              onClick={() => startRename(wf)}
-              className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>
-              </svg>
-              {t('workflow.rename', 'Rename')}
-            </button>
-            {/* Duplicate */}
-            <button
-              onClick={async () => {
-                setContextMenu(null)
-                try {
-                  const newWf = await workflowIpc.duplicate(wf.id)
-                  refresh()
-                  if (newWf?.id) await handleOpen(newWf.id)
-                } catch {
-                  refresh()
-                }
-              }}
-              className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
-              </svg>
-              {t('workflow.duplicate', 'Duplicate')}
-            </button>
-            {/* Clean outputs */}
-            {usage !== undefined && usage > 0 && (
+      {contextMenu &&
+        (() => {
+          const wf = workflows.find((w) => w.id === contextMenu.wfId);
+          if (!wf) return null;
+          const usage = diskUsage[wf.id];
+          return (
+            <div
+              ref={contextMenuRef}
+              className="fixed z-[9999] w-44 rounded-lg border border-border bg-popover shadow-xl py-1 text-xs"
+              style={{ left: contextMenu.x, top: contextMenu.y }}
+            >
+              {/* Rename */}
               <button
-                onClick={() => handleCleanOutputs(wf.id)}
-                disabled={cleaning === wf.id}
-                className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors text-orange-500 dark:text-orange-400 disabled:opacity-40">
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+                onClick={() => startRename(wf)}
+                className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors"
+              >
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
+                  <path d="m15 5 4 4" />
                 </svg>
-                <span className="whitespace-nowrap">{cleaning === wf.id ? t('workflow.cleaning', 'Cleaning...') : t('workflow.cleanOutputs', 'Clean outputs')}</span>
-                <span className="ml-auto text-[10px] opacity-60 whitespace-nowrap">{formatBytes(usage)}</span>
+                {t("workflow.rename", "Rename")}
               </button>
-            )}
-            <div className="border-t border-border my-1" />
-            {/* Delete */}
-            <button
-              onClick={() => { setConfirmDeleteId(wf.id); setContextMenu(null) }}
-              className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors text-red-500 dark:text-red-400">
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-              </svg>
-              {t('workflow.deleteWorkflow', 'Delete')}
-            </button>
-          </div>
-        )
-      })()}
+              {/* Duplicate */}
+              <button
+                onClick={async () => {
+                  setContextMenu(null);
+                  try {
+                    const newWf = await workflowIpc.duplicate(wf.id);
+                    refresh();
+                    if (newWf?.id) await handleOpen(newWf.id);
+                  } catch {
+                    refresh();
+                  }
+                }}
+                className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors"
+              >
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                {t("workflow.duplicate", "Duplicate")}
+              </button>
+              {/* Clean outputs */}
+              {usage !== undefined && usage > 0 && (
+                <button
+                  onClick={() => handleCleanOutputs(wf.id)}
+                  disabled={cleaning === wf.id}
+                  className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors text-orange-500 dark:text-orange-400 disabled:opacity-40"
+                >
+                  <svg
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                    <polyline points="15 3 21 3 21 9" />
+                    <line x1="10" y1="14" x2="21" y2="3" />
+                  </svg>
+                  <span className="whitespace-nowrap">
+                    {cleaning === wf.id
+                      ? t("workflow.cleaning", "Cleaning...")
+                      : t("workflow.cleanOutputs", "Clean outputs")}
+                  </span>
+                  <span className="ml-auto text-[10px] opacity-60 whitespace-nowrap">
+                    {formatBytes(usage)}
+                  </span>
+                </button>
+              )}
+              <div className="border-t border-border my-1" />
+              {/* Delete */}
+              <button
+                onClick={() => {
+                  setConfirmDeleteId(wf.id);
+                  setContextMenu(null);
+                }}
+                className="w-full text-left px-3 py-1.5 flex items-center gap-2 hover:bg-accent transition-colors text-red-500 dark:text-red-400"
+              >
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="3 6 5 6 21 6" />
+                  <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                </svg>
+                {t("workflow.deleteWorkflow", "Delete")}
+              </button>
+            </div>
+          );
+        })()}
 
       {/* Delete confirmation */}
       {confirmDeleteId && (
-        <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60" onClick={() => setConfirmDeleteId(null)}>
-          <div className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl" onClick={e => e.stopPropagation()}>
-            <h3 className="text-sm font-semibold mb-1">{t('workflow.deleteWorkflow', 'Delete Workflow')}</h3>
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
+          onClick={() => setConfirmDeleteId(null)}
+        >
+          <div
+            className="w-[340px] rounded-xl border border-border bg-card p-5 shadow-xl"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h3 className="text-sm font-semibold mb-1">
+              {t("workflow.deleteWorkflow", "Delete Workflow")}
+            </h3>
             <p className="text-xs text-muted-foreground mb-4">
-              {t('workflow.deleteConfirm', { name: workflows.find(w => w.id === confirmDeleteId)?.name, defaultValue: 'Are you sure you want to delete "{{name}}"? This cannot be undone.' })}
+              {t("workflow.deleteConfirm", {
+                name: workflows.find((w) => w.id === confirmDeleteId)?.name,
+                defaultValue:
+                  'Are you sure you want to delete "{{name}}"? This cannot be undone.',
+              })}
             </p>
             <div className="flex justify-end gap-2">
-              <button onClick={() => setConfirmDeleteId(null)}
-                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors">{t('common.cancel', 'Cancel')}</button>
-              <button onClick={() => handleDelete(confirmDeleteId)}
-                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors">{t('common.delete', 'Delete')}</button>
+              <button
+                onClick={() => setConfirmDeleteId(null)}
+                className="px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {t("common.cancel", "Cancel")}
+              </button>
+              <button
+                onClick={() => handleDelete(confirmDeleteId)}
+                className="px-4 py-1.5 rounded-md text-xs font-medium bg-red-500 text-white hover:bg-red-600 transition-colors"
+              >
+                {t("common.delete", "Delete")}
+              </button>
             </div>
           </div>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/AnnotationNode.tsx b/src/workflow/components/canvas/AnnotationNode.tsx
index 15bd6a36..65b857b2 100644
--- a/src/workflow/components/canvas/AnnotationNode.tsx
+++ b/src/workflow/components/canvas/AnnotationNode.tsx
@@ -2,89 +2,120 @@
  * Annotation node — a simple text note on the canvas with no handles.
  * Supports title and body text. Double-click to edit.
  */
-import { memo, useState } from 'react'
-import { type NodeProps } from 'reactflow'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import { CompInput, CompTextarea } from './composition-input'
+import { memo, useState } from "react";
+import { type NodeProps } from "reactflow";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import { CompInput, CompTextarea } from "./composition-input";
 
 interface AnnotationData {
-  nodeType: string
-  params: { title?: string; body?: string; color?: string }
-  label: string
+  nodeType: string;
+  params: { title?: string; body?: string; color?: string };
+  label: string;
 }
 
 const COLORS = [
-  { name: 'Gray', value: 'hsl(var(--muted))' },
-  { name: 'Blue', value: 'rgba(96,165,250,0.15)' },
-  { name: 'Green', value: 'rgba(74,222,128,0.15)' },
-  { name: 'Orange', value: 'rgba(251,146,60,0.15)' },
-  { name: 'Purple', value: 'rgba(168,85,247,0.15)' },
-  { name: 'Pink', value: 'rgba(244,114,182,0.15)' },
-]
+  { name: "Gray", value: "hsl(var(--muted))" },
+  { name: "Blue", value: "rgba(96,165,250,0.15)" },
+  { name: "Green", value: "rgba(74,222,128,0.15)" },
+  { name: "Orange", value: "rgba(251,146,60,0.15)" },
+  { name: "Purple", value: "rgba(168,85,247,0.15)" },
+  { name: "Pink", value: "rgba(244,114,182,0.15)" },
+];
 
-function AnnotationNodeComponent({ id, data, selected }: NodeProps<AnnotationData>) {
-  const [editing, setEditing] = useState(false)
-  const updateNodeParams = useWorkflowStore(s => s.updateNodeParams)
-  const params = data.params ?? {}
-  const title = params.title ?? ''
-  const body = params.body ?? ''
-  const bgColor = params.color ?? COLORS[0].value
+function AnnotationNodeComponent({
+  id,
+  data,
+  selected,
+}: NodeProps<AnnotationData>) {
+  const [editing, setEditing] = useState(false);
+  const updateNodeParams = useWorkflowStore((s) => s.updateNodeParams);
+  const params = data.params ?? {};
+  const title = params.title ?? "";
+  const body = params.body ?? "";
+  const bgColor = params.color ?? COLORS[0].value;
 
   const setField = (key: string, value: string) => {
-    updateNodeParams(id, { ...params, [key]: value })
-  }
+    updateNodeParams(id, { ...params, [key]: value });
+  };
 
   const onWheel = (e: React.WheelEvent) => {
-    const el = e.target as Node | null
-    if (!el) return
-    const tag = el instanceof HTMLElement ? el.tagName.toLowerCase() : ''
-    if (tag === 'textarea' || tag === 'input') {
-      e.stopPropagation()
+    const el = e.target as Node | null;
+    if (!el) return;
+    const tag = el instanceof HTMLElement ? el.tagName.toLowerCase() : "";
+    if (tag === "textarea" || tag === "input") {
+      e.stopPropagation();
     } else if (el instanceof HTMLElement && el.isContentEditable) {
-      e.stopPropagation()
+      e.stopPropagation();
     }
-  }
+  };
 
   return (
     <div
-      onDoubleClick={e => { e.stopPropagation(); setEditing(true) }}
+      onDoubleClick={(e) => {
+        e.stopPropagation();
+        setEditing(true);
+      }}
       onWheel={onWheel}
       className={`rounded-lg border-2 p-3 min-w-[200px] max-w-[350px] transition-shadow
-        ${selected ? 'border-blue-500/50 ring-1 ring-blue-500/20' : 'border-transparent'}`}
+        ${selected ? "border-blue-500/50 ring-1 ring-blue-500/20" : "border-transparent"}`}
       style={{ background: bgColor, fontSize: 13 }}
     >
       {editing ? (
-        <div className="space-y-2" onClick={e => e.stopPropagation()}>
-          <CompInput type="text" value={title} onChange={e => setField('title', e.target.value)}
-            placeholder="Note title…" autoFocus
-            className="w-full bg-transparent font-bold text-sm outline-none border-b border-[hsl(var(--border))] pb-1 text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))]" />
-          <CompTextarea value={body} onChange={e => setField('body', e.target.value)}
-            placeholder="Write a note…" rows={3}
-            className="w-full bg-transparent text-xs outline-none resize-y min-h-[40px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))]" />
+        <div className="space-y-2" onClick={(e) => e.stopPropagation()}>
+          <CompInput
+            type="text"
+            value={title}
+            onChange={(e) => setField("title", e.target.value)}
+            placeholder="Note title…"
+            autoFocus
+            className="w-full bg-transparent font-bold text-sm outline-none border-b border-[hsl(var(--border))] pb-1 text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))]"
+          />
+          <CompTextarea
+            value={body}
+            onChange={(e) => setField("body", e.target.value)}
+            placeholder="Write a note…"
+            rows={3}
+            className="w-full bg-transparent text-xs outline-none resize-y min-h-[40px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))]"
+          />
           <div className="flex items-center gap-1">
-            {COLORS.map(c => (
-              <button key={c.name} onClick={() => setField('color', c.value)}
+            {COLORS.map((c) => (
+              <button
+                key={c.name}
+                onClick={() => setField("color", c.value)}
                 title={c.name}
-                className={`w-5 h-5 rounded-full border-2 transition-transform ${params.color === c.value ? 'border-blue-400 scale-110' : 'border-transparent hover:scale-105'}`}
-                style={{ background: c.value }} />
+                className={`w-5 h-5 rounded-full border-2 transition-transform ${params.color === c.value ? "border-blue-400 scale-110" : "border-transparent hover:scale-105"}`}
+                style={{ background: c.value }}
+              />
             ))}
             <div className="flex-1" />
-            <button onClick={() => setEditing(false)}
-              className="text-[10px] text-blue-400 hover:underline">Done</button>
+            <button
+              onClick={() => setEditing(false)}
+              className="text-[10px] text-blue-400 hover:underline"
+            >
+              Done
+            </button>
           </div>
         </div>
       ) : (
         <>
-          {title && <div className="font-bold text-sm mb-1 text-[hsl(var(--foreground))]">{title}</div>}
+          {title && (
+            <div className="font-bold text-sm mb-1 text-[hsl(var(--foreground))]">
+              {title}
+            </div>
+          )}
           {body ? (
-            <div className="text-xs text-[hsl(var(--muted-foreground))] whitespace-pre-wrap">{body}</div>
+            <div className="text-xs text-[hsl(var(--muted-foreground))] whitespace-pre-wrap">
+              {body}
+            </div>
           ) : !title ? (
-            <div className="text-xs text-[hsl(var(--muted-foreground))] italic">Double-click to add a note</div>
+            <div className="text-xs text-[hsl(var(--muted-foreground))] italic">
+              Double-click to add a note
+            </div>
           ) : null}
         </>
       )}
     </div>
-  )
+  );
 }
 
-export const AnnotationNode = memo(AnnotationNodeComponent)
+export const AnnotationNode = memo(AnnotationNodeComponent);
diff --git a/src/workflow/components/canvas/ContextMenu.tsx b/src/workflow/components/canvas/ContextMenu.tsx
index d46eec82..54086ea0 100644
--- a/src/workflow/components/canvas/ContextMenu.tsx
+++ b/src/workflow/components/canvas/ContextMenu.tsx
@@ -1,92 +1,118 @@
 /**
  * Context menu — polished dropdown for node/canvas right-click actions.
  */
-import { useEffect, useRef, type ReactNode } from 'react'
+import { useEffect, useRef, type ReactNode } from "react";
 
 export interface ContextMenuItem {
-  label: string
-  action: () => void
-  shortcut?: string
-  icon?: string
-  disabled?: boolean
-  divider?: boolean
-  keepOpen?: boolean
-  destructive?: boolean
+  label: string;
+  action: () => void;
+  shortcut?: string;
+  icon?: string;
+  disabled?: boolean;
+  divider?: boolean;
+  keepOpen?: boolean;
+  destructive?: boolean;
 }
 
 interface ContextMenuProps {
-  x: number
-  y: number
-  items?: ContextMenuItem[]
-  onClose: () => void
-  width?: number
-  estimatedHeight?: number
-  children?: ReactNode
+  x: number;
+  y: number;
+  items?: ContextMenuItem[];
+  onClose: () => void;
+  width?: number;
+  estimatedHeight?: number;
+  children?: ReactNode;
 }
 
-export function ContextMenu({ x, y, items = [], onClose, width = 200, estimatedHeight, children }: ContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null)
+export function ContextMenu({
+  x,
+  y,
+  items = [],
+  onClose,
+  width = 200,
+  estimatedHeight,
+  children,
+}: ContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(event.target as Node)) onClose()
-    }
-    const timer = setTimeout(() => document.addEventListener('mousedown', handleClickOutside), 100)
-    return () => { clearTimeout(timer); document.removeEventListener('mousedown', handleClickOutside) }
-  }, [onClose])
+      if (menuRef.current && !menuRef.current.contains(event.target as Node))
+        onClose();
+    };
+    const timer = setTimeout(
+      () => document.addEventListener("mousedown", handleClickOutside),
+      100,
+    );
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [onClose]);
 
   useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose() }
-    document.addEventListener('keydown', handleEscape)
-    return () => document.removeEventListener('keydown', handleEscape)
-  }, [onClose])
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
 
   // Adjust position to stay within viewport
   const adjustedStyle = (() => {
-    const menuWidth = width
-    const menuHeight = estimatedHeight ?? Math.max(120, items.length * 36)
-    const left = x + menuWidth > window.innerWidth ? x - menuWidth : x
-    const top = y + menuHeight > window.innerHeight ? y - menuHeight : y
-    return { left: Math.max(4, left), top: Math.max(4, top) }
-  })()
+    const menuWidth = width;
+    const menuHeight = estimatedHeight ?? Math.max(120, items.length * 36);
+    const left = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+    const top = y + menuHeight > window.innerHeight ? y - menuHeight : y;
+    return { left: Math.max(4, left), top: Math.max(4, top) };
+  })();
 
   return (
     <div
       ref={menuRef}
-      className={`fixed z-[1000] rounded-lg border border-border bg-popover/95 backdrop-blur-sm text-popover-foreground shadow-xl ${children ? '' : 'py-1 min-w-[180px]'}`}
+      className={`fixed z-[1000] rounded-lg border border-border bg-popover/95 backdrop-blur-sm text-popover-foreground shadow-xl ${children ? "" : "py-1 min-w-[180px]"}`}
       style={adjustedStyle}
     >
-      {children ?? items.map((item, index) => {
-        if (item.divider) {
-          return <div key={`div-${index}`} className="my-1 mx-2 h-px bg-border" />
-        }
-        return (
-          <button
-            key={index}
-            onClick={() => {
-              if (!item.disabled) {
-                item.action()
-                if (!item.keepOpen) onClose()
-              }
-            }}
-            disabled={item.disabled}
-            className={`w-full flex items-center justify-between px-3 py-1.5 text-left text-[13px] transition-colors
-              ${item.disabled
-                ? 'opacity-40 cursor-not-allowed'
-                : item.destructive
-                  ? 'hover:bg-red-500/10 text-red-400'
-                  : 'hover:bg-accent'}`}
-          >
-            <span className="flex items-center gap-2.5">
-              {item.icon && <span className="w-4 text-center text-sm">{item.icon}</span>}
-              <span>{item.label}</span>
-            </span>
-            {item.shortcut && (
-              <span className="ml-6 text-[11px] text-muted-foreground/70">{item.shortcut}</span>
-            )}
-          </button>
-        )
-      })}
+      {children ??
+        items.map((item, index) => {
+          if (item.divider) {
+            return (
+              <div key={`div-${index}`} className="my-1 mx-2 h-px bg-border" />
+            );
+          }
+          return (
+            <button
+              key={index}
+              onClick={() => {
+                if (!item.disabled) {
+                  item.action();
+                  if (!item.keepOpen) onClose();
+                }
+              }}
+              disabled={item.disabled}
+              className={`w-full flex items-center justify-between px-3 py-1.5 text-left text-[13px] transition-colors
+              ${
+                item.disabled
+                  ? "opacity-40 cursor-not-allowed"
+                  : item.destructive
+                    ? "hover:bg-red-500/10 text-red-400"
+                    : "hover:bg-accent"
+              }`}
+            >
+              <span className="flex items-center gap-2.5">
+                {item.icon && (
+                  <span className="w-4 text-center text-sm">{item.icon}</span>
+                )}
+                <span>{item.label}</span>
+              </span>
+              {item.shortcut && (
+                <span className="ml-6 text-[11px] text-muted-foreground/70">
+                  {item.shortcut}
+                </span>
+              )}
+            </button>
+          );
+        })}
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/CustomEdge.tsx b/src/workflow/components/canvas/CustomEdge.tsx
index d21d403e..18864a9c 100644
--- a/src/workflow/components/canvas/CustomEdge.tsx
+++ b/src/workflow/components/canvas/CustomEdge.tsx
@@ -2,32 +2,56 @@
  * Custom edge component — color-coded by execution status.
  * Rewritten with Tailwind classes.
  */
-import { useState } from 'react'
-import { getBezierPath, type EdgeProps, EdgeLabelRenderer, BaseEdge } from 'reactflow'
-import { useExecutionStore } from '../../stores/execution.store'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import type { EdgeStatus } from '@/workflow/types/execution'
+import { useState } from "react";
+import {
+  getBezierPath,
+  type EdgeProps,
+  EdgeLabelRenderer,
+  BaseEdge,
+} from "reactflow";
+import { useExecutionStore } from "../../stores/execution.store";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import type { EdgeStatus } from "@/workflow/types/execution";
 
 export function CustomEdge({
-  id, sourceX, sourceY, targetX, targetY,
-  sourcePosition, targetPosition, style = {}, selected, source, target: _target
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  selected,
+  source,
+  target: _target,
 }: EdgeProps) {
-  const status = useExecutionStore(s => s.edgeStatuses[id] ?? 'no-data') as EdgeStatus
-  const sourceNodeStatus = useExecutionStore(s => s.nodeStatuses[source] ?? 'idle')
-  const removeEdge = useWorkflowStore(s => s.removeEdge)
-  const [isHovered, setIsHovered] = useState(false)
+  const status = useExecutionStore(
+    (s) => s.edgeStatuses[id] ?? "no-data",
+  ) as EdgeStatus;
+  const sourceNodeStatus = useExecutionStore(
+    (s) => s.nodeStatuses[source] ?? "idle",
+  );
+  const removeEdge = useWorkflowStore((s) => s.removeEdge);
+  const [isHovered, setIsHovered] = useState(false);
 
   const [edgePath, labelX, labelY] = getBezierPath({
-    sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition
-  })
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
 
   // Default: visible blue-tinted line that fits the dark theme
-  let edgeColor = '#6b7fa8'
-  let edgeOpacity = 1.0
-  if (sourceNodeStatus === 'running') edgeColor = '#60a5fa'
-  else if (sourceNodeStatus === 'confirmed' && status === 'has-data') edgeColor = '#4ade80'
-  else if (sourceNodeStatus === 'unconfirmed') edgeColor = '#fb923c'
-  else if (status === 'no-data') edgeOpacity = 0.7
+  let edgeColor = "#6b7fa8";
+  let edgeOpacity = 1.0;
+  if (sourceNodeStatus === "running") edgeColor = "#60a5fa";
+  else if (sourceNodeStatus === "confirmed" && status === "has-data")
+    edgeColor = "#4ade80";
+  else if (sourceNodeStatus === "unconfirmed") edgeColor = "#fb923c";
+  else if (status === "no-data") edgeOpacity = 0.7;
 
   return (
     <>
@@ -36,10 +60,14 @@ export function CustomEdge({
         path={edgePath}
         style={{
           ...style,
-          stroke: selected ? 'hsl(var(--primary))' : isHovered ? 'hsl(var(--muted-foreground))' : edgeColor,
+          stroke: selected
+            ? "hsl(var(--primary))"
+            : isHovered
+              ? "hsl(var(--muted-foreground))"
+              : edgeColor,
           strokeWidth: selected ? 3 : 2,
           opacity: edgeOpacity,
-          transition: 'stroke 0.3s ease, opacity 0.3s ease'
+          transition: "stroke 0.3s ease, opacity 0.3s ease",
         }}
       />
       <path
@@ -49,7 +77,7 @@ export function CustomEdge({
         strokeWidth={20}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
-        style={{ cursor: 'pointer' }}
+        style={{ cursor: "pointer" }}
       />
       {(isHovered || selected) && (
         <EdgeLabelRenderer>
@@ -57,13 +85,16 @@ export function CustomEdge({
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
             style={{
-              position: 'absolute',
+              position: "absolute",
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              pointerEvents: 'all'
+              pointerEvents: "all",
             }}
           >
             <button
-              onClick={(e) => { e.stopPropagation(); removeEdge(id) }}
+              onClick={(e) => {
+                e.stopPropagation();
+                removeEdge(id);
+              }}
               className="flex h-5 w-5 items-center justify-center rounded-full border border-red-500/60 bg-background text-red-400 text-xs hover:bg-red-500 hover:text-white hover:border-red-500 transition-colors shadow-md"
               title="Delete connection"
             >
@@ -73,5 +104,5 @@ export function CustomEdge({
         </EdgeLabelRenderer>
       )}
     </>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/CustomNode.tsx b/src/workflow/components/canvas/CustomNode.tsx
index a4527b15..a63e4a31 100644
--- a/src/workflow/components/canvas/CustomNode.tsx
+++ b/src/workflow/components/canvas/CustomNode.tsx
@@ -3,5 +3,5 @@
  *
  * Keeps backward compatibility: external files can still import { CustomNode } from './CustomNode'
  */
-export { CustomNode } from './custom-node/CustomNode'
-export type { CustomNodeData } from './custom-node/CustomNode'
+export { CustomNode } from "./custom-node/CustomNode";
+export type { CustomNodeData } from "./custom-node/CustomNode";
diff --git a/src/workflow/components/canvas/ExecutionToolbar.tsx b/src/workflow/components/canvas/ExecutionToolbar.tsx
index 40201347..ed064c6b 100644
--- a/src/workflow/components/canvas/ExecutionToolbar.tsx
+++ b/src/workflow/components/canvas/ExecutionToolbar.tsx
@@ -2,63 +2,103 @@
  * Execution control toolbar — Run All, Cancel. Includes daily budget display.
  * Execution runs in browser only (runAllInBrowser).
  */
-import { useEffect, useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import { useExecutionStore } from '../../stores/execution.store'
-import { useUIStore } from '../../stores/ui.store'
-import { costIpc } from '../../ipc/ipc-client'
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import { useExecutionStore } from "../../stores/execution.store";
+import { useUIStore } from "../../stores/ui.store";
+import { costIpc } from "../../ipc/ipc-client";
 
 export function ExecutionToolbar() {
-  const workflowId = useWorkflowStore(s => s.workflowId)
-  const nodes = useWorkflowStore(s => s.nodes)
-  const edges = useWorkflowStore(s => s.edges)
-  const selectedNodeId = useUIStore(s => s.selectedNodeId)
-  const { runAllInBrowser, runNode, cancelNode, activeExecutions } = useExecutionStore()
-  const isRunning = activeExecutions.size > 0
+  const workflowId = useWorkflowStore((s) => s.workflowId);
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const edges = useWorkflowStore((s) => s.edges);
+  const selectedNodeId = useUIStore((s) => s.selectedNodeId);
+  const { runAllInBrowser, runNode, cancelNode, activeExecutions } =
+    useExecutionStore();
+  const isRunning = activeExecutions.size > 0;
 
-  const [dailySpend, setDailySpend] = useState<number>(0)
-  const [dailyLimit, setDailyLimit] = useState<number>(100)
+  const [dailySpend, setDailySpend] = useState<number>(0);
+  const [dailyLimit, setDailyLimit] = useState<number>(100);
 
   useEffect(() => {
-    if (!workflowId) return
-    costIpc.getDailySpend().then(setDailySpend).catch(() => {})
-    costIpc.getBudget().then(b => setDailyLimit(b.dailyLimit)).catch(() => {})
-  }, [workflowId])
+    if (!workflowId) return;
+    costIpc
+      .getDailySpend()
+      .then(setDailySpend)
+      .catch(() => {});
+    costIpc
+      .getBudget()
+      .then((b) => setDailyLimit(b.dailyLimit))
+      .catch(() => {});
+  }, [workflowId]);
 
   useEffect(() => {
     if (!isRunning && workflowId) {
-      costIpc.getDailySpend().then(setDailySpend).catch(() => {})
+      costIpc
+        .getDailySpend()
+        .then(setDailySpend)
+        .catch(() => {});
     }
-  }, [isRunning, workflowId])
+  }, [isRunning, workflowId]);
 
-  const spendPercent = dailyLimit > 0 ? (dailySpend / dailyLimit) * 100 : 0
-  const spendColor = spendPercent > 80 ? 'text-red-400' : spendPercent > 50 ? 'text-orange-400' : 'text-green-400'
+  const spendPercent = dailyLimit > 0 ? (dailySpend / dailyLimit) * 100 : 0;
+  const spendColor =
+    spendPercent > 80
+      ? "text-red-400"
+      : spendPercent > 50
+        ? "text-orange-400"
+        : "text-green-400";
 
   return (
     <div className="flex items-center gap-2 px-4 py-1.5 border-b border-border bg-card">
-      <Button variant="outline" size="sm" disabled={nodes.length === 0}
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={nodes.length === 0}
         onClick={() => {
-          const browserNodes = nodes.map(n => ({
+          const browserNodes = nodes.map((n) => ({
             id: n.id,
             data: {
-              nodeType: n.data?.nodeType ?? '',
-              params: { ...(n.data?.params ?? {}), __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] } },
-              label: n.data?.label
-            }
-          }))
-          const browserEdges = edges.map(e => ({ source: e.source, target: e.target, sourceHandle: e.sourceHandle ?? undefined, targetHandle: e.targetHandle ?? undefined }))
-          runAllInBrowser(browserNodes, browserEdges)
-        }}>
+              nodeType: n.data?.nodeType ?? "",
+              params: {
+                ...(n.data?.params ?? {}),
+                __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] },
+              },
+              label: n.data?.label,
+            },
+          }));
+          const browserEdges = edges.map((e) => ({
+            source: e.source,
+            target: e.target,
+            sourceHandle: e.sourceHandle ?? undefined,
+            targetHandle: e.targetHandle ?? undefined,
+          }));
+          runAllInBrowser(browserNodes, browserEdges);
+        }}
+      >
         ▶ Run All
       </Button>
-      <Button variant="outline" size="sm" disabled={nodes.length === 0 || !selectedNodeId}
-        onClick={() => selectedNodeId && runNode(workflowId ?? '', selectedNodeId)}>
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={nodes.length === 0 || !selectedNodeId}
+        onClick={() =>
+          selectedNodeId && runNode(workflowId ?? "", selectedNodeId)
+        }
+      >
         ▶ Run Node
       </Button>
       {isRunning && selectedNodeId && (
-        <Button variant="destructive" size="sm"
-          onClick={() => workflowId && selectedNodeId && cancelNode(workflowId, selectedNodeId)}>
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={() =>
+            workflowId &&
+            selectedNodeId &&
+            cancelNode(workflowId, selectedNodeId)
+          }
+        >
           ⏹ Cancel
         </Button>
       )}
@@ -68,10 +108,12 @@ export function ExecutionToolbar() {
 
       {/* Daily budget */}
       {workflowId && (
-        <span className={`text-[11px] px-2 py-0.5 rounded bg-[hsl(var(--muted))] ${spendColor}`}>
+        <span
+          className={`text-[11px] px-2 py-0.5 rounded bg-[hsl(var(--muted))] ${spendColor}`}
+        >
           Daily: ${dailySpend.toFixed(2)} / ${dailyLimit.toFixed(0)}
         </span>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/NodePalette.tsx b/src/workflow/components/canvas/NodePalette.tsx
index 1fb1f6a8..7653a843 100644
--- a/src/workflow/components/canvas/NodePalette.tsx
+++ b/src/workflow/components/canvas/NodePalette.tsx
@@ -2,110 +2,150 @@
  * Node palette — categorised list of available node types.
  * Drag to canvas or click to add. Resizable width via drag handle.
  */
-import { type DragEvent, useCallback, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useUIStore } from '../../stores/ui.store'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import type { NodeTypeDefinition } from '@/workflow/types/node-defs'
-import { fuzzySearch } from '@/lib/fuzzySearch'
-import { Search, X, ChevronDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { getNodeIcon } from './custom-node/NodeIcons'
+import { type DragEvent, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useUIStore } from "../../stores/ui.store";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import type { NodeTypeDefinition } from "@/workflow/types/node-defs";
+import { fuzzySearch } from "@/lib/fuzzySearch";
+import { Search, X, ChevronDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { getNodeIcon } from "./custom-node/NodeIcons";
 
 /* ── category colour dots ─────────────────────────────────── */
 const catDot: Record<string, string> = {
-  'ai-task':    'bg-violet-500',
-  'input':      'bg-blue-500',
-  'output':     'bg-emerald-500',
-  'processing': 'bg-amber-500',
-  'free-tool':  'bg-rose-500',
-  'control':    'bg-cyan-500',
-}
+  "ai-task": "bg-violet-500",
+  input: "bg-blue-500",
+  output: "bg-emerald-500",
+  processing: "bg-amber-500",
+  "free-tool": "bg-rose-500",
+  control: "bg-cyan-500",
+};
 
-const RECENT_NODE_TYPES_KEY = 'workflowRecentNodeTypes'
-const MAX_RECENT_NODE_TYPES = 8
+const RECENT_NODE_TYPES_KEY = "workflowRecentNodeTypes";
+const MAX_RECENT_NODE_TYPES = 8;
 
 function recordRecentNodeType(nodeType: string) {
   try {
-    const raw = localStorage.getItem(RECENT_NODE_TYPES_KEY)
-    const prev = raw ? JSON.parse(raw) : []
-    const list = Array.isArray(prev) ? prev.filter((v): v is string => typeof v === 'string') : []
-    const next = [nodeType, ...list.filter(t => t !== nodeType)].slice(0, MAX_RECENT_NODE_TYPES)
-    localStorage.setItem(RECENT_NODE_TYPES_KEY, JSON.stringify(next))
-  } catch { /* noop */ }
+    const raw = localStorage.getItem(RECENT_NODE_TYPES_KEY);
+    const prev = raw ? JSON.parse(raw) : [];
+    const list = Array.isArray(prev)
+      ? prev.filter((v): v is string => typeof v === "string")
+      : [];
+    const next = [nodeType, ...list.filter((t) => t !== nodeType)].slice(
+      0,
+      MAX_RECENT_NODE_TYPES,
+    );
+    localStorage.setItem(RECENT_NODE_TYPES_KEY, JSON.stringify(next));
+  } catch {
+    /* noop */
+  }
 }
 
 interface NodePaletteProps {
-  definitions: NodeTypeDefinition[]
+  definitions: NodeTypeDefinition[];
 }
 
 export function NodePalette({ definitions }: NodePaletteProps) {
-  const { t } = useTranslation()
-  const toggleNodePalette = useUIStore(s => s.toggleNodePalette)
-  const addNode = useWorkflowStore(s => s.addNode)
-  const width = useUIStore(s => s.sidebarWidth)
-  const setSidebarWidth = useUIStore(s => s.setSidebarWidth)
-  const [dragging, setDragging] = useState(false)
-  const [query, setQuery] = useState('')
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({})
+  const { t } = useTranslation();
+  const toggleNodePalette = useUIStore((s) => s.toggleNodePalette);
+  const addNode = useWorkflowStore((s) => s.addNode);
+  const width = useUIStore((s) => s.sidebarWidth);
+  const setSidebarWidth = useUIStore((s) => s.setSidebarWidth);
+  const [dragging, setDragging] = useState(false);
+  const [query, setQuery] = useState("");
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
 
   const onDragStart = (event: DragEvent, nodeType: string) => {
-    event.dataTransfer.setData('application/reactflow-nodetype', nodeType)
-    event.dataTransfer.effectAllowed = 'move'
-  }
+    event.dataTransfer.setData("application/reactflow-nodetype", nodeType);
+    event.dataTransfer.effectAllowed = "move";
+  };
+
+  const handleClick = useCallback(
+    (def: NodeTypeDefinition) => {
+      const defaultParams: Record<string, unknown> = {};
+      for (const p of def.params) {
+        if (p.default !== undefined) defaultParams[p.key] = p.default;
+      }
+      const center = useUIStore.getState().getViewportCenter();
+      const x = center.x + (Math.random() - 0.5) * 60;
+      const y = center.y + (Math.random() - 0.5) * 60;
+      const localizedLabel = t(
+        `workflow.nodeDefs.${def.type}.label`,
+        def.label,
+      );
+      addNode(
+        def.type,
+        { x, y },
+        defaultParams,
+        localizedLabel,
+        def.params,
+        def.inputs,
+        def.outputs,
+      );
+      recordRecentNodeType(def.type);
+      // Auto-close palette after adding a node
+      toggleNodePalette();
+    },
+    [addNode, t, toggleNodePalette],
+  );
 
-  const handleClick = useCallback((def: NodeTypeDefinition) => {
-    const defaultParams: Record<string, unknown> = {}
-    for (const p of def.params) { if (p.default !== undefined) defaultParams[p.key] = p.default }
-    const center = useUIStore.getState().getViewportCenter()
-    const x = center.x + (Math.random() - 0.5) * 60
-    const y = center.y + (Math.random() - 0.5) * 60
-    const localizedLabel = t(`workflow.nodeDefs.${def.type}.label`, def.label)
-    addNode(def.type, { x, y }, defaultParams, localizedLabel, def.params, def.inputs, def.outputs)
-    recordRecentNodeType(def.type)
-    // Auto-close palette after adding a node
-    toggleNodePalette()
-  }, [addNode, t, toggleNodePalette])
-
-  const categoryOrder = ['ai-task', 'input', 'output', 'processing', 'free-tool', 'control']
-  const categoryLabel = useCallback((cat: string) => t(`workflow.nodeCategory.${cat}`, cat), [t])
+  const categoryOrder = [
+    "ai-task",
+    "input",
+    "output",
+    "processing",
+    "free-tool",
+    "control",
+  ];
+  const categoryLabel = useCallback(
+    (cat: string) => t(`workflow.nodeCategory.${cat}`, cat),
+    [t],
+  );
 
   const displayDefs = useMemo(() => {
-    const q = query.trim()
-    if (!q) return definitions
+    const q = query.trim();
+    if (!q) return definitions;
     return fuzzySearch(definitions, q, (def) => [
-      def.type, def.label, t(`workflow.nodeDefs.${def.type}.label`, def.label), def.category
-    ]).map(r => r.item)
-  }, [definitions, query, t])
+      def.type,
+      def.label,
+      t(`workflow.nodeDefs.${def.type}.label`, def.label),
+      def.category,
+    ]).map((r) => r.item);
+  }, [definitions, query, t]);
 
   const groupedDefs = useMemo(() => {
-    const groups = new Map<string, NodeTypeDefinition[]>()
+    const groups = new Map<string, NodeTypeDefinition[]>();
     for (const def of displayDefs) {
-      const arr = groups.get(def.category) ?? []
-      arr.push(def)
-      groups.set(def.category, arr)
+      const arr = groups.get(def.category) ?? [];
+      arr.push(def);
+      groups.set(def.category, arr);
     }
     return [...groups.entries()].sort((a, b) => {
-      const ai = categoryOrder.indexOf(a[0])
-      const bi = categoryOrder.indexOf(b[0])
-      return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi)
-    })
-  }, [displayDefs])
-
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    setDragging(true)
-    const startX = e.clientX
-    const startWidth = width
-    const onMove = (ev: MouseEvent) => setSidebarWidth(startWidth + (ev.clientX - startX))
-    const onUp = () => {
-      setDragging(false)
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [width, setSidebarWidth])
+      const ai = categoryOrder.indexOf(a[0]);
+      const bi = categoryOrder.indexOf(b[0]);
+      return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
+    });
+  }, [displayDefs]);
+
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setDragging(true);
+      const startX = e.clientX;
+      const startWidth = width;
+      const onMove = (ev: MouseEvent) =>
+        setSidebarWidth(startWidth + (ev.clientX - startX));
+      const onUp = () => {
+        setDragging(false);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [width, setSidebarWidth],
+  );
 
   /* ── render ──────────────────────────────────────────────── */
   return (
@@ -116,11 +156,13 @@ export function NodePalette({ definitions }: NodePaletteProps) {
     >
       {/* ── header ── */}
       <div className="flex items-center justify-between px-4 h-12 border-b border-border/70 shrink-0">
-        <span className="font-semibold text-[13px] text-foreground">{t('workflow.nodes', 'Nodes')}</span>
+        <span className="font-semibold text-[13px] text-foreground">
+          {t("workflow.nodes", "Nodes")}
+        </span>
         <button
           onClick={toggleNodePalette}
           className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-          title={t('common.close', 'Close')}
+          title={t("common.close", "Close")}
         >
           <X className="w-4 h-4" />
         </button>
@@ -133,8 +175,11 @@ export function NodePalette({ definitions }: NodePaletteProps) {
           <input
             type="text"
             value={query}
-            onChange={e => setQuery(e.target.value)}
-            placeholder={t('workflow.searchNodesPlaceholder', 'Search nodes...')}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t(
+              "workflow.searchNodesPlaceholder",
+              "Search nodes...",
+            )}
             className="w-full h-8 rounded-lg border border-border/70 bg-muted/40 pl-8 pr-3 text-xs text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
           />
         </div>
@@ -143,84 +188,104 @@ export function NodePalette({ definitions }: NodePaletteProps) {
       {/* ── node list ── */}
       <div className="flex-1 overflow-y-auto px-2 py-1">
         {groupedDefs.map(([category, defs]) => {
-          const isCollapsed = collapsed[category] ?? false
-          const dot = catDot[category] ?? 'bg-gray-400'
+          const isCollapsed = collapsed[category] ?? false;
+          const dot = catDot[category] ?? "bg-gray-400";
           return (
             <div key={category} className="mb-0.5">
               {/* category header */}
               <button
-                onClick={() => setCollapsed(prev => ({ ...prev, [category]: !isCollapsed }))}
+                onClick={() =>
+                  setCollapsed((prev) => ({
+                    ...prev,
+                    [category]: !isCollapsed,
+                  }))
+                }
                 className="w-full flex items-center gap-2 px-2 h-7 rounded-lg text-muted-foreground/80 hover:text-foreground hover:bg-muted/60 transition-colors"
               >
-                <span className={cn('w-1.5 h-1.5 rounded-full shrink-0', dot)} />
-                <span className="text-[11px] font-semibold uppercase tracking-wide">{categoryLabel(category)}</span>
-                <span className="ml-auto text-[10px] text-muted-foreground/50 tabular-nums mr-0.5">{defs.length}</span>
-                <ChevronDown className={cn(
-                  'w-3 h-3 text-muted-foreground/40 transition-transform duration-200',
-                  isCollapsed && '-rotate-90'
-                )} />
+                <span
+                  className={cn("w-1.5 h-1.5 rounded-full shrink-0", dot)}
+                />
+                <span className="text-[11px] font-semibold uppercase tracking-wide">
+                  {categoryLabel(category)}
+                </span>
+                <span className="ml-auto text-[10px] text-muted-foreground/50 tabular-nums mr-0.5">
+                  {defs.length}
+                </span>
+                <ChevronDown
+                  className={cn(
+                    "w-3 h-3 text-muted-foreground/40 transition-transform duration-200",
+                    isCollapsed && "-rotate-90",
+                  )}
+                />
               </button>
 
               {/* node items */}
               {!isCollapsed && (
                 <div className="py-0.5">
-                  {defs.map(def => {
-                    const isAiTask = def.category === 'ai-task'
+                  {defs.map((def) => {
+                    const isAiTask = def.category === "ai-task";
                     return (
                       <div
                         key={def.type}
                         draggable
-                        onDragStart={e => onDragStart(e, def.type)}
+                        onDragStart={(e) => onDragStart(e, def.type)}
                         onClick={() => handleClick(def)}
                         className={cn(
-                          'flex items-center gap-2 h-8 px-2 rounded-lg cursor-grab select-none',
-                          'text-[12px] text-foreground/70 transition-colors duration-100',
-                          'hover:bg-muted hover:text-foreground',
-                          'active:cursor-grabbing active:bg-muted/80'
+                          "flex items-center gap-2 h-8 px-2 rounded-lg cursor-grab select-none",
+                          "text-[12px] text-foreground/70 transition-colors duration-100",
+                          "hover:bg-muted hover:text-foreground",
+                          "active:cursor-grabbing active:bg-muted/80",
+                        )}
+                        title={t(
+                          "workflow.dragOrClickToAdd",
+                          "Drag to canvas or click to add",
                         )}
-                        title={t('workflow.dragOrClickToAdd', 'Drag to canvas or click to add')}
                       >
                         {(() => {
-                          const Icon = getNodeIcon(def.type)
+                          const Icon = getNodeIcon(def.type);
                           return Icon ? (
                             <div className="rounded-md bg-primary/10 p-1 flex-shrink-0">
                               <Icon className="w-3 h-3 text-primary" />
                             </div>
-                          ) : null
+                          ) : null;
                         })()}
-                        <span className="truncate">{t(`workflow.nodeDefs.${def.type}.label`, def.label)}</span>
+                        <span className="truncate">
+                          {t(`workflow.nodeDefs.${def.type}.label`, def.label)}
+                        </span>
                         {isAiTask && (
-                          <span className="ml-auto shrink-0 text-[9px] font-semibold text-violet-600 dark:text-violet-400 bg-violet-500/10 px-1.5 py-0.5 rounded">AI</span>
+                          <span className="ml-auto shrink-0 text-[9px] font-semibold text-violet-600 dark:text-violet-400 bg-violet-500/10 px-1.5 py-0.5 rounded">
+                            AI
+                          </span>
                         )}
                       </div>
-                    )
+                    );
                   })}
                 </div>
               )}
             </div>
-          )
+          );
         })}
 
         {displayDefs.length === 0 && (
           <div className="px-3 py-6 text-xs text-muted-foreground/60 text-center">
-            {t('workflow.noNodesAvailable', 'No nodes available')}
+            {t("workflow.noNodesAvailable", "No nodes available")}
           </div>
         )}
       </div>
 
       {/* ── footer hint ── */}
       <div className="px-4 py-2 border-t border-border/70 text-[10px] text-muted-foreground/40">
-        {t('workflow.dragOrClickToAdd', 'Drag to canvas or click to add')}
+        {t("workflow.dragOrClickToAdd", "Drag to canvas or click to add")}
       </div>
 
       {/* ── resize handle ── */}
       <div
         onMouseDown={onResizeStart}
         className={cn(
-          'absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors',
-          dragging ? 'bg-primary' : 'hover:bg-primary/50'
+          "absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors",
+          dragging ? "bg-primary" : "hover:bg-primary/50",
         )}
       />
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/RunMonitor.tsx b/src/workflow/components/canvas/RunMonitor.tsx
index 9042ac43..be48710e 100644
--- a/src/workflow/components/canvas/RunMonitor.tsx
+++ b/src/workflow/components/canvas/RunMonitor.tsx
@@ -3,152 +3,242 @@
  * Shows real-time per-node progress for each workflow run session.
  * Click a node row to see its input/output data (like Dify).
  */
-import { useState, useEffect } from 'react'
-import { ChevronDown, ChevronUp } from 'lucide-react'
-import { useExecutionStore, type RunSession } from '../../stores/execution.store'
-import { useUIStore } from '../../stores/ui.store'
-import { historyIpc } from '../../ipc/ipc-client'
-import { getOutputItemType, decodeDataText } from '../../lib/outputDisplay'
-import type { NodeStatus, NodeExecutionRecord } from '@/workflow/types/execution'
+import { useState, useEffect } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import {
+  useExecutionStore,
+  type RunSession,
+} from "../../stores/execution.store";
+import { useUIStore } from "../../stores/ui.store";
+import { historyIpc } from "../../ipc/ipc-client";
+import { getOutputItemType, decodeDataText } from "../../lib/outputDisplay";
+import type {
+  NodeStatus,
+  NodeExecutionRecord,
+} from "@/workflow/types/execution";
 
 /** Compact output preview: image/video/audio/text/3d/file (used in LastResultOutput and NodeIODetail) */
-function OutputPreview({ urls, durationMs, cost, label = 'Output' }: {
-  urls: string[]
-  durationMs?: number | null
-  cost?: number
-  label?: string
+function OutputPreview({
+  urls,
+  durationMs,
+  cost,
+  label = "Output",
+}: {
+  urls: string[];
+  durationMs?: number | null;
+  cost?: number;
+  label?: string;
 }) {
-  const openPreview = useUIStore(s => s.openPreview)
-  const validItems = urls.filter((u): u is string => u != null && typeof u === 'string')
-  if (validItems.length === 0) return null
+  const openPreview = useUIStore((s) => s.openPreview);
+  const validItems = urls.filter(
+    (u): u is string => u != null && typeof u === "string",
+  );
+  if (validItems.length === 0) return null;
 
   return (
     <div className="text-[10px]">
-      <div className="text-[9px] text-green-400 font-semibold uppercase tracking-wider mb-1">{label}</div>
+      <div className="text-[9px] text-green-400 font-semibold uppercase tracking-wider mb-1">
+        {label}
+      </div>
       {(durationMs != null || (cost != null && cost !== undefined)) && (
         <div className="flex items-center gap-3 px-0 py-0.5 text-muted-foreground mb-1">
-          {durationMs != null && <span>⏱ {(durationMs / 1000).toFixed(1)}s</span>}
-          {cost != null && cost !== undefined && <span>💰 ${Number(cost).toFixed(4)}</span>}
+          {durationMs != null && (
+            <span>⏱ {(durationMs / 1000).toFixed(1)}s</span>
+          )}
+          {cost != null && cost !== undefined && (
+            <span>💰 ${Number(cost).toFixed(4)}</span>
+          )}
         </div>
       )}
       <div className="flex gap-2 flex-wrap">
         {validItems.map((item, i) => {
-          const type = getOutputItemType(item)
-          if (type === 'text') {
-            const displayText = item.startsWith('data:text/') ? decodeDataText(item) : item
+          const type = getOutputItemType(item);
+          if (type === "text") {
+            const displayText = item.startsWith("data:text/")
+              ? decodeDataText(item)
+              : item;
             return (
-              <div key={i} className="w-full min-w-0 rounded border border-border bg-muted/20 p-2 max-h-[140px] overflow-y-auto">
-                <pre className="text-[9px] text-foreground/90 whitespace-pre-wrap break-words font-sans">{displayText}</pre>
+              <div
+                key={i}
+                className="w-full min-w-0 rounded border border-border bg-muted/20 p-2 max-h-[140px] overflow-y-auto"
+              >
+                <pre className="text-[9px] text-foreground/90 whitespace-pre-wrap break-words font-sans">
+                  {displayText}
+                </pre>
               </div>
-            )
+            );
           }
-          if (type === 'image') {
+          if (type === "image") {
             return (
-              <div key={i} className="relative group flex-1 min-w-[80px] max-w-[140px]">
+              <div
+                key={i}
+                className="relative group flex-1 min-w-[80px] max-w-[140px]"
+              >
                 <img
                   src={item}
                   alt=""
-                  onClick={() => openPreview(item, validItems.filter(u => getOutputItemType(u) === 'image'))}
+                  onClick={() =>
+                    openPreview(
+                      item,
+                      validItems.filter(
+                        (u) => getOutputItemType(u) === "image",
+                      ),
+                    )
+                  }
                   className="w-full h-20 rounded border border-border object-cover cursor-pointer hover:ring-2 hover:ring-blue-500/50 bg-black/10"
                 />
               </div>
-            )
+            );
           }
-          if (type === 'video') {
+          if (type === "video") {
             return (
-              <div key={i} className="relative flex-1 min-w-[80px] max-w-[140px] rounded border border-border overflow-hidden bg-black/10">
-                <video src={item} preload="metadata" className="w-full h-20 object-cover" onClick={() => openPreview(item)} />
+              <div
+                key={i}
+                className="relative flex-1 min-w-[80px] max-w-[140px] rounded border border-border overflow-hidden bg-black/10"
+              >
+                <video
+                  src={item}
+                  preload="metadata"
+                  className="w-full h-20 object-cover"
+                  onClick={() => openPreview(item)}
+                />
                 <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                   <div className="w-6 h-6 rounded-full bg-black/50 flex items-center justify-center">
-                    <svg width="10" height="10" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
+                    <svg
+                      width="10"
+                      height="10"
+                      viewBox="0 0 24 24"
+                      fill="white"
+                    >
+                      <polygon points="5,3 19,12 5,21" />
+                    </svg>
                   </div>
                 </div>
               </div>
-            )
+            );
           }
-          if (type === 'audio') {
+          if (type === "audio") {
             return (
-              <div key={i} className="flex-1 min-w-[120px] rounded border border-border bg-muted/30 p-1.5">
+              <div
+                key={i}
+                className="flex-1 min-w-[120px] rounded border border-border bg-muted/30 p-1.5"
+              >
                 <audio src={item} controls className="w-full h-7" />
               </div>
-            )
+            );
           }
-          if (type === '3d') {
+          if (type === "3d") {
             return (
-              <div key={i} className="flex-1 min-w-[80px] rounded border border-border bg-muted/30 p-2 text-center cursor-pointer hover:bg-muted/50" onClick={() => openPreview(item)}>
+              <div
+                key={i}
+                className="flex-1 min-w-[80px] rounded border border-border bg-muted/30 p-2 text-center cursor-pointer hover:bg-muted/50"
+                onClick={() => openPreview(item)}
+              >
                 <span className="text-xs">🧊 3D</span>
               </div>
-            )
+            );
           }
           return (
-            <a key={i} href={item} target="_blank" rel="noopener noreferrer" className="text-[9px] text-blue-400 hover:underline truncate max-w-[180px] block">
-              {item.startsWith('data:') ? 'Data' : item.split('/').pop() || 'File'}
+            <a
+              key={i}
+              href={item}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[9px] text-blue-400 hover:underline truncate max-w-[180px] block"
+            >
+              {item.startsWith("data:")
+                ? "Data"
+                : item.split("/").pop() || "File"}
             </a>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
 /** Fallback output UI when we have lastResults but no persisted record yet. */
 function LastResultOutput({ nodeId }: { nodeId: string }) {
-  const lastResults = useExecutionStore(s => s.lastResults[nodeId] ?? [])
-  const latest = lastResults[0]
-  if (!latest?.urls?.length) return null
+  const lastResults = useExecutionStore((s) => s.lastResults[nodeId] ?? []);
+  const latest = lastResults[0];
+  if (!latest?.urls?.length) return null;
   return (
     <div className="px-1">
-      <OutputPreview urls={latest.urls} durationMs={latest.durationMs} cost={latest.cost} label="Output (latest run)" />
+      <OutputPreview
+        urls={latest.urls}
+        durationMs={latest.durationMs}
+        cost={latest.cost}
+        label="Output (latest run)"
+      />
     </div>
-  )
+  );
 }
 
 export function RunMonitor({ workflowId }: { workflowId?: string | null }) {
-  const runSessions = useExecutionStore(s => s.runSessions)
-  const showRunMonitor = useExecutionStore(s => s.showRunMonitor)
-  const toggleRunMonitor = useExecutionStore(s => s.toggleRunMonitor)
-  const nodeStatuses = useExecutionStore(s => s.nodeStatuses)
-  const progressMap = useExecutionStore(s => s.progressMap)
-  const errorMessages = useExecutionStore(s => s.errorMessages)
-  const cancelAll = useExecutionStore(s => s.cancelAll)
+  const runSessions = useExecutionStore((s) => s.runSessions);
+  const showRunMonitor = useExecutionStore((s) => s.showRunMonitor);
+  const toggleRunMonitor = useExecutionStore((s) => s.toggleRunMonitor);
+  const nodeStatuses = useExecutionStore((s) => s.nodeStatuses);
+  const progressMap = useExecutionStore((s) => s.progressMap);
+  const errorMessages = useExecutionStore((s) => s.errorMessages);
+  const cancelAll = useExecutionStore((s) => s.cancelAll);
 
   // Filter sessions to current workflow when we have one; otherwise show all sessions.
   // If filtering by workflowId yields none but sessions exist, show all (avoids empty list after run/save race).
-  const byWorkflow = workflowId ? runSessions.filter(s => s.workflowId === workflowId) : runSessions
-  const filteredSessions = byWorkflow.length > 0 ? byWorkflow : runSessions
+  const byWorkflow = workflowId
+    ? runSessions.filter((s) => s.workflowId === workflowId)
+    : runSessions;
+  const filteredSessions = byWorkflow.length > 0 ? byWorkflow : runSessions;
 
-  const activeCount = filteredSessions.filter(s => s.status === 'running').length
-  const errorCount = filteredSessions.filter(s => s.status === 'error').length
-  const completedCount = filteredSessions.filter(s => s.status === 'completed').length
+  const activeCount = filteredSessions.filter(
+    (s) => s.status === "running",
+  ).length;
+  const errorCount = filteredSessions.filter(
+    (s) => s.status === "error",
+  ).length;
+  const completedCount = filteredSessions.filter(
+    (s) => s.status === "completed",
+  ).length;
   const statusIndicator =
     activeCount > 0
-      ? { color: 'bg-blue-500 animate-pulse', label: `${activeCount} running` }
+      ? { color: "bg-blue-500 animate-pulse", label: `${activeCount} running` }
       : errorCount > 0
-        ? { color: 'bg-orange-500', label: `${errorCount} with errors` }
+        ? { color: "bg-orange-500", label: `${errorCount} with errors` }
         : completedCount > 0
-          ? { color: 'bg-green-500', label: `${completedCount} completed` }
-          : { color: 'bg-muted-foreground', label: 'No runs' }
+          ? { color: "bg-green-500", label: `${completedCount} completed` }
+          : { color: "bg-muted-foreground", label: "No runs" };
 
   return (
-    <div className={`flex-shrink-0 border-t border-border bg-card flex flex-col min-h-0 w-full ${showRunMonitor ? 'max-h-[360px]' : ''}`}>
+    <div
+      className={`flex-shrink-0 border-t border-border bg-card flex flex-col min-h-0 w-full ${showRunMonitor ? "max-h-[360px]" : ""}`}
+    >
       {/* Header bar — click entire row to toggle expand/collapse */}
       <div
         className="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border cursor-pointer hover:bg-muted/70 transition-colors flex-shrink-0"
         onClick={() => toggleRunMonitor()}
       >
         <div className="flex items-center gap-2 min-w-0">
-          <span className="text-xs font-semibold truncate">Execution Monitor</span>
+          <span className="text-xs font-semibold truncate">
+            Execution Monitor
+          </span>
           <span
             className={`w-2 h-2 rounded-full flex-shrink-0 ${statusIndicator.color}`}
             title={statusIndicator.label}
           />
         </div>
         <button
-          onClick={(e) => { e.stopPropagation(); toggleRunMonitor() }}
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleRunMonitor();
+          }}
           className="text-muted-foreground hover:text-foreground p-1 rounded transition-colors"
-          title={showRunMonitor ? 'Collapse' : 'Expand'}
+          title={showRunMonitor ? "Collapse" : "Expand"}
         >
-          {showRunMonitor ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
+          {showRunMonitor ? (
+            <ChevronDown className="w-4 h-4" />
+          ) : (
+            <ChevronUp className="w-4 h-4" />
+          )}
         </button>
       </div>
 
@@ -156,68 +246,127 @@ export function RunMonitor({ workflowId }: { workflowId?: string | null }) {
       {showRunMonitor && (
         <div className="flex-1 min-h-0 overflow-y-auto max-h-[320px]">
           {filteredSessions.length === 0 && (
-            <div className="p-4 text-center text-xs text-muted-foreground">No runs yet</div>
+            <div className="p-4 text-center text-xs text-muted-foreground">
+              No runs yet
+            </div>
           )}
-          {filteredSessions.map(session => (
-            <SessionCard key={session.id} session={session} nodeStatuses={nodeStatuses}
-              progressMap={progressMap} errorMessages={errorMessages} onCancel={() => cancelAll(session.workflowId)} />
+          {filteredSessions.map((session) => (
+            <SessionCard
+              key={session.id}
+              session={session}
+              nodeStatuses={nodeStatuses}
+              progressMap={progressMap}
+              errorMessages={errorMessages}
+              onCancel={() => cancelAll(session.workflowId)}
+            />
           ))}
         </div>
       )}
     </div>
-  )
+  );
 }
 
 /* ── Session Card ──────────────────────────────────────────────────── */
 
-function SessionCard({ session, nodeStatuses, progressMap, errorMessages, onCancel }: {
-  session: RunSession
-  nodeStatuses: Record<string, NodeStatus>
-  progressMap: Record<string, { progress: number; message?: string }>
-  errorMessages: Record<string, string>
-  onCancel: () => void
+function SessionCard({
+  session,
+  nodeStatuses,
+  progressMap,
+  errorMessages,
+  onCancel,
+}: {
+  session: RunSession;
+  nodeStatuses: Record<string, NodeStatus>;
+  progressMap: Record<string, { progress: number; message?: string }>;
+  errorMessages: Record<string, string>;
+  onCancel: () => void;
 }) {
-  const [collapsed, setCollapsed] = useState(session.status !== 'running')
-  const { nodeIds, nodeLabels, nodeResults, nodeCosts, status } = session
-  const total = nodeIds.length
-  const completed = Object.values(nodeResults).filter(v => v === 'done').length
-  const errors = Object.values(nodeResults).filter(v => v === 'error').length
-  const pct = total > 0 ? Math.round(((completed + errors) / total) * 100) : 0
-  const totalCost = Object.values(nodeCosts).reduce((sum, c) => sum + c, 0)
+  const [collapsed, setCollapsed] = useState(session.status !== "running");
+  const { nodeIds, nodeLabels, nodeResults, nodeCosts, status } = session;
+  const total = nodeIds.length;
+  const completed = Object.values(nodeResults).filter(
+    (v) => v === "done",
+  ).length;
+  const errors = Object.values(nodeResults).filter((v) => v === "error").length;
+  const pct = total > 0 ? Math.round(((completed + errors) / total) * 100) : 0;
+  const totalCost = Object.values(nodeCosts).reduce((sum, c) => sum + c, 0);
 
-  const statusColor = status === 'running' ? 'text-blue-400' :
-    status === 'completed' ? 'text-green-400' :
-    status === 'error' ? 'text-orange-400' : 'text-muted-foreground'
-  const statusLabel = status === 'running' ? 'Running' :
-    status === 'completed' ? 'Completed' :
-    status === 'error' ? 'Has errors' : 'Cancelled'
+  const statusColor =
+    status === "running"
+      ? "text-blue-400"
+      : status === "completed"
+        ? "text-green-400"
+        : status === "error"
+          ? "text-orange-400"
+          : "text-muted-foreground";
+  const statusLabel =
+    status === "running"
+      ? "Running"
+      : status === "completed"
+        ? "Completed"
+        : status === "error"
+          ? "Has errors"
+          : "Cancelled";
 
-  const elapsed = Math.round((Date.now() - new Date(session.startedAt).getTime()) / 1000)
-  const elapsedStr = elapsed >= 60 ? `${Math.floor(elapsed / 60)}m ${elapsed % 60}s` : `${elapsed}s`
+  const elapsed = Math.round(
+    (Date.now() - new Date(session.startedAt).getTime()) / 1000,
+  );
+  const elapsedStr =
+    elapsed >= 60
+      ? `${Math.floor(elapsed / 60)}m ${elapsed % 60}s`
+      : `${elapsed}s`;
 
   return (
     <div className="border-b border-border last:border-b-0">
-      <div className="flex items-center gap-2 px-4 py-2 bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors"
-        onClick={() => setCollapsed(!collapsed)}>
+      <div
+        className="flex items-center gap-2 px-4 py-2 bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors"
+        onClick={() => setCollapsed(!collapsed)}
+      >
         <span className="text-muted-foreground w-4 h-4 flex items-center justify-center flex-shrink-0">
-          {collapsed ? <ChevronDown className="w-3.5 h-3.5 rotate-[-90deg]" /> : <ChevronDown className="w-3.5 h-3.5" />}
+          {collapsed ? (
+            <ChevronDown className="w-3.5 h-3.5 rotate-[-90deg]" />
+          ) : (
+            <ChevronDown className="w-3.5 h-3.5" />
+          )}
         </span>
-        <span className={`w-2 h-2 rounded-full flex-shrink-0 ${
-          status === 'running' ? 'bg-blue-500 animate-pulse' :
-          status === 'completed' ? 'bg-green-500' :
-          status === 'error' ? 'bg-orange-500' : 'bg-muted-foreground'}`} />
+        <span
+          className={`w-2 h-2 rounded-full flex-shrink-0 ${
+            status === "running"
+              ? "bg-blue-500 animate-pulse"
+              : status === "completed"
+                ? "bg-green-500"
+                : status === "error"
+                  ? "bg-orange-500"
+                  : "bg-muted-foreground"
+          }`}
+        />
         <div className="flex-1 min-w-0">
-          <div className="text-[11px] font-medium truncate">{session.workflowName}</div>
+          <div className="text-[11px] font-medium truncate">
+            {session.workflowName}
+          </div>
           <div className="text-[9px] text-muted-foreground">
             {new Date(session.startedAt).toLocaleTimeString()} · {elapsedStr}
-            {totalCost > 0 && <span className="text-amber-400/80 ml-1">· 💰 ${totalCost.toFixed(4)}</span>}
+            {totalCost > 0 && (
+              <span className="text-amber-400/80 ml-1">
+                · 💰 ${totalCost.toFixed(4)}
+              </span>
+            )}
           </div>
         </div>
-        <span className={`text-[10px] font-medium ${statusColor}`}>{statusLabel}</span>
-        <span className="text-[9px] text-muted-foreground">{completed + errors}/{total}</span>
-        {status === 'running' && (
-          <button onClick={e => { e.stopPropagation(); onCancel() }}
-            className="text-[10px] px-2 py-0.5 rounded bg-red-500/15 text-red-400 hover:bg-red-500/25 transition-colors flex-shrink-0">
+        <span className={`text-[10px] font-medium ${statusColor}`}>
+          {statusLabel}
+        </span>
+        <span className="text-[9px] text-muted-foreground">
+          {completed + errors}/{total}
+        </span>
+        {status === "running" && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onCancel();
+            }}
+            className="text-[10px] px-2 py-0.5 rounded bg-red-500/15 text-red-400 hover:bg-red-500/25 transition-colors flex-shrink-0"
+          >
             Stop
           </button>
         )}
@@ -227,79 +376,130 @@ function SessionCard({ session, nodeStatuses, progressMap, errorMessages, onCanc
         <>
           <div className="px-4 py-1.5">
             <div className="h-1.5 rounded-full bg-muted overflow-hidden">
-              <div className={`h-full rounded-full transition-all duration-500 ${errors > 0 ? 'bg-orange-500' : status === 'completed' ? 'bg-green-500' : 'bg-blue-500'}`}
-                style={{ width: `${pct}%` }} />
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${errors > 0 ? "bg-orange-500" : status === "completed" ? "bg-green-500" : "bg-blue-500"}`}
+                style={{ width: `${pct}%` }}
+              />
             </div>
           </div>
           <div className="px-3 pb-2 space-y-px">
-            {nodeIds.map(nodeId => (
-              <NodeRow key={nodeId} nodeId={nodeId} label={nodeLabels[nodeId] || nodeId.slice(0, 8)}
+            {nodeIds.map((nodeId) => (
+              <NodeRow
+                key={nodeId}
+                nodeId={nodeId}
+                label={nodeLabels[nodeId] || nodeId.slice(0, 8)}
                 sessionResult={nodeResults[nodeId]}
-                isSessionRunning={status === 'running'}
+                isSessionRunning={status === "running"}
                 liveStatus={nodeStatuses[nodeId]}
                 progress={progressMap[nodeId]}
-                errorMessage={errorMessages[nodeId]} />
+                errorMessage={errorMessages[nodeId]}
+              />
             ))}
           </div>
         </>
       )}
     </div>
-  )
+  );
 }
 
 /* ── Node Row (clickable, expandable with I/O data) ────────────────── */
 
-function NodeRow({ nodeId, label, sessionResult, isSessionRunning, liveStatus, progress, errorMessage }: {
-  nodeId: string; label: string; sessionResult: 'running' | 'done' | 'error'
-  isSessionRunning: boolean; liveStatus?: NodeStatus
-  progress?: { progress: number; message?: string }
-  errorMessage?: string
+function NodeRow({
+  nodeId,
+  label,
+  sessionResult,
+  isSessionRunning,
+  liveStatus,
+  progress,
+  errorMessage,
+}: {
+  nodeId: string;
+  label: string;
+  sessionResult: "running" | "done" | "error";
+  isSessionRunning: boolean;
+  liveStatus?: NodeStatus;
+  progress?: { progress: number; message?: string };
+  errorMessage?: string;
 }) {
-  const [expanded, setExpanded] = useState(false)
-  const [record, setRecord] = useState<NodeExecutionRecord | null>(null)
-  const [loading, setLoading] = useState(false)
-  const lastResults = useExecutionStore(s => s.lastResults[nodeId] ?? [])
-  const hasLastResult = lastResults.length > 0 && (lastResults[0].urls?.length ?? 0) > 0
-  const isLiveRunning = isSessionRunning && liveStatus === 'running'
-  const isDone = sessionResult === 'done' || sessionResult === 'error'
-  const displayError = errorMessage ?? (record?.resultMetadata as Record<string, unknown> | undefined)?.error as string | undefined
+  const [expanded, setExpanded] = useState(false);
+  const [record, setRecord] = useState<NodeExecutionRecord | null>(null);
+  const [loading, setLoading] = useState(false);
+  const lastResults = useExecutionStore((s) => s.lastResults[nodeId] ?? []);
+  const hasLastResult =
+    lastResults.length > 0 && (lastResults[0].urls?.length ?? 0) > 0;
+  const isLiveRunning = isSessionRunning && liveStatus === "running";
+  const isDone = sessionResult === "done" || sessionResult === "error";
+  const displayError =
+    errorMessage ??
+    ((record?.resultMetadata as Record<string, unknown> | undefined)?.error as
+      | string
+      | undefined);
 
   // Fetch execution record when expanded
   useEffect(() => {
-    if (!expanded || !isDone) return
-    if (record) return // already loaded
-    setLoading(true)
-    historyIpc.list(nodeId).then(records => {
-      if (records && records.length > 0) setRecord(records[0])
-      setLoading(false)
-    }).catch(() => setLoading(false))
-  }, [expanded, isDone, nodeId, record])
+    if (!expanded || !isDone) return;
+    if (record) return; // already loaded
+    setLoading(true);
+    historyIpc
+      .list(nodeId)
+      .then((records) => {
+        if (records && records.length > 0) setRecord(records[0]);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [expanded, isDone, nodeId, record]);
 
   return (
     <div className="rounded-md overflow-hidden">
       {/* Row header */}
-      <div className={`flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors rounded-md
-        ${expanded ? 'bg-accent/50' : 'hover:bg-accent/30'}`}
-        onClick={() => isDone && setExpanded(!expanded)}>
-        <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
-          isLiveRunning ? 'bg-blue-500 animate-pulse' :
-          sessionResult === 'done' ? 'bg-green-500' :
-          sessionResult === 'error' ? 'bg-red-500' : 'bg-muted-foreground/30'}`} />
+      <div
+        className={`flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors rounded-md
+        ${expanded ? "bg-accent/50" : "hover:bg-accent/30"}`}
+        onClick={() => isDone && setExpanded(!expanded)}
+      >
+        <span
+          className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+            isLiveRunning
+              ? "bg-blue-500 animate-pulse"
+              : sessionResult === "done"
+                ? "bg-green-500"
+                : sessionResult === "error"
+                  ? "bg-red-500"
+                  : "bg-muted-foreground/30"
+          }`}
+        />
         <span className="text-[10px] truncate flex-1 min-w-0">{label}</span>
-        {isLiveRunning && progress && <span className="text-[9px] text-blue-400">{Math.round(progress.progress)}%</span>}
-        {isLiveRunning && !progress && <span className="text-[9px] text-blue-400 animate-pulse">...</span>}
-        {!isLiveRunning && sessionResult === 'done' && <span className="text-[9px] text-green-400">done</span>}
-        {!isLiveRunning && sessionResult === 'error' && <span className="text-[9px] text-red-400">error</span>}
+        {isLiveRunning && progress && (
+          <span className="text-[9px] text-blue-400">
+            {Math.round(progress.progress)}%
+          </span>
+        )}
+        {isLiveRunning && !progress && (
+          <span className="text-[9px] text-blue-400 animate-pulse">...</span>
+        )}
+        {!isLiveRunning && sessionResult === "done" && (
+          <span className="text-[9px] text-green-400">done</span>
+        )}
+        {!isLiveRunning && sessionResult === "error" && (
+          <span className="text-[9px] text-red-400">error</span>
+        )}
         {isDone && (
           <span className="text-muted-foreground ml-1 flex-shrink-0">
-            {expanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+            {expanded ? (
+              <ChevronUp className="w-3 h-3" />
+            ) : (
+              <ChevronDown className="w-3 h-3" />
+            )}
           </span>
         )}
       </div>
 
       {/* Inline error preview for failed nodes */}
-      {sessionResult === 'error' && errorMessage && (
-        <div className="mx-2 mt-0.5 mb-1 px-2 py-1.5 rounded-md border border-red-500/30 bg-red-500/10 text-[10px] text-red-400/90 leading-tight break-words line-clamp-2" title={errorMessage}>
+      {sessionResult === "error" && errorMessage && (
+        <div
+          className="mx-2 mt-0.5 mb-1 px-2 py-1.5 rounded-md border border-red-500/30 bg-red-500/10 text-[10px] text-red-400/90 leading-tight break-words line-clamp-2"
+          title={errorMessage}
+        >
           {errorMessage}
         </div>
       )}
@@ -307,43 +507,67 @@ function NodeRow({ nodeId, label, sessionResult, isSessionRunning, liveStatus, p
       {/* Expanded I/O data */}
       {expanded && (
         <div className="mx-2 mb-1 rounded-md border border-border bg-background overflow-hidden">
-          {loading && <div className="p-3 text-[10px] text-muted-foreground animate-pulse text-center">Loading...</div>}
-          {!loading && record && <NodeIODetail record={record} liveErrorMessage={errorMessage} />}
+          {loading && (
+            <div className="p-3 text-[10px] text-muted-foreground animate-pulse text-center">
+              Loading...
+            </div>
+          )}
+          {!loading && record && (
+            <NodeIODetail record={record} liveErrorMessage={errorMessage} />
+          )}
           {!loading && !record && (
             <div className="p-3 text-[10px] text-muted-foreground">
-              {sessionResult === 'error' && (
+              {sessionResult === "error" && (
                 <div>
-                  <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-1">Error</div>
+                  <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-1">
+                    Error
+                  </div>
                   <div className="text-[10px] text-red-400/90 whitespace-pre-wrap break-words p-2 rounded bg-red-500/10">
-                    {displayError || 'Execution failed. No details were captured.'}
+                    {displayError ||
+                      "Execution failed. No details were captured."}
                   </div>
                 </div>
               )}
-              {sessionResult !== 'error' && (hasLastResult ? <LastResultOutput nodeId={nodeId} /> : <div className="text-center">No data available</div>)}
+              {sessionResult !== "error" &&
+                (hasLastResult ? (
+                  <LastResultOutput nodeId={nodeId} />
+                ) : (
+                  <div className="text-center">No data available</div>
+                ))}
             </div>
           )}
         </div>
       )}
     </div>
-  )
+  );
 }
 
 /* ── Node I/O Detail ───────────────────────────────────────────────── */
 
-function NodeIODetail({ record, liveErrorMessage }: { record: NodeExecutionRecord; liveErrorMessage?: string }) {
-  const meta = record.resultMetadata as Record<string, unknown> | null
-  const resultUrls = (meta?.resultUrls as string[]) ?? (record.resultPath ? [record.resultPath] : [])
-  const error = liveErrorMessage ?? (meta?.error as string | undefined)
-  const modelId = meta?.modelId as string | undefined
+function NodeIODetail({
+  record,
+  liveErrorMessage,
+}: {
+  record: NodeExecutionRecord;
+  liveErrorMessage?: string;
+}) {
+  const meta = record.resultMetadata as Record<string, unknown> | null;
+  const resultUrls =
+    (meta?.resultUrls as string[]) ??
+    (record.resultPath ? [record.resultPath] : []);
+  const error = liveErrorMessage ?? (meta?.error as string | undefined);
+  const modelId = meta?.modelId as string | undefined;
 
   // Extract input params (stored in raw response sometimes)
-  const raw = meta?.raw as Record<string, unknown> | undefined
+  const raw = meta?.raw as Record<string, unknown> | undefined;
 
   return (
     <div className="text-[10px]">
       {/* Meta bar */}
       <div className="flex items-center gap-3 px-3 py-1.5 bg-muted/30 border-b border-border text-muted-foreground">
-        {record.durationMs != null && <span>⏱ {(record.durationMs / 1000).toFixed(1)}s</span>}
+        {record.durationMs != null && (
+          <span>⏱ {(record.durationMs / 1000).toFixed(1)}s</span>
+        )}
         <span>💰 ${record.cost.toFixed(4)}</span>
         {modelId && <span className="truncate">{modelId}</span>}
       </div>
@@ -356,22 +580,28 @@ function NodeIODetail({ record, liveErrorMessage }: { record: NodeExecutionRecor
       )}
 
       {/* Error — show detailed message with scroll when long */}
-      {(record.status === 'error' || error) && error && (
+      {(record.status === "error" || error) && error && (
         <div className="px-3 pb-2">
-          <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-1">Error</div>
-          <div className="text-[10px] text-red-400/90 p-2 rounded bg-red-500/10 leading-tight whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto">{error}</div>
+          <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-1">
+            Error
+          </div>
+          <div className="text-[10px] text-red-400/90 p-2 rounded bg-red-500/10 leading-tight whitespace-pre-wrap break-words max-h-[200px] overflow-y-auto">
+            {error}
+          </div>
         </div>
       )}
 
       {/* Raw input (if available from API response) */}
       {raw && (
         <div className="px-3 pb-2 border-t border-border pt-2">
-          <div className="text-[9px] text-blue-400 font-semibold uppercase tracking-wider mb-1">Input</div>
+          <div className="text-[9px] text-blue-400 font-semibold uppercase tracking-wider mb-1">
+            Input
+          </div>
           <pre className="text-[9px] text-foreground/60 font-mono bg-muted/30 rounded p-2 overflow-x-auto max-h-[120px] overflow-y-auto whitespace-pre-wrap break-all">
             {JSON.stringify(raw, null, 2).slice(0, 1000)}
           </pre>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/WorkflowCanvas.tsx b/src/workflow/components/canvas/WorkflowCanvas.tsx
index cf91dde0..f2404c7b 100644
--- a/src/workflow/components/canvas/WorkflowCanvas.tsx
+++ b/src/workflow/components/canvas/WorkflowCanvas.tsx
@@ -2,699 +2,1204 @@
  * WorkflowCanvas — ReactFlow wrapper with zoom, pan, drag-drop, and context menu.
  * Rewritten with Tailwind classes.
  */
-import React, { useCallback, useRef, useState, useEffect, useMemo, type DragEvent } from 'react'
-import { useTranslation } from 'react-i18next'
-import { v4 as uuidv4 } from 'uuid'
+import React, {
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+  useMemo,
+  type DragEvent,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { v4 as uuidv4 } from "uuid";
 import ReactFlow, {
   ReactFlowProvider,
   useReactFlow,
   Background,
   BackgroundVariant,
   SelectionMode,
-  type Connection, type ReactFlowInstance, type Node, type NodeChange, type OnSelectionChangeParams
-} from 'reactflow'
-import 'reactflow/dist/style.css'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import { useExecutionStore } from '../../stores/execution.store'
-import { useUIStore } from '../../stores/ui.store'
-import { CustomNode } from './CustomNode'
-import { CustomEdge } from './CustomEdge'
-import { AnnotationNode } from './AnnotationNode'
-import { ContextMenu, type ContextMenuItem } from './ContextMenu'
-import type { NodeTypeDefinition, NodeCategory } from '@/workflow/types/node-defs'
-import { fuzzySearch } from '@/lib/fuzzySearch'
-import { getNodeIcon } from './custom-node/NodeIcons'
-import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
-
-const CATEGORY_ORDER: NodeCategory[] = ['ai-task', 'input', 'output', 'processing', 'free-tool', 'ai-generation', 'control']
-const RECENT_NODE_TYPES_KEY = 'workflowRecentNodeTypes'
-const MAX_RECENT_NODE_TYPES = 8
+  type Connection,
+  type ReactFlowInstance,
+  type Node,
+  type NodeChange,
+  type OnSelectionChangeParams,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import { useExecutionStore } from "../../stores/execution.store";
+import { useUIStore } from "../../stores/ui.store";
+import { CustomNode } from "./CustomNode";
+import { CustomEdge } from "./CustomEdge";
+import { AnnotationNode } from "./AnnotationNode";
+import { ContextMenu, type ContextMenuItem } from "./ContextMenu";
+import type {
+  NodeTypeDefinition,
+  NodeCategory,
+} from "@/workflow/types/node-defs";
+import { fuzzySearch } from "@/lib/fuzzySearch";
+import { getNodeIcon } from "./custom-node/NodeIcons";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+
+const CATEGORY_ORDER: NodeCategory[] = [
+  "ai-task",
+  "input",
+  "output",
+  "processing",
+  "free-tool",
+  "ai-generation",
+  "control",
+];
+const RECENT_NODE_TYPES_KEY = "workflowRecentNodeTypes";
+const MAX_RECENT_NODE_TYPES = 8;
 
 function loadRecentNodeTypes(): string[] {
-  if (typeof window === 'undefined') return []
+  if (typeof window === "undefined") return [];
   try {
-    const raw = localStorage.getItem(RECENT_NODE_TYPES_KEY)
-    const parsed = raw ? JSON.parse(raw) : []
-    return Array.isArray(parsed) ? parsed.filter((v): v is string => typeof v === 'string') : []
+    const raw = localStorage.getItem(RECENT_NODE_TYPES_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    return Array.isArray(parsed)
+      ? parsed.filter((v): v is string => typeof v === "string")
+      : [];
   } catch {
-    return []
+    return [];
   }
 }
 
 function saveRecentNodeTypes(types: string[]) {
-  if (typeof window === 'undefined') return
+  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(RECENT_NODE_TYPES_KEY, JSON.stringify(types))
+    localStorage.setItem(RECENT_NODE_TYPES_KEY, JSON.stringify(types));
   } catch {
     // noop
   }
 }
 
-const nodeTypes = { custom: CustomNode, annotation: AnnotationNode }
-const edgeTypes = { custom: CustomEdge }
+const nodeTypes = { custom: CustomNode, annotation: AnnotationNode };
+const edgeTypes = { custom: CustomEdge };
 
 /** Zoom in/out and fit view controls, positioned on the right of the canvas. */
 function CanvasZoomControls() {
-  const { t } = useTranslation()
-  const { zoomIn, zoomOut, fitView } = useReactFlow()
-  const interactionMode = useUIStore(s => s.interactionMode)
-  const setInteractionMode = useUIStore(s => s.setInteractionMode)
-  const showGrid = useUIStore(s => s.showGrid)
-  const toggleGrid = useUIStore(s => s.toggleGrid)
+  const { t } = useTranslation();
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const interactionMode = useUIStore((s) => s.interactionMode);
+  const setInteractionMode = useUIStore((s) => s.setInteractionMode);
+  const showGrid = useUIStore((s) => s.showGrid);
+  const toggleGrid = useUIStore((s) => s.toggleGrid);
   return (
-    <div className="absolute right-3 top-1/2 -translate-y-1/2 z-10 flex flex-col rounded-lg border border-border bg-card shadow-lg overflow-hidden"
-      data-guide="canvas-tools">
+    <div
+      className="absolute right-3 top-1/2 -translate-y-1/2 z-10 flex flex-col rounded-lg border border-border bg-card shadow-lg overflow-hidden"
+      data-guide="canvas-tools"
+    >
       {/* Grid toggle */}
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
-          <button type="button" onClick={toggleGrid}
-            className={`flex items-center justify-center w-9 h-9 transition-colors ${showGrid ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`}>
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/>
+          <button
+            type="button"
+            onClick={toggleGrid}
+            className={`flex items-center justify-center w-9 h-9 transition-colors ${showGrid ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`}
+          >
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+              <path d="M3 9h18" />
+              <path d="M3 15h18" />
+              <path d="M9 3v18" />
+              <path d="M15 3v18" />
             </svg>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{t('workflow.toggleGrid', 'Toggle Grid')}</TooltipContent>
+        <TooltipContent side="left">
+          {t("workflow.toggleGrid", "Toggle Grid")}
+        </TooltipContent>
       </Tooltip>
       <div className="h-px bg-border" />
       {/* Select / Hand toggle */}
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
-          <button type="button" onClick={() => setInteractionMode(interactionMode === 'hand' ? 'select' : 'hand')}
-            className={`flex items-center justify-center w-9 h-9 transition-colors ${interactionMode === 'select' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground hover:bg-accent'}`}>
-            {interactionMode === 'select' ? (
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/><path d="M13 13l6 6"/>
+          <button
+            type="button"
+            onClick={() =>
+              setInteractionMode(interactionMode === "hand" ? "select" : "hand")
+            }
+            className={`flex items-center justify-center w-9 h-9 transition-colors ${interactionMode === "select" ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-accent"}`}
+          >
+            {interactionMode === "select" ? (
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+                <path d="M13 13l6 6" />
               </svg>
             ) : (
-              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"/><path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2"/><path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0" />
+                <path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2" />
+                <path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8" />
+                <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
               </svg>
             )}
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{interactionMode === 'select' ? t('workflow.selectMode', 'Select (V)') : t('workflow.handMode', 'Hand (H)')}</TooltipContent>
+        <TooltipContent side="left">
+          {interactionMode === "select"
+            ? t("workflow.selectMode", "Select (V / Space)")
+            : t("workflow.handMode", "Hand (H / Space)")}
+        </TooltipContent>
       </Tooltip>
       <div className="h-px bg-border" />
       {/* Zoom in */}
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
-          <button type="button" onClick={() => zoomIn({ duration: 200 })}
-            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
+          <button
+            type="button"
+            onClick={() => zoomIn({ duration: 200 })}
+            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          >
             <span className="text-lg font-medium leading-none">+</span>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{t('workflow.zoomIn', 'Zoom in')}</TooltipContent>
+        <TooltipContent side="left">
+          {t("workflow.zoomIn", "Zoom in")}
+        </TooltipContent>
       </Tooltip>
       {/* Zoom out */}
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
-          <button type="button" onClick={() => zoomOut({ duration: 200 })}
-            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors border-t border-border">
+          <button
+            type="button"
+            onClick={() => zoomOut({ duration: 200 })}
+            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors border-t border-border"
+          >
             <span className="text-lg font-medium leading-none">−</span>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{t('workflow.zoomOut', 'Zoom out')}</TooltipContent>
+        <TooltipContent side="left">
+          {t("workflow.zoomOut", "Zoom out")}
+        </TooltipContent>
       </Tooltip>
       <div className="h-px bg-border" />
       {/* Fit view */}
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
-          <button type="button" onClick={() => fitView({ padding: 0.2, duration: 300, minZoom: 0.05, maxZoom: 1.5 })}
-            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+          <button
+            type="button"
+            onClick={() =>
+              fitView({
+                padding: 0.2,
+                duration: 300,
+                minZoom: 0.05,
+                maxZoom: 1.5,
+              })
+            }
+            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
+          >
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
             </svg>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{t('workflow.fitView', 'Fit View')}</TooltipContent>
+        <TooltipContent side="left">
+          {t("workflow.fitView", "Fit View")}
+        </TooltipContent>
       </Tooltip>
       {/* Auto layout */}
       <Tooltip delayDuration={0}>
         <TooltipTrigger asChild>
-          <button type="button" onClick={() => window.dispatchEvent(new Event('workflow:auto-layout'))}
-            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors border-t border-border">
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="3" width="6" height="6" rx="1"/><rect x="9" y="15" width="6" height="6" rx="1"/><path d="M9 6h6"/><path d="M12 9v6"/>
+          <button
+            type="button"
+            onClick={() =>
+              window.dispatchEvent(new Event("workflow:auto-layout"))
+            }
+            className="flex items-center justify-center w-9 h-9 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors border-t border-border"
+          >
+            <svg
+              width="15"
+              height="15"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="3" width="6" height="6" rx="1" />
+              <rect x="15" y="3" width="6" height="6" rx="1" />
+              <rect x="9" y="15" width="6" height="6" rx="1" />
+              <path d="M9 6h6" />
+              <path d="M12 9v6" />
             </svg>
           </button>
         </TooltipTrigger>
-        <TooltipContent side="left">{t('workflow.autoLayout', 'Auto Layout')}</TooltipContent>
+        <TooltipContent side="left">
+          {t("workflow.autoLayout", "Auto Layout")}
+        </TooltipContent>
       </Tooltip>
     </div>
-  )
+  );
 }
 
-
 interface WorkflowCanvasProps {
-  nodeDefs?: NodeTypeDefinition[]
+  nodeDefs?: NodeTypeDefinition[];
 }
 
 export function WorkflowCanvas({ nodeDefs = [] }: WorkflowCanvasProps) {
-  const { t } = useTranslation()
-  const { nodes, edges, onNodesChange, onEdgesChange, addEdge, addNode, removeNode, removeNodes, undo, redo, saveWorkflow } = useWorkflowStore()
-  const selectedNodeId = useUIStore(s => s.selectedNodeId)
-  const selectedNodeIds = useUIStore(s => s.selectedNodeIds)
-  const selectNode = useUIStore(s => s.selectNode)
-  const selectNodes = useUIStore(s => s.selectNodes)
-  const interactionMode = useUIStore(s => s.interactionMode)
-  const setInteractionMode = useUIStore(s => s.setInteractionMode)
-  const showGrid = useUIStore(s => s.showGrid)
-  const reactFlowWrapper = useRef<HTMLDivElement>(null)
-  const reactFlowInstance = useRef<ReactFlowInstance | null>(null)
+  const { t } = useTranslation();
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    addEdge,
+    addNode,
+    removeNode,
+    removeNodes,
+    undo,
+    redo,
+    saveWorkflow,
+  } = useWorkflowStore();
+  const selectedNodeId = useUIStore((s) => s.selectedNodeId);
+  const selectedNodeIds = useUIStore((s) => s.selectedNodeIds);
+  const selectNode = useUIStore((s) => s.selectNode);
+  const selectNodes = useUIStore((s) => s.selectNodes);
+  const interactionMode = useUIStore((s) => s.interactionMode);
+  const setInteractionMode = useUIStore((s) => s.setInteractionMode);
+  const showGrid = useUIStore((s) => s.showGrid);
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const reactFlowInstance = useRef<ReactFlowInstance | null>(null);
   const [contextMenu, setContextMenu] = useState<{
-    x: number; y: number; type: 'node' | 'canvas' | 'addNode' | 'edge'; nodeId?: string; edgeId?: string
-  } | null>(null)
-  const [addNodeQuery, setAddNodeQuery] = useState('')
-  const [addNodeCollapsed, setAddNodeCollapsed] = useState<Record<string, boolean>>({})
-  const [recentNodeTypes, setRecentNodeTypes] = useState<string[]>(() => loadRecentNodeTypes())
+    x: number;
+    y: number;
+    type: "node" | "canvas" | "addNode" | "edge";
+    nodeId?: string;
+    edgeId?: string;
+  } | null>(null);
+  const [addNodeQuery, setAddNodeQuery] = useState("");
+  const [addNodeCollapsed, setAddNodeCollapsed] = useState<
+    Record<string, boolean>
+  >({});
+  const [recentNodeTypes, setRecentNodeTypes] = useState<string[]>(() =>
+    loadRecentNodeTypes(),
+  );
 
   const recordRecentNodeType = useCallback((nodeType: string) => {
-    setRecentNodeTypes(prev => {
-      const next = [nodeType, ...prev.filter(t => t !== nodeType)].slice(0, MAX_RECENT_NODE_TYPES)
-      saveRecentNodeTypes(next)
-      return next
-    })
-  }, [])
+    setRecentNodeTypes((prev) => {
+      const next = [nodeType, ...prev.filter((t) => t !== nodeType)].slice(
+        0,
+        MAX_RECENT_NODE_TYPES,
+      );
+      saveRecentNodeTypes(next);
+      return next;
+    });
+  }, []);
 
   // Keyboard shortcuts
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      const target = event.target as HTMLElement
-      const isInputFocused = target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT' || target.isContentEditable
-      if (event.isComposing || event.key === 'Process') return
-      const ctrlOrCmd = navigator.platform.toUpperCase().indexOf('MAC') >= 0 ? event.metaKey : event.ctrlKey
+      const target = event.target as HTMLElement;
+      const isInputFocused =
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.tagName === "SELECT" ||
+        target.isContentEditable;
+      if (event.isComposing || event.key === "Process") return;
+      const ctrlOrCmd =
+        navigator.platform.toUpperCase().indexOf("MAC") >= 0
+          ? event.metaKey
+          : event.ctrlKey;
 
       // Ctrl+A: select all nodes — works even when input is focused
-      if (ctrlOrCmd && event.key === 'a') {
-        event.preventDefault()
+      if (ctrlOrCmd && event.key === "a") {
+        event.preventDefault();
         // Update our store
-        selectNodes(nodes.map(n => n.id))
+        selectNodes(nodes.map((n) => n.id));
         // Also update React Flow's internal selection state
-        const changes: NodeChange[] = nodes.map(n => ({ type: 'select' as const, id: n.id, selected: true }))
-        onNodesChange(changes)
-        return
+        const changes: NodeChange[] = nodes.map((n) => ({
+          type: "select" as const,
+          id: n.id,
+          selected: true,
+        }));
+        onNodesChange(changes);
+        return;
       }
 
       // Other shortcuts only work when not in an input field
-      if (isInputFocused) return
+      if (isInputFocused) return;
 
-      if ((event.key === 'Delete' || event.key === 'Backspace') && selectedNodeIds.size > 0) {
-        event.preventDefault()
+      if (
+        (event.key === "Delete" || event.key === "Backspace") &&
+        selectedNodeIds.size > 0
+      ) {
+        event.preventDefault();
         if (selectedNodeIds.size === 1) {
-          removeNode([...selectedNodeIds][0]); selectNode(null)
+          removeNode([...selectedNodeIds][0]);
+          selectNode(null);
         } else {
-          removeNodes([...selectedNodeIds]); selectNode(null)
+          removeNodes([...selectedNodeIds]);
+          selectNode(null);
         }
       }
-      if (ctrlOrCmd && event.key === 'c' && selectedNodeId) {
+      if (ctrlOrCmd && event.key === "c" && selectedNodeId) {
         // Don't intercept if user has selected text (e.g. in results panel)
-        const sel = window.getSelection()
-        if (sel && sel.toString().length > 0) return
-        event.preventDefault()
-        const node = nodes.find(n => n.id === selectedNodeId)
-        if (node) localStorage.setItem('copiedNode', JSON.stringify(node))
+        const sel = window.getSelection();
+        if (sel && sel.toString().length > 0) return;
+        event.preventDefault();
+        const node = nodes.find((n) => n.id === selectedNodeId);
+        if (node) localStorage.setItem("copiedNode", JSON.stringify(node));
       }
-      if (ctrlOrCmd && event.key === 's') {
-        event.preventDefault(); saveWorkflow().catch(console.error)
+      if (ctrlOrCmd && event.key === "s") {
+        event.preventDefault();
+        saveWorkflow().catch(console.error);
       }
-      if (ctrlOrCmd && event.key === 'z' && !event.shiftKey) {
-        event.preventDefault(); undo()
+      if (ctrlOrCmd && event.key === "z" && !event.shiftKey) {
+        event.preventDefault();
+        undo();
       }
-      if (ctrlOrCmd && event.key === 'z' && event.shiftKey) {
-        event.preventDefault(); redo()
+      if (ctrlOrCmd && event.key === "z" && event.shiftKey) {
+        event.preventDefault();
+        redo();
       }
-      if (ctrlOrCmd && event.key === 'y') {
-        event.preventDefault(); redo()
+      if (ctrlOrCmd && event.key === "y") {
+        event.preventDefault();
+        redo();
       }
-      // V = Select mode, H = Hand (pan) mode
-      if (event.key === 'v' || event.key === 'V') {
-        if (!ctrlOrCmd) { setInteractionMode('select') }
+      // V = Select mode, H = Hand (pan) mode, Space = Toggle
+      if (event.key === "v" || event.key === "V") {
+        if (!ctrlOrCmd) {
+          setInteractionMode("select");
+        }
+      }
+      if (event.key === "h" || event.key === "H") {
+        if (!ctrlOrCmd) {
+          setInteractionMode("hand");
+        }
       }
-      if (event.key === 'h' || event.key === 'H') {
-        if (!ctrlOrCmd) { setInteractionMode('hand') }
+      if (event.key === " ") {
+        event.preventDefault();
+        const current = useUIStore.getState().interactionMode;
+        setInteractionMode(current === "select" ? "hand" : "select");
       }
-      if (ctrlOrCmd && event.key === 'v') {
-        event.preventDefault()
-        const copiedNode = localStorage.getItem('copiedNode')
+      if (ctrlOrCmd && event.key === "v") {
+        event.preventDefault();
+        const copiedNode = localStorage.getItem("copiedNode");
         if (copiedNode && reactFlowInstance.current) {
           try {
-            const node = JSON.parse(copiedNode)
-            const center = useUIStore.getState().getViewportCenter()
-            addNode(node.data.nodeType, { x: center.x + (Math.random() - 0.5) * 60, y: center.y + (Math.random() - 0.5) * 60 },
-              node.data.params, node.data.label, node.data.paramDefinitions ?? [], node.data.inputDefinitions ?? [], node.data.outputDefinitions ?? [])
-            if (typeof node.data?.nodeType === 'string') recordRecentNodeType(node.data.nodeType)
-          } catch (e) { console.error('Failed to paste node:', e) }
+            const node = JSON.parse(copiedNode);
+            const center = useUIStore.getState().getViewportCenter();
+            addNode(
+              node.data.nodeType,
+              {
+                x: center.x + (Math.random() - 0.5) * 60,
+                y: center.y + (Math.random() - 0.5) * 60,
+              },
+              node.data.params,
+              node.data.label,
+              node.data.paramDefinitions ?? [],
+              node.data.inputDefinitions ?? [],
+              node.data.outputDefinitions ?? [],
+            );
+            if (typeof node.data?.nodeType === "string")
+              recordRecentNodeType(node.data.nodeType);
+          } catch (e) {
+            console.error("Failed to paste node:", e);
+          }
         }
       }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-    return () => document.removeEventListener('keydown', handleKeyDown, true)
-  }, [selectedNodeId, selectedNodeIds, removeNode, removeNodes, selectNode, selectNodes, nodes, addNode, undo, redo, saveWorkflow, recordRecentNodeType, onNodesChange])
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [
+    selectedNodeId,
+    selectedNodeIds,
+    removeNode,
+    removeNodes,
+    selectNode,
+    selectNodes,
+    nodes,
+    addNode,
+    undo,
+    redo,
+    saveWorkflow,
+    recordRecentNodeType,
+    onNodesChange,
+  ]);
 
-  const onConnect = useCallback((connection: Connection) => addEdge(connection), [addEdge])
-  const onNodeClick = useCallback((_: React.MouseEvent, node: { id: string }) => selectNode(node.id), [selectNode])
-  const onPaneClick = useCallback(() => { selectNode(null); setContextMenu(null) }, [selectNode])
+  // Touch gesture handling: 2 fingers = pan, 3 fingers = select, pinch = zoom (native)
+  useEffect(() => {
+    const wrapper = reactFlowWrapper.current;
+    if (!wrapper) return;
 
-  const onSelectionChange = useCallback(({ nodes: selectedNodes }: OnSelectionChangeParams) => {
-    const ids = selectedNodes.map(n => n.id)
-    if (ids.length === 0) return // pane click handles deselect
-    selectNodes(ids)
-  }, [selectNodes])
+    let modeBeforeTouch: "select" | "hand" | null = null;
 
-  const onNodeContextMenu = useCallback((event: React.MouseEvent, node: Node) => {
-    event.preventDefault()
-    setContextMenu({ x: event.clientX, y: event.clientY, type: 'node', nodeId: node.id })
-  }, [])
+    const onTouchStart = (e: TouchEvent) => {
+      if (e.touches.length >= 3) {
+        // 3+ fingers → select mode
+        modeBeforeTouch = useUIStore.getState().interactionMode;
+        if (modeBeforeTouch !== "select") {
+          setInteractionMode("select");
+        }
+      } else if (e.touches.length === 2) {
+        // 2 fingers → pan mode (pinch zoom handled natively by ReactFlow)
+        modeBeforeTouch = useUIStore.getState().interactionMode;
+        if (modeBeforeTouch !== "hand") {
+          setInteractionMode("hand");
+        }
+      }
+    };
+
+    const onTouchEnd = (e: TouchEvent) => {
+      // Restore previous mode when all fingers are lifted
+      if (e.touches.length === 0 && modeBeforeTouch !== null) {
+        setInteractionMode(modeBeforeTouch);
+        modeBeforeTouch = null;
+      }
+    };
+
+    wrapper.addEventListener("touchstart", onTouchStart, { passive: true });
+    wrapper.addEventListener("touchend", onTouchEnd, { passive: true });
+    wrapper.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    return () => {
+      wrapper.removeEventListener("touchstart", onTouchStart);
+      wrapper.removeEventListener("touchend", onTouchEnd);
+      wrapper.removeEventListener("touchcancel", onTouchEnd);
+    };
+  }, [setInteractionMode]);
+
+  const onConnect = useCallback(
+    (connection: Connection) => addEdge(connection),
+    [addEdge],
+  );
+  const onNodeClick = useCallback(
+    (_: React.MouseEvent, node: { id: string }) => selectNode(node.id),
+    [selectNode],
+  );
+  const onPaneClick = useCallback(() => {
+    selectNode(null);
+    setContextMenu(null);
+  }, [selectNode]);
+
+  const onSelectionChange = useCallback(
+    ({ nodes: selectedNodes }: OnSelectionChangeParams) => {
+      const ids = selectedNodes.map((n) => n.id);
+      if (ids.length === 0) return; // pane click handles deselect
+      selectNodes(ids);
+    },
+    [selectNodes],
+  );
+
+  const onNodeContextMenu = useCallback(
+    (event: React.MouseEvent, node: Node) => {
+      event.preventDefault();
+      setContextMenu({
+        x: event.clientX,
+        y: event.clientY,
+        type: "node",
+        nodeId: node.id,
+      });
+    },
+    [],
+  );
 
   const onPaneContextMenu = useCallback((event: React.MouseEvent) => {
-    event.preventDefault()
-    setContextMenu({ x: event.clientX, y: event.clientY, type: 'canvas' })
-  }, [])
+    event.preventDefault();
+    setContextMenu({ x: event.clientX, y: event.clientY, type: "canvas" });
+  }, []);
 
-  const onEdgeContextMenu = useCallback((event: React.MouseEvent, edge: { id: string }) => {
-    event.preventDefault()
-    setContextMenu({ x: event.clientX, y: event.clientY, type: 'edge', edgeId: edge.id })
-  }, [])
+  const onEdgeContextMenu = useCallback(
+    (event: React.MouseEvent, edge: { id: string }) => {
+      event.preventDefault();
+      setContextMenu({
+        x: event.clientX,
+        y: event.clientY,
+        type: "edge",
+        edgeId: edge.id,
+      });
+    },
+    [],
+  );
 
   const openAddNodeMenu = useCallback((x: number, y: number) => {
-    setAddNodeQuery('')
-    setContextMenu({ x, y, type: 'addNode' })
-  }, [])
+    setAddNodeQuery("");
+    setContextMenu({ x, y, type: "addNode" });
+  }, []);
 
   const projectMenuPosition = useCallback((x: number, y: number) => {
-    if (!reactFlowInstance.current || !reactFlowWrapper.current) return { x, y }
-    const bounds = reactFlowWrapper.current.getBoundingClientRect()
-    return reactFlowInstance.current.project({ x: x - bounds.left, y: y - bounds.top })
-  }, [])
-
-  const addNodeAtMenuPosition = useCallback((def: NodeTypeDefinition) => {
-    if (!contextMenu) return
-    const position = projectMenuPosition(contextMenu.x, contextMenu.y)
-    const defaultParams: Record<string, unknown> = {}
-    for (const p of def.params) {
-      if (p.default !== undefined) defaultParams[p.key] = p.default
-    }
-    const localizedLabel = t(`workflow.nodeDefs.${def.type}.label`, def.label)
-    addNode(def.type, position, defaultParams, localizedLabel, def.params, def.inputs, def.outputs)
-    recordRecentNodeType(def.type)
-    setContextMenu(null)
-  }, [addNode, contextMenu, projectMenuPosition, t, recordRecentNodeType])
+    if (!reactFlowInstance.current || !reactFlowWrapper.current)
+      return { x, y };
+    const bounds = reactFlowWrapper.current.getBoundingClientRect();
+    return reactFlowInstance.current.project({
+      x: x - bounds.left,
+      y: y - bounds.top,
+    });
+  }, []);
+
+  const addNodeAtMenuPosition = useCallback(
+    (def: NodeTypeDefinition) => {
+      if (!contextMenu) return;
+      const position = projectMenuPosition(contextMenu.x, contextMenu.y);
+      const defaultParams: Record<string, unknown> = {};
+      for (const p of def.params) {
+        if (p.default !== undefined) defaultParams[p.key] = p.default;
+      }
+      const localizedLabel = t(
+        `workflow.nodeDefs.${def.type}.label`,
+        def.label,
+      );
+      addNode(
+        def.type,
+        position,
+        defaultParams,
+        localizedLabel,
+        def.params,
+        def.inputs,
+        def.outputs,
+      );
+      recordRecentNodeType(def.type);
+      setContextMenu(null);
+    },
+    [addNode, contextMenu, projectMenuPosition, t, recordRecentNodeType],
+  );
 
   const addNodeDisplayDefs = useMemo(() => {
-    const q = addNodeQuery.trim()
-    if (!q) return nodeDefs
+    const q = addNodeQuery.trim();
+    if (!q) return nodeDefs;
     return fuzzySearch(nodeDefs, q, (def) => [
       def.type,
       def.category,
       def.label,
-      t(`workflow.nodeDefs.${def.type}.label`, def.label)
-    ]).map(r => r.item)
-  }, [addNodeQuery, nodeDefs, t])
+      t(`workflow.nodeDefs.${def.type}.label`, def.label),
+    ]).map((r) => r.item);
+  }, [addNodeQuery, nodeDefs, t]);
 
   const groupedAddNodeDefs = useMemo(() => {
     const recentVisible = recentNodeTypes
-      .map(type => nodeDefs.find(def => def.type === type))
+      .map((type) => nodeDefs.find((def) => def.type === type))
       .filter((def): def is NodeTypeDefinition => Boolean(def))
-      .filter(def => addNodeDisplayDefs.some(visible => visible.type === def.type))
-    const recentTypeSet = new Set(recentVisible.map(def => def.type))
+      .filter((def) =>
+        addNodeDisplayDefs.some((visible) => visible.type === def.type),
+      );
+    const recentTypeSet = new Set(recentVisible.map((def) => def.type));
 
-    const groups = new Map<string, NodeTypeDefinition[]>()
+    const groups = new Map<string, NodeTypeDefinition[]>();
     for (const def of addNodeDisplayDefs) {
-      if (recentTypeSet.has(def.type)) continue
-      const arr = groups.get(def.category) ?? []
-      arr.push(def)
-      groups.set(def.category, arr)
+      if (recentTypeSet.has(def.type)) continue;
+      const arr = groups.get(def.category) ?? [];
+      arr.push(def);
+      groups.set(def.category, arr);
     }
 
     const sorted = [...groups.entries()].sort((a, b) => {
-      const ai = CATEGORY_ORDER.indexOf(a[0] as NodeCategory)
-      const bi = CATEGORY_ORDER.indexOf(b[0] as NodeCategory)
-      return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi)
-    })
+      const ai = CATEGORY_ORDER.indexOf(a[0] as NodeCategory);
+      const bi = CATEGORY_ORDER.indexOf(b[0] as NodeCategory);
+      return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);
+    });
     if (recentVisible.length > 0) {
-      return [['recent', recentVisible] as [string, NodeTypeDefinition[]], ...sorted]
+      return [
+        ["recent", recentVisible] as [string, NodeTypeDefinition[]],
+        ...sorted,
+      ];
     }
-    return sorted
-  }, [addNodeDisplayDefs, nodeDefs, recentNodeTypes])
+    return sorted;
+  }, [addNodeDisplayDefs, nodeDefs, recentNodeTypes]);
 
   const getContextMenuItems = useCallback((): ContextMenuItem[] => {
-    if (!contextMenu) return []
+    if (!contextMenu) return [];
 
-    if (contextMenu.type === 'edge' && contextMenu.edgeId) {
-      const edgeId = contextMenu.edgeId
-      return [{ label: t('workflow.deleteConnection', 'Delete Connection'), icon: '✕', action: () => useWorkflowStore.getState().removeEdge(edgeId), destructive: true }]
+    if (contextMenu.type === "edge" && contextMenu.edgeId) {
+      const edgeId = contextMenu.edgeId;
+      return [
+        {
+          label: t("workflow.deleteConnection", "Delete Connection"),
+          icon: "✕",
+          action: () => useWorkflowStore.getState().removeEdge(edgeId),
+          destructive: true,
+        },
+      ];
     }
 
-    if (contextMenu.type === 'node' && contextMenu.nodeId) {
-      const nodeId = contextMenu.nodeId
-      const { runNode: rn, cancelNode: cn, continueFrom: cf, retryNode: rt, activeExecutions, nodeStatuses } = useExecutionStore.getState()
-      const isRunning = activeExecutions.has(nodeId)
-      const nodeStatus = nodeStatuses[nodeId]
-      const items: ContextMenuItem[] = []
+    if (contextMenu.type === "node" && contextMenu.nodeId) {
+      const nodeId = contextMenu.nodeId;
+      const {
+        runNode: rn,
+        cancelNode: cn,
+        continueFrom: cf,
+        retryNode: rt,
+        activeExecutions,
+        nodeStatuses,
+      } = useExecutionStore.getState();
+      const isRunning = activeExecutions.has(nodeId);
+      const nodeStatus = nodeStatuses[nodeId];
+      const items: ContextMenuItem[] = [];
 
       // Run actions — no save required; execution uses current graph from store
-      const wfId = useWorkflowStore.getState().workflowId ?? ''
-      const runAction = (action: (wfId: string, nId: string) => Promise<void>) => () => { action(wfId, nodeId) }
+      const wfId = useWorkflowStore.getState().workflowId ?? "";
+      const runAction =
+        (action: (wfId: string, nId: string) => Promise<void>) => () => {
+          action(wfId, nodeId);
+        };
 
       if (isRunning) {
-        items.push({ label: t('workflow.cancel', 'Cancel'), icon: '⏹', action: () => { if (wfId) cn(wfId, nodeId) } })
+        items.push({
+          label: t("workflow.cancel", "Cancel"),
+          icon: "⏹",
+          action: () => {
+            if (wfId) cn(wfId, nodeId);
+          },
+        });
       } else {
-        items.push({ label: t('workflow.runNode', 'Run Node'), icon: '▶', action: runAction(rn) })
-        items.push({ label: t('workflow.continueFrom', 'Continue From'), icon: '⏩', action: runAction(cf) })
-        if (nodeStatus === 'error') {
-          items.push({ label: t('workflow.retry', 'Retry'), icon: '🔄', action: runAction(rt) })
+        items.push({
+          label: t("workflow.runNode", "Run Node"),
+          icon: "▶",
+          action: runAction(rn),
+        });
+        items.push({
+          label: t("workflow.continueFrom", "Continue From"),
+          icon: "⏩",
+          action: runAction(cf),
+        });
+        if (nodeStatus === "error") {
+          items.push({
+            label: t("workflow.retry", "Retry"),
+            icon: "🔄",
+            action: runAction(rt),
+          });
         }
       }
 
-      items.push({ label: '', action: () => {}, divider: true })
+      items.push({ label: "", action: () => {}, divider: true });
       // Clear results + delete files — only show when node has results
-      const hasResults = (useExecutionStore.getState().lastResults[nodeId] ?? []).length > 0
+      const hasResults =
+        (useExecutionStore.getState().lastResults[nodeId] ?? []).length > 0;
       if (hasResults) {
         items.push({
-          label: t('workflow.clearResults', 'Clear Results'), icon: '🧹',
+          label: t("workflow.clearResults", "Clear Results"),
+          icon: "🧹",
           action: async () => {
             try {
-              const { historyIpc } = await import('../../ipc/ipc-client')
-              await historyIpc.deleteAll(nodeId)
-            } catch { /* best-effort */ }
-            useExecutionStore.getState().clearNodeResults(nodeId)
+              const { historyIpc } = await import("../../ipc/ipc-client");
+              await historyIpc.deleteAll(nodeId);
+            } catch {
+              /* best-effort */
+            }
+            useExecutionStore.getState().clearNodeResults(nodeId);
             // Also clear hidden runs metadata from node params
-            const node = useWorkflowStore.getState().nodes.find(n => n.id === nodeId)
+            const node = useWorkflowStore
+              .getState()
+              .nodes.find((n) => n.id === nodeId);
             if (node) {
-              const { __hiddenRuns: _, __showLatestOnly: _2, ...rest } = node.data.params as Record<string, unknown>
-              useWorkflowStore.getState().updateNodeParams(nodeId, rest)
+              const {
+                __hiddenRuns: _,
+                __showLatestOnly: _2,
+                ...rest
+              } = node.data.params as Record<string, unknown>;
+              useWorkflowStore.getState().updateNodeParams(nodeId, rest);
             }
-          }
-        })
+          },
+        });
       }
       items.push({
-        label: t('common.copy', 'Copy'), icon: '📋', shortcut: 'Ctrl+C',
-        action: () => { const n = nodes.find(n => n.id === nodeId); if (n) localStorage.setItem('copiedNode', JSON.stringify(n)) }
-      })
+        label: t("common.copy", "Copy"),
+        icon: "📋",
+        shortcut: "Ctrl+C",
+        action: () => {
+          const n = nodes.find((n) => n.id === nodeId);
+          if (n) localStorage.setItem("copiedNode", JSON.stringify(n));
+        },
+      });
       if (selectedNodeIds.size > 1 && selectedNodeIds.has(nodeId)) {
-        items.push({ label: t('workflow.deleteSelected', 'Delete Selected ({{count}})', { count: selectedNodeIds.size }), icon: '🗑️', shortcut: 'Del', action: () => { removeNodes([...selectedNodeIds]); selectNode(null) }, destructive: true })
+        items.push({
+          label: t("workflow.deleteSelected", "Delete Selected ({{count}})", {
+            count: selectedNodeIds.size,
+          }),
+          icon: "🗑️",
+          shortcut: "Del",
+          action: () => {
+            removeNodes([...selectedNodeIds]);
+            selectNode(null);
+          },
+          destructive: true,
+        });
       } else {
-        items.push({ label: t('workflow.delete', 'Delete'), icon: '🗑️', shortcut: 'Del', action: () => removeNode(nodeId), destructive: true })
+        items.push({
+          label: t("workflow.delete", "Delete"),
+          icon: "🗑️",
+          shortcut: "Del",
+          action: () => removeNode(nodeId),
+          destructive: true,
+        });
       }
-      return items
+      return items;
     }
 
     /** Convert context menu screen coords to flow position, accounting for wrapper offset */
     const menuToFlowPosition = () => {
-      if (!reactFlowInstance.current || !reactFlowWrapper.current) return { x: contextMenu.x, y: contextMenu.y }
-      const bounds = reactFlowWrapper.current.getBoundingClientRect()
-      return reactFlowInstance.current.project({ x: contextMenu.x - bounds.left, y: contextMenu.y - bounds.top })
-    }
+      if (!reactFlowInstance.current || !reactFlowWrapper.current)
+        return { x: contextMenu.x, y: contextMenu.y };
+      const bounds = reactFlowWrapper.current.getBoundingClientRect();
+      return reactFlowInstance.current.project({
+        x: contextMenu.x - bounds.left,
+        y: contextMenu.y - bounds.top,
+      });
+    };
 
-    if (contextMenu.type === 'addNode') return []
+    if (contextMenu.type === "addNode") return [];
 
     // Canvas context menu
-    const copiedNode = localStorage.getItem('copiedNode')
+    const copiedNode = localStorage.getItem("copiedNode");
     const items: ContextMenuItem[] = [
-      { label: t('workflow.addNode', 'Add Node'), icon: '➕', keepOpen: true, action: () => openAddNodeMenu(contextMenu.x, contextMenu.y) },
-      { label: t('workflow.addNote', 'Add Note'), icon: '📝', action: () => {
-        const position = menuToFlowPosition()
-        const noteId = uuidv4()
-        useWorkflowStore.setState(state => ({
-          nodes: [...state.nodes, { id: noteId, type: 'annotation', position, data: { nodeType: 'annotation', params: { title: '', body: '', color: 'hsl(var(--muted))' }, label: t('workflow.note', 'Note') } }],
-          isDirty: true
-        }))
-      }}
-    ]
+      {
+        label: t("workflow.addNode", "Add Node"),
+        icon: "➕",
+        keepOpen: true,
+        action: () => openAddNodeMenu(contextMenu.x, contextMenu.y),
+      },
+      {
+        label: t("workflow.addNote", "Add Note"),
+        icon: "📝",
+        action: () => {
+          const position = menuToFlowPosition();
+          const noteId = uuidv4();
+          useWorkflowStore.setState((state) => ({
+            nodes: [
+              ...state.nodes,
+              {
+                id: noteId,
+                type: "annotation",
+                position,
+                data: {
+                  nodeType: "annotation",
+                  params: { title: "", body: "", color: "hsl(var(--muted))" },
+                  label: t("workflow.note", "Note"),
+                },
+              },
+            ],
+            isDirty: true,
+          }));
+        },
+      },
+    ];
     if (copiedNode) {
       items.push({
-        label: t('workflow.paste', 'Paste'), icon: '📋', shortcut: 'Ctrl+V',
+        label: t("workflow.paste", "Paste"),
+        icon: "📋",
+        shortcut: "Ctrl+V",
         action: () => {
           try {
-            const node = JSON.parse(copiedNode)
-            const position = menuToFlowPosition()
-            addNode(node.data.nodeType, position, node.data.params, node.data.label, node.data.paramDefinitions ?? [], node.data.inputDefinitions ?? [], node.data.outputDefinitions ?? [])
-            if (typeof node.data?.nodeType === 'string') recordRecentNodeType(node.data.nodeType)
-          } catch (e) { console.error('Failed to paste node:', e) }
-        }
-      })
+            const node = JSON.parse(copiedNode);
+            const position = menuToFlowPosition();
+            addNode(
+              node.data.nodeType,
+              position,
+              node.data.params,
+              node.data.label,
+              node.data.paramDefinitions ?? [],
+              node.data.inputDefinitions ?? [],
+              node.data.outputDefinitions ?? [],
+            );
+            if (typeof node.data?.nodeType === "string")
+              recordRecentNodeType(node.data.nodeType);
+          } catch (e) {
+            console.error("Failed to paste node:", e);
+          }
+        },
+      });
     }
-    return items
-  }, [contextMenu, removeNode, removeNodes, selectedNodeIds, selectNode, nodes, addNode, openAddNodeMenu, t, recordRecentNodeType])
-
-  const onDragOver = useCallback((event: DragEvent) => { event.preventDefault(); event.dataTransfer.dropEffect = 'move' }, [])
-
-  const onDrop = useCallback((event: DragEvent) => {
-    event.preventDefault()
-    const nodeType = event.dataTransfer.getData('application/reactflow-nodetype')
-    if (!nodeType || !reactFlowInstance.current || !reactFlowWrapper.current) return
-    const bounds = reactFlowWrapper.current.getBoundingClientRect()
-    const position = reactFlowInstance.current.project({ x: event.clientX - bounds.left, y: event.clientY - bounds.top })
-    const def = nodeDefs.find(d => d.type === nodeType)
-    const defaultParams: Record<string, unknown> = {}
-    if (def) { for (const p of def.params) { if (p.default !== undefined) defaultParams[p.key] = p.default } }
-    const newNodeId = addNode(nodeType, position, defaultParams, def ? t(`workflow.nodeDefs.${def.type}.label`, def.label) : nodeType, def?.params ?? [], def?.inputs ?? [], def?.outputs ?? [])
-    recordRecentNodeType(nodeType)
-    // Auto-select the newly dropped node so the right config panel opens
-    selectNode(newNodeId)
-  }, [addNode, nodeDefs, recordRecentNodeType, selectNode, t])
+    return items;
+  }, [
+    contextMenu,
+    removeNode,
+    removeNodes,
+    selectedNodeIds,
+    selectNode,
+    nodes,
+    addNode,
+    openAddNodeMenu,
+    t,
+    recordRecentNodeType,
+  ]);
+
+  const onDragOver = useCallback((event: DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const onDrop = useCallback(
+    (event: DragEvent) => {
+      event.preventDefault();
+      const nodeType = event.dataTransfer.getData(
+        "application/reactflow-nodetype",
+      );
+      if (!nodeType || !reactFlowInstance.current || !reactFlowWrapper.current)
+        return;
+      const bounds = reactFlowWrapper.current.getBoundingClientRect();
+      const position = reactFlowInstance.current.project({
+        x: event.clientX - bounds.left,
+        y: event.clientY - bounds.top,
+      });
+      const def = nodeDefs.find((d) => d.type === nodeType);
+      const defaultParams: Record<string, unknown> = {};
+      if (def) {
+        for (const p of def.params) {
+          if (p.default !== undefined) defaultParams[p.key] = p.default;
+        }
+      }
+      const newNodeId = addNode(
+        nodeType,
+        position,
+        defaultParams,
+        def ? t(`workflow.nodeDefs.${def.type}.label`, def.label) : nodeType,
+        def?.params ?? [],
+        def?.inputs ?? [],
+        def?.outputs ?? [],
+      );
+      recordRecentNodeType(nodeType);
+      // Auto-select the newly dropped node so the right config panel opens
+      selectNode(newNodeId);
+    },
+    [addNode, nodeDefs, recordRecentNodeType, selectNode, t],
+  );
 
   useEffect(() => {
     const handleFitView = () => {
-      reactFlowInstance.current?.fitView({ padding: 0.2, duration: 300, minZoom: 0.05, maxZoom: 1.5 })
-    }
-    window.addEventListener('workflow:fit-view', handleFitView)
-    return () => window.removeEventListener('workflow:fit-view', handleFitView)
-  }, [])
+      reactFlowInstance.current?.fitView({
+        padding: 0.2,
+        duration: 300,
+        minZoom: 0.05,
+        maxZoom: 1.5,
+      });
+    };
+    window.addEventListener("workflow:fit-view", handleFitView);
+    return () => window.removeEventListener("workflow:fit-view", handleFitView);
+  }, []);
 
   // Capture-phase wheel: when target is a text field or scrollable element (or inside one), scroll it and prevent React Flow from zooming
   useEffect(() => {
-    const wrapper = reactFlowWrapper.current
-    if (!wrapper) return
+    const wrapper = reactFlowWrapper.current;
+    if (!wrapper) return;
     const onWheelCapture = (e: WheelEvent) => {
-      let el = e.target as Node | null
-      if (!el || !(el instanceof HTMLElement)) return
-      const tag = el.tagName.toLowerCase()
-      const isInputOrTextarea = tag === 'textarea' || tag === 'input'
-      const isContentEditable = el.isContentEditable
+      let el = e.target as Node | null;
+      if (!el || !(el instanceof HTMLElement)) return;
+      const tag = el.tagName.toLowerCase();
+      const isInputOrTextarea = tag === "textarea" || tag === "input";
+      const isContentEditable = el.isContentEditable;
 
       // Find scrollable: the element itself or the nearest scrollable ancestor (e.g. ModelSelector dropdown list)
       const getScrollable = (elem: HTMLElement): HTMLElement | null => {
-        for (let n: HTMLElement | null = elem; n && n !== wrapper; n = n.parentElement) {
-          const oy = typeof getComputedStyle === 'function' ? getComputedStyle(n).overflowY : ''
-          if (/auto|scroll|overlay/.test(oy)) return n
+        for (
+          let n: HTMLElement | null = elem;
+          n && n !== wrapper;
+          n = n.parentElement
+        ) {
+          const oy =
+            typeof getComputedStyle === "function"
+              ? getComputedStyle(n).overflowY
+              : "";
+          if (/auto|scroll|overlay/.test(oy)) return n;
         }
-        return null
-      }
+        return null;
+      };
 
-      let scrollable: HTMLElement | null = null
+      let scrollable: HTMLElement | null = null;
       if (isInputOrTextarea || isContentEditable) {
-        scrollable = el as HTMLElement
+        scrollable = el as HTMLElement;
       } else {
-        scrollable = getScrollable(el)
+        scrollable = getScrollable(el);
       }
 
-      if (!scrollable) return
+      if (!scrollable) return;
       // Prevent zoom whenever we're over a scroll container (even if it has no overflow yet)
-      e.preventDefault()
-      e.stopPropagation()
-      e.stopImmediatePropagation()
-      const s = scrollable as HTMLElement & { scrollTop: number; scrollHeight: number; clientHeight: number }
-      if (typeof s.scrollTop === 'number' && s.scrollHeight > s.clientHeight) {
-        s.scrollTop = Math.max(0, Math.min(s.scrollHeight - s.clientHeight, s.scrollTop + e.deltaY))
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      const s = scrollable as HTMLElement & {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+      };
+      if (typeof s.scrollTop === "number" && s.scrollHeight > s.clientHeight) {
+        s.scrollTop = Math.max(
+          0,
+          Math.min(s.scrollHeight - s.clientHeight, s.scrollTop + e.deltaY),
+        );
       }
-    }
-    wrapper.addEventListener('wheel', onWheelCapture, { capture: true })
-    return () => wrapper.removeEventListener('wheel', onWheelCapture, { capture: true })
-  }, [])
+    };
+    wrapper.addEventListener("wheel", onWheelCapture, { capture: true });
+    return () =>
+      wrapper.removeEventListener("wheel", onWheelCapture, { capture: true });
+  }, []);
 
   // Auto-layout: arrange nodes in a clean left-to-right DAG layout
   // Uses actual DOM measurements for node sizes to prevent overlap
   useEffect(() => {
     const handleAutoLayout = () => {
-      const { nodes: currentNodes, edges: currentEdges, onNodesChange: applyChanges } = useWorkflowStore.getState()
-      if (currentNodes.length === 0) return
+      const {
+        nodes: currentNodes,
+        edges: currentEdges,
+        onNodesChange: applyChanges,
+      } = useWorkflowStore.getState();
+      if (currentNodes.length === 0) return;
 
       // ── Measure actual node sizes from DOM ──
       // Also check which nodes have execution results (expanded results make nodes taller)
-      const executionResults = useExecutionStore.getState().lastResults
-      const nodeSize = new Map<string, { w: number; h: number }>()
+      const executionResults = useExecutionStore.getState().lastResults;
+      const nodeSize = new Map<string, { w: number; h: number }>();
       // Extra height to reserve for nodes whose results panel may not yet be
       // reflected in the DOM (e.g. results exist but panel is collapsed).
-      const RESULTS_RESERVE = 260
+      const RESULTS_RESERVE = 260;
       for (const n of currentNodes) {
-        const el = document.querySelector(`[data-id="${n.id}"]`) as HTMLElement | null
-        const hasResults = (executionResults[n.id] ?? []).length > 0
+        const el = document.querySelector(
+          `[data-id="${n.id}"]`,
+        ) as HTMLElement | null;
+        const hasResults = (executionResults[n.id] ?? []).length > 0;
         if (el) {
-          const measuredH = el.offsetHeight
+          const measuredH = el.offsetHeight;
           // If the node has results but measured height is small, the results
           // panel is likely collapsed — reserve space for when it expands.
-          const h = hasResults && measuredH < 300 ? measuredH + RESULTS_RESERVE : measuredH
-          nodeSize.set(n.id, { w: el.offsetWidth, h })
+          const h =
+            hasResults && measuredH < 300
+              ? measuredH + RESULTS_RESERVE
+              : measuredH;
+          nodeSize.set(n.id, { w: el.offsetWidth, h });
         } else {
-          const w = (n.data?.params?.__nodeWidth as number) ?? 380
-          nodeSize.set(n.id, { w, h: hasResults ? 500 : 250 })
+          const w = (n.data?.params?.__nodeWidth as number) ?? 380;
+          nodeSize.set(n.id, { w, h: hasResults ? 500 : 250 });
         }
       }
 
       // ── Build adjacency ──
-      const outgoing = new Map<string, string[]>()
-      const incoming = new Map<string, string[]>()
+      const outgoing = new Map<string, string[]>();
+      const incoming = new Map<string, string[]>();
       for (const n of currentNodes) {
-        outgoing.set(n.id, [])
-        incoming.set(n.id, [])
+        outgoing.set(n.id, []);
+        incoming.set(n.id, []);
       }
       for (const e of currentEdges) {
-        outgoing.get(e.source)?.push(e.target)
-        incoming.get(e.target)?.push(e.source)
+        outgoing.get(e.source)?.push(e.target);
+        incoming.get(e.target)?.push(e.source);
       }
 
       // ── Assign layers via longest-path (ensures proper depth) ──
-      const layer = new Map<string, number>()
-      const visited = new Set<string>()
+      const layer = new Map<string, number>();
+      const visited = new Set<string>();
 
       function assignLayer(id: string): number {
-        if (layer.has(id)) return layer.get(id)!
-        if (visited.has(id)) return 0 // cycle guard
-        visited.add(id)
-        const parents = incoming.get(id) ?? []
-        const depth = parents.length === 0 ? 0 : Math.max(...parents.map(p => assignLayer(p) + 1))
-        layer.set(id, depth)
-        return depth
+        if (layer.has(id)) return layer.get(id)!;
+        if (visited.has(id)) return 0; // cycle guard
+        visited.add(id);
+        const parents = incoming.get(id) ?? [];
+        const depth =
+          parents.length === 0
+            ? 0
+            : Math.max(...parents.map((p) => assignLayer(p) + 1));
+        layer.set(id, depth);
+        return depth;
       }
-      for (const n of currentNodes) assignLayer(n.id)
+      for (const n of currentNodes) assignLayer(n.id);
 
       // ── Group by layer ──
-      const layers = new Map<number, string[]>()
+      const layers = new Map<number, string[]>();
       for (const [id, l] of layer) {
-        if (!layers.has(l)) layers.set(l, [])
-        layers.get(l)!.push(id)
+        if (!layers.has(l)) layers.set(l, []);
+        layers.get(l)!.push(id);
       }
 
       // Sort layers by key
-      const sortedLayerKeys = [...layers.keys()].sort((a, b) => a - b)
+      const sortedLayerKeys = [...layers.keys()].sort((a, b) => a - b);
 
       // ── Barycenter ordering to minimize edge crossings ──
       // For each layer (except the first), sort nodes by the average Y position
       // of their connected nodes in the previous layer.
       // Run multiple passes for better results.
-      const nodeOrder = new Map<string, number>()
+      const nodeOrder = new Map<string, number>();
       // Initialize order by original position (top to bottom)
       for (const l of sortedLayerKeys) {
-        const ids = layers.get(l)!
+        const ids = layers.get(l)!;
         ids.sort((a, b) => {
-          const na = currentNodes.find(n => n.id === a)
-          const nb = currentNodes.find(n => n.id === b)
-          return (na?.position?.y ?? 0) - (nb?.position?.y ?? 0)
-        })
-        ids.forEach((id, i) => nodeOrder.set(id, i))
+          const na = currentNodes.find((n) => n.id === a);
+          const nb = currentNodes.find((n) => n.id === b);
+          return (na?.position?.y ?? 0) - (nb?.position?.y ?? 0);
+        });
+        ids.forEach((id, i) => nodeOrder.set(id, i));
       }
 
       // Barycenter passes (forward + backward)
       for (let pass = 0; pass < 4; pass++) {
-        const keys = pass % 2 === 0 ? sortedLayerKeys : [...sortedLayerKeys].reverse()
+        const keys =
+          pass % 2 === 0 ? sortedLayerKeys : [...sortedLayerKeys].reverse();
         for (const l of keys) {
-          const ids = layers.get(l)!
-          const bary = new Map<string, number>()
+          const ids = layers.get(l)!;
+          const bary = new Map<string, number>();
           for (const id of ids) {
-            const neighbors = pass % 2 === 0
-              ? (incoming.get(id) ?? [])
-              : (outgoing.get(id) ?? [])
+            const neighbors =
+              pass % 2 === 0
+                ? (incoming.get(id) ?? [])
+                : (outgoing.get(id) ?? []);
             if (neighbors.length > 0) {
-              const avg = neighbors.reduce((sum, nid) => sum + (nodeOrder.get(nid) ?? 0), 0) / neighbors.length
-              bary.set(id, avg)
+              const avg =
+                neighbors.reduce(
+                  (sum, nid) => sum + (nodeOrder.get(nid) ?? 0),
+                  0,
+                ) / neighbors.length;
+              bary.set(id, avg);
             } else {
-              bary.set(id, nodeOrder.get(id) ?? 0)
+              bary.set(id, nodeOrder.get(id) ?? 0);
             }
           }
-          ids.sort((a, b) => (bary.get(a) ?? 0) - (bary.get(b) ?? 0))
-          ids.forEach((id, i) => nodeOrder.set(id, i))
+          ids.sort((a, b) => (bary.get(a) ?? 0) - (bary.get(b) ?? 0));
+          ids.forEach((id, i) => nodeOrder.set(id, i));
         }
       }
 
       // ── Compute column X positions based on max width per layer ──
-      const H_GAP = 100 // horizontal gap between columns
-      const V_GAP = 60  // vertical gap between nodes in same column
-      const layerX = new Map<number, number>()
-      let currentX = 0
+      const H_GAP = 100; // horizontal gap between columns
+      const V_GAP = 60; // vertical gap between nodes in same column
+      const layerX = new Map<number, number>();
+      let currentX = 0;
       for (const l of sortedLayerKeys) {
-        layerX.set(l, currentX)
-        const ids = layers.get(l)!
-        const maxW = Math.max(...ids.map(id => nodeSize.get(id)?.w ?? 380))
-        currentX += maxW + H_GAP
+        layerX.set(l, currentX);
+        const ids = layers.get(l)!;
+        const maxW = Math.max(...ids.map((id) => nodeSize.get(id)?.w ?? 380));
+        currentX += maxW + H_GAP;
       }
 
       // ── Position nodes: center each column vertically ──
-      const changes: NodeChange[] = []
+      const changes: NodeChange[] = [];
       for (const l of sortedLayerKeys) {
-        const ids = layers.get(l)!
+        const ids = layers.get(l)!;
         // Calculate total height of this column
-        const heights = ids.map(id => nodeSize.get(id)?.h ?? 250)
-        const totalHeight = heights.reduce((sum, h) => sum + h, 0) + (ids.length - 1) * V_GAP
-        let y = -totalHeight / 2
+        const heights = ids.map((id) => nodeSize.get(id)?.h ?? 250);
+        const totalHeight =
+          heights.reduce((sum, h) => sum + h, 0) + (ids.length - 1) * V_GAP;
+        let y = -totalHeight / 2;
 
         ids.forEach((id, i) => {
           changes.push({
-            type: 'position',
+            type: "position",
             id,
             position: {
               x: layerX.get(l) ?? 0,
-              y
-            }
-          } as NodeChange)
-          y += heights[i] + V_GAP
-        })
+              y,
+            },
+          } as NodeChange);
+          y += heights[i] + V_GAP;
+        });
       }
-      applyChanges(changes)
+      applyChanges(changes);
 
       // Fit view after layout
       setTimeout(() => {
-        reactFlowInstance.current?.fitView({ padding: 0.2, duration: 300, minZoom: 0.05, maxZoom: 1.5 })
-      }, 50)
-    }
-    window.addEventListener('workflow:auto-layout', handleAutoLayout)
-    return () => window.removeEventListener('workflow:auto-layout', handleAutoLayout)
-  }, [])
+        reactFlowInstance.current?.fitView({
+          padding: 0.2,
+          duration: 300,
+          minZoom: 0.05,
+          maxZoom: 1.5,
+        });
+      }, 50);
+    };
+    window.addEventListener("workflow:auto-layout", handleAutoLayout);
+    return () =>
+      window.removeEventListener("workflow:auto-layout", handleAutoLayout);
+  }, []);
 
   return (
     <ReactFlowProvider>
       <div ref={reactFlowWrapper} className="flex-1 h-full relative">
         <ReactFlow
-          nodes={nodes} edges={edges}
-          onNodesChange={onNodesChange} onEdgesChange={onEdgesChange}
-          onConnect={onConnect} onNodeClick={onNodeClick} onPaneClick={onPaneClick}
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onNodeClick={onNodeClick}
+          onPaneClick={onPaneClick}
           onSelectionChange={onSelectionChange}
-          onNodeContextMenu={onNodeContextMenu} onEdgeContextMenu={onEdgeContextMenu}
+          onNodeContextMenu={onNodeContextMenu}
+          onEdgeContextMenu={onEdgeContextMenu}
           onPaneContextMenu={onPaneContextMenu}
           proOptions={{ hideAttribution: true }}
-          onDragOver={onDragOver} onDrop={onDrop}
-          onInit={instance => {
-            reactFlowInstance.current = instance
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+          onInit={(instance) => {
+            reactFlowInstance.current = instance;
             useUIStore.getState().setGetViewportCenter(() => {
-              const vp = instance.getViewport()
-              const el = reactFlowWrapper.current
-              const w = el ? el.clientWidth : 800
-              const h = el ? el.clientHeight : 600
+              const vp = instance.getViewport();
+              const el = reactFlowWrapper.current;
+              const w = el ? el.clientWidth : 800;
+              const h = el ? el.clientHeight : 600;
               return {
                 x: (-vp.x + w / 2) / vp.zoom,
                 y: (-vp.y + h / 2) / vp.zoom,
-              }
-            })
+              };
+            });
           }}
-          nodeTypes={nodeTypes} edgeTypes={edgeTypes}
-          selectionOnDrag={interactionMode === 'select'}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          selectionOnDrag={interactionMode === "select"}
           selectionMode={SelectionMode.Partial}
           multiSelectionKeyCode="Shift"
-          panOnDrag={interactionMode === 'hand'}
+          panOnDrag={interactionMode === "hand"}
+          panOnScroll
           deleteKeyCode={null}
           minZoom={0.05}
           maxZoom={2.5}
           fitView
           className="bg-background"
         >
-          {showGrid && <Background variant={BackgroundVariant.Lines} gap={20} lineWidth={1} color="hsl(var(--border))" />}
+          {showGrid && (
+            <Background
+              variant={BackgroundVariant.Lines}
+              gap={20}
+              lineWidth={1}
+              color="hsl(var(--border))"
+            />
+          )}
         </ReactFlow>
         <CanvasZoomControls />
-        {contextMenu && contextMenu.type !== 'addNode' && (
-          <ContextMenu x={contextMenu.x} y={contextMenu.y} items={getContextMenuItems()} onClose={() => setContextMenu(null)} />
+        {contextMenu && contextMenu.type !== "addNode" && (
+          <ContextMenu
+            x={contextMenu.x}
+            y={contextMenu.y}
+            items={getContextMenuItems()}
+            onClose={() => setContextMenu(null)}
+          />
         )}
-        {contextMenu && contextMenu.type === 'addNode' && (
+        {contextMenu && contextMenu.type === "addNode" && (
           <ContextMenu
             x={contextMenu.x}
             y={contextMenu.y}
@@ -704,53 +1209,78 @@ export function WorkflowCanvas({ nodeDefs = [] }: WorkflowCanvasProps) {
           >
             <div className="w-[320px] max-h-[420px] flex flex-col">
               <div className="px-3 py-2 border-b border-border">
-                <div className="text-xs font-semibold mb-1.5">{t('workflow.addNode', 'Add Node')}</div>
+                <div className="text-xs font-semibold mb-1.5">
+                  {t("workflow.addNode", "Add Node")}
+                </div>
                 <input
                   autoFocus
                   type="text"
                   value={addNodeQuery}
-                  onChange={e => setAddNodeQuery(e.target.value)}
-                  placeholder={t('workflow.searchNodesPlaceholder', 'Search nodes...')}
+                  onChange={(e) => setAddNodeQuery(e.target.value)}
+                  placeholder={t(
+                    "workflow.searchNodesPlaceholder",
+                    "Search nodes...",
+                  )}
                   className="w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50"
                 />
               </div>
               <div className="overflow-y-auto py-1.5">
                 {groupedAddNodeDefs.map(([category, defs]) => {
-                  const isCollapsed = addNodeCollapsed[category] ?? false
+                  const isCollapsed = addNodeCollapsed[category] ?? false;
                   return (
                     <div key={category} className="mb-1">
                       <button
-                        onClick={() => setAddNodeCollapsed(prev => ({ ...prev, [category]: !isCollapsed }))}
+                        onClick={() =>
+                          setAddNodeCollapsed((prev) => ({
+                            ...prev,
+                            [category]: !isCollapsed,
+                          }))
+                        }
                         className="w-full flex items-center gap-1.5 px-2.5 py-1 text-[10px] uppercase tracking-wide text-muted-foreground hover:text-foreground"
                       >
-                        <span className="text-[9px]">{isCollapsed ? '▶' : '▼'}</span>
-                        <span>{t(`workflow.nodeCategory.${category}`, category)}</span>
-                        <span className="ml-auto text-[10px] opacity-70">{defs.length}</span>
+                        <span className="text-[9px]">
+                          {isCollapsed ? "▶" : "▼"}
+                        </span>
+                        <span>
+                          {t(`workflow.nodeCategory.${category}`, category)}
+                        </span>
+                        <span className="ml-auto text-[10px] opacity-70">
+                          {defs.length}
+                        </span>
                       </button>
-                      {!isCollapsed && defs.map(def => {
-                        const DefIcon = getNodeIcon(def.type)
-                        return (
-                        <button
-                          key={def.type}
-                          onClick={() => addNodeAtMenuPosition(def)}
-                          className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-                          title={t('workflow.dragOrClickToAdd', 'Drag to canvas or click to add')}
-                        >
-                        {DefIcon && (
-                          <div className="rounded-md bg-primary/10 p-1 flex-shrink-0">
-                            <DefIcon className="w-3 h-3 text-primary" />
-                          </div>
-                        )}
-                        <span>{t(`workflow.nodeDefs.${def.type}.label`, def.label)}</span>
-                        </button>
-                        )
-                      })}
+                      {!isCollapsed &&
+                        defs.map((def) => {
+                          const DefIcon = getNodeIcon(def.type);
+                          return (
+                            <button
+                              key={def.type}
+                              onClick={() => addNodeAtMenuPosition(def)}
+                              className="w-full flex items-center gap-2 px-3 py-1.5 text-left text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                              title={t(
+                                "workflow.dragOrClickToAdd",
+                                "Drag to canvas or click to add",
+                              )}
+                            >
+                              {DefIcon && (
+                                <div className="rounded-md bg-primary/10 p-1 flex-shrink-0">
+                                  <DefIcon className="w-3 h-3 text-primary" />
+                                </div>
+                              )}
+                              <span>
+                                {t(
+                                  `workflow.nodeDefs.${def.type}.label`,
+                                  def.label,
+                                )}
+                              </span>
+                            </button>
+                          );
+                        })}
                     </div>
-                  )
+                  );
                 })}
                 {addNodeDisplayDefs.length === 0 && (
                   <div className="px-3 py-4 text-xs text-muted-foreground text-center">
-                    {t('workflow.noNodesAvailable', 'No nodes available')}
+                    {t("workflow.noNodesAvailable", "No nodes available")}
                   </div>
                 )}
               </div>
@@ -759,5 +1289,5 @@ export function WorkflowCanvas({ nodeDefs = [] }: WorkflowCanvasProps) {
         )}
       </div>
     </ReactFlowProvider>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/WorkflowPromptOptimizer.tsx b/src/workflow/components/canvas/WorkflowPromptOptimizer.tsx
index f5c8f911..f7d6e4da 100644
--- a/src/workflow/components/canvas/WorkflowPromptOptimizer.tsx
+++ b/src/workflow/components/canvas/WorkflowPromptOptimizer.tsx
@@ -11,85 +11,104 @@
  *
  * "Optimize with Image" opens a dialog for image-to-prompt generation.
  */
-import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useModelsStore } from '@/stores/modelsStore'
-import { apiClient } from '@/api/client'
-import { schemaToFormFields, getDefaultValues, type FormFieldConfig } from '@/lib/schemaToForm'
-import { FormField } from '@/components/playground/FormField'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import type { SchemaProperty } from '@/types/model'
-
-const OPTIMIZER_MODEL = 'wavespeed-ai/prompt-optimizer'
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { useModelsStore } from "@/stores/modelsStore";
+import { apiClient } from "@/api/client";
+import {
+  schemaToFormFields,
+  getDefaultValues,
+  type FormFieldConfig,
+} from "@/lib/schemaToForm";
+import { FormField } from "@/components/playground/FormField";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import type { SchemaProperty } from "@/types/model";
+
+const OPTIMIZER_MODEL = "wavespeed-ai/prompt-optimizer";
 
 /* ── Props ────────────────────────────────────────────────────────────── */
 
 interface WorkflowPromptOptimizerProps {
-  currentPrompt: string
-  onOptimized: (optimizedPrompt: string) => void
+  currentPrompt: string;
+  onOptimized: (optimizedPrompt: string) => void;
   /** Persisted quick settings object (mode, style, etc.) */
-  quickSettings?: Record<string, unknown>
-  onQuickSettingsChange?: (settings: Record<string, unknown>) => void
+  quickSettings?: Record<string, unknown>;
+  onQuickSettingsChange?: (settings: Record<string, unknown>) => void;
   /** Workflow-only: optimize automatically when Run is clicked */
-  optimizeOnRun?: boolean
-  onOptimizeOnRunChange?: (enabled: boolean) => void
+  optimizeOnRun?: boolean;
+  onOptimizeOnRunChange?: (enabled: boolean) => void;
   /** UI visibility controls */
-  showRunToggle?: boolean
-  showQuickOptimize?: boolean
-  menuLabel?: string
+  showRunToggle?: boolean;
+  showQuickOptimize?: boolean;
+  menuLabel?: string;
   /** Render params panel directly in node body */
-  inlinePanel?: boolean
+  inlinePanel?: boolean;
   /** Hide optimizer text field (use parent text input only) */
-  hideTextField?: boolean
+  hideTextField?: boolean;
   /** Show as inactive preset style when optimization is off */
-  inactive?: boolean
-  disabled?: boolean
+  inactive?: boolean;
+  disabled?: boolean;
 }
 
 /* ── Helpers ──────────────────────────────────────────────────────────── */
 
 /** Extract optimizer model schema fields */
 function useOptimizerFields() {
-  const { models, fetchModels } = useModelsStore()
+  const { models, fetchModels } = useModelsStore();
 
-  useEffect(() => { if (models.length === 0) fetchModels() }, [models.length, fetchModels])
+  useEffect(() => {
+    if (models.length === 0) fetchModels();
+  }, [models.length, fetchModels]);
 
   const optimizerModel = useMemo(
-    () => models.find(m => m.name === OPTIMIZER_MODEL),
-    [models]
-  )
+    () => models.find((m) => m.name === OPTIMIZER_MODEL),
+    [models],
+  );
 
   const allFields = useMemo<FormFieldConfig[]>(() => {
-    if (!optimizerModel) return []
+    if (!optimizerModel) return [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const apiSchemas = (optimizerModel.api_schema as any)?.api_schemas as Array<{
-      type: string
-      request_schema?: {
-        properties?: Record<string, unknown>
-        required?: string[]
-        'x-order-properties'?: string[]
-      }
-    }> | undefined
-    const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
-    if (!requestSchema?.properties) return []
+    const apiSchemas = (optimizerModel.api_schema as any)?.api_schemas as
+      | Array<{
+          type: string;
+          request_schema?: {
+            properties?: Record<string, unknown>;
+            required?: string[];
+            "x-order-properties"?: string[];
+          };
+        }>
+      | undefined;
+    const requestSchema = apiSchemas?.find(
+      (s) => s.type === "model_run",
+    )?.request_schema;
+    if (!requestSchema?.properties) return [];
     return schemaToFormFields(
       requestSchema.properties as Record<string, SchemaProperty>,
       requestSchema.required || [],
-      requestSchema['x-order-properties']
-    )
-  }, [optimizerModel])
+      requestSchema["x-order-properties"],
+    );
+  }, [optimizerModel]);
 
   // Quick fields: everything except text/image (those are handled separately)
   const quickFields = useMemo(
-    () => allFields.filter(f => f.name !== 'text' && f.name !== 'image'),
-    [allFields]
-  )
+    () => allFields.filter((f) => f.name !== "text" && f.name !== "image"),
+    [allFields],
+  );
 
-  const textField = useMemo(() => allFields.find(f => f.name === 'text'), [allFields])
+  const textField = useMemo(
+    () => allFields.find((f) => f.name === "text"),
+    [allFields],
+  );
 
-  const defaults = useMemo(() => getDefaultValues(allFields), [allFields])
+  const defaults = useMemo(() => getDefaultValues(allFields), [allFields]);
 
-  return { optimizerModel, allFields, quickFields, textField, defaults }
+  return { optimizerModel, allFields, quickFields, textField, defaults };
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -109,99 +128,129 @@ export function WorkflowPromptOptimizer({
   inlinePanel = false,
   hideTextField = false,
   inactive = false,
-  disabled
+  disabled,
 }: WorkflowPromptOptimizerProps) {
-  const { t } = useTranslation()
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [dropdownOpen, setDropdownOpen] = useState(false)
-  const [imageDialogOpen, setImageDialogOpen] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const { t } = useTranslation();
+  const [isOptimizing, setIsOptimizing] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [imageDialogOpen, setImageDialogOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  const { optimizerModel, quickFields, textField, defaults } = useOptimizerFields()
+  const { optimizerModel, quickFields, textField, defaults } =
+    useOptimizerFields();
 
   // Build the resolved quick settings (saved values merged with defaults)
   // Includes 'text' field — all settings persisted via quickSettings
   const resolvedSettings = useMemo(() => {
-    const merged: Record<string, unknown> = {}
+    const merged: Record<string, unknown> = {};
     for (const f of quickFields) {
-      merged[f.name] = quickSettings[f.name] ?? defaults[f.name]
+      merged[f.name] = quickSettings[f.name] ?? defaults[f.name];
     }
     // text field: persisted separately, defaults to empty (NOT currentPrompt)
-    merged.text = quickSettings.text ?? ''
-    return merged
-  }, [quickFields, quickSettings, defaults])
+    merged.text = quickSettings.text ?? "";
+    return merged;
+  }, [quickFields, quickSettings, defaults]);
 
   // The optimizer text: use saved text if set, otherwise fall back to currentPrompt
-  const optimizerText = String(resolvedSettings.text || '')
+  const optimizerText = String(resolvedSettings.text || "");
 
   // Persist a single quick setting
-  const setSetting = useCallback((key: string, value: unknown) => {
-    onQuickSettingsChange?.({ ...quickSettings, [key]: value })
-  }, [quickSettings, onQuickSettingsChange])
+  const setSetting = useCallback(
+    (key: string, value: unknown) => {
+      onQuickSettingsChange?.({ ...quickSettings, [key]: value });
+    },
+    [quickSettings, onQuickSettingsChange],
+  );
 
   // Close dropdown on outside pointer/key events
   useEffect(() => {
-    if (!dropdownOpen) return
+    if (!dropdownOpen) return;
     const pointerHandler = (e: PointerEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setDropdownOpen(false)
-    }
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      )
+        setDropdownOpen(false);
+    };
     const keyHandler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setDropdownOpen(false)
-    }
+      if (e.key === "Escape") setDropdownOpen(false);
+    };
     // capture=true prevents inner stopPropagation from blocking close
-    window.addEventListener('pointerdown', pointerHandler, true)
-    window.addEventListener('keydown', keyHandler)
+    window.addEventListener("pointerdown", pointerHandler, true);
+    window.addEventListener("keydown", keyHandler);
     return () => {
-      window.removeEventListener('pointerdown', pointerHandler, true)
-      window.removeEventListener('keydown', keyHandler)
-    }
-  }, [dropdownOpen])
+      window.removeEventListener("pointerdown", pointerHandler, true);
+      window.removeEventListener("keydown", keyHandler);
+    };
+  }, [dropdownOpen]);
 
   // Auto-clear error
   useEffect(() => {
-    if (!error) return
-    const t = setTimeout(() => setError(null), 4000)
-    return () => clearTimeout(t)
-  }, [error])
+    if (!error) return;
+    const t = setTimeout(() => setError(null), 4000);
+    return () => clearTimeout(t);
+  }, [error]);
 
   // ── Quick Optimize (✨ click) ──
   // Uses saved optimizer text if set, otherwise falls back to currentPrompt
   const handleQuickOptimize = async (e: React.MouseEvent) => {
-    e.stopPropagation()
-    const textToSend = optimizerText || currentPrompt
-    if (!textToSend.trim() || isOptimizing || disabled) return
-    setIsOptimizing(true)
-    setError(null)
+    e.stopPropagation();
+    const textToSend = optimizerText || currentPrompt;
+    if (!textToSend.trim() || isOptimizing || disabled) return;
+    setIsOptimizing(true);
+    setError(null);
     try {
-      const result = await apiClient.optimizePrompt({ ...resolvedSettings, text: textToSend })
-      onOptimized(result)
+      const result = await apiClient.optimizePrompt({
+        ...resolvedSettings,
+        text: textToSend,
+      });
+      onOptimized(result);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('workflow.promptOptimizer.optimizationFailed', 'Optimization failed'))
+      setError(
+        err instanceof Error
+          ? err.message
+          : t(
+              "workflow.promptOptimizer.optimizationFailed",
+              "Optimization failed",
+            ),
+      );
     } finally {
-      setIsOptimizing(false)
+      setIsOptimizing(false);
     }
-  }
+  };
 
   // ── Optimize from dropdown button ──
   const handleDropdownOptimize = async () => {
-    const textToSend = optimizerText || currentPrompt
-    if (!textToSend.trim() || isOptimizing) return
-    setIsOptimizing(true)
-    setError(null)
+    const textToSend = optimizerText || currentPrompt;
+    if (!textToSend.trim() || isOptimizing) return;
+    setIsOptimizing(true);
+    setError(null);
     try {
-      const result = await apiClient.optimizePrompt({ ...resolvedSettings, text: textToSend })
-      onOptimized(result)
-      setDropdownOpen(false)
+      const result = await apiClient.optimizePrompt({
+        ...resolvedSettings,
+        text: textToSend,
+      });
+      onOptimized(result);
+      setDropdownOpen(false);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('workflow.promptOptimizer.optimizationFailed', 'Optimization failed'))
+      setError(
+        err instanceof Error
+          ? err.message
+          : t(
+              "workflow.promptOptimizer.optimizationFailed",
+              "Optimization failed",
+            ),
+      );
     } finally {
-      setIsOptimizing(false)
+      setIsOptimizing(false);
     }
-  }
+  };
 
   // Mode summary for tooltip
-  const modeSummary = resolvedSettings.mode ? String(resolvedSettings.mode) : 'image'
+  const modeSummary = resolvedSettings.mode
+    ? String(resolvedSettings.mode)
+    : "image";
 
   // Inline mode: render settings directly (no dropdown trigger)
   if (inlinePanel) {
@@ -209,35 +258,48 @@ export function WorkflowPromptOptimizer({
       <div
         className={`mt-1 rounded-lg border p-2 transition-opacity ${
           inactive
-            ? 'border-blue-500/20 bg-blue-500/5 opacity-70'
-            : 'border-blue-500/20 bg-blue-500/5'
+            ? "border-blue-500/20 bg-blue-500/5 opacity-70"
+            : "border-blue-500/20 bg-blue-500/5"
         }`}
-        onClick={e => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-2 flex items-center justify-between">
           <span className="text-[10px] font-semibold uppercase tracking-wide text-[hsl(var(--muted-foreground))]">
             {inactive
-              ? t('workflow.promptOptimizer.optimizeParamsPresetOnly', 'Optimize Params (preset only)')
-              : t('workflow.promptOptimizer.optimizeParams', 'Optimize Params')}
+              ? t(
+                  "workflow.promptOptimizer.optimizeParamsPresetOnly",
+                  "Optimize Params (preset only)",
+                )
+              : t("workflow.promptOptimizer.optimizeParams", "Optimize Params")}
           </span>
           {optimizerModel?.base_price !== undefined && (
-            <span className="text-[10px] text-blue-400/80">${optimizerModel.base_price.toFixed(3)}/{t('workflow.promptOptimizer.perRun', 'run')}</span>
+            <span className="text-[10px] text-blue-400/80">
+              ${optimizerModel.base_price.toFixed(3)}/
+              {t("workflow.promptOptimizer.perRun", "run")}
+            </span>
           )}
         </div>
 
         <div className="space-y-2">
           {quickFields.length > 0 ? (
-            quickFields.map(field => (
-              <QuickField key={field.name} field={field}
+            quickFields.map((field) => (
+              <QuickField
+                key={field.name}
+                field={field}
                 value={resolvedSettings[field.name]}
-                onChange={v => setSetting(field.name, v)} />
+                onChange={(v) => setSetting(field.name, v)}
+              />
             ))
           ) : (
             <div className="flex items-center justify-between">
-              <span className="text-[11px] text-[hsl(var(--muted-foreground))]">{t('workflow.promptOptimizer.mode', 'Mode')}</span>
-              <PillToggle options={['image', 'video']}
-                value={String(quickSettings.mode ?? 'image')}
-                onChange={v => setSetting('mode', v)} />
+              <span className="text-[11px] text-[hsl(var(--muted-foreground))]">
+                {t("workflow.promptOptimizer.mode", "Mode")}
+              </span>
+              <PillToggle
+                options={["image", "video"]}
+                value={String(quickSettings.mode ?? "image")}
+                onChange={(v) => setSetting("mode", v)}
+              />
             </div>
           )}
         </div>
@@ -245,47 +307,73 @@ export function WorkflowPromptOptimizer({
         {!hideTextField && (
           <div className="mt-2">
             <div className="mb-1 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
-              {textField?.label || t('workflow.promptOptimizer.text', 'Text')}
+              {textField?.label || t("workflow.promptOptimizer.text", "Text")}
             </div>
-            <textarea value={optimizerText}
-              onChange={e => setSetting('text', e.target.value)}
-              placeholder={textField?.placeholder || textField?.description || t('workflow.promptOptimizer.textPlaceholder', 'Text to expand or use as context...')}
+            <textarea
+              value={optimizerText}
+              onChange={(e) => setSetting("text", e.target.value)}
+              placeholder={
+                textField?.placeholder ||
+                textField?.description ||
+                t(
+                  "workflow.promptOptimizer.textPlaceholder",
+                  "Text to expand or use as context...",
+                )
+              }
               rows={2}
-              className="nodrag w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 placeholder:text-[hsl(var(--muted-foreground))] resize-y min-h-[40px] max-h-[120px]" />
+              className="nodrag w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 placeholder:text-[hsl(var(--muted-foreground))] resize-y min-h-[40px] max-h-[120px]"
+            />
           </div>
         )}
       </div>
-    )
+    );
   }
 
   return (
-    <div className="relative inline-flex" ref={containerRef} onClick={e => e.stopPropagation()}>
+    <div
+      className="relative inline-flex"
+      ref={containerRef}
+      onClick={(e) => e.stopPropagation()}
+    >
       <div className="flex items-center gap-1.5">
         {/* ── Split Button (Optimize + Params) ───────────────────────────────────── */}
-        <div className={`flex items-center rounded-md border overflow-hidden transition-colors
-          ${isOptimizing ? 'border-blue-500/50 bg-blue-500/10' : 'border-[hsl(var(--border))] hover:border-blue-500/30'}`}>
-
+        <div
+          className={`flex items-center rounded-md border overflow-hidden transition-colors
+          ${isOptimizing ? "border-blue-500/50 bg-blue-500/10" : "border-[hsl(var(--border))] hover:border-blue-500/30"}`}
+        >
           {showQuickOptimize ? (
             <>
               {/* Left: Quick Optimize */}
-              <button onClick={handleQuickOptimize}
+              <button
+                onClick={handleQuickOptimize}
                 disabled={disabled || isOptimizing || !currentPrompt.trim()}
-                title={t('workflow.promptOptimizer.quickOptimizeTitle', { mode: modeSummary, defaultValue: `Quick Optimize (${modeSummary})` })}
-                className="flex items-center justify-center gap-1 h-5 px-1.5 text-blue-400 hover:text-blue-300 hover:bg-blue-500/15 transition-colors disabled:opacity-30 disabled:cursor-not-allowed">
+                title={t("workflow.promptOptimizer.quickOptimizeTitle", {
+                  mode: modeSummary,
+                  defaultValue: `Quick Optimize (${modeSummary})`,
+                })}
+                className="flex items-center justify-center gap-1 h-5 px-1.5 text-blue-400 hover:text-blue-300 hover:bg-blue-500/15 transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              >
                 {isOptimizing ? <SpinnerIcon /> : <SparklesIcon />}
-                <span className="text-[10px] font-medium">{t('workflow.promptOptimizer.quickOptimizeLabel', 'Optimize')}</span>
+                <span className="text-[10px] font-medium">
+                  {t("workflow.promptOptimizer.quickOptimizeLabel", "Optimize")}
+                </span>
               </button>
               <div className="w-px h-3.5 bg-[hsl(var(--border))]" />
             </>
           ) : (
             <>
               <button
-                onClick={e => { e.stopPropagation(); setDropdownOpen(!dropdownOpen) }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setDropdownOpen(!dropdownOpen);
+                }}
                 className={`h-5 px-2 text-[10px] font-semibold transition-colors ${
-                  dropdownOpen ? 'text-blue-400 bg-blue-500/15' : 'text-[hsl(var(--muted-foreground))] hover:text-blue-400 hover:bg-blue-500/15'
+                  dropdownOpen
+                    ? "text-blue-400 bg-blue-500/15"
+                    : "text-[hsl(var(--muted-foreground))] hover:text-blue-400 hover:bg-blue-500/15"
                 }`}
               >
-                {menuLabel || t('workflow.promptOptimizer.params', 'Params')}
+                {menuLabel || t("workflow.promptOptimizer.params", "Params")}
               </button>
               <div className="w-px h-3.5 bg-[hsl(var(--border))]" />
             </>
@@ -293,9 +381,13 @@ export function WorkflowPromptOptimizer({
 
           {/* Right: Dropdown Toggle */}
           <button
-            onClick={e => { e.stopPropagation(); setDropdownOpen(!dropdownOpen) }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setDropdownOpen(!dropdownOpen);
+            }}
             className={`flex items-center justify-center w-4 h-5 transition-colors
-              ${dropdownOpen ? 'text-blue-400 bg-blue-500/15' : 'text-[hsl(var(--muted-foreground))] hover:text-blue-400 hover:bg-blue-500/15'}`}>
+              ${dropdownOpen ? "text-blue-400 bg-blue-500/15" : "text-[hsl(var(--muted-foreground))] hover:text-blue-400 hover:bg-blue-500/15"}`}
+          >
             <ChevronIcon />
           </button>
         </div>
@@ -305,36 +397,46 @@ export function WorkflowPromptOptimizer({
           <button
             type="button"
             onClick={() => onOptimizeOnRunChange?.(!optimizeOnRun)}
-            title={t('workflow.promptOptimizer.autoOnRunTitle', 'Optimize automatically when clicking Run')}
+            title={t(
+              "workflow.promptOptimizer.autoOnRunTitle",
+              "Optimize automatically when clicking Run",
+            )}
             className={`h-5 rounded-md border px-2.5 text-[10px] font-semibold transition-colors ${
               optimizeOnRun
-                ? 'border-blue-500/50 bg-blue-500/20 text-blue-300'
-                : 'border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'
+                ? "border-blue-500/50 bg-blue-500/20 text-blue-300"
+                : "border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
             }`}
           >
-            {t('workflow.promptOptimizer.autoOnRun', 'Optimize On Run')}
+            {t("workflow.promptOptimizer.autoOnRun", "Optimize On Run")}
           </button>
         )}
       </div>
 
       {/* ── Error Toast ────────────────────────────────────── */}
       {error && (
-        <div className="absolute top-7 left-0 z-[101] w-48 px-2.5 py-1.5 rounded-md border border-red-500/30 bg-[hsl(var(--popover))] text-[10px] text-red-400 shadow-lg cursor-pointer"
-          onClick={() => setError(null)}>
+        <div
+          className="absolute top-7 left-0 z-[101] w-48 px-2.5 py-1.5 rounded-md border border-red-500/30 bg-[hsl(var(--popover))] text-[10px] text-red-400 shadow-lg cursor-pointer"
+          onClick={() => setError(null)}
+        >
           {error}
         </div>
       )}
 
       {/* ── Dropdown Panel ─────────────────────────────────── */}
       {dropdownOpen && (
-        <div className="absolute top-7 left-0 z-[100] w-56 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-xl"
-          onClick={e => e.stopPropagation()}>
-
+        <div
+          className="absolute top-7 left-0 z-[100] w-56 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-xl"
+          onClick={(e) => e.stopPropagation()}
+        >
           {/* Prompt Preview (readonly) */}
           <div className="px-3 pt-2.5 pb-1">
-            <div className="text-[10px] text-[hsl(var(--muted-foreground))] font-medium mb-1">{t('workflow.promptOptimizer.prompt', 'Prompt')}</div>
+            <div className="text-[10px] text-[hsl(var(--muted-foreground))] font-medium mb-1">
+              {t("workflow.promptOptimizer.prompt", "Prompt")}
+            </div>
             <div className="text-[11px] leading-snug text-[hsl(var(--foreground))] line-clamp-2 break-words opacity-70 italic">
-              {currentPrompt.trim() ? `"${currentPrompt.slice(0, 80)}${currentPrompt.length > 80 ? '...' : ''}"` : t('workflow.promptOptimizer.emptyPrompt', '(empty)')}
+              {currentPrompt.trim()
+                ? `"${currentPrompt.slice(0, 80)}${currentPrompt.length > 80 ? "..." : ""}"`
+                : t("workflow.promptOptimizer.emptyPrompt", "(empty)")}
             </div>
           </div>
 
@@ -343,17 +445,24 @@ export function WorkflowPromptOptimizer({
           {/* Quick Settings Fields (style, mode, etc.) */}
           <div className="px-3 pb-1 space-y-2">
             {quickFields.length > 0 ? (
-              quickFields.map(field => (
-                <QuickField key={field.name} field={field}
+              quickFields.map((field) => (
+                <QuickField
+                  key={field.name}
+                  field={field}
                   value={resolvedSettings[field.name]}
-                  onChange={v => setSetting(field.name, v)} />
+                  onChange={(v) => setSetting(field.name, v)}
+                />
               ))
             ) : (
               <div className="flex items-center justify-between">
-                <span className="text-[11px] text-[hsl(var(--muted-foreground))]">{t('workflow.promptOptimizer.mode', 'Mode')}</span>
-                <PillToggle options={['image', 'video']}
-                  value={String(quickSettings.mode ?? 'image')}
-                  onChange={v => setSetting('mode', v)} />
+                <span className="text-[11px] text-[hsl(var(--muted-foreground))]">
+                  {t("workflow.promptOptimizer.mode", "Mode")}
+                </span>
+                <PillToggle
+                  options={["image", "video"]}
+                  value={String(quickSettings.mode ?? "image")}
+                  onChange={(v) => setSetting("mode", v)}
+                />
               </div>
             )}
           </div>
@@ -361,26 +470,53 @@ export function WorkflowPromptOptimizer({
           {/* Optimizer Text param (persisted, defaults to empty) */}
           <div className="px-3 pb-2">
             <div className="text-[10px] text-[hsl(var(--muted-foreground))] font-medium mb-1">
-              {textField?.label || t('workflow.promptOptimizer.text', 'Text')}
+              {textField?.label || t("workflow.promptOptimizer.text", "Text")}
             </div>
-            <textarea value={optimizerText}
-              onChange={e => setSetting('text', e.target.value)}
-              placeholder={textField?.placeholder || textField?.description || t('workflow.promptOptimizer.textPlaceholder', 'Text to expand or use as context...')}
+            <textarea
+              value={optimizerText}
+              onChange={(e) => setSetting("text", e.target.value)}
+              placeholder={
+                textField?.placeholder ||
+                textField?.description ||
+                t(
+                  "workflow.promptOptimizer.textPlaceholder",
+                  "Text to expand or use as context...",
+                )
+              }
               rows={2}
-              className="nodrag w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 placeholder:text-[hsl(var(--muted-foreground))] resize-y min-h-[40px] max-h-[120px]" />
+              className="nodrag w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 placeholder:text-[hsl(var(--muted-foreground))] resize-y min-h-[40px] max-h-[120px]"
+            />
             {textField?.description && (
-              <p className="mt-0.5 text-[9px] text-[hsl(var(--muted-foreground))] leading-tight">{textField.description}</p>
+              <p className="mt-0.5 text-[9px] text-[hsl(var(--muted-foreground))] leading-tight">
+                {textField.description}
+              </p>
             )}
           </div>
 
           {/* Optimize Button + Price */}
           <div className="px-3 pb-2">
-            <button onClick={handleDropdownOptimize}
-              disabled={isOptimizing || (!optimizerText.trim() && !currentPrompt.trim())}
-              className="w-full flex items-center justify-center gap-1.5 py-1.5 rounded-md bg-blue-500 text-white text-[11px] font-medium hover:bg-blue-600 disabled:opacity-40 transition-colors">
-              {isOptimizing ? <><SpinnerIcon /> {t('workflow.promptOptimizer.optimizing', 'Optimizing...')}</> : <><SparklesIcon /> {t('workflow.promptOptimizer.optimize', 'Optimize')}</>}
+            <button
+              onClick={handleDropdownOptimize}
+              disabled={
+                isOptimizing || (!optimizerText.trim() && !currentPrompt.trim())
+              }
+              className="w-full flex items-center justify-center gap-1.5 py-1.5 rounded-md bg-blue-500 text-white text-[11px] font-medium hover:bg-blue-600 disabled:opacity-40 transition-colors"
+            >
+              {isOptimizing ? (
+                <>
+                  <SpinnerIcon />{" "}
+                  {t("workflow.promptOptimizer.optimizing", "Optimizing...")}
+                </>
+              ) : (
+                <>
+                  <SparklesIcon />{" "}
+                  {t("workflow.promptOptimizer.optimize", "Optimize")}
+                </>
+              )}
               {!isOptimizing && optimizerModel?.base_price !== undefined && (
-                <span className="opacity-70 text-[10px] font-normal">(${optimizerModel.base_price.toFixed(3)})</span>
+                <span className="opacity-70 text-[10px] font-normal">
+                  (${optimizerModel.base_price.toFixed(3)})
+                </span>
               )}
             </button>
           </div>
@@ -389,10 +525,19 @@ export function WorkflowPromptOptimizer({
 
           {/* Image-to-Prompt entry */}
           <button
-            onClick={() => { setDropdownOpen(false); setImageDialogOpen(true) }}
-            className="w-full flex items-center gap-2 px-3 py-2 text-[11px] hover:bg-[hsl(var(--accent))] transition-colors rounded-b-lg text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">
+            onClick={() => {
+              setDropdownOpen(false);
+              setImageDialogOpen(true);
+            }}
+            className="w-full flex items-center gap-2 px-3 py-2 text-[11px] hover:bg-[hsl(var(--accent))] transition-colors rounded-b-lg text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
+          >
             <ImageIcon />
-            <span>{t('workflow.promptOptimizer.optimizeWithImage', 'Optimize with Image...')}</span>
+            <span>
+              {t(
+                "workflow.promptOptimizer.optimizeWithImage",
+                "Optimize with Image...",
+              )}
+            </span>
           </button>
         </div>
       )}
@@ -401,175 +546,257 @@ export function WorkflowPromptOptimizer({
       {imageDialogOpen && (
         <ImageOptimizeDialog
           currentPrompt={currentPrompt}
-          defaultMode={String(resolvedSettings.mode ?? 'image')}
-          onOptimized={result => { onOptimized(result); setImageDialogOpen(false) }}
+          defaultMode={String(resolvedSettings.mode ?? "image")}
+          onOptimized={(result) => {
+            onOptimized(result);
+            setImageDialogOpen(false);
+          }}
           onClose={() => setImageDialogOpen(false)}
         />
       )}
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    QuickField — compact inline field for dropdown
    ══════════════════════════════════════════════════════════════════════ */
 
-function QuickField({ field, value, onChange }: {
-  field: FormFieldConfig; value: unknown; onChange: (v: unknown) => void
+function QuickField({
+  field,
+  value,
+  onChange,
+}: {
+  field: FormFieldConfig;
+  value: unknown;
+  onChange: (v: unknown) => void;
 }) {
-  const cur = value ?? field.default
-  const hasOptions = field.options && field.options.length > 0
+  const cur = value ?? field.default;
+  const hasOptions = field.options && field.options.length > 0;
 
   // Enum with few options → pill toggle
   if (hasOptions && field.options!.length <= 4) {
     return (
       <div className="flex items-center justify-between gap-2">
-        <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">{field.label || field.name}</span>
+        <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">
+          {field.label || field.name}
+        </span>
         <PillToggle
           options={field.options!.map(String)}
-          value={String(cur ?? '')}
-          onChange={onChange} />
+          value={String(cur ?? "")}
+          onChange={onChange}
+        />
       </div>
-    )
+    );
   }
 
   // Enum with many options → dropdown select
   if (hasOptions) {
     return (
       <div className="flex items-center justify-between gap-2">
-        <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">{field.label || field.name}</span>
-        <select value={String(cur ?? '')} onChange={e => onChange(e.target.value)}
-          className="rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1.5 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-blue-500/50 max-w-[120px]">
-          {field.options!.map(o => <option key={String(o)} value={String(o)}>{String(o)}</option>)}
+        <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">
+          {field.label || field.name}
+        </span>
+        <select
+          value={String(cur ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          className="rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1.5 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-blue-500/50 max-w-[120px]"
+        >
+          {field.options!.map((o) => (
+            <option key={String(o)} value={String(o)}>
+              {String(o)}
+            </option>
+          ))}
         </select>
       </div>
-    )
+    );
   }
 
   // Boolean → toggle
-  if (field.type === 'boolean') {
+  if (field.type === "boolean") {
     return (
       <div className="flex items-center justify-between gap-2">
-        <span className="text-[11px] text-[hsl(var(--muted-foreground))]">{field.label || field.name}</span>
-        <button type="button" onClick={() => onChange(!cur)}
-          className={`relative inline-flex h-4 w-7 flex-shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer ${cur ? 'bg-blue-500' : 'bg-[hsl(var(--muted))]'}`}>
-          <span className={`pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow transform transition-transform ${cur ? 'translate-x-3' : 'translate-x-0'}`} />
+        <span className="text-[11px] text-[hsl(var(--muted-foreground))]">
+          {field.label || field.name}
+        </span>
+        <button
+          type="button"
+          onClick={() => onChange(!cur)}
+          className={`relative inline-flex h-4 w-7 flex-shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer ${cur ? "bg-blue-500" : "bg-[hsl(var(--muted))]"}`}
+        >
+          <span
+            className={`pointer-events-none inline-block h-3 w-3 rounded-full bg-white shadow transform transition-transform ${cur ? "translate-x-3" : "translate-x-0"}`}
+          />
         </button>
       </div>
-    )
+    );
   }
 
   // Number → compact input
-  if (field.type === 'number' || field.type === 'slider') {
+  if (field.type === "number" || field.type === "slider") {
     return (
       <div className="flex items-center justify-between gap-2">
-        <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">{field.label || field.name}</span>
-        <input type="number" value={cur !== undefined && cur !== null ? Number(cur) : ''}
-          min={field.min} max={field.max} step={field.step ?? 1}
-          onChange={e => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
-          className="w-16 rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1.5 py-0.5 text-[10px] text-right focus:outline-none focus:ring-1 focus:ring-blue-500/50 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" />
+        <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">
+          {field.label || field.name}
+        </span>
+        <input
+          type="number"
+          value={cur !== undefined && cur !== null ? Number(cur) : ""}
+          min={field.min}
+          max={field.max}
+          step={field.step ?? 1}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? undefined : Number(e.target.value))
+          }
+          className="w-16 rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1.5 py-0.5 text-[10px] text-right focus:outline-none focus:ring-1 focus:ring-blue-500/50 [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+        />
       </div>
-    )
+    );
   }
 
   // Text → compact input
   return (
     <div className="flex items-center justify-between gap-2">
-      <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">{field.label || field.name}</span>
-      <input type="text" value={String(cur ?? '')} onChange={e => onChange(e.target.value)}
-        placeholder={field.placeholder || ''}
-        className="flex-1 min-w-0 rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1.5 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-blue-500/50 max-w-[120px]" />
+      <span className="text-[11px] text-[hsl(var(--muted-foreground))] flex-shrink-0">
+        {field.label || field.name}
+      </span>
+      <input
+        type="text"
+        value={String(cur ?? "")}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={field.placeholder || ""}
+        className="flex-1 min-w-0 rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1.5 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-blue-500/50 max-w-[120px]"
+      />
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    PillToggle — small segmented toggle (Image/Video, etc.)
    ══════════════════════════════════════════════════════════════════════ */
 
-function PillToggle({ options, value, onChange }: {
-  options: string[]; value: string; onChange: (v: unknown) => void
+function PillToggle({
+  options,
+  value,
+  onChange,
+}: {
+  options: string[];
+  value: string;
+  onChange: (v: unknown) => void;
 }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   return (
     <div className="flex rounded-md border border-[hsl(var(--border))] overflow-hidden">
-      {options.map(o => (
-        <button key={o} onClick={() => onChange(o)}
+      {options.map((o) => (
+        <button
+          key={o}
+          onClick={() => onChange(o)}
           className={`px-2 py-0.5 text-[10px] font-medium transition-colors capitalize
-            ${value === o ? 'bg-blue-500 text-white' : 'hover:bg-[hsl(var(--accent))]'}`}>
+            ${value === o ? "bg-blue-500 text-white" : "hover:bg-[hsl(var(--accent))]"}`}
+        >
           {t(`workflow.promptOptimizer.modeOptions.${o}`, o)}
         </button>
       ))}
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    Image Optimize Dialog — full model schema form (reuses all params)
    ══════════════════════════════════════════════════════════════════════ */
 
-function ImageOptimizeDialog({ currentPrompt, defaultMode, onOptimized, onClose }: {
-  currentPrompt: string
-  defaultMode: string
-  onOptimized: (result: string) => void
-  onClose: () => void
+function ImageOptimizeDialog({
+  currentPrompt,
+  defaultMode,
+  onOptimized,
+  onClose,
+}: {
+  currentPrompt: string;
+  defaultMode: string;
+  onOptimized: (result: string) => void;
+  onClose: () => void;
 }) {
-  const { t } = useTranslation()
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [values, setValues] = useState<Record<string, unknown>>({})
-  const { optimizerModel, allFields, defaults } = useOptimizerFields()
+  const { t } = useTranslation();
+  const [isOptimizing, setIsOptimizing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [values, setValues] = useState<Record<string, unknown>>({});
+  const { optimizerModel, allFields, defaults } = useOptimizerFields();
 
   // Pre-fill values when fields load
   useEffect(() => {
     if (allFields.length > 0) {
-      setValues({ ...defaults, text: '', mode: defaultMode })
+      setValues({ ...defaults, text: "", mode: defaultMode });
     }
-  }, [allFields, defaults, currentPrompt, defaultMode])
+  }, [allFields, defaults, currentPrompt, defaultMode]);
 
   const handleChange = useCallback((key: string, value: unknown) => {
-    setValues(prev => ({ ...prev, [key]: value }))
-  }, [])
+    setValues((prev) => ({ ...prev, [key]: value }));
+  }, []);
 
   const handleOptimize = async () => {
     if (!values.text && !values.image) {
-      setError(t('workflow.promptOptimizer.imageDialog.enterTextOrImage', 'Please enter text or provide an image'))
-      return
+      setError(
+        t(
+          "workflow.promptOptimizer.imageDialog.enterTextOrImage",
+          "Please enter text or provide an image",
+        ),
+      );
+      return;
     }
-    setIsOptimizing(true)
-    setError(null)
+    setIsOptimizing(true);
+    setError(null);
     try {
-      const params: Record<string, unknown> = {}
+      const params: Record<string, unknown> = {};
       for (const [k, v] of Object.entries(values)) {
-        if (v !== undefined && v !== null && v !== '') params[k] = v
+        if (v !== undefined && v !== null && v !== "") params[k] = v;
       }
-      const result = await apiClient.optimizePrompt(params)
-      onOptimized(result)
+      const result = await apiClient.optimizePrompt(params);
+      onOptimized(result);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('workflow.promptOptimizer.imageDialog.optimizeFailed', 'Failed to optimize'))
+      setError(
+        err instanceof Error
+          ? err.message
+          : t(
+              "workflow.promptOptimizer.imageDialog.optimizeFailed",
+              "Failed to optimize",
+            ),
+      );
     } finally {
-      setIsOptimizing(false)
+      setIsOptimizing(false);
     }
-  }
+  };
 
   return (
-    <div className="fixed inset-0 z-[200] flex items-center justify-center" onClick={onClose}>
+    <div
+      className="fixed inset-0 z-[200] flex items-center justify-center"
+      onClick={onClose}
+    >
       <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
 
-      <div className="relative w-full max-w-md mx-4 rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-2xl"
-        onClick={e => e.stopPropagation()}>
-
+      <div
+        className="relative w-full max-w-md mx-4 rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="flex items-center gap-2 px-5 py-4 border-b border-[hsl(var(--border))]">
           <ImageIcon size={18} className="text-green-400" />
-          <span className="font-semibold text-sm">{t('workflow.promptOptimizer.imageDialog.title', 'Optimize with Image')}</span>
+          <span className="font-semibold text-sm">
+            {t(
+              "workflow.promptOptimizer.imageDialog.title",
+              "Optimize with Image",
+            )}
+          </span>
           {optimizerModel?.base_price !== undefined && (
             <span className="text-[11px] text-[hsl(var(--muted-foreground))]">
-              (${optimizerModel.base_price.toFixed(3)}/{t('workflow.promptOptimizer.perRun', 'run')})
+              (${optimizerModel.base_price.toFixed(3)}/
+              {t("workflow.promptOptimizer.perRun", "run")})
             </span>
           )}
           <div className="flex-1" />
-          <button onClick={onClose} className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
+          <button
+            onClick={onClose}
+            className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
+          >
             <CloseIcon />
           </button>
         </div>
@@ -578,21 +805,29 @@ function ImageOptimizeDialog({ currentPrompt, defaultMode, onOptimized, onClose
         {!optimizerModel ? (
           <div className="px-5 py-8 text-center text-[hsl(var(--muted-foreground))]">
             <SpinnerIcon size={20} className="mx-auto mb-2" />
-            <p className="text-xs">{t('workflow.promptOptimizer.imageDialog.loadingOptimizer', 'Loading optimizer...')}</p>
+            <p className="text-xs">
+              {t(
+                "workflow.promptOptimizer.imageDialog.loadingOptimizer",
+                "Loading optimizer...",
+              )}
+            </p>
           </div>
         ) : allFields.length === 0 ? (
           <div className="px-5 py-8 text-center text-[hsl(var(--muted-foreground))] text-xs">
-            {t('workflow.promptOptimizer.imageDialog.loadConfigFailed', 'Unable to load optimizer configuration')}
+            {t(
+              "workflow.promptOptimizer.imageDialog.loadConfigFailed",
+              "Unable to load optimizer configuration",
+            )}
           </div>
         ) : (
           <ScrollArea className="max-h-[60vh]">
             <div className="space-y-4 px-5 py-4">
-              {allFields.map(field => (
+              {allFields.map((field) => (
                 <FormField
                   key={field.name}
                   field={field}
                   value={values[field.name]}
-                  onChange={value => handleChange(field.name, value)}
+                  onChange={(value) => handleChange(field.name, value)}
                   disabled={isOptimizing}
                 />
               ))}
@@ -605,45 +840,94 @@ function ImageOptimizeDialog({ currentPrompt, defaultMode, onOptimized, onClose
 
         {/* Footer */}
         <div className="flex justify-end gap-2 px-5 py-3 border-t border-[hsl(var(--border))]">
-          <button onClick={onClose} disabled={isOptimizing}
-            className="px-3 py-1.5 rounded-md border border-[hsl(var(--border))] text-xs hover:bg-[hsl(var(--accent))] transition-colors disabled:opacity-50">
-            {t('workflow.cancel', 'Cancel')}
+          <button
+            onClick={onClose}
+            disabled={isOptimizing}
+            className="px-3 py-1.5 rounded-md border border-[hsl(var(--border))] text-xs hover:bg-[hsl(var(--accent))] transition-colors disabled:opacity-50"
+          >
+            {t("workflow.cancel", "Cancel")}
           </button>
-          <button onClick={handleOptimize} disabled={isOptimizing}
-            className="px-4 py-1.5 rounded-md bg-green-600 text-white text-xs font-medium hover:bg-green-700 disabled:opacity-50 transition-colors flex items-center gap-1.5">
+          <button
+            onClick={handleOptimize}
+            disabled={isOptimizing}
+            className="px-4 py-1.5 rounded-md bg-green-600 text-white text-xs font-medium hover:bg-green-700 disabled:opacity-50 transition-colors flex items-center gap-1.5"
+          >
             {isOptimizing ? (
-              <><SpinnerIcon size={12} /> {t('workflow.promptOptimizer.optimizing', 'Optimizing...')}</>
+              <>
+                <SpinnerIcon size={12} />{" "}
+                {t("workflow.promptOptimizer.optimizing", "Optimizing...")}
+              </>
             ) : (
-              <><ImageIcon size={12} /> {t('workflow.promptOptimizer.optimize', 'Optimize')}</>
+              <>
+                <ImageIcon size={12} />{" "}
+                {t("workflow.promptOptimizer.optimize", "Optimize")}
+              </>
             )}
           </button>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    Inline SVG icons — no external dependency
    ══════════════════════════════════════════════════════════════════════ */
 
-function SparklesIcon({ size = 12, className = '' }: { size?: number; className?: string }) {
+function SparklesIcon({
+  size = 12,
+  className = "",
+}: {
+  size?: number;
+  className?: string;
+}) {
   return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
-      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/>
-      <path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+      <path d="M5 3v4" />
+      <path d="M19 17v4" />
+      <path d="M3 5h4" />
+      <path d="M17 19h4" />
     </svg>
-  )
+  );
 }
 
-function SpinnerIcon({ size = 12, className = '' }: { size?: number; className?: string }) {
+function SpinnerIcon({
+  size = 12,
+  className = "",
+}: {
+  size?: number;
+  className?: string;
+}) {
   return (
-    <svg className={`animate-spin ${className}`} width={size} height={size} viewBox="0 0 24 24"
-      fill="none" stroke="currentColor" strokeWidth="2.5">
-      <circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" />
+    <svg
+      className={`animate-spin ${className}`}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+    >
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        strokeDasharray="60"
+        strokeDashoffset="20"
+      />
     </svg>
-  )
+  );
 }
 
 function ChevronIcon() {
@@ -651,24 +935,49 @@ function ChevronIcon() {
     <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
       <polygon points="6,9 18,9 12,15" />
     </svg>
-  )
+  );
 }
 
-function ImageIcon({ size = 12, className = '' }: { size?: number; className?: string }) {
+function ImageIcon({
+  size = 12,
+  className = "",
+}: {
+  size?: number;
+  className?: string;
+}) {
   return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
-      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
-      <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
-      <circle cx="9" cy="9" r="2"/>
-      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+      <circle cx="9" cy="9" r="2" />
+      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
     </svg>
-  )
+  );
 }
 
 function CloseIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
     </svg>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/composition-input.tsx b/src/workflow/components/canvas/composition-input.tsx
index 19fc9292..4a5edde6 100644
--- a/src/workflow/components/canvas/composition-input.tsx
+++ b/src/workflow/components/canvas/composition-input.tsx
@@ -9,68 +9,88 @@
  * These wrappers keep a *local* value during composition and only forward
  * the final result to the parent `onChange` when composition ends.
  */
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect } from "react";
 
 export function CompInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
-  const { value: externalValue, onChange, onCompositionStart, onCompositionEnd, ...rest } = props
-  const composingRef = useRef(false)
-  const [localValue, setLocalValue] = useState(String(externalValue ?? ''))
+  const {
+    value: externalValue,
+    onChange,
+    onCompositionStart,
+    onCompositionEnd,
+    ...rest
+  } = props;
+  const composingRef = useRef(false);
+  const [localValue, setLocalValue] = useState(String(externalValue ?? ""));
 
   useEffect(() => {
-    if (!composingRef.current) setLocalValue(String(externalValue ?? ''))
-  }, [externalValue])
+    if (!composingRef.current) setLocalValue(String(externalValue ?? ""));
+  }, [externalValue]);
 
   return (
     <input
       {...rest}
       value={localValue}
-      onChange={e => {
-        setLocalValue(e.target.value)
-        if (!composingRef.current) onChange?.(e)
+      onChange={(e) => {
+        setLocalValue(e.target.value);
+        if (!composingRef.current) onChange?.(e);
       }}
-      onCompositionStart={e => {
-        composingRef.current = true
-        onCompositionStart?.(e)
+      onCompositionStart={(e) => {
+        composingRef.current = true;
+        onCompositionStart?.(e);
       }}
-      onCompositionEnd={e => {
-        composingRef.current = false
-        const val = (e.target as HTMLInputElement).value
-        setLocalValue(val)
-        onChange?.({ target: e.target, currentTarget: e.currentTarget } as React.ChangeEvent<HTMLInputElement>)
-        onCompositionEnd?.(e)
+      onCompositionEnd={(e) => {
+        composingRef.current = false;
+        const val = (e.target as HTMLInputElement).value;
+        setLocalValue(val);
+        onChange?.({
+          target: e.target,
+          currentTarget: e.currentTarget,
+        } as React.ChangeEvent<HTMLInputElement>);
+        onCompositionEnd?.(e);
       }}
     />
-  )
+  );
 }
 
-export function CompTextarea(props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) {
-  const { value: externalValue, onChange, onCompositionStart, onCompositionEnd, ...rest } = props
-  const composingRef = useRef(false)
-  const [localValue, setLocalValue] = useState(String(externalValue ?? ''))
+export function CompTextarea(
+  props: React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+) {
+  const {
+    value: externalValue,
+    onChange,
+    onCompositionStart,
+    onCompositionEnd,
+    ...rest
+  } = props;
+  const composingRef = useRef(false);
+  const [localValue, setLocalValue] = useState(String(externalValue ?? ""));
 
   useEffect(() => {
-    if (!composingRef.current) setLocalValue(String(externalValue ?? ''))
-  }, [externalValue])
+    if (!composingRef.current) setLocalValue(String(externalValue ?? ""));
+  }, [externalValue]);
 
   return (
     <textarea
       {...rest}
       value={localValue}
-      onChange={e => {
-        setLocalValue(e.target.value)
-        if (!composingRef.current) onChange?.(e)
+      onChange={(e) => {
+        setLocalValue(e.target.value);
+        if (!composingRef.current) onChange?.(e);
       }}
-      onCompositionStart={e => {
-        composingRef.current = true
-        onCompositionStart?.(e)
+      onCompositionStart={(e) => {
+        composingRef.current = true;
+        onCompositionStart?.(e);
       }}
-      onCompositionEnd={e => {
-        composingRef.current = false
-        const val = (e.target as HTMLTextAreaElement).value
-        setLocalValue(val)
-        onChange?.({ target: e.target, currentTarget: e.currentTarget } as React.ChangeEvent<HTMLTextAreaElement>)
-        onCompositionEnd?.(e)
+      onCompositionEnd={(e) => {
+        composingRef.current = false;
+        const val = (e.target as HTMLTextAreaElement).value;
+        setLocalValue(val);
+        onChange?.({
+          target: e.target,
+          currentTarget: e.currentTarget,
+        } as React.ChangeEvent<HTMLTextAreaElement>);
+        onCompositionEnd?.(e);
       }}
     />
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/custom-node/CustomNode.tsx b/src/workflow/components/canvas/custom-node/CustomNode.tsx
index 4dc57c16..56f62ff5 100644
--- a/src/workflow/components/canvas/custom-node/CustomNode.tsx
+++ b/src/workflow/components/canvas/custom-node/CustomNode.tsx
@@ -7,441 +7,582 @@
  * - Media upload / text input (dedicated body components)
  * - Inline preview, results panel, resize handles
  */
-import React, { memo, useMemo, useState, useCallback, useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Handle, Position, useReactFlow, type NodeProps } from 'reactflow'
-import { useExecutionStore } from '../../../stores/execution.store'
-import { useWorkflowStore } from '../../../stores/workflow.store'
-import { useUIStore } from '../../../stores/ui.store'
-import { apiClient } from '@/api/client'
-import { useModelsStore } from '@/stores/modelsStore'
-import { getFormFieldsFromModel } from '@/lib/schemaToForm'
-import { formFieldsToModelParamSchema } from '../../../lib/model-converter'
-import type { NodeStatus } from '@/workflow/types/execution'
-import type { WaveSpeedModel } from '@/workflow/types/node-defs'
-import type { FormFieldConfig } from '@/lib/schemaToForm'
+import React, {
+  memo,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { Handle, Position, useReactFlow, type NodeProps } from "reactflow";
+import { useExecutionStore } from "../../../stores/execution.store";
+import { useWorkflowStore } from "../../../stores/workflow.store";
+import { useUIStore } from "../../../stores/ui.store";
+import { apiClient } from "@/api/client";
+import { useModelsStore } from "@/stores/modelsStore";
+import { getFormFieldsFromModel } from "@/lib/schemaToForm";
+import { formFieldsToModelParamSchema } from "../../../lib/model-converter";
+import type { NodeStatus } from "@/workflow/types/execution";
+import type { WaveSpeedModel } from "@/workflow/types/node-defs";
+import type { FormFieldConfig } from "@/lib/schemaToForm";
 
 import {
   type CustomNodeData,
-  MIN_NODE_WIDTH, MIN_NODE_HEIGHT, DEFAULT_NODE_WIDTH,
-} from './CustomNodeTypes'
-import { handleRight } from './CustomNodeHandleAnchor'
-import { CustomNodeBody } from './CustomNodeBody'
-import { getNodeIcon } from './NodeIcons'
+  MIN_NODE_WIDTH,
+  MIN_NODE_HEIGHT,
+  DEFAULT_NODE_WIDTH,
+} from "./CustomNodeTypes";
+import { handleRight } from "./CustomNodeHandleAnchor";
+import { CustomNodeBody } from "./CustomNodeBody";
+import { getNodeIcon } from "./NodeIcons";
 
 /* ── main component ──────────────────────────────────────────────────── */
 
-function CustomNodeComponent({ id, data, selected }: NodeProps<CustomNodeData>) {
-  const { t } = useTranslation()
-  const status = useExecutionStore(s => s.nodeStatuses[id] ?? 'idle') as NodeStatus
-  const progress = useExecutionStore(s => s.progressMap[id])
-  const errorMessage = useExecutionStore(s => s.errorMessages[id])
-  const edges = useWorkflowStore(s => s.edges)
-  const updateNodeParams = useWorkflowStore(s => s.updateNodeParams)
-  const updateNodeData = useWorkflowStore(s => s.updateNodeData)
-  const workflowId = useWorkflowStore(s => s.workflowId)
-  const isDirty = useWorkflowStore(s => s.isDirty)
-  const { runNode, cancelNode, retryNode } = useExecutionStore()
-  const openPreview = useUIStore(s => s.openPreview)
-  const allNodes = useWorkflowStore(s => s.nodes)
-  const allLastResults = useExecutionStore(s => s.lastResults)
-  const [hovered, setHovered] = useState(false)
-  const [segmentPointPickerOpen, setSegmentPointPickerOpen] = useState(false)
-  const [resultsExpanded, setResultsExpanded] = useState(false)
-  const storeModels = useModelsStore(s => s.models)
-  const getModelById = useModelsStore(s => s.getModelById)
-  const fetchModels = useModelsStore(s => s.fetchModels)
+function CustomNodeComponent({
+  id,
+  data,
+  selected,
+}: NodeProps<CustomNodeData>) {
+  const { t } = useTranslation();
+  const status = useExecutionStore(
+    (s) => s.nodeStatuses[id] ?? "idle",
+  ) as NodeStatus;
+  const progress = useExecutionStore((s) => s.progressMap[id]);
+  const errorMessage = useExecutionStore((s) => s.errorMessages[id]);
+  const edges = useWorkflowStore((s) => s.edges);
+  const updateNodeParams = useWorkflowStore((s) => s.updateNodeParams);
+  const updateNodeData = useWorkflowStore((s) => s.updateNodeData);
+  const workflowId = useWorkflowStore((s) => s.workflowId);
+  const isDirty = useWorkflowStore((s) => s.isDirty);
+  const { runNode, cancelNode, retryNode } = useExecutionStore();
+  const openPreview = useUIStore((s) => s.openPreview);
+  const allNodes = useWorkflowStore((s) => s.nodes);
+  const allLastResults = useExecutionStore((s) => s.lastResults);
+  const [hovered, setHovered] = useState(false);
+  const [segmentPointPickerOpen, setSegmentPointPickerOpen] = useState(false);
+  const [resultsExpanded, setResultsExpanded] = useState(false);
+  const storeModels = useModelsStore((s) => s.models);
+  const getModelById = useModelsStore((s) => s.getModelById);
+  const fetchModels = useModelsStore((s) => s.fetchModels);
 
   // ── Resizable dimensions (use ref + direct DOM for zero-lag) ──
-  const savedWidth = (data.params.__nodeWidth as number) ?? DEFAULT_NODE_WIDTH
-  const savedHeight = (data.params.__nodeHeight as number | undefined) ?? undefined
-  const nodeRef = useRef<HTMLDivElement>(null)
-  const [resizing, setResizing] = useState(false)
-  const { getViewport, setNodes } = useReactFlow()
-  const shortId = id.slice(0, 8)
-  const NodeIcon = getNodeIcon(data.nodeType)
-  const nodeLabel = data.nodeType === 'ai-task/run'
-    ? t('workflow.aiTaskNodeLabel', 'WaveSpeed API')
-    : t(`workflow.nodeDefs.${data.nodeType}.label`, data.nodeType?.split('/').pop() ?? 'Node')
-  const localizeInputLabel = useCallback((key: string, fallback: string) =>
-    t(`workflow.nodeDefs.${data.nodeType}.inputs.${key}.label`, fallback), [data.nodeType, t])
-  const localizeParamLabel = useCallback((key: string, fallback: string) =>
-    t(`workflow.nodeDefs.${data.nodeType}.params.${key}.label`, fallback), [data.nodeType, t])
-  const localizeParamDescription = useCallback((key: string, fallback?: string) =>
-    fallback ? t(`workflow.nodeDefs.${data.nodeType}.params.${key}.description`, fallback) : undefined, [data.nodeType, t])
+  const savedWidth = (data.params.__nodeWidth as number) ?? DEFAULT_NODE_WIDTH;
+  const savedHeight =
+    (data.params.__nodeHeight as number | undefined) ?? undefined;
+  const nodeRef = useRef<HTMLDivElement>(null);
+  const [resizing, setResizing] = useState(false);
+  const { getViewport, setNodes } = useReactFlow();
+  const shortId = id.slice(0, 8);
+  const NodeIcon = getNodeIcon(data.nodeType);
+  const nodeLabel =
+    data.nodeType === "ai-task/run"
+      ? t("workflow.aiTaskNodeLabel", "WaveSpeed API")
+      : t(
+          `workflow.nodeDefs.${data.nodeType}.label`,
+          data.nodeType?.split("/").pop() ?? "Node",
+        );
+  const localizeInputLabel = useCallback(
+    (key: string, fallback: string) =>
+      t(`workflow.nodeDefs.${data.nodeType}.inputs.${key}.label`, fallback),
+    [data.nodeType, t],
+  );
+  const localizeParamLabel = useCallback(
+    (key: string, fallback: string) =>
+      t(`workflow.nodeDefs.${data.nodeType}.params.${key}.label`, fallback),
+    [data.nodeType, t],
+  );
+  const localizeParamDescription = useCallback(
+    (key: string, fallback?: string) =>
+      fallback
+        ? t(
+            `workflow.nodeDefs.${data.nodeType}.params.${key}.description`,
+            fallback,
+          )
+        : undefined,
+    [data.nodeType, t],
+  );
 
   /**
    * Resize handler for edges and corners.
    *   xDir:  1 = right,  -1 = left,  0 = none
    *   yDir:  1 = bottom, -1 = top,   0 = none
    */
-  const onEdgeResizeStart = useCallback((e: React.MouseEvent, xDir: number, yDir: number) => {
-    e.stopPropagation()
-    e.preventDefault()
-    const el = nodeRef.current
-    if (!el) return
-    setResizing(true)
-
-    const startX = e.clientX
-    const startY = e.clientY
-    const startW = el.offsetWidth
-    const startH = el.offsetHeight
-    const zoom = getViewport().zoom
-
-    const onMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - startX
-      const dy = ev.clientY - startY
-      if (xDir !== 0) {
-        el.style.width = `${Math.max(MIN_NODE_WIDTH, startW + dx * xDir)}px`
-      }
-      if (yDir !== 0) {
-        el.style.minHeight = `${Math.max(MIN_NODE_HEIGHT, startH + dy * yDir)}px`
-      }
-      if (xDir === -1 || yDir === -1) {
-        const tx = xDir === -1 ? dx : 0
-        const ty = yDir === -1 ? dy : 0
-        el.style.transform = `translate(${tx}px, ${ty}px)`
-      }
-    }
-
-    const onUp = (ev: MouseEvent) => {
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-      el.style.transform = ''
-      el.style.width = ''
-      el.style.minHeight = ''
-      setResizing(false)
-
-      const dx = ev.clientX - startX
-      const dy = ev.clientY - startY
-      const newWidth = xDir !== 0 ? Math.max(MIN_NODE_WIDTH, startW + dx * xDir) : undefined
-      const newHeight = yDir !== 0 ? Math.max(MIN_NODE_HEIGHT, startH + dy * yDir) : undefined
-
-      setNodes(nodes => nodes.map(n => {
-        if (n.id !== id) return n
-        const pos = { ...n.position }
-        if (xDir === -1) pos.x += dx / zoom
-        if (yDir === -1) pos.y += dy / zoom
-        const updatedParams = { ...n.data.params }
-        if (newWidth !== undefined) updatedParams.__nodeWidth = newWidth
-        if (newHeight !== undefined) updatedParams.__nodeHeight = newHeight
-        return { ...n, position: pos, data: { ...n.data, params: updatedParams } }
-      }))
-
-      useWorkflowStore.setState({ isDirty: true })
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [id, getViewport, setNodes])
-
-  const running = status === 'running'
+  const onEdgeResizeStart = useCallback(
+    (e: React.MouseEvent, xDir: number, yDir: number) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const el = nodeRef.current;
+      if (!el) return;
+      setResizing(true);
+
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const startW = el.offsetWidth;
+      const startH = el.offsetHeight;
+      const zoom = getViewport().zoom;
+
+      const onMove = (ev: MouseEvent) => {
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        if (xDir !== 0) {
+          el.style.width = `${Math.max(MIN_NODE_WIDTH, startW + dx * xDir)}px`;
+        }
+        if (yDir !== 0) {
+          el.style.minHeight = `${Math.max(MIN_NODE_HEIGHT, startH + dy * yDir)}px`;
+        }
+        if (xDir === -1 || yDir === -1) {
+          const tx = xDir === -1 ? dx : 0;
+          const ty = yDir === -1 ? dy : 0;
+          el.style.transform = `translate(${tx}px, ${ty}px)`;
+        }
+      };
+
+      const onUp = (ev: MouseEvent) => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        el.style.transform = "";
+        el.style.width = "";
+        el.style.minHeight = "";
+        setResizing(false);
+
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        const newWidth =
+          xDir !== 0 ? Math.max(MIN_NODE_WIDTH, startW + dx * xDir) : undefined;
+        const newHeight =
+          yDir !== 0
+            ? Math.max(MIN_NODE_HEIGHT, startH + dy * yDir)
+            : undefined;
+
+        setNodes((nodes) =>
+          nodes.map((n) => {
+            if (n.id !== id) return n;
+            const pos = { ...n.position };
+            if (xDir === -1) pos.x += dx / zoom;
+            if (yDir === -1) pos.y += dy / zoom;
+            const updatedParams = { ...n.data.params };
+            if (newWidth !== undefined) updatedParams.__nodeWidth = newWidth;
+            if (newHeight !== undefined) updatedParams.__nodeHeight = newHeight;
+            return {
+              ...n,
+              position: pos,
+              data: { ...n.data, params: updatedParams },
+            };
+          }),
+        );
+
+        useWorkflowStore.setState({ isDirty: true });
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [id, getViewport, setNodes],
+  );
+
+  const running = status === "running";
 
   const connectedSet = useMemo(() => {
-    const s = new Set<string>()
-    edges.filter(e => e.target === id).forEach(e => { if (e.targetHandle) s.add(e.targetHandle) })
-    return s
-  }, [edges, id])
+    const s = new Set<string>();
+    edges
+      .filter((e) => e.target === id)
+      .forEach((e) => {
+        if (e.targetHandle) s.add(e.targetHandle);
+      });
+    return s;
+  }, [edges, id]);
 
   const setParam = useCallback(
-    (key: string, value: unknown) => updateNodeParams(id, { ...data.params, [key]: value }),
+    (key: string, value: unknown) =>
+      updateNodeParams(id, { ...data.params, [key]: value }),
     [updateNodeParams, id, data.params],
-  )
+  );
 
-  const paramDefs = data.paramDefinitions ?? []
-  const inputDefs = data.inputDefinitions ?? []
-  const isAITask = data.nodeType === 'ai-task/run'
-  const currentModelId = String(data.params?.modelId ?? '').trim()
-  const currentModel = useModelsStore(s => s.getModelById(currentModelId))
+  const paramDefs = data.paramDefinitions ?? [];
+  const inputDefs = data.inputDefinitions ?? [];
+  const isAITask = data.nodeType === "ai-task/run";
+  const currentModelId = String(data.params?.modelId ?? "").trim();
+  const currentModel = useModelsStore((s) => s.getModelById(currentModelId));
 
   const schema = useMemo(() => {
     if (isAITask && currentModel) {
-      return formFieldsToModelParamSchema(getFormFieldsFromModel(currentModel))
+      return formFieldsToModelParamSchema(getFormFieldsFromModel(currentModel));
     }
-    return data.modelInputSchema ?? []
-  }, [isAITask, currentModel, data.modelInputSchema])
-
-  const isPreviewNode = data.nodeType === 'output/preview'
-  const removeEdgesByIds = useWorkflowStore(s => s.removeEdgesByIds)
-
-  const handleInlineSelectModel = useCallback((model: WaveSpeedModel) => {
-    const desktopModel = useModelsStore.getState().models.find(m => m.model_id === model.modelId)
-    const inputSchemaForNode = desktopModel
-      ? formFieldsToModelParamSchema(getFormFieldsFromModel(desktopModel))
-      : model.inputSchema
-
-    if (currentModelId) {
-      const newParamNames = new Set(inputSchemaForNode.map(p => p.name))
-      const edgesToRemove = edges.filter(e => {
-        if (e.source === id) return false
-        if (e.target === id) {
-          const th = e.targetHandle ?? ''
-          if (th.startsWith('input-')) return false
-          if (th.startsWith('param-')) {
-            const paramName = th.slice('param-'.length)
-            return !newParamNames.has(paramName)
+    return data.modelInputSchema ?? [];
+  }, [isAITask, currentModel, data.modelInputSchema]);
+
+  const isPreviewNode = data.nodeType === "output/preview";
+  const removeEdgesByIds = useWorkflowStore((s) => s.removeEdgesByIds);
+
+  const handleInlineSelectModel = useCallback(
+    (model: WaveSpeedModel) => {
+      const desktopModel = useModelsStore
+        .getState()
+        .models.find((m) => m.model_id === model.modelId);
+      const inputSchemaForNode = desktopModel
+        ? formFieldsToModelParamSchema(getFormFieldsFromModel(desktopModel))
+        : model.inputSchema;
+
+      if (currentModelId) {
+        const newParamNames = new Set(inputSchemaForNode.map((p) => p.name));
+        const edgesToRemove = edges.filter((e) => {
+          if (e.source === id) return false;
+          if (e.target === id) {
+            const th = e.targetHandle ?? "";
+            if (th.startsWith("input-")) return false;
+            if (th.startsWith("param-")) {
+              const paramName = th.slice("param-".length);
+              return !newParamNames.has(paramName);
+            }
           }
+          return false;
+        });
+        if (edgesToRemove.length > 0) {
+          removeEdgesByIds(edgesToRemove.map((e) => e.id));
         }
-        return false
-      })
-      if (edgesToRemove.length > 0) {
-        removeEdgesByIds(edgesToRemove.map(e => e.id))
       }
-    }
-
-    const internalParams: Record<string, unknown> = {}
-    for (const [k, v] of Object.entries(data.params ?? {})) {
-      if (k.startsWith('__')) internalParams[k] = v
-    }
-    delete internalParams.__hiddenRuns
 
-    const nextParams: Record<string, unknown> = { ...internalParams, modelId: model.modelId }
-    for (const p of inputSchemaForNode) {
-      if (p.default !== undefined) nextParams[p.name] = p.default
-    }
+      const internalParams: Record<string, unknown> = {};
+      for (const [k, v] of Object.entries(data.params ?? {})) {
+        if (k.startsWith("__")) internalParams[k] = v;
+      }
+      delete internalParams.__hiddenRuns;
+
+      const nextParams: Record<string, unknown> = {
+        ...internalParams,
+        modelId: model.modelId,
+      };
+      for (const p of inputSchemaForNode) {
+        if (p.default !== undefined) nextParams[p.name] = p.default;
+      }
 
-    updateNodeParams(id, nextParams)
-
-    const baseName = model.displayName
-    const otherLabels = allNodes
-      .filter(n => n.id !== id && n.data?.nodeType === 'ai-task/run')
-      .map(n => String(n.data?.label ?? '').replace(/^🤖\s*/, '').trim())
-    let finalLabel = baseName
-    if (otherLabels.includes(finalLabel)) {
-      let idx = 2
-      while (otherLabels.includes(`${baseName} (${idx})`)) idx++
-      finalLabel = `${baseName} (${idx})`
-    }
+      updateNodeParams(id, nextParams);
+
+      const baseName = model.displayName;
+      const otherLabels = allNodes
+        .filter((n) => n.id !== id && n.data?.nodeType === "ai-task/run")
+        .map((n) =>
+          String(n.data?.label ?? "")
+            .replace(/^🤖\s*/, "")
+            .trim(),
+        );
+      let finalLabel = baseName;
+      if (otherLabels.includes(finalLabel)) {
+        let idx = 2;
+        while (otherLabels.includes(`${baseName} (${idx})`)) idx++;
+        finalLabel = `${baseName} (${idx})`;
+      }
 
-    updateNodeData(id, {
-      modelInputSchema: inputSchemaForNode,
-      label: finalLabel
-    })
-
-    const execStore = useExecutionStore.getState()
-    execStore.updateNodeStatus(id, 'idle')
-    useExecutionStore.setState(s => {
-      const newResults = { ...s.lastResults }
-      delete newResults[id]
-      const newFetched = new Set(s._fetchedNodes)
-      newFetched.delete(id)
-      return { lastResults: newResults, _fetchedNodes: newFetched }
-    })
-  }, [currentModelId, data.params, edges, id, updateNodeData, updateNodeParams, removeEdgesByIds, allNodes])
+      updateNodeData(id, {
+        modelInputSchema: inputSchemaForNode,
+        label: finalLabel,
+      });
+
+      const execStore = useExecutionStore.getState();
+      execStore.updateNodeStatus(id, "idle");
+      useExecutionStore.setState((s) => {
+        const newResults = { ...s.lastResults };
+        delete newResults[id];
+        const newFetched = new Set(s._fetchedNodes);
+        newFetched.delete(id);
+        return { lastResults: newResults, _fetchedNodes: newFetched };
+      });
+    },
+    [
+      currentModelId,
+      data.params,
+      edges,
+      id,
+      updateNodeData,
+      updateNodeParams,
+      removeEdgesByIds,
+      allNodes,
+    ],
+  );
 
   useEffect(() => {
-    if (isAITask && storeModels.length === 0) fetchModels()
-  }, [isAITask, storeModels.length, fetchModels])
-
-  const orderedVisibleParams = useMemo(() =>
-    schema.filter(p => p.name !== 'modelId' && (p.required || !p.hidden)),
-    [schema]
-  )
-  const optionalParams = useMemo(() =>
-    schema.filter(p => p.name !== 'modelId' && !p.required && p.hidden),
-    [schema]
-  )
-  const defParams = paramDefs.filter(p => p.key !== 'modelId')
-  const [showOptional, setShowOptional] = useState(false)
+    if (isAITask && storeModels.length === 0) fetchModels();
+  }, [isAITask, storeModels.length, fetchModels]);
+
+  const orderedVisibleParams = useMemo(
+    () =>
+      schema.filter((p) => p.name !== "modelId" && (p.required || !p.hidden)),
+    [schema],
+  );
+  const optionalParams = useMemo(
+    () => schema.filter((p) => p.name !== "modelId" && !p.required && p.hidden),
+    [schema],
+  );
+  const defParams = paramDefs.filter((p) => p.key !== "modelId");
+  const [showOptional, setShowOptional] = useState(false);
 
   const formFields = useMemo<FormFieldConfig[]>(() => {
-    if (!isAITask) return []
+    if (!isAITask) return [];
     // Prefer live model data; fall back to persisted modelInputSchema so the
     // node renders with FormField immediately (avoids FOUC / style jump).
     if (currentModel) {
-      return getFormFieldsFromModel(currentModel).filter(f => f.name !== 'modelId')
+      return getFormFieldsFromModel(currentModel).filter(
+        (f) => f.name !== "modelId",
+      );
     }
-    const schema = data.modelInputSchema ?? []
-    if (schema.length === 0) return []
+    const schema = data.modelInputSchema ?? [];
+    if (schema.length === 0) return [];
     return schema
-      .filter(s => s.name !== 'modelId')
-      .map((s): FormFieldConfig => ({
-        name: s.name,
-        type: (s.fieldType === 'json' ? 'text' : s.fieldType) ?? 'text',
-        label: s.label ?? s.name.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
-        required: s.required ?? false,
-        default: s.default,
-        min: s.min,
-        max: s.max,
-        step: s.step,
-        options: s.enum,
-        description: s.description,
-        accept: s.accept,
-        maxFiles: s.maxItems,
-        placeholder: s.placeholder,
-        hidden: s.hidden,
-        schemaType: s.type === 'integer' ? 'integer' : s.type === 'number' ? 'number' : undefined,
-      }))
-  }, [isAITask, currentModel, data.modelInputSchema])
+      .filter((s) => s.name !== "modelId")
+      .map(
+        (s): FormFieldConfig => ({
+          name: s.name,
+          type: (s.fieldType === "json" ? "text" : s.fieldType) ?? "text",
+          label:
+            s.label ??
+            s.name
+              .split("_")
+              .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+              .join(" "),
+          required: s.required ?? false,
+          default: s.default,
+          min: s.min,
+          max: s.max,
+          step: s.step,
+          options: s.enum,
+          description: s.description,
+          accept: s.accept,
+          maxFiles: s.maxItems,
+          placeholder: s.placeholder,
+          hidden: s.hidden,
+          schemaType:
+            s.type === "integer"
+              ? "integer"
+              : s.type === "number"
+                ? "number"
+                : undefined,
+        }),
+      );
+  }, [isAITask, currentModel, data.modelInputSchema]);
   const formValues = useMemo(() => {
-    const p = data.params ?? {}
-    return Object.fromEntries(Object.entries(p).filter(([k]) => !k.startsWith('__')))
-  }, [data.params])
-  const [enabledHiddenFields, setEnabledHiddenFields] = useState<Set<string>>(new Set())
-  const visibleFormFields = useMemo(() => formFields.filter(f => !f.hidden), [formFields])
-  const hiddenFormFields = useMemo(() => formFields.filter(f => f.hidden), [formFields])
-  const usePlaygroundForm = isAITask && formFields.length > 0
+    const p = data.params ?? {};
+    return Object.fromEntries(
+      Object.entries(p).filter(([k]) => !k.startsWith("__")),
+    );
+  }, [data.params]);
+  const [enabledHiddenFields, setEnabledHiddenFields] = useState<Set<string>>(
+    new Set(),
+  );
+  const visibleFormFields = useMemo(
+    () => formFields.filter((f) => !f.hidden),
+    [formFields],
+  );
+  const hiddenFormFields = useMemo(
+    () => formFields.filter((f) => f.hidden),
+    [formFields],
+  );
+  const usePlaygroundForm = isAITask && formFields.length > 0;
 
   useEffect(() => {
-    if (usePlaygroundForm) setEnabledHiddenFields(new Set())
-  }, [currentModelId, usePlaygroundForm])
+    if (usePlaygroundForm) setEnabledHiddenFields(new Set());
+  }, [currentModelId, usePlaygroundForm]);
 
-  const resultGroups = useExecutionStore(s => s.lastResults[id]) ?? []
+  const resultGroups = useExecutionStore((s) => s.lastResults[id]) ?? [];
 
   // Auto-expand results when new results arrive
   useEffect(() => {
-    if (resultGroups.length > 0) setResultsExpanded(true)
-  }, [resultGroups.length])
+    if (resultGroups.length > 0) setResultsExpanded(true);
+  }, [resultGroups.length]);
 
-  const saveWorkflow = useWorkflowStore(s => s.saveWorkflow)
-  const removeNode = useWorkflowStore(s => s.removeNode)
-  const { continueFrom } = useExecutionStore()
+  const saveWorkflow = useWorkflowStore((s) => s.saveWorkflow);
+  const removeNode = useWorkflowStore((s) => s.removeNode);
+  const { continueFrom } = useExecutionStore();
 
   const ensureWorkflowId = async () => {
-    let wfId = workflowId
+    let wfId = workflowId;
     if (!wfId || isDirty) {
-      await saveWorkflow({ forRun: true })
-      wfId = useWorkflowStore.getState().workflowId
+      await saveWorkflow({ forRun: true });
+      wfId = useWorkflowStore.getState().workflowId;
     }
-    return wfId
-  }
-
-  const handleWorkflowUploadFile = useCallback(async (file: File): Promise<string> => {
-    const wfId = await ensureWorkflowId()
-    if (!wfId) throw new Error('Workflow not saved yet.')
-    const { storageIpc } = await import('../../../ipc/ipc-client')
-    const data = await file.arrayBuffer()
-    const localPath = await storageIpc.saveUploadedFile(wfId, id, file.name, data)
-    return `local-asset://${encodeURIComponent(localPath)}`
-  }, [ensureWorkflowId, id])
+    return wfId;
+  };
+
+  const handleWorkflowUploadFile = useCallback(
+    async (file: File): Promise<string> => {
+      const wfId = await ensureWorkflowId();
+      if (!wfId) throw new Error("Workflow not saved yet.");
+      const { storageIpc } = await import("../../../ipc/ipc-client");
+      const data = await file.arrayBuffer();
+      const localPath = await storageIpc.saveUploadedFile(
+        wfId,
+        id,
+        file.name,
+        data,
+      );
+      return `local-asset://${encodeURIComponent(localPath)}`;
+    },
+    [ensureWorkflowId, id],
+  );
 
   const inlineInputPreviewUrl = useMemo(() => {
-    if (!isPreviewNode) return ''
+    if (!isPreviewNode) return "";
     const isMediaLike = (u: string) =>
-      /^https?:\/\//i.test(u) || /^blob:/i.test(u) || /^local-asset:\/\//i.test(u) || /^data:/i.test(u) || /^file:\/\//i.test(u)
+      /^https?:\/\//i.test(u) ||
+      /^blob:/i.test(u) ||
+      /^local-asset:\/\//i.test(u) ||
+      /^data:/i.test(u) ||
+      /^file:\/\//i.test(u);
 
     const pickFromSourceNode = (sourceNodeId: string): string => {
-      const latest = allLastResults[sourceNodeId]?.[0]?.urls?.[0] ?? ''
-      if (latest && isMediaLike(latest)) return latest
+      const latest = allLastResults[sourceNodeId]?.[0]?.urls?.[0] ?? "";
+      if (latest && isMediaLike(latest)) return latest;
 
-      const sourceNode = allNodes.find(n => n.id === sourceNodeId)
-      const sourceParams = sourceNode?.data?.params as Record<string, unknown> | undefined
+      const sourceNode = allNodes.find((n) => n.id === sourceNodeId);
+      const sourceParams = sourceNode?.data?.params as
+        | Record<string, unknown>
+        | undefined;
       const candidates = [
-        String(sourceParams?.uploadedUrl ?? ''),
-        String(sourceParams?.output ?? ''),
-        String(sourceParams?.input ?? ''),
-        String(sourceParams?.url ?? '')
-      ]
+        String(sourceParams?.uploadedUrl ?? ""),
+        String(sourceParams?.output ?? ""),
+        String(sourceParams?.input ?? ""),
+        String(sourceParams?.url ?? ""),
+      ];
       for (const c of candidates) {
-        if (c && isMediaLike(c)) return c
+        if (c && isMediaLike(c)) return c;
       }
-      return ''
-    }
+      return "";
+    };
 
     for (const inp of inputDefs) {
-      const hid = `input-${inp.key}`
-      const edge = edges.find(e => e.target === id && e.targetHandle === hid)
+      const hid = `input-${inp.key}`;
+      const edge = edges.find((e) => e.target === id && e.targetHandle === hid);
       if (edge) {
-        const upstream = pickFromSourceNode(edge.source)
-        if (upstream) return upstream
+        const upstream = pickFromSourceNode(edge.source);
+        if (upstream) return upstream;
       } else {
-        const localVal = String(data.params[inp.key] ?? '')
-        if (localVal && isMediaLike(localVal)) return localVal
+        const localVal = String(data.params[inp.key] ?? "");
+        if (localVal && isMediaLike(localVal)) return localVal;
       }
     }
 
-    return ''
-  }, [allLastResults, allNodes, data.params, edges, id, inputDefs, isPreviewNode])
+    return "";
+  }, [
+    allLastResults,
+    allNodes,
+    data.params,
+    edges,
+    id,
+    inputDefs,
+    isPreviewNode,
+  ]);
 
   const inlinePreviewDetectSource = useMemo(() => {
-    if (!inlineInputPreviewUrl) return ''
+    if (!inlineInputPreviewUrl) return "";
     const lowered = /^local-asset:\/\//i.test(inlineInputPreviewUrl)
       ? (() => {
           try {
-            return decodeURIComponent(inlineInputPreviewUrl.replace(/^local-asset:\/\//i, '')).toLowerCase()
+            return decodeURIComponent(
+              inlineInputPreviewUrl.replace(/^local-asset:\/\//i, ""),
+            ).toLowerCase();
           } catch {
-            return inlineInputPreviewUrl.toLowerCase()
+            return inlineInputPreviewUrl.toLowerCase();
           }
         })()
-      : inlineInputPreviewUrl.toLowerCase()
-    return lowered.split('?')[0]
-  }, [inlineInputPreviewUrl])
-  const inlinePreviewIsImage = /^data:image\//i.test(inlineInputPreviewUrl) || /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(inlinePreviewDetectSource)
-  const inlinePreviewIsVideo = /^data:video\//i.test(inlineInputPreviewUrl) || /\.(mp4|webm|mov|avi|mkv)$/.test(inlinePreviewDetectSource)
-  const inlinePreviewIsAudio = /^data:audio\//i.test(inlineInputPreviewUrl) || /\.(mp3|wav|ogg|flac|aac|m4a)$/.test(inlinePreviewDetectSource)
-  const inlinePreviewIs3D = /\.(glb|gltf)$/.test(inlinePreviewDetectSource)
+      : inlineInputPreviewUrl.toLowerCase();
+    return lowered.split("?")[0];
+  }, [inlineInputPreviewUrl]);
+  const inlinePreviewIsImage =
+    /^data:image\//i.test(inlineInputPreviewUrl) ||
+    /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(inlinePreviewDetectSource);
+  const inlinePreviewIsVideo =
+    /^data:video\//i.test(inlineInputPreviewUrl) ||
+    /\.(mp4|webm|mov|avi|mkv)$/.test(inlinePreviewDetectSource);
+  const inlinePreviewIsAudio =
+    /^data:audio\//i.test(inlineInputPreviewUrl) ||
+    /\.(mp3|wav|ogg|flac|aac|m4a)$/.test(inlinePreviewDetectSource);
+  const inlinePreviewIs3D = /\.(glb|gltf)$/.test(inlinePreviewDetectSource);
 
   const optimizeOnRunIfEnabled = useCallback(async () => {
-    const settings = (data.params.__optimizerSettings as Record<string, unknown> | undefined) ?? {}
-    const enabled = Boolean(settings.optimizeOnRun ?? settings.autoOptimize)
-    if (!enabled) return
-
-    const fieldToOptimize: 'text' | 'prompt' | null = (() => {
-      if (data.nodeType === 'input/text-input') return 'text'
-      if (typeof data.params.prompt === 'string') return 'prompt'
-      if (typeof data.params.text === 'string') return 'text'
-      return null
-    })()
-    if (!fieldToOptimize) return
-
-    const sourceText = String(data.params[fieldToOptimize] ?? '')
-    if (!sourceText.trim()) return
-
-    const lastManualOptimizedText = typeof settings.lastManualOptimizedText === 'string'
-      ? settings.lastManualOptimizedText
-      : ''
-    if (lastManualOptimizedText && lastManualOptimizedText === sourceText) return
-
-    const { optimizeOnRun: _opt, autoOptimize: _legacy, lastManualOptimizedText: _manual, ...settingsForApi } = settings
+    const settings =
+      (data.params.__optimizerSettings as
+        | Record<string, unknown>
+        | undefined) ?? {};
+    const enabled = Boolean(settings.optimizeOnRun ?? settings.autoOptimize);
+    if (!enabled) return;
+
+    const fieldToOptimize: "text" | "prompt" | null = (() => {
+      if (data.nodeType === "input/text-input") return "text";
+      if (typeof data.params.prompt === "string") return "prompt";
+      if (typeof data.params.text === "string") return "text";
+      return null;
+    })();
+    if (!fieldToOptimize) return;
+
+    const sourceText = String(data.params[fieldToOptimize] ?? "");
+    if (!sourceText.trim()) return;
+
+    const lastManualOptimizedText =
+      typeof settings.lastManualOptimizedText === "string"
+        ? settings.lastManualOptimizedText
+        : "";
+    if (lastManualOptimizedText && lastManualOptimizedText === sourceText)
+      return;
+
+    const {
+      optimizeOnRun: _opt,
+      autoOptimize: _legacy,
+      lastManualOptimizedText: _manual,
+      ...settingsForApi
+    } = settings;
 
     try {
-      const optimized = await apiClient.optimizePrompt({ ...settingsForApi, text: sourceText })
+      const optimized = await apiClient.optimizePrompt({
+        ...settingsForApi,
+        text: sourceText,
+      });
       if (optimized && optimized !== sourceText) {
-        updateNodeParams(id, { ...data.params, [fieldToOptimize]: optimized })
+        updateNodeParams(id, { ...data.params, [fieldToOptimize]: optimized });
       }
     } catch (err) {
-      console.warn('Optimize on run failed:', err)
+      console.warn("Optimize on run failed:", err);
     }
-  }, [data.nodeType, data.params, id, updateNodeParams])
+  }, [data.nodeType, data.params, id, updateNodeParams]);
 
   const onRun = async (e: React.MouseEvent) => {
-    e.stopPropagation()
+    e.stopPropagation();
     if (!running) {
-      await optimizeOnRunIfEnabled()
+      await optimizeOnRunIfEnabled();
     }
-    const wfId = workflowId ?? ''
+    const wfId = workflowId ?? "";
     if (running) {
-      cancelNode(wfId, id)
-    } else if (data.nodeType?.startsWith('output/')) {
+      cancelNode(wfId, id);
+    } else if (data.nodeType?.startsWith("output/")) {
       // Output nodes (File Export, Preview) should reuse upstream results, not re-run them
-      continueFrom(wfId, id)
+      continueFrom(wfId, id);
     } else {
-      runNode(wfId, id)
+      runNode(wfId, id);
     }
-  }
+  };
 
   const onRunFromHere = async (e: React.MouseEvent) => {
-    e.stopPropagation()
-    await optimizeOnRunIfEnabled()
-    continueFrom(workflowId ?? '', id)
-  }
+    e.stopPropagation();
+    await optimizeOnRunIfEnabled();
+    continueFrom(workflowId ?? "", id);
+  };
 
   const onDelete = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    removeNode(id)
-  }
+    e.stopPropagation();
+    removeNode(id);
+  };
 
   const onWheel = (e: React.WheelEvent) => {
-    const el = e.target as Node | null
-    if (!el) return
-    const tag = el instanceof HTMLElement ? el.tagName.toLowerCase() : ''
-    if (tag === 'textarea' || tag === 'input') {
-      e.stopPropagation()
-      return
+    const el = e.target as Node | null;
+    if (!el) return;
+    const tag = el instanceof HTMLElement ? el.tagName.toLowerCase() : "";
+    if (tag === "textarea" || tag === "input") {
+      e.stopPropagation();
+      return;
     }
     if (el instanceof HTMLElement && el.isContentEditable) {
-      e.stopPropagation()
+      e.stopPropagation();
     }
-  }
+  };
 
   return (
     <div
@@ -457,27 +598,72 @@ function CustomNodeComponent({ id, data, selected }: NodeProps<CustomNodeData>)
       {hovered && (
         <div className="absolute -top-9 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1">
           {running ? (
-            <button onClick={onRun}
-              className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[11px] font-medium shadow-lg backdrop-blur-sm bg-red-500 text-white hover:bg-red-600 transition-all">
-              <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1"/></svg> {t('workflow.stop', 'Stop')}
+            <button
+              onClick={onRun}
+              className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[11px] font-medium shadow-lg backdrop-blur-sm bg-red-500 text-white hover:bg-red-600 transition-all"
+            >
+              <svg
+                width="10"
+                height="10"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <rect x="6" y="6" width="12" height="12" rx="1" />
+              </svg>{" "}
+              {t("workflow.stop", "Stop")}
             </button>
           ) : (
             <>
-              <button onClick={onRun}
+              <button
+                onClick={onRun}
                 className="flex items-center gap-1 px-3 py-1.5 rounded-full text-[11px] font-medium shadow-lg backdrop-blur-sm bg-blue-500 text-white hover:bg-blue-600 transition-all whitespace-nowrap"
-                title={t('workflow.runNode', 'Run Node')}>
-                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,3 20,12 6,21"/></svg> {t('workflow.run', 'Run')}
+                title={t("workflow.runNode", "Run Node")}
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <polygon points="6,3 20,12 6,21" />
+                </svg>{" "}
+                {t("workflow.run", "Run")}
               </button>
-              <button onClick={onRunFromHere}
+              <button
+                onClick={onRunFromHere}
                 className="flex items-center gap-1 px-3 py-1.5 rounded-full text-[11px] font-medium shadow-lg backdrop-blur-sm bg-green-600 text-white hover:bg-green-700 transition-all whitespace-nowrap"
-                title={t('workflow.continueFrom', 'Continue From')}>
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="4,4 14,12 4,20"/><polygon points="12,4 22,12 12,20"/></svg> {t('workflow.runFromHere', 'Run from here')}
+                title={t("workflow.continueFrom", "Continue From")}
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <polygon points="4,4 14,12 4,20" />
+                  <polygon points="12,4 22,12 12,20" />
+                </svg>{" "}
+                {t("workflow.runFromHere", "Run from here")}
               </button>
-              <button onClick={onDelete}
+              <button
+                onClick={onDelete}
                 className="flex items-center justify-center w-8 h-8 rounded-full shadow-lg backdrop-blur-sm bg-[hsl(var(--muted))] text-muted-foreground hover:bg-red-500/20 hover:text-red-400 transition-all"
-                title={t('workflow.delete', 'Delete')}>
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
+                title={t("workflow.delete", "Delete")}
+              >
+                <svg
+                  width="13"
+                  height="13"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="3 6 5 6 21 6" />
+                  <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                  <line x1="10" y1="11" x2="10" y2="17" />
+                  <line x1="14" y1="11" x2="14" y2="17" />
                 </svg>
               </button>
             </>
@@ -492,144 +678,226 @@ function CustomNodeComponent({ id, data, selected }: NodeProps<CustomNodeData>)
           relative rounded-xl
           bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]
           border-2
-          ${resizing ? '' : 'transition-all duration-300'}
-          ${running ? 'border-blue-500 animate-pulse-subtle' : ''}
-          ${!running && selected ? 'border-blue-500 shadow-[0_0_20px_rgba(96,165,250,.25)] ring-1 ring-blue-500/30' : ''}
-          ${!running && !selected && status === 'confirmed' ? 'border-green-500/70' : ''}
-          ${!running && !selected && status === 'unconfirmed' ? 'border-orange-500/70' : ''}
-          ${!running && !selected && status === 'error' ? 'border-red-500/70' : ''}
-          ${!running && !selected && status === 'idle' ? (hovered ? 'border-[hsl(var(--border))] shadow-lg' : 'border-[hsl(var(--border))] shadow-md') : ''}
+          ${resizing ? "" : "transition-all duration-300"}
+          ${running ? "border-blue-500 animate-pulse-subtle" : ""}
+          ${!running && selected ? "border-blue-500 shadow-[0_0_20px_rgba(96,165,250,.25)] ring-1 ring-blue-500/30" : ""}
+          ${!running && !selected && status === "confirmed" ? "border-green-500/70" : ""}
+          ${!running && !selected && status === "unconfirmed" ? "border-orange-500/70" : ""}
+          ${!running && !selected && status === "error" ? "border-red-500/70" : ""}
+          ${!running && !selected && status === "idle" ? (hovered ? "border-[hsl(var(--border))] shadow-lg" : "border-[hsl(var(--border))] shadow-md") : ""}
         `}
         style={{ width: savedWidth, minHeight: savedHeight, fontSize: 13 }}
       >
-
-      {/* ── Title bar ──────────── */}
-      <div className={`flex items-center gap-1.5 px-3 py-2 select-none
-        ${running ? 'bg-blue-500/10' : status === 'confirmed' ? 'bg-green-500/8' : status === 'error' ? 'bg-red-500/8' : ''}`}>
-        <span className={`w-2 h-2 rounded-full flex-shrink-0
-          ${running ? 'bg-blue-500 animate-pulse' :
-            status === 'confirmed' ? 'bg-green-500' :
-            status === 'error' ? 'bg-red-500' :
-            status === 'unconfirmed' ? 'bg-orange-500' :
-            'bg-[hsl(var(--muted-foreground))] opacity-30'}`} />
-        {NodeIcon && (
-          <div className="rounded-md bg-primary/10 p-1 flex-shrink-0">
-            <NodeIcon className="w-3.5 h-3.5 text-primary" />
-          </div>
-        )}
-        <span className="font-semibold text-[13px] truncate">{nodeLabel}</span>
-        <span className="text-[10px] text-[hsl(var(--muted-foreground))] opacity-50 font-mono flex-shrink-0">{shortId}</span>
-      </div>
-
-      {/* ── Running status bar ── */}
-      {running && (
-        <div className="px-3 py-1.5 bg-blue-500/5">
-          <div className="flex items-center gap-2 mb-1">
-            <svg className="animate-spin flex-shrink-0 text-blue-400" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" />
-            </svg>
-            <span className="text-[11px] text-blue-400 font-medium flex-1">
-              {progress?.message || t('workflow.running', 'Running...')}
-            </span>
-            {progress && <span className="text-[10px] text-blue-400/70">{Math.round(progress.progress)}%</span>}
-          </div>
-          <div className="h-1.5 rounded-full bg-blue-500/20 overflow-hidden">
-            <div className="h-full bg-blue-500 transition-all duration-300 ease-out rounded-full"
-              style={{ width: `${progress?.progress ?? 0}%` }} />
-          </div>
+        {/* ── Title bar ──────────── */}
+        <div
+          className={`flex items-center gap-1.5 px-3 py-2 select-none
+        ${running ? "bg-blue-500/10" : status === "confirmed" ? "bg-green-500/8" : status === "error" ? "bg-red-500/8" : ""}`}
+        >
+          <span
+            className={`w-2 h-2 rounded-full flex-shrink-0
+          ${
+            running
+              ? "bg-blue-500 animate-pulse"
+              : status === "confirmed"
+                ? "bg-green-500"
+                : status === "error"
+                  ? "bg-red-500"
+                  : status === "unconfirmed"
+                    ? "bg-orange-500"
+                    : "bg-[hsl(var(--muted-foreground))] opacity-30"
+          }`}
+          />
+          {NodeIcon && (
+            <div className="rounded-md bg-primary/10 p-1 flex-shrink-0">
+              <NodeIcon className="w-3.5 h-3.5 text-primary" />
+            </div>
+          )}
+          <span className="font-semibold text-[13px] truncate">
+            {nodeLabel}
+          </span>
+          <span className="text-[10px] text-[hsl(var(--muted-foreground))] opacity-50 font-mono flex-shrink-0">
+            {shortId}
+          </span>
         </div>
-      )}
 
-      {/* ── Error details + Retry ── */}
-      {status === 'error' && errorMessage && (
-        <div className="px-3 py-1.5 bg-red-500/5">
-          <div className="flex items-start gap-1.5 p-2 rounded-lg bg-red-500/10 border border-red-500/20">
-            <span className="text-red-400 text-[10px] mt-0.5 flex-shrink-0">⚠</span>
-            <span className="text-[10px] text-red-400/90 leading-tight line-clamp-3 break-words flex-1" title={errorMessage}>
-              {errorMessage}
-            </span>
-            <button
-              onClick={(e) => { e.stopPropagation(); if (workflowId) retryNode(workflowId, id) }}
-              className="text-[10px] text-red-400 font-medium hover:text-red-300 transition-colors flex items-center gap-1 flex-shrink-0 ml-1"
-              title={t('workflow.retry', 'Retry')}
-            >
-              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+        {/* ── Running status bar ── */}
+        {running && (
+          <div className="px-3 py-1.5 bg-blue-500/5">
+            <div className="flex items-center gap-2 mb-1">
+              <svg
+                className="animate-spin flex-shrink-0 text-blue-400"
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  strokeDasharray="60"
+                  strokeDashoffset="20"
+                />
               </svg>
-              Retry
-            </button>
+              <span className="text-[11px] text-blue-400 font-medium flex-1">
+                {progress?.message || t("workflow.running", "Running...")}
+              </span>
+              {progress && (
+                <span className="text-[10px] text-blue-400/70">
+                  {Math.round(progress.progress)}%
+                </span>
+              )}
+            </div>
+            <div className="h-1.5 rounded-full bg-blue-500/20 overflow-hidden">
+              <div
+                className="h-full bg-blue-500 transition-all duration-300 ease-out rounded-full"
+                style={{ width: `${progress?.progress ?? 0}%` }}
+              />
+            </div>
           </div>
-        </div>
-      )}
-
-      {/* ── Body ───────────────────────────────────────────────────── */}
-      <CustomNodeBody
-        id={id}
-        data={data}
-        status={status}
-        edges={edges}
-        connectedSet={connectedSet}
-        inputDefs={inputDefs}
-        paramDefs={defParams}
-        isAITask={isAITask}
-        isPreviewNode={isPreviewNode}
-        currentModelId={currentModelId}
-        currentModel={currentModel}
-        storeModels={storeModels}
-        getModelById={getModelById}
-        usePlaygroundForm={usePlaygroundForm}
-        visibleFormFields={visibleFormFields}
-        hiddenFormFields={hiddenFormFields}
-        enabledHiddenFields={enabledHiddenFields}
-        setEnabledHiddenFields={setEnabledHiddenFields}
-        orderedVisibleParams={orderedVisibleParams}
-        optionalParams={optionalParams}
-        showOptional={showOptional}
-        setShowOptional={setShowOptional}
-        formValues={formValues}
-        resultGroups={resultGroups}
-        setParam={setParam}
-        updateNodeParams={updateNodeParams}
-        openPreview={openPreview}
-        handleInlineSelectModel={handleInlineSelectModel}
-        handleWorkflowUploadFile={handleWorkflowUploadFile}
-        localizeInputLabel={localizeInputLabel}
-        localizeParamLabel={localizeParamLabel}
-        localizeParamDescription={localizeParamDescription}
-        segmentPointPickerOpen={segmentPointPickerOpen}
-        setSegmentPointPickerOpen={setSegmentPointPickerOpen}
-        ensureWorkflowId={ensureWorkflowId}
-        inlineInputPreviewUrl={inlineInputPreviewUrl}
-        inlinePreviewIsImage={inlinePreviewIsImage}
-        inlinePreviewIsVideo={inlinePreviewIsVideo}
-        inlinePreviewIsAudio={inlinePreviewIsAudio}
-        inlinePreviewIs3D={inlinePreviewIs3D}
-        resultsExpanded={resultsExpanded}
-        setResultsExpanded={setResultsExpanded}
-      />
+        )}
 
+        {/* ── Error details + Retry ── */}
+        {status === "error" && errorMessage && (
+          <div className="px-3 py-1.5 bg-red-500/5">
+            <div className="flex items-start gap-1.5 p-2 rounded-lg bg-red-500/10 border border-red-500/20">
+              <span className="text-red-400 text-[10px] mt-0.5 flex-shrink-0">
+                ⚠
+              </span>
+              <span
+                className="text-[10px] text-red-400/90 leading-tight line-clamp-3 break-words flex-1"
+                title={errorMessage}
+              >
+                {errorMessage}
+              </span>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (workflowId) retryNode(workflowId, id);
+                }}
+                className="text-[10px] text-red-400 font-medium hover:text-red-300 transition-colors flex items-center gap-1 flex-shrink-0 ml-1"
+                title={t("workflow.retry", "Retry")}
+              >
+                <svg
+                  width="10"
+                  height="10"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="23 4 23 10 17 10" />
+                  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                </svg>
+                Retry
+              </button>
+            </div>
+          </div>
+        )}
 
-      {/* ── Resize handles — 4 edges + 4 corners ────────────────── */}
-      {selected && <>
-      <div onMouseDown={e => onEdgeResizeStart(e,  1,  0)} className="nodrag absolute top-2 right-0 bottom-2 w-[5px] cursor-ew-resize z-20 hover:bg-blue-500/20" />
-      <div onMouseDown={e => onEdgeResizeStart(e, -1,  0)} className="nodrag absolute top-2 left-0  bottom-2 w-[5px] cursor-ew-resize z-20 hover:bg-blue-500/20" />
-      <div onMouseDown={e => onEdgeResizeStart(e,  0,  1)} className="nodrag absolute bottom-0 left-2 right-2  h-[5px] cursor-ns-resize z-20 hover:bg-blue-500/20" />
-      <div onMouseDown={e => onEdgeResizeStart(e,  0, -1)} className="nodrag absolute top-0    left-2 right-2  h-[5px] cursor-ns-resize z-20 hover:bg-blue-500/20" />
-      <div onMouseDown={e => onEdgeResizeStart(e,  1,  1)} className="nodrag absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-30" />
-      <div onMouseDown={e => onEdgeResizeStart(e, -1,  1)} className="nodrag absolute bottom-0 left-0  w-3 h-3 cursor-sw-resize z-30" />
-      <div onMouseDown={e => onEdgeResizeStart(e,  1, -1)} className="nodrag absolute top-0    right-0 w-3 h-3 cursor-ne-resize z-30" />
-      <div onMouseDown={e => onEdgeResizeStart(e, -1, -1)} className="nodrag absolute top-0    left-0  w-3 h-3 cursor-nw-resize z-30" />
-      </>}
+        {/* ── Body ───────────────────────────────────────────────────── */}
+        <CustomNodeBody
+          id={id}
+          data={data}
+          status={status}
+          edges={edges}
+          connectedSet={connectedSet}
+          inputDefs={inputDefs}
+          paramDefs={defParams}
+          isAITask={isAITask}
+          isPreviewNode={isPreviewNode}
+          currentModelId={currentModelId}
+          currentModel={currentModel}
+          storeModels={storeModels}
+          getModelById={getModelById}
+          usePlaygroundForm={usePlaygroundForm}
+          visibleFormFields={visibleFormFields}
+          hiddenFormFields={hiddenFormFields}
+          enabledHiddenFields={enabledHiddenFields}
+          setEnabledHiddenFields={setEnabledHiddenFields}
+          orderedVisibleParams={orderedVisibleParams}
+          optionalParams={optionalParams}
+          showOptional={showOptional}
+          setShowOptional={setShowOptional}
+          formValues={formValues}
+          resultGroups={resultGroups}
+          setParam={setParam}
+          updateNodeParams={updateNodeParams}
+          openPreview={openPreview}
+          handleInlineSelectModel={handleInlineSelectModel}
+          handleWorkflowUploadFile={handleWorkflowUploadFile}
+          localizeInputLabel={localizeInputLabel}
+          localizeParamLabel={localizeParamLabel}
+          localizeParamDescription={localizeParamDescription}
+          segmentPointPickerOpen={segmentPointPickerOpen}
+          setSegmentPointPickerOpen={setSegmentPointPickerOpen}
+          ensureWorkflowId={ensureWorkflowId}
+          inlineInputPreviewUrl={inlineInputPreviewUrl}
+          inlinePreviewIsImage={inlinePreviewIsImage}
+          inlinePreviewIsVideo={inlinePreviewIsVideo}
+          inlinePreviewIsAudio={inlinePreviewIsAudio}
+          inlinePreviewIs3D={inlinePreviewIs3D}
+          resultsExpanded={resultsExpanded}
+          setResultsExpanded={setResultsExpanded}
+        />
+
+        {/* ── Resize handles — 4 edges + 4 corners ────────────────── */}
+        {selected && (
+          <>
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, 1, 0)}
+              className="nodrag absolute top-2 right-0 bottom-2 w-[5px] cursor-ew-resize z-20 hover:bg-blue-500/20"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, -1, 0)}
+              className="nodrag absolute top-2 left-0  bottom-2 w-[5px] cursor-ew-resize z-20 hover:bg-blue-500/20"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, 0, 1)}
+              className="nodrag absolute bottom-0 left-2 right-2  h-[5px] cursor-ns-resize z-20 hover:bg-blue-500/20"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, 0, -1)}
+              className="nodrag absolute top-0    left-2 right-2  h-[5px] cursor-ns-resize z-20 hover:bg-blue-500/20"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, 1, 1)}
+              className="nodrag absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-30"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, -1, 1)}
+              className="nodrag absolute bottom-0 left-0  w-3 h-3 cursor-sw-resize z-30"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, 1, -1)}
+              className="nodrag absolute top-0    right-0 w-3 h-3 cursor-ne-resize z-30"
+            />
+            <div
+              onMouseDown={(e) => onEdgeResizeStart(e, -1, -1)}
+              className="nodrag absolute top-0    left-0  w-3 h-3 cursor-nw-resize z-30"
+            />
+          </>
+        )}
       </div>
 
       {/* ── Output handle — placed on outer div so React Flow positions it correctly ───── */}
-      <Handle type="source" position={Position.Right} id="output"
+      <Handle
+        type="source"
+        position={Position.Right}
+        id="output"
         style={{ ...handleRight(), top: 22 }}
-        title={t('workflow.output', 'Output')} />
-      <div className="absolute top-[15px] right-5 text-[10px] font-medium text-primary/60 select-none">{t('workflow.outputLowercase', 'output')}</div>
+        title={t("workflow.output", "Output")}
+      />
+      <div className="absolute top-[15px] right-5 text-[10px] font-medium text-primary/60 select-none">
+        {t("workflow.outputLowercase", "output")}
+      </div>
     </div>
-  )
+  );
 }
 
-export const CustomNode = memo(CustomNodeComponent)
-export type { CustomNodeData }
+export const CustomNode = memo(CustomNodeComponent);
+export type { CustomNodeData };
diff --git a/src/workflow/components/canvas/custom-node/CustomNodeBody.tsx b/src/workflow/components/canvas/custom-node/CustomNodeBody.tsx
index 425bc36f..d4fc0e54 100644
--- a/src/workflow/components/canvas/custom-node/CustomNodeBody.tsx
+++ b/src/workflow/components/canvas/custom-node/CustomNodeBody.tsx
@@ -6,128 +6,222 @@
  * schema params, input ports, segment picker, defParams,
  * inline preview, and results panel.
  */
-import { type Dispatch, type SetStateAction } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useWorkflowStore } from '../../../stores/workflow.store'
-import { SegmentPointPicker, type SegmentPoint } from '../../SegmentPointPicker'
-import { MousePointer2, ChevronRight, ChevronDown } from 'lucide-react'
-import { getSingleImageFromValues } from '@/lib/schemaToForm'
-import { convertDesktopModel } from '../../../lib/model-converter'
-import type { ParamDefinition, PortDefinition, ModelParamSchema, WaveSpeedModel } from '@/workflow/types/node-defs'
-import type { NodeStatus } from '@/workflow/types/execution'
-import { ResultsPanel } from '../../panels/ResultsPanel'
-import { FormField } from '@/components/playground/FormField'
-import { ModelSelector } from '@/components/playground/ModelSelector'
-import type { FormFieldConfig } from '@/lib/schemaToForm'
-import type { Model } from '@/types/model'
+import { type Dispatch, type SetStateAction } from "react";
+import { useTranslation } from "react-i18next";
+import { useWorkflowStore } from "../../../stores/workflow.store";
+import {
+  SegmentPointPicker,
+  type SegmentPoint,
+} from "../../SegmentPointPicker";
+import { MousePointer2, ChevronRight, ChevronDown } from "lucide-react";
+import { getSingleImageFromValues } from "@/lib/schemaToForm";
+import { convertDesktopModel } from "../../../lib/model-converter";
+import type {
+  ParamDefinition,
+  PortDefinition,
+  ModelParamSchema,
+  WaveSpeedModel,
+} from "@/workflow/types/node-defs";
+import type { NodeStatus } from "@/workflow/types/execution";
+import { ResultsPanel } from "../../panels/ResultsPanel";
+import { FormField } from "@/components/playground/FormField";
+import { ModelSelector } from "@/components/playground/ModelSelector";
+import type { FormFieldConfig } from "@/lib/schemaToForm";
+import type { Model } from "@/types/model";
 
-import { type CustomNodeData, ML_FREE_TOOLS, paramDefToFormFieldConfig, portToFormFieldConfig } from './CustomNodeTypes'
-import { HandleAnchor } from './CustomNodeHandleAnchor'
-import { Row, LinkedBadge, ConnectedInputControl, Tip, Inline3DViewer } from './CustomNodePrimitives'
-import { ParamRow, MediaRow, LoraRow, JsonRow, DefParamControl, InputPortControl } from './CustomNodeParamControls'
-import { MediaUploadBody, TextInputBody } from './CustomNodeInputBodies'
+import {
+  type CustomNodeData,
+  ML_FREE_TOOLS,
+  paramDefToFormFieldConfig,
+  portToFormFieldConfig,
+} from "./CustomNodeTypes";
+import { HandleAnchor } from "./CustomNodeHandleAnchor";
+import {
+  Row,
+  LinkedBadge,
+  ConnectedInputControl,
+  Tip,
+  Inline3DViewer,
+} from "./CustomNodePrimitives";
+import {
+  ParamRow,
+  MediaRow,
+  LoraRow,
+  JsonRow,
+  DefParamControl,
+  InputPortControl,
+} from "./CustomNodeParamControls";
+import { MediaUploadBody, TextInputBody } from "./CustomNodeInputBodies";
 
 export interface CustomNodeBodyProps {
-  id: string
-  data: CustomNodeData
-  status: NodeStatus
-  edges: Array<{ id: string; source: string; target: string; targetHandle?: string | null }>
-  connectedSet: Set<string>
-  inputDefs: PortDefinition[]
-  paramDefs: ParamDefinition[]
-  isAITask: boolean
-  isPreviewNode: boolean
-  currentModelId: string
-  currentModel: Model | undefined
-  storeModels: Model[]
-  getModelById: (id: string) => Model | undefined
-  usePlaygroundForm: boolean
-  visibleFormFields: FormFieldConfig[]
-  hiddenFormFields: FormFieldConfig[]
-  enabledHiddenFields: Set<string>
-  setEnabledHiddenFields: Dispatch<SetStateAction<Set<string>>>
-  orderedVisibleParams: ModelParamSchema[]
-  optionalParams: ModelParamSchema[]
-  showOptional: boolean
-  setShowOptional: Dispatch<SetStateAction<boolean>>
-  formValues: Record<string, unknown>
-  resultGroups: unknown[]
-  setParam: (key: string, value: unknown) => void
-  updateNodeParams: (nodeId: string, params: Record<string, unknown>) => void
-  openPreview: (src: string) => void
-  handleInlineSelectModel: (model: WaveSpeedModel) => void
-  handleWorkflowUploadFile: (file: File) => Promise<string>
-  localizeInputLabel: (key: string, fallback: string) => string
-  localizeParamLabel: (key: string, fallback: string) => string
-  localizeParamDescription: (key: string, fallback?: string) => string | undefined
-  segmentPointPickerOpen: boolean
-  setSegmentPointPickerOpen: Dispatch<SetStateAction<boolean>>
-  ensureWorkflowId: () => Promise<string | null | undefined>
-  inlineInputPreviewUrl: string
-  inlinePreviewIsImage: boolean
-  inlinePreviewIsVideo: boolean
-  inlinePreviewIsAudio: boolean
-  inlinePreviewIs3D: boolean
-  resultsExpanded: boolean
-  setResultsExpanded: Dispatch<SetStateAction<boolean>>
+  id: string;
+  data: CustomNodeData;
+  status: NodeStatus;
+  edges: Array<{
+    id: string;
+    source: string;
+    target: string;
+    targetHandle?: string | null;
+  }>;
+  connectedSet: Set<string>;
+  inputDefs: PortDefinition[];
+  paramDefs: ParamDefinition[];
+  isAITask: boolean;
+  isPreviewNode: boolean;
+  currentModelId: string;
+  currentModel: Model | undefined;
+  storeModels: Model[];
+  getModelById: (id: string) => Model | undefined;
+  usePlaygroundForm: boolean;
+  visibleFormFields: FormFieldConfig[];
+  hiddenFormFields: FormFieldConfig[];
+  enabledHiddenFields: Set<string>;
+  setEnabledHiddenFields: Dispatch<SetStateAction<Set<string>>>;
+  orderedVisibleParams: ModelParamSchema[];
+  optionalParams: ModelParamSchema[];
+  showOptional: boolean;
+  setShowOptional: Dispatch<SetStateAction<boolean>>;
+  formValues: Record<string, unknown>;
+  resultGroups: unknown[];
+  setParam: (key: string, value: unknown) => void;
+  updateNodeParams: (nodeId: string, params: Record<string, unknown>) => void;
+  openPreview: (src: string) => void;
+  handleInlineSelectModel: (model: WaveSpeedModel) => void;
+  handleWorkflowUploadFile: (file: File) => Promise<string>;
+  localizeInputLabel: (key: string, fallback: string) => string;
+  localizeParamLabel: (key: string, fallback: string) => string;
+  localizeParamDescription: (
+    key: string,
+    fallback?: string,
+  ) => string | undefined;
+  segmentPointPickerOpen: boolean;
+  setSegmentPointPickerOpen: Dispatch<SetStateAction<boolean>>;
+  ensureWorkflowId: () => Promise<string | null | undefined>;
+  inlineInputPreviewUrl: string;
+  inlinePreviewIsImage: boolean;
+  inlinePreviewIsVideo: boolean;
+  inlinePreviewIsAudio: boolean;
+  inlinePreviewIs3D: boolean;
+  resultsExpanded: boolean;
+  setResultsExpanded: Dispatch<SetStateAction<boolean>>;
 }
 
 export function CustomNodeBody(props: CustomNodeBodyProps) {
   const {
-    id, data, status, edges, connectedSet, inputDefs, paramDefs,
-    isAITask, isPreviewNode, currentModelId, currentModel,
-    storeModels, getModelById,
-    usePlaygroundForm, visibleFormFields, hiddenFormFields,
-    enabledHiddenFields, setEnabledHiddenFields,
-    orderedVisibleParams, optionalParams, showOptional, setShowOptional,
-    formValues, resultGroups,
-    setParam, updateNodeParams, openPreview,
-    handleInlineSelectModel, handleWorkflowUploadFile,
-    localizeInputLabel, localizeParamLabel, localizeParamDescription,
-    segmentPointPickerOpen, setSegmentPointPickerOpen, ensureWorkflowId,
-    inlineInputPreviewUrl, inlinePreviewIsImage, inlinePreviewIsVideo,
-    inlinePreviewIsAudio, inlinePreviewIs3D,
-    resultsExpanded, setResultsExpanded,
-  } = props
-  const { t } = useTranslation()
+    id,
+    data,
+    status,
+    edges,
+    connectedSet,
+    inputDefs,
+    paramDefs,
+    isAITask,
+    isPreviewNode,
+    currentModelId,
+    currentModel,
+    storeModels,
+    getModelById,
+    usePlaygroundForm,
+    visibleFormFields,
+    hiddenFormFields,
+    enabledHiddenFields,
+    setEnabledHiddenFields,
+    orderedVisibleParams,
+    optionalParams,
+    showOptional,
+    setShowOptional,
+    formValues,
+    resultGroups,
+    setParam,
+    updateNodeParams,
+    openPreview,
+    handleInlineSelectModel,
+    handleWorkflowUploadFile,
+    localizeInputLabel,
+    localizeParamLabel,
+    localizeParamDescription,
+    segmentPointPickerOpen,
+    setSegmentPointPickerOpen,
+    ensureWorkflowId,
+    inlineInputPreviewUrl,
+    inlinePreviewIsImage,
+    inlinePreviewIsVideo,
+    inlinePreviewIsAudio,
+    inlinePreviewIs3D,
+    resultsExpanded,
+    setResultsExpanded,
+  } = props;
+  const { t } = useTranslation();
 
   return (
     <div className="px-1 py-2 space-y-px">
       {/* Free-tool ML model download hint */}
-      {status === 'idle' && resultGroups.length === 0 && ML_FREE_TOOLS.has(data.nodeType) && (
-        <div className="mx-3 mb-1 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20">
-          <svg className="flex-shrink-0 text-amber-400" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
-          </svg>
-          <span className="text-[10px] text-amber-400/90 leading-tight">
-            {t('workflow.freeToolModelHint', 'First run will auto-download the AI model, please wait')}
-          </span>
-        </div>
-      )}
+      {status === "idle" &&
+        resultGroups.length === 0 &&
+        ML_FREE_TOOLS.has(data.nodeType) && (
+          <div className="mx-3 mb-1 flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-amber-500/10 border border-amber-500/20">
+            <svg
+              className="flex-shrink-0 text-amber-400"
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg>
+            <span className="text-[10px] text-amber-400/90 leading-tight">
+              {t(
+                "workflow.freeToolModelHint",
+                "First run will auto-download the AI model, please wait",
+              )}
+            </span>
+          </div>
+        )}
 
       {/* Media Upload node — special UI */}
-      {data.nodeType === 'input/media-upload' && (
+      {data.nodeType === "input/media-upload" && (
         <>
-          {inputDefs.map(inp => {
-            const hid = `input-${inp.key}`
-            const conn = connectedSet.has(hid)
+          {inputDefs.map((inp) => {
+            const hid = `input-${inp.key}`;
+            const conn = connectedSet.has(hid);
             return (
               <Row key={inp.key}>
                 <div className="flex items-center justify-between gap-2 w-full">
-                  <span className={`text-xs whitespace-nowrap flex-shrink-0 ${conn ? 'text-green-400 font-semibold' : 'text-[hsl(var(--muted-foreground))]'}`}>
-                    <HandleAnchor id={hid} type="target" connected={conn} media />
+                  <span
+                    className={`text-xs whitespace-nowrap flex-shrink-0 ${conn ? "text-green-400 font-semibold" : "text-[hsl(var(--muted-foreground))]"}`}
+                  >
+                    <HandleAnchor
+                      id={hid}
+                      type="target"
+                      connected={conn}
+                      media
+                    />
                     {localizeInputLabel(inp.key, inp.label)}
                   </span>
-                  {conn && <ConnectedInputControl nodeId={id} handleId={hid} edges={edges} nodes={useWorkflowStore.getState().nodes} onPreview={openPreview} />}
+                  {conn && (
+                    <ConnectedInputControl
+                      nodeId={id}
+                      handleId={hid}
+                      edges={edges}
+                      nodes={useWorkflowStore.getState().nodes}
+                      onPreview={openPreview}
+                    />
+                  )}
                 </div>
               </Row>
-            )
+            );
           })}
-          {!connectedSet.has('input-media') && (
+          {!connectedSet.has("input-media") && (
             <MediaUploadBody
               params={data.params}
               onBatchChange={(updates) => {
-                updateNodeParams(id, { ...data.params, ...updates })
+                updateNodeParams(id, { ...data.params, ...updates });
               }}
               onPreview={openPreview}
             />
@@ -136,24 +230,24 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
       )}
 
       {/* Text Input node — special UI */}
-      {data.nodeType === 'input/text-input' && (
+      {data.nodeType === "input/text-input" && (
         <TextInputBody
           params={data.params}
           onParamChange={(updates) => {
-            updateNodeParams(id, { ...data.params, ...updates })
+            updateNodeParams(id, { ...data.params, ...updates });
           }}
         />
       )}
 
       {isAITask && (
-        <div className="nodrag px-3 mb-1" onClick={e => e.stopPropagation()}>
+        <div className="nodrag px-3 mb-1" onClick={(e) => e.stopPropagation()}>
           <ModelSelector
             models={storeModels}
             value={currentModelId || undefined}
             onChange={(modelId) => {
-              const storeModel = getModelById(modelId)
-              if (!storeModel) return
-              handleInlineSelectModel(convertDesktopModel(storeModel))
+              const storeModel = getModelById(modelId);
+              if (!storeModel) return;
+              handleInlineSelectModel(convertDesktopModel(storeModel));
             }}
           />
         </div>
@@ -163,71 +257,107 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
       {usePlaygroundForm && (
         <>
           {visibleFormFields.map((field) => {
-            const hid = `param-${field.name}`
-            const conn = connectedSet.has(hid)
-            const isMediaField = field.type === 'file' || field.type === 'file-array' || /image|video|audio|mask/i.test(field.name)
+            const hid = `param-${field.name}`;
+            const conn = connectedSet.has(hid);
+            const isMediaField =
+              field.type === "file" ||
+              field.type === "file-array" ||
+              /image|video|audio|mask/i.test(field.name);
             return (
               <Row key={field.name}>
                 {conn ? (
                   <div className="flex flex-col gap-1 w-full">
                     <div className="flex items-center">
                       <span className="text-sm font-medium leading-none">
-                        <HandleAnchor id={hid} type="target" connected={conn} media={isMediaField} />
+                        <HandleAnchor
+                          id={hid}
+                          type="target"
+                          connected={conn}
+                          media={isMediaField}
+                        />
                         {field.label || field.name}
-                        {field.required && <span className="ml-0.5 text-destructive">*</span>}
+                        {field.required && (
+                          <span className="ml-0.5 text-destructive">*</span>
+                        )}
                       </span>
                     </div>
-                    {isMediaField
-                      ? <ConnectedInputControl nodeId={id} handleId={hid} edges={edges} nodes={useWorkflowStore.getState().nodes} onPreview={openPreview} />
-                      : <LinkedBadge
-                          nodeId={id}
-                          handleId={hid}
-                          edges={edges}
-                          nodes={useWorkflowStore.getState().nodes}
-                          onDisconnect={() => {
-                            const edge = edges.find(e => e.target === id && e.targetHandle === hid)
-                            if (edge) useWorkflowStore.getState().removeEdge(edge.id)
-                          }}
-                        />
-                    }
+                    {isMediaField ? (
+                      <ConnectedInputControl
+                        nodeId={id}
+                        handleId={hid}
+                        edges={edges}
+                        nodes={useWorkflowStore.getState().nodes}
+                        onPreview={openPreview}
+                      />
+                    ) : (
+                      <LinkedBadge
+                        nodeId={id}
+                        handleId={hid}
+                        edges={edges}
+                        nodes={useWorkflowStore.getState().nodes}
+                        onDisconnect={() => {
+                          const edge = edges.find(
+                            (e) => e.target === id && e.targetHandle === hid,
+                          );
+                          if (edge)
+                            useWorkflowStore.getState().removeEdge(edge.id);
+                        }}
+                      />
+                    )}
                   </div>
                 ) : (
-                  <div className="w-full min-w-0 nodrag" onClick={e => e.stopPropagation()}>
+                  <div
+                    className="w-full min-w-0 nodrag"
+                    onClick={(e) => e.stopPropagation()}
+                  >
                     <FormField
                       field={field}
                       value={formValues[field.name]}
                       onChange={(v) => setParam(field.name, v)}
                       modelType={currentModel?.type}
-                      imageValue={field.name === 'prompt' ? getSingleImageFromValues(formValues) : undefined}
+                      imageValue={
+                        field.name === "prompt"
+                          ? getSingleImageFromValues(formValues)
+                          : undefined
+                      }
                       formValues={formValues}
-                      handleAnchor={<HandleAnchor id={hid} type="target" connected={conn} media={isMediaField} />}
+                      handleAnchor={
+                        <HandleAnchor
+                          id={hid}
+                          type="target"
+                          connected={conn}
+                          media={isMediaField}
+                        />
+                      }
                     />
                   </div>
                 )}
               </Row>
-            )
+            );
           })}
           {hiddenFormFields.length > 0 && (
             <div className="space-y-2 px-3 py-1">
               {hiddenFormFields.map((field) => {
-                const isEnabled = enabledHiddenFields.has(field.name)
+                const isEnabled = enabledHiddenFields.has(field.name);
                 return (
                   <div key={field.name} className="space-y-1">
                     <button
                       type="button"
                       onClick={() => {
                         setEnabledHiddenFields((prev) => {
-                          const next = new Set(prev)
+                          const next = new Set(prev);
                           if (next.has(field.name)) {
-                            next.delete(field.name)
-                            setParam(field.name, undefined)
-                          } else next.add(field.name)
-                          return next
-                        })
+                            next.delete(field.name);
+                            setParam(field.name, undefined);
+                          } else next.add(field.name);
+                          return next;
+                        });
                       }}
                       className="flex items-center gap-2 px-2 py-1.5 rounded-md text-[11px] font-medium border border-[hsl(var(--border))] bg-[hsl(var(--background))] hover:bg-[hsl(var(--muted))] transition-colors"
                     >
-                      <span className={`w-2.5 h-2.5 rounded-full border-2 ${isEnabled ? 'bg-primary border-primary' : 'border-muted-foreground'}`} />
+                      <span
+                        className={`w-2.5 h-2.5 rounded-full border-2 ${isEnabled ? "bg-primary border-primary" : "border-muted-foreground"}`}
+                      />
                       {field.label}
                     </button>
                     {isEnabled && (
@@ -243,7 +373,7 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
                       </div>
                     )}
                   </div>
-                )
+                );
               })}
             </div>
           )}
@@ -251,203 +381,333 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
       )}
 
       {/* Fallback: schema-based ParamRow/MediaRow when not using Playground form */}
-      {!usePlaygroundForm && orderedVisibleParams.map(p => {
-        const hid = `param-${p.name}`
-        if (p.mediaType && p.fieldType !== 'loras') {
-          return (
-            <MediaRow key={p.name} nodeId={id} schema={p} value={data.params[p.name]}
-              connected={connectedSet.has(hid)} connectedSet={connectedSet}
-              edges={edges} nodes={useWorkflowStore.getState().nodes}
-              onChange={v => setParam(p.name, v)} onPreview={openPreview} />
-          )
-        }
-        if (p.fieldType === 'loras') {
-          return <LoraRow key={p.name} schema={p} value={data.params[p.name]} onChange={v => setParam(p.name, v)} />
-        }
-        if (p.fieldType === 'json') {
+      {!usePlaygroundForm &&
+        orderedVisibleParams.map((p) => {
+          const hid = `param-${p.name}`;
+          if (p.mediaType && p.fieldType !== "loras") {
+            return (
+              <MediaRow
+                key={p.name}
+                nodeId={id}
+                schema={p}
+                value={data.params[p.name]}
+                connected={connectedSet.has(hid)}
+                connectedSet={connectedSet}
+                edges={edges}
+                nodes={useWorkflowStore.getState().nodes}
+                onChange={(v) => setParam(p.name, v)}
+                onPreview={openPreview}
+              />
+            );
+          }
+          if (p.fieldType === "loras") {
+            return (
+              <LoraRow
+                key={p.name}
+                schema={p}
+                value={data.params[p.name]}
+                onChange={(v) => setParam(p.name, v)}
+              />
+            );
+          }
+          if (p.fieldType === "json") {
+            return (
+              <JsonRow
+                key={p.name}
+                nodeId={id}
+                schema={p}
+                value={data.params[p.name]}
+                connected={connectedSet.has(hid)}
+                edges={edges}
+                nodes={useWorkflowStore.getState().nodes}
+                onChange={(v) => setParam(p.name, v)}
+              />
+            );
+          }
           return (
-            <JsonRow key={p.name} nodeId={id} schema={p} value={data.params[p.name]}
+            <ParamRow
+              key={p.name}
+              nodeId={id}
+              schema={p}
+              value={data.params[p.name]}
               connected={connectedSet.has(hid)}
-              edges={edges} nodes={useWorkflowStore.getState().nodes}
-              onChange={v => setParam(p.name, v)} />
-          )
-        }
-        return (
-          <ParamRow key={p.name} nodeId={id} schema={p} value={data.params[p.name]}
-            connected={connectedSet.has(hid)}
-            edges={edges} nodes={useWorkflowStore.getState().nodes}
-            onDisconnect={() => {
-              const edge = edges.find(e => e.target === id && e.targetHandle === hid)
-              if (edge) useWorkflowStore.getState().removeEdge(edge.id)
-            }}
-            onChange={v => setParam(p.name, v)}
-            optimizerSettings={(data.params.__optimizerSettings as Record<string, unknown>) ?? {}}
-            onOptimizerSettingsChange={v => setParam('__optimizerSettings', v)} />
-        )
-      })}
+              edges={edges}
+              nodes={useWorkflowStore.getState().nodes}
+              onDisconnect={() => {
+                const edge = edges.find(
+                  (e) => e.target === id && e.targetHandle === hid,
+                );
+                if (edge) useWorkflowStore.getState().removeEdge(edge.id);
+              }}
+              onChange={(v) => setParam(p.name, v)}
+              optimizerSettings={
+                (data.params.__optimizerSettings as Record<string, unknown>) ??
+                {}
+              }
+              onOptimizerSettingsChange={(v) =>
+                setParam("__optimizerSettings", v)
+              }
+            />
+          );
+        })}
 
       {!usePlaygroundForm && optionalParams.length > 0 && (
         <>
           <div className="px-3 py-1">
-            <button onClick={e => { e.stopPropagation(); setShowOptional(!showOptional) }}
-              className="text-[10px] text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1">
-              <span className="text-[8px]">{showOptional ? '▼' : '▶'}</span>
-              {showOptional ? t('workflow.hide', 'Hide') : t('workflow.show', 'Show')} {optionalParams.length} {t('workflow.optional', 'optional')}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowOptional(!showOptional);
+              }}
+              className="text-[10px] text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+            >
+              <span className="text-[8px]">{showOptional ? "▼" : "▶"}</span>
+              {showOptional
+                ? t("workflow.hide", "Hide")
+                : t("workflow.show", "Show")}{" "}
+              {optionalParams.length} {t("workflow.optional", "optional")}
             </button>
           </div>
-          {showOptional && optionalParams.map(p => {
-            const hid = `param-${p.name}`
-            return (
-              <ParamRow key={p.name} nodeId={id} schema={p} value={data.params[p.name]}
-                connected={connectedSet.has(hid)}
-                edges={edges} nodes={useWorkflowStore.getState().nodes}
-                onDisconnect={() => {
-                  const edge = edges.find(e => e.target === id && e.targetHandle === hid)
-                  if (edge) useWorkflowStore.getState().removeEdge(edge.id)
-                }}
-                onChange={v => setParam(p.name, v)}
-                optimizerSettings={(data.params.__optimizerSettings as Record<string, unknown>) ?? {}}
-                onOptimizerSettingsChange={v => setParam('__optimizerSettings', v)} />
-            )
-          })}
+          {showOptional &&
+            optionalParams.map((p) => {
+              const hid = `param-${p.name}`;
+              return (
+                <ParamRow
+                  key={p.name}
+                  nodeId={id}
+                  schema={p}
+                  value={data.params[p.name]}
+                  connected={connectedSet.has(hid)}
+                  edges={edges}
+                  nodes={useWorkflowStore.getState().nodes}
+                  onDisconnect={() => {
+                    const edge = edges.find(
+                      (e) => e.target === id && e.targetHandle === hid,
+                    );
+                    if (edge) useWorkflowStore.getState().removeEdge(edge.id);
+                  }}
+                  onChange={(v) => setParam(p.name, v)}
+                  optimizerSettings={
+                    (data.params.__optimizerSettings as Record<
+                      string,
+                      unknown
+                    >) ?? {}
+                  }
+                  onOptimizerSettingsChange={(v) =>
+                    setParam("__optimizerSettings", v)
+                  }
+                />
+              );
+            })}
         </>
       )}
 
-      {inputDefs.map(inp => {
-        if (data.nodeType === 'input/media-upload') return null
-        const hid = `input-${inp.key}`
-        const conn = connectedSet.has(hid)
-        const portFieldConfig = portToFormFieldConfig(inp, data.nodeType)
-        const useFormFieldForPort = portFieldConfig != null && !conn
+      {inputDefs.map((inp) => {
+        if (data.nodeType === "input/media-upload") return null;
+        const hid = `input-${inp.key}`;
+        const conn = connectedSet.has(hid);
+        const portFieldConfig = portToFormFieldConfig(inp, data.nodeType);
+        const useFormFieldForPort = portFieldConfig != null && !conn;
         if (!isPreviewNode) {
           return (
             <Row key={inp.key}>
               <div className="flex items-center justify-between gap-2 w-full">
-                <span className={`text-xs whitespace-nowrap flex-shrink-0 ${conn ? 'text-green-400 font-semibold' : 'text-[hsl(var(--muted-foreground))]'}`}>
+                <span
+                  className={`text-xs whitespace-nowrap flex-shrink-0 ${conn ? "text-green-400 font-semibold" : "text-[hsl(var(--muted-foreground))]"}`}
+                >
                   <HandleAnchor id={hid} type="target" connected={conn} media />
-                  {localizeInputLabel(inp.key, inp.label)}{inp.required && <span className="text-red-400"> *</span>}
+                  {localizeInputLabel(inp.key, inp.label)}
+                  {inp.required && <span className="text-red-400"> *</span>}
                 </span>
-                {conn
-                  ? <ConnectedInputControl nodeId={id} handleId={hid} edges={edges} nodes={useWorkflowStore.getState().nodes} onPreview={openPreview} />
-                  : useFormFieldForPort
-                    ? <div className="flex-1 min-w-0 nodrag" onClick={e => e.stopPropagation()}>
-                        <FormField
-                          field={portFieldConfig}
-                          value={formValues[inp.key]}
-                          onChange={v => setParam(inp.key, v)}
-                          formValues={formValues}
-                          hideLabel
-                          onUploadFile={portFieldConfig.type === 'file' ? handleWorkflowUploadFile : undefined}
-                        />
-                      </div>
-                    : <div className="flex-1 min-w-0"><InputPortControl
-                        nodeId={id}
-                        port={inp}
-                        value={data.params[inp.key]}
-                        onChange={v => setParam(inp.key, v)}
-                        onPreview={openPreview}
-                        referenceImageUrl={data.nodeType === 'free-tool/image-eraser' && inp.key === 'mask_image' ? String(data.params.input ?? '') : undefined}
-                        showDrawMaskButton={data.nodeType === 'free-tool/image-eraser' && inp.key === 'mask_image'}
-                      /></div>}
+                {conn ? (
+                  <ConnectedInputControl
+                    nodeId={id}
+                    handleId={hid}
+                    edges={edges}
+                    nodes={useWorkflowStore.getState().nodes}
+                    onPreview={openPreview}
+                  />
+                ) : useFormFieldForPort ? (
+                  <div
+                    className="flex-1 min-w-0 nodrag"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <FormField
+                      field={portFieldConfig}
+                      value={formValues[inp.key]}
+                      onChange={(v) => setParam(inp.key, v)}
+                      formValues={formValues}
+                      hideLabel
+                      onUploadFile={
+                        portFieldConfig.type === "file"
+                          ? handleWorkflowUploadFile
+                          : undefined
+                      }
+                    />
+                  </div>
+                ) : (
+                  <div className="flex-1 min-w-0">
+                    <InputPortControl
+                      nodeId={id}
+                      port={inp}
+                      value={data.params[inp.key]}
+                      onChange={(v) => setParam(inp.key, v)}
+                      onPreview={openPreview}
+                      referenceImageUrl={
+                        data.nodeType === "free-tool/image-eraser" &&
+                        inp.key === "mask_image"
+                          ? String(data.params.input ?? "")
+                          : undefined
+                      }
+                      showDrawMaskButton={
+                        data.nodeType === "free-tool/image-eraser" &&
+                        inp.key === "mask_image"
+                      }
+                    />
+                  </div>
+                )}
               </div>
             </Row>
-          )
+          );
         }
 
         return (
           <Row key={inp.key}>
             <div className="w-full min-w-0 space-y-2">
               <div className="flex items-center justify-between gap-2">
-                <span className={`text-xs ${conn ? 'text-green-400 font-semibold' : 'text-[hsl(var(--muted-foreground))]'}`}>
+                <span
+                  className={`text-xs ${conn ? "text-green-400 font-semibold" : "text-[hsl(var(--muted-foreground))]"}`}
+                >
                   <HandleAnchor id={hid} type="target" connected={conn} media />
-                  {localizeInputLabel(inp.key, inp.label)}{inp.required && <span className="text-red-400"> *</span>}
+                  {localizeInputLabel(inp.key, inp.label)}
+                  {inp.required && <span className="text-red-400"> *</span>}
                 </span>
               </div>
-              {conn
-                ? <ConnectedInputControl nodeId={id} handleId={hid} edges={edges} nodes={useWorkflowStore.getState().nodes} onPreview={openPreview} showPreview={false} />
-                : useFormFieldForPort
-                  ? <div className="w-full min-w-0 nodrag" onClick={e => e.stopPropagation()}>
-                      <FormField
-                        field={portFieldConfig}
-                        value={formValues[inp.key]}
-                        onChange={v => setParam(inp.key, v)}
-                        formValues={formValues}
-                        hideLabel
-                        onUploadFile={portFieldConfig.type === 'file' ? handleWorkflowUploadFile : undefined}
-                      />
-                    </div>
-                  : <InputPortControl
-                      nodeId={id}
-                      port={inp}
-                      value={data.params[inp.key]}
-                      onChange={v => setParam(inp.key, v)}
-                      onPreview={openPreview}
-                      referenceImageUrl={data.nodeType === 'free-tool/image-eraser' && inp.key === 'mask_image' ? String(data.params.input ?? '') : undefined}
-                      showDrawMaskButton={data.nodeType === 'free-tool/image-eraser' && inp.key === 'mask_image'}
-                      showPreview={false}
-                    />}
+              {conn ? (
+                <ConnectedInputControl
+                  nodeId={id}
+                  handleId={hid}
+                  edges={edges}
+                  nodes={useWorkflowStore.getState().nodes}
+                  onPreview={openPreview}
+                  showPreview={false}
+                />
+              ) : useFormFieldForPort ? (
+                <div
+                  className="w-full min-w-0 nodrag"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <FormField
+                    field={portFieldConfig}
+                    value={formValues[inp.key]}
+                    onChange={(v) => setParam(inp.key, v)}
+                    formValues={formValues}
+                    hideLabel
+                    onUploadFile={
+                      portFieldConfig.type === "file"
+                        ? handleWorkflowUploadFile
+                        : undefined
+                    }
+                  />
+                </div>
+              ) : (
+                <InputPortControl
+                  nodeId={id}
+                  port={inp}
+                  value={data.params[inp.key]}
+                  onChange={(v) => setParam(inp.key, v)}
+                  onPreview={openPreview}
+                  referenceImageUrl={
+                    data.nodeType === "free-tool/image-eraser" &&
+                    inp.key === "mask_image"
+                      ? String(data.params.input ?? "")
+                      : undefined
+                  }
+                  showDrawMaskButton={
+                    data.nodeType === "free-tool/image-eraser" &&
+                    inp.key === "mask_image"
+                  }
+                  showPreview={false}
+                />
+              )}
             </div>
           </Row>
-        )
+        );
       })}
 
       {/* Segment Anything: Pick points by clicking */}
-      {data.nodeType === 'free-tool/segment-anything' && (
+      {data.nodeType === "free-tool/segment-anything" && (
         <div className="px-3 py-1">
           <div className="flex items-center justify-between gap-2 w-full">
             <span className="text-xs text-[hsl(var(--muted-foreground))] flex-shrink-0">
-              {t('workflow.pointsLabel')}
+              {t("workflow.pointsLabel")}
             </span>
             <button
               type="button"
-              title={String(data.params.input ?? '').trim() ? t('workflow.pickPoints') : t('workflow.pickPointsNeedInput')}
-              disabled={!String(data.params.input ?? '').trim()}
-              onClick={e => {
-                e.stopPropagation()
-                if (String(data.params.input ?? '').trim()) setSegmentPointPickerOpen(true)
+              title={
+                String(data.params.input ?? "").trim()
+                  ? t("workflow.pickPoints")
+                  : t("workflow.pickPointsNeedInput")
+              }
+              disabled={!String(data.params.input ?? "").trim()}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (String(data.params.input ?? "").trim())
+                  setSegmentPointPickerOpen(true);
               }}
               className={`nodrag flex-shrink-0 flex items-center gap-1.5 px-2 py-1 rounded-md border border-[hsl(var(--border))] text-xs transition-colors ${
-                String(data.params.input ?? '').trim()
-                  ? 'cursor-pointer bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
-                  : 'cursor-not-allowed opacity-50'
+                String(data.params.input ?? "").trim()
+                  ? "cursor-pointer bg-blue-500/15 text-blue-400 hover:bg-blue-500/25"
+                  : "cursor-not-allowed opacity-50"
               }`}
             >
               <MousePointer2 className="h-4 w-4" />
-              {t('workflow.pickPoints')}
+              {t("workflow.pickPoints")}
               {(() => {
                 try {
-                  const pts = data.params.__segmentPoints as string | undefined
-                  if (!pts) return null
-                  const arr = JSON.parse(pts) as SegmentPoint[]
+                  const pts = data.params.__segmentPoints as string | undefined;
+                  if (!pts) return null;
+                  const arr = JSON.parse(pts) as SegmentPoint[];
                   return Array.isArray(arr) && arr.length > 0 ? (
-                    <span className="text-[10px] opacity-75">({arr.length})</span>
-                  ) : null
+                    <span className="text-[10px] opacity-75">
+                      ({arr.length})
+                    </span>
+                  ) : null;
                 } catch {
-                  return null
+                  return null;
                 }
               })()}
             </button>
           </div>
-          {segmentPointPickerOpen && String(data.params.input ?? '').trim() && (
+          {segmentPointPickerOpen && String(data.params.input ?? "").trim() && (
             <SegmentPointPicker
               referenceImageUrl={String(data.params.input)}
               onComplete={async (points: SegmentPoint[], maskBlob?: Blob) => {
-                const newParams: Record<string, unknown> = { ...data.params, __segmentPoints: JSON.stringify(points) }
+                const newParams: Record<string, unknown> = {
+                  ...data.params,
+                  __segmentPoints: JSON.stringify(points),
+                };
                 if (maskBlob) {
                   try {
-                    const wfId = await ensureWorkflowId()
+                    const wfId = await ensureWorkflowId();
                     if (wfId) {
-                      const { storageIpc } = await import('../../../ipc/ipc-client')
-                      const arrBuf = await maskBlob.arrayBuffer()
-                      const localPath = await storageIpc.saveUploadedFile(wfId, id, 'segment-mask.png', arrBuf)
-                      newParams.__previewMask = `local-asset://${encodeURIComponent(localPath)}`
+                      const { storageIpc } =
+                        await import("../../../ipc/ipc-client");
+                      const arrBuf = await maskBlob.arrayBuffer();
+                      const localPath = await storageIpc.saveUploadedFile(
+                        wfId,
+                        id,
+                        "segment-mask.png",
+                        arrBuf,
+                      );
+                      newParams.__previewMask = `local-asset://${encodeURIComponent(localPath)}`;
                     }
                   } catch (e) {
-                    console.error('Failed to save segment mask:', e)
+                    console.error("Failed to save segment mask:", e);
                   }
                 }
-                updateNodeParams(id, newParams)
-                setSegmentPointPickerOpen(false)
+                updateNodeParams(id, newParams);
+                setSegmentPointPickerOpen(false);
               }}
               onClose={() => setSegmentPointPickerOpen(false)}
             />
@@ -456,100 +716,153 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
       )}
 
       {/* defParams */}
-      {data.nodeType !== 'input/media-upload' && data.nodeType !== 'input/text-input' && paramDefs.map(p => {
-        const hid = `param-${p.key}`
-        const canConnect = p.connectable !== false && p.dataType !== undefined
-        const conn = canConnect ? connectedSet.has(hid) : false
-        const fieldConfig = paramDefToFormFieldConfig(p, data.nodeType)
+      {data.nodeType !== "input/media-upload" &&
+        data.nodeType !== "input/text-input" &&
+        paramDefs.map((p) => {
+          const hid = `param-${p.key}`;
+          const canConnect =
+            p.connectable !== false && p.dataType !== undefined;
+          const conn = canConnect ? connectedSet.has(hid) : false;
+          const fieldConfig = paramDefToFormFieldConfig(p, data.nodeType);
+
+          if (fieldConfig) {
+            if (!canConnect) {
+              return (
+                <div
+                  key={p.key}
+                  className="px-3 py-1 nodrag"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <FormField
+                    field={fieldConfig}
+                    value={formValues[p.key]}
+                    onChange={(v) => setParam(p.key, v)}
+                    formValues={formValues}
+                  />
+                </div>
+              );
+            }
+            return (
+              <Row key={p.key}>
+                {conn ? (
+                  <div className="flex flex-col gap-1 w-full">
+                    <div className="flex items-center">
+                      <span className="text-sm font-medium leading-none">
+                        <HandleAnchor id={hid} type="target" connected={conn} />
+                        {localizeParamLabel(p.key, p.label)}
+                      </span>
+                    </div>
+                    <LinkedBadge
+                      nodeId={id}
+                      handleId={hid}
+                      edges={edges}
+                      nodes={useWorkflowStore.getState().nodes}
+                      onDisconnect={() => {
+                        const edge = edges.find(
+                          (e) => e.target === id && e.targetHandle === hid,
+                        );
+                        if (edge)
+                          useWorkflowStore.getState().removeEdge(edge.id);
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <div
+                    className="w-full min-w-0 nodrag"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <FormField
+                      field={fieldConfig}
+                      value={formValues[p.key]}
+                      onChange={(v) => setParam(p.key, v)}
+                      formValues={formValues}
+                      handleAnchor={
+                        <HandleAnchor id={hid} type="target" connected={conn} />
+                      }
+                    />
+                  </div>
+                )}
+              </Row>
+            );
+          }
 
-        if (fieldConfig) {
           if (!canConnect) {
             return (
-              <div key={p.key} className="px-3 py-1 nodrag" onClick={e => e.stopPropagation()}>
-                <FormField
-                  field={fieldConfig}
-                  value={formValues[p.key]}
-                  onChange={(v) => setParam(p.key, v)}
-                  formValues={formValues}
-                />
+              <div key={p.key} className="px-3 py-1">
+                <div className="flex items-center justify-between gap-2 w-full">
+                  <span className="text-xs text-[hsl(var(--muted-foreground))] flex-shrink-0">
+                    {localizeParamLabel(p.key, p.label)}
+                    {localizeParamDescription(p.key, p.description) && (
+                      <Tip
+                        text={String(
+                          localizeParamDescription(p.key, p.description),
+                        )}
+                      />
+                    )}
+                  </span>
+                  <DefParamControl
+                    nodeId={id}
+                    param={p}
+                    value={data.params[p.key]}
+                    onChange={(v) => setParam(p.key, v)}
+                  />
+                </div>
               </div>
-            )
+            );
           }
+
           return (
             <Row key={p.key}>
-              {conn ? (
-                <div className="flex flex-col gap-1 w-full">
-                  <div className="flex items-center">
-                    <span className="text-sm font-medium leading-none">
-                      <HandleAnchor id={hid} type="target" connected={conn} />
-                      {localizeParamLabel(p.key, p.label)}
-                    </span>
-                  </div>
+              <div className="flex items-center justify-between gap-2 w-full">
+                <span className="text-xs text-[hsl(var(--muted-foreground))] flex-shrink-0">
+                  <HandleAnchor id={hid} type="target" connected={conn} />
+                  {localizeParamLabel(p.key, p.label)}
+                  {localizeParamDescription(p.key, p.description) && (
+                    <Tip
+                      text={String(
+                        localizeParamDescription(p.key, p.description),
+                      )}
+                    />
+                  )}
+                </span>
+                {conn ? (
                   <LinkedBadge
                     nodeId={id}
                     handleId={hid}
                     edges={edges}
                     nodes={useWorkflowStore.getState().nodes}
                     onDisconnect={() => {
-                      const edge = edges.find(e => e.target === id && e.targetHandle === hid)
-                      if (edge) useWorkflowStore.getState().removeEdge(edge.id)
+                      const edge = edges.find(
+                        (e) => e.target === id && e.targetHandle === hid,
+                      );
+                      if (edge) useWorkflowStore.getState().removeEdge(edge.id);
                     }}
                   />
-                </div>
-              ) : (
-                <div className="w-full min-w-0 nodrag" onClick={e => e.stopPropagation()}>
-                  <FormField
-                    field={fieldConfig}
-                    value={formValues[p.key]}
+                ) : (
+                  <DefParamControl
+                    nodeId={id}
+                    param={p}
+                    value={data.params[p.key]}
                     onChange={(v) => setParam(p.key, v)}
-                    formValues={formValues}
-                    handleAnchor={<HandleAnchor id={hid} type="target" connected={conn} />}
                   />
-                </div>
-              )}
-            </Row>
-          )
-        }
-
-        if (!canConnect) {
-          return (
-            <div key={p.key} className="px-3 py-1">
-              <div className="flex items-center justify-between gap-2 w-full">
-                <span className="text-xs text-[hsl(var(--muted-foreground))] flex-shrink-0">
-                  {localizeParamLabel(p.key, p.label)}
-                  {localizeParamDescription(p.key, p.description) && <Tip text={String(localizeParamDescription(p.key, p.description))} />}
-                </span>
-                <DefParamControl nodeId={id} param={p} value={data.params[p.key]} onChange={v => setParam(p.key, v)} />
+                )}
               </div>
-            </div>
-          )
-        }
-
-        return (
-          <Row key={p.key}>
-            <div className="flex items-center justify-between gap-2 w-full">
-              <span className="text-xs text-[hsl(var(--muted-foreground))] flex-shrink-0">
-                <HandleAnchor id={hid} type="target" connected={conn} />
-                {localizeParamLabel(p.key, p.label)}
-                {localizeParamDescription(p.key, p.description) && <Tip text={String(localizeParamDescription(p.key, p.description))} />}
-              </span>
-              {conn
-                ? <LinkedBadge nodeId={id} handleId={hid} edges={edges} nodes={useWorkflowStore.getState().nodes} onDisconnect={() => { const edge = edges.find(e => e.target === id && e.targetHandle === hid); if (edge) useWorkflowStore.getState().removeEdge(edge.id) }} />
-                : <DefParamControl nodeId={id} param={p} value={data.params[p.key]} onChange={v => setParam(p.key, v)} />}
-            </div>
-          </Row>
-        )
-      })}
+            </Row>
+          );
+        })}
 
       {/* Unified input preview area */}
       {isPreviewNode && inlineInputPreviewUrl && (
         <div className="px-3 pb-2">
-          <div className="mt-1" onClick={e => e.stopPropagation()}>
+          <div className="mt-1" onClick={(e) => e.stopPropagation()}>
             {inlinePreviewIsImage && (
               <img
                 src={inlineInputPreviewUrl}
                 alt=""
-                onClick={e => { e.stopPropagation(); openPreview(inlineInputPreviewUrl) }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  openPreview(inlineInputPreviewUrl);
+                }}
                 className="w-full max-h-[4096px] rounded-lg border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow bg-black/5"
               />
             )}
@@ -561,7 +874,11 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
               />
             )}
             {inlinePreviewIsAudio && (
-              <audio src={inlineInputPreviewUrl} controls className="w-full max-h-10 rounded-lg border border-[hsl(var(--border))]" />
+              <audio
+                src={inlineInputPreviewUrl}
+                controls
+                className="w-full max-h-10 rounded-lg border border-[hsl(var(--border))]"
+              />
             )}
             {inlinePreviewIs3D && (
               <Inline3DViewer
@@ -574,15 +891,19 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
       )}
 
       {/* Results — at bottom of card, collapsed by default */}
-      {data.nodeType !== 'annotation' && (
+      {data.nodeType !== "annotation" && (
         <div className="nodrag nowheel min-h-0 flex flex-col flex-1 mt-2 border-t border-border/50 pt-2 select-text">
           <button
             type="button"
-            onClick={() => setResultsExpanded(prev => !prev)}
+            onClick={() => setResultsExpanded((prev) => !prev)}
             className="flex items-center gap-1.5 w-full text-left py-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
           >
-            {resultsExpanded ? <ChevronDown className="w-3.5 h-3.5 shrink-0" /> : <ChevronRight className="w-3.5 h-3.5 shrink-0" />}
-            <span>{t('workflow.results', 'Results')}</span>
+            {resultsExpanded ? (
+              <ChevronDown className="w-3.5 h-3.5 shrink-0" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5 shrink-0" />
+            )}
+            <span>{t("workflow.results", "Results")}</span>
             {resultGroups.length > 0 && (
               <span className="ml-1 text-[10px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary tabular-nums">
                 {resultGroups.length}
@@ -597,6 +918,5 @@ export function CustomNodeBody(props: CustomNodeBodyProps) {
         </div>
       )}
     </div>
-  )
+  );
 }
-
diff --git a/src/workflow/components/canvas/custom-node/CustomNodeHandleAnchor.tsx b/src/workflow/components/canvas/custom-node/CustomNodeHandleAnchor.tsx
index 905902de..b92b48a4 100644
--- a/src/workflow/components/canvas/custom-node/CustomNodeHandleAnchor.tsx
+++ b/src/workflow/components/canvas/custom-node/CustomNodeHandleAnchor.tsx
@@ -12,94 +12,116 @@
  * after DOM mutations but *before* paint, so the handle is already in its
  * final position when React Flow reads getBoundingClientRect().
  */
-import React, { useRef, useLayoutEffect, useState } from 'react'
-import { Handle, Position } from 'reactflow'
-import { HANDLE_SIZE } from './CustomNodeTypes'
+import React, { useRef, useLayoutEffect, useState } from "react";
+import { Handle, Position } from "reactflow";
+import { HANDLE_SIZE } from "./CustomNodeTypes";
 
 /* ── handle appearance ─────────────────────────────────────────────── */
 
-export const handleLeft = (_connected: boolean, media = false): React.CSSProperties => ({
-  width: HANDLE_SIZE, height: HANDLE_SIZE,
-  borderRadius: '50%',
-  border: `2px solid ${media ? 'hsl(142 71% 45%)' : 'hsl(var(--primary))'}`,
+export const handleLeft = (
+  _connected: boolean,
+  media = false,
+): React.CSSProperties => ({
+  width: HANDLE_SIZE,
+  height: HANDLE_SIZE,
+  borderRadius: "50%",
+  border: `2px solid ${media ? "hsl(142 71% 45%)" : "hsl(var(--primary))"}`,
   background: _connected
-    ? (media ? 'hsl(142 71% 45%)' : 'hsl(var(--primary))')
-    : 'hsl(var(--card))',
+    ? media
+      ? "hsl(142 71% 45%)"
+      : "hsl(var(--primary))"
+    : "hsl(var(--card))",
   zIndex: 40,
-  transition: 'background 150ms ease, box-shadow 150ms ease',
+  transition: "background 150ms ease, box-shadow 150ms ease",
   boxShadow: _connected
-    ? `0 0 0 2px ${media ? 'hsla(142,71%,45%,.2)' : 'hsla(var(--primary)/.2)'}`
-    : 'none',
-})
+    ? `0 0 0 2px ${media ? "hsla(142,71%,45%,.2)" : "hsla(var(--primary)/.2)"}`
+    : "none",
+});
 
 export const handleRight = (): React.CSSProperties => ({
-  width: HANDLE_SIZE, height: HANDLE_SIZE,
-  borderRadius: '50%',
-  border: '2px solid hsl(var(--primary))',
-  background: 'hsl(var(--primary))',
+  width: HANDLE_SIZE,
+  height: HANDLE_SIZE,
+  borderRadius: "50%",
+  border: "2px solid hsl(var(--primary))",
+  background: "hsl(var(--primary))",
   zIndex: 40,
-  boxShadow: '0 0 0 2px hsla(var(--primary)/.2)',
-})
+  boxShadow: "0 0 0 2px hsla(var(--primary)/.2)",
+});
 
 /* ── HandleAnchor component ──────────────────────────────────────────── */
 
-export function HandleAnchor({ id, type, connected, media, children }: {
-  id: string; type: 'target' | 'source'; connected: boolean; media?: boolean
-  children?: React.ReactNode
+export function HandleAnchor({
+  id,
+  type,
+  connected,
+  media,
+  children,
+}: {
+  id: string;
+  type: "target" | "source";
+  connected: boolean;
+  media?: boolean;
+  children?: React.ReactNode;
 }) {
-  const ref = useRef<HTMLSpanElement>(null)
-  const [offset, setOffset] = useState<number | null>(null)
-  const pos = type === 'target' ? Position.Left : Position.Right
-  const appearance = type === 'target' ? handleLeft(connected, media) : handleRight()
+  const ref = useRef<HTMLSpanElement>(null);
+  const [offset, setOffset] = useState<number | null>(null);
+  const pos = type === "target" ? Position.Left : Position.Right;
+  const appearance =
+    type === "target" ? handleLeft(connected, media) : handleRight();
 
   // Compute the horizontal distance from this span to the card border.
   // Must run synchronously before paint so React Flow's ResizeObserver
   // reads the final handle position.
   useLayoutEffect(() => {
-    const el = ref.current
-    if (!el) return
+    const el = ref.current;
+    if (!el) return;
 
     // Find the card div (rounded-xl border)
-    let card: HTMLElement | null = el
-    while (card && !card.classList.contains('rounded-xl')) card = card.parentElement
-    if (!card) return
+    let card: HTMLElement | null = el;
+    while (card && !card.classList.contains("rounded-xl"))
+      card = card.parentElement;
+    if (!card) return;
 
     // Find the zoom level from the viewport transform
-    const viewport = el.closest('.react-flow__viewport') as HTMLElement | null
-    let zoom = 1
+    const viewport = el.closest(".react-flow__viewport") as HTMLElement | null;
+    let zoom = 1;
     if (viewport) {
-      const style = window.getComputedStyle(viewport)
-      const matrix = new DOMMatrixReadOnly(style.transform)
-      zoom = matrix.a || 1 // scaleX = zoom
+      const style = window.getComputedStyle(viewport);
+      const matrix = new DOMMatrixReadOnly(style.transform);
+      zoom = matrix.a || 1; // scaleX = zoom
     }
 
-    const cardRect = card.getBoundingClientRect()
-    const anchorRect = el.getBoundingClientRect()
+    const cardRect = card.getBoundingClientRect();
+    const anchorRect = el.getBoundingClientRect();
 
     // getBoundingClientRect returns screen pixels (after zoom).
     // CSS left/right values are in local coordinates (before zoom).
     // Divide by zoom to convert.
-    if (type === 'target') {
-      setOffset((cardRect.left - anchorRect.left) / zoom - HANDLE_SIZE / 2)
+    if (type === "target") {
+      setOffset((cardRect.left - anchorRect.left) / zoom - HANDLE_SIZE / 2);
     } else {
-      setOffset((anchorRect.right - cardRect.right) / zoom + HANDLE_SIZE / 2)
+      setOffset((anchorRect.right - cardRect.right) / zoom + HANDLE_SIZE / 2);
     }
-  })
+  });
 
   const handleStyle: React.CSSProperties = {
     ...appearance,
-    position: 'absolute',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    ...(type === 'target'
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    ...(type === "target"
       ? { left: offset ?? -(HANDLE_SIZE / 2 + 1) }
       : { right: offset ?? -(HANDLE_SIZE / 2 + 1) }),
-  }
+  };
 
   return (
-    <span ref={ref} className="relative inline-flex items-center self-stretch" style={{ width: 0, minWidth: 0, overflow: 'visible' }}>
+    <span
+      ref={ref}
+      className="relative inline-flex items-center self-stretch"
+      style={{ width: 0, minWidth: 0, overflow: "visible" }}
+    >
       <Handle type={type} position={pos} id={id} style={handleStyle} />
       {children}
     </span>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/custom-node/CustomNodeInputBodies.tsx b/src/workflow/components/canvas/custom-node/CustomNodeInputBodies.tsx
index 0c7acb37..928eb184 100644
--- a/src/workflow/components/canvas/custom-node/CustomNodeInputBodies.tsx
+++ b/src/workflow/components/canvas/custom-node/CustomNodeInputBodies.tsx
@@ -4,102 +4,150 @@
  * MediaUploadBody — dedicated UI for Media Upload nodes
  * TextInputBody — dedicated UI for Text Input nodes
  */
-import React, { useState, useRef, useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import { apiClient } from '@/api/client'
-import { WorkflowPromptOptimizer } from '../WorkflowPromptOptimizer'
-import { CompInput } from '../composition-input'
-import { FormField } from '@/components/playground/FormField'
+import React, { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "@/api/client";
+import { WorkflowPromptOptimizer } from "../WorkflowPromptOptimizer";
+import { CompInput } from "../composition-input";
+import { FormField } from "@/components/playground/FormField";
 
 /* ══════════════════════════════════════════════════════════════════════
    MediaUploadBody
    ══════════════════════════════════════════════════════════════════════ */
 
-export function MediaUploadBody({ params, onBatchChange, onPreview }: {
-  params: Record<string, unknown>
-  onBatchChange: (updates: Record<string, unknown>) => void
-  onPreview: (src: string) => void
+export function MediaUploadBody({
+  params,
+  onBatchChange,
+  onPreview,
+}: {
+  params: Record<string, unknown>;
+  onBatchChange: (updates: Record<string, unknown>) => void;
+  onPreview: (src: string) => void;
 }) {
-  const { t } = useTranslation()
-  const uploadedUrl = String(params.uploadedUrl ?? '')
-  const mediaType = String(params.mediaType ?? '')
-  const fileName = String(params.fileName ?? '')
-  const [uploadState, setUploadState] = useState<'idle' | 'uploading' | 'success' | 'error'>('idle')
-  const [uploadError, setUploadError] = useState('')
-  const [dragOver, setDragOver] = useState(false)
-  const [urlInput, setUrlInput] = useState('')
-  const [showUrlInput, setShowUrlInput] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { t } = useTranslation();
+  const uploadedUrl = String(params.uploadedUrl ?? "");
+  const mediaType = String(params.mediaType ?? "");
+  const fileName = String(params.fileName ?? "");
+  const [uploadState, setUploadState] = useState<
+    "idle" | "uploading" | "success" | "error"
+  >("idle");
+  const [uploadError, setUploadError] = useState("");
+  const [dragOver, setDragOver] = useState(false);
+  const [urlInput, setUrlInput] = useState("");
+  const [showUrlInput, setShowUrlInput] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const detectMediaType = (name: string): string => {
-    const ext = name.split('.').pop()?.toLowerCase() ?? ''
-    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg'].includes(ext)) return 'image'
-    if (['mp4', 'mov', 'webm', 'avi', 'mkv'].includes(ext)) return 'video'
-    if (['mp3', 'wav', 'ogg', 'm4a', 'flac', 'aac'].includes(ext)) return 'audio'
-    return 'file'
-  }
+    const ext = name.split(".").pop()?.toLowerCase() ?? "";
+    if (["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"].includes(ext))
+      return "image";
+    if (["mp4", "mov", "webm", "avi", "mkv"].includes(ext)) return "video";
+    if (["mp3", "wav", "ogg", "m4a", "flac", "aac"].includes(ext))
+      return "audio";
+    return "file";
+  };
 
   const handleFile = async (file: File) => {
-    setUploadState('uploading'); setUploadError('')
-    const localMediaType = detectMediaType(file.name)
+    setUploadState("uploading");
+    setUploadError("");
+    const localMediaType = detectMediaType(file.name);
     // Immediately show local preview via blob URL while uploading in background
-    const blobUrl = URL.createObjectURL(file)
-    onBatchChange({ uploadedUrl: blobUrl, fileName: file.name, mediaType: localMediaType })
+    const blobUrl = URL.createObjectURL(file);
+    onBatchChange({
+      uploadedUrl: blobUrl,
+      fileName: file.name,
+      mediaType: localMediaType,
+    });
     try {
-      const url = await apiClient.uploadFile(file)
+      const url = await apiClient.uploadFile(file);
       // Revoke blob URL and replace with CDN URL
-      URL.revokeObjectURL(blobUrl)
-      onBatchChange({ uploadedUrl: url, fileName: file.name, mediaType: localMediaType })
-      setUploadState('success')
-      setTimeout(() => setUploadState('idle'), 2000)
+      URL.revokeObjectURL(blobUrl);
+      onBatchChange({
+        uploadedUrl: url,
+        fileName: file.name,
+        mediaType: localMediaType,
+      });
+      setUploadState("success");
+      setTimeout(() => setUploadState("idle"), 2000);
     } catch (err) {
       // Upload failed — keep the local blob preview so user can still see the file
-      setUploadState('error')
-      setUploadError(err instanceof Error ? err.message : t('workflow.mediaUpload.uploadFailed', 'Upload failed'))
+      setUploadState("error");
+      setUploadError(
+        err instanceof Error
+          ? err.message
+          : t("workflow.mediaUpload.uploadFailed", "Upload failed"),
+      );
     }
-  }
+  };
 
   const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault(); e.stopPropagation(); setDragOver(false)
-    const file = e.dataTransfer.files?.[0]
-    if (file) handleFile(file)
-  }
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+    const file = e.dataTransfer.files?.[0];
+    if (file) handleFile(file);
+  };
 
   const handleUrlSubmit = () => {
-    const url = urlInput.trim()
-    if (!url) return
-    try { new URL(url) } catch { setUploadError(t('workflow.mediaUpload.invalidUrl', 'Invalid URL')); setUploadState('error'); return }
-    const ext = url.split('/').pop()?.split('?')[0] ?? 'file'
-    onBatchChange({ uploadedUrl: url, fileName: ext, mediaType: detectMediaType(ext) })
-    setUrlInput('')
-    setShowUrlInput(false)
-    setUploadState('success')
-    setUploadError('')
-    setTimeout(() => setUploadState('idle'), 2000)
-  }
+    const url = urlInput.trim();
+    if (!url) return;
+    try {
+      new URL(url);
+    } catch {
+      setUploadError(t("workflow.mediaUpload.invalidUrl", "Invalid URL"));
+      setUploadState("error");
+      return;
+    }
+    const ext = url.split("/").pop()?.split("?")[0] ?? "file";
+    onBatchChange({
+      uploadedUrl: url,
+      fileName: ext,
+      mediaType: detectMediaType(ext),
+    });
+    setUrlInput("");
+    setShowUrlInput(false);
+    setUploadState("success");
+    setUploadError("");
+    setTimeout(() => setUploadState("idle"), 2000);
+  };
 
   const handleClear = () => {
-    onBatchChange({ uploadedUrl: '', fileName: '', mediaType: '' })
-    setUploadState('idle')
-    setUploadError('')
-  }
+    onBatchChange({ uploadedUrl: "", fileName: "", mediaType: "" });
+    setUploadState("idle");
+    setUploadError("");
+  };
 
   if (uploadedUrl) {
-    const isImage = mediaType === 'image' || /\.(jpg|jpeg|png|gif|webp)$/i.test(uploadedUrl)
-    const isVideo = mediaType === 'video' || /\.(mp4|webm|mov)$/i.test(uploadedUrl)
-    const isAudio = mediaType === 'audio' || /\.(mp3|wav|ogg)$/i.test(uploadedUrl)
+    const isImage =
+      mediaType === "image" || /\.(jpg|jpeg|png|gif|webp)$/i.test(uploadedUrl);
+    const isVideo =
+      mediaType === "video" || /\.(mp4|webm|mov)$/i.test(uploadedUrl);
+    const isAudio =
+      mediaType === "audio" || /\.(mp3|wav|ogg)$/i.test(uploadedUrl);
 
     const clearBtn = (
       <button
-        onClick={e => { e.stopPropagation(); handleClear() }}
+        onClick={(e) => {
+          e.stopPropagation();
+          handleClear();
+        }}
         className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-red-500/90 hover:bg-red-500 text-white flex items-center justify-center shadow-md transition-colors z-10"
-        title={t('workflow.mediaUpload.clear', 'Clear')}
+        title={t("workflow.mediaUpload.clear", "Clear")}
       >
-        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
-          <line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/>
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="3"
+          strokeLinecap="round"
+        >
+          <line x1="6" y1="6" x2="18" y2="18" />
+          <line x1="18" y1="6" x2="6" y2="18" />
         </svg>
       </button>
-    )
+    );
 
     return (
       <div className="px-3 py-2">
@@ -107,24 +155,42 @@ export function MediaUploadBody({ params, onBatchChange, onPreview }: {
         <div className="flex justify-center">
           {isImage ? (
             <div className="relative inline-block">
-              <img src={uploadedUrl} alt={fileName} onClick={e => { e.stopPropagation(); onPreview(uploadedUrl) }}
-                className="max-w-full max-h-[120px] rounded-lg border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 bg-black/20" />
+              <img
+                src={uploadedUrl}
+                alt={fileName}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onPreview(uploadedUrl);
+                }}
+                className="max-w-full max-h-[120px] rounded-lg border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 bg-black/20"
+              />
               {clearBtn}
             </div>
           ) : isVideo ? (
             <div className="relative inline-block">
-              <video src={uploadedUrl} controls className="max-w-full max-h-[120px] rounded-lg border border-[hsl(var(--border))]" onClick={e => e.stopPropagation()} />
+              <video
+                src={uploadedUrl}
+                controls
+                className="max-w-full max-h-[120px] rounded-lg border border-[hsl(var(--border))]"
+                onClick={(e) => e.stopPropagation()}
+              />
               {clearBtn}
             </div>
           ) : isAudio ? (
             <div className="relative w-full">
-              <audio src={uploadedUrl} controls className="w-full" onClick={e => e.stopPropagation()} />
+              <audio
+                src={uploadedUrl}
+                controls
+                className="w-full"
+                onClick={(e) => e.stopPropagation()}
+              />
               {clearBtn}
             </div>
           ) : (
             <div className="relative w-full">
               <div className="p-3 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-xs text-center">
-                {fileName || t('workflow.mediaUpload.fileUploaded', 'File uploaded')}
+                {fileName ||
+                  t("workflow.mediaUpload.fileUploaded", "File uploaded")}
               </div>
               {clearBtn}
             </div>
@@ -132,52 +198,100 @@ export function MediaUploadBody({ params, onBatchChange, onPreview }: {
         </div>
         {/* File info — selectable & copyable */}
         <div className="mt-1.5 flex items-center gap-1.5 nodrag nowheel">
-          <span className="text-[11px] text-foreground/80 font-medium truncate select-text cursor-text" title={fileName}>{fileName}</span>
-          {uploadState === 'success' && <span className="text-[10px] text-green-400 flex-shrink-0">✓</span>}
+          <span
+            className="text-[11px] text-foreground/80 font-medium truncate select-text cursor-text"
+            title={fileName}
+          >
+            {fileName}
+          </span>
+          {uploadState === "success" && (
+            <span className="text-[10px] text-green-400 flex-shrink-0">✓</span>
+          )}
         </div>
-        {uploadedUrl && !uploadedUrl.startsWith('blob:') && (
-          <div className="text-[9px] text-muted-foreground/50 truncate mt-0.5 select-text cursor-text nodrag nowheel" title={uploadedUrl}>
+        {uploadedUrl && !uploadedUrl.startsWith("blob:") && (
+          <div
+            className="text-[9px] text-muted-foreground/50 truncate mt-0.5 select-text cursor-text nodrag nowheel"
+            title={uploadedUrl}
+          >
             {uploadedUrl}
           </div>
         )}
       </div>
-    )
+    );
   }
 
   return (
-    <div className="px-3 py-2" onClick={e => e.stopPropagation()}>
-      <input ref={fileInputRef} type="file" accept="image/*,video/*,audio/*" className="hidden"
-        onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f); if (fileInputRef.current) fileInputRef.current.value = '' }} />
+    <div className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*,video/*,audio/*"
+        className="hidden"
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) handleFile(f);
+          if (fileInputRef.current) fileInputRef.current.value = "";
+        }}
+      />
       <div
-        onDragOver={e => { e.preventDefault(); e.stopPropagation(); setDragOver(true) }}
-        onDragLeave={e => { e.preventDefault(); e.stopPropagation(); setDragOver(false) }}
+        onDragOver={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOver(true);
+        }}
+        onDragLeave={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setDragOver(false);
+        }}
         onDrop={handleDrop}
-        onClick={() => { if (uploadState !== 'uploading') fileInputRef.current?.click() }}
+        onClick={() => {
+          if (uploadState !== "uploading") fileInputRef.current?.click();
+        }}
         className={`relative rounded-lg border-2 border-dashed p-4 text-center transition-colors cursor-pointer
-          ${dragOver ? 'border-blue-500 bg-blue-500/10' : 'border-[hsl(var(--border))] hover:border-blue-500/50'}
-          ${uploadState === 'uploading' ? 'opacity-60 pointer-events-none' : ''}`}
+          ${dragOver ? "border-blue-500 bg-blue-500/10" : "border-[hsl(var(--border))] hover:border-blue-500/50"}
+          ${uploadState === "uploading" ? "opacity-60 pointer-events-none" : ""}`}
       >
-        {uploadState === 'uploading' ? (
+        {uploadState === "uploading" ? (
           <div className="py-2">
-            <div className="text-xs text-blue-400 animate-pulse mb-1">{t('workflow.mediaUpload.uploading', 'Uploading...')}</div>
+            <div className="text-xs text-blue-400 animate-pulse mb-1">
+              {t("workflow.mediaUpload.uploading", "Uploading...")}
+            </div>
             <div className="text-[10px] text-muted-foreground">{fileName}</div>
           </div>
         ) : (
           <>
             <div className="text-2xl mb-1">📁</div>
             <div className="text-xs text-muted-foreground mb-2">
-              {t('workflow.mediaUpload.dropOrBrowse', 'Drop file here or click to browse')}
+              {t(
+                "workflow.mediaUpload.dropOrBrowse",
+                "Drop file here or click to browse",
+              )}
             </div>
             <div className="flex gap-1.5 justify-center">
-              <label className="px-3 py-1 rounded-md text-[11px] font-medium bg-blue-500/15 text-blue-400 hover:bg-blue-500/25 cursor-pointer transition-colors"
-                onClick={e => e.stopPropagation()}>
-                {t('workflow.mediaUpload.browse', 'Browse')}
-                <input type="file" accept="image/*,video/*,audio/*" className="hidden"
-                  onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f) }} />
+              <label
+                className="px-3 py-1 rounded-md text-[11px] font-medium bg-blue-500/15 text-blue-400 hover:bg-blue-500/25 cursor-pointer transition-colors"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {t("workflow.mediaUpload.browse", "Browse")}
+                <input
+                  type="file"
+                  accept="image/*,video/*,audio/*"
+                  className="hidden"
+                  onChange={(e) => {
+                    const f = e.target.files?.[0];
+                    if (f) handleFile(f);
+                  }}
+                />
               </label>
-              <button onClick={e => { e.stopPropagation(); setShowUrlInput(!showUrlInput) }}
-                className="px-3 py-1 rounded-md text-[11px] font-medium bg-[hsl(var(--muted))] text-muted-foreground hover:text-foreground transition-colors">
-                {t('workflow.mediaUpload.pasteUrl', 'Paste URL')}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowUrlInput(!showUrlInput);
+                }}
+                className="px-3 py-1 rounded-md text-[11px] font-medium bg-[hsl(var(--muted))] text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {t("workflow.mediaUpload.pasteUrl", "Paste URL")}
               </button>
             </div>
           </>
@@ -185,27 +299,40 @@ export function MediaUploadBody({ params, onBatchChange, onPreview }: {
       </div>
       {showUrlInput && (
         <div className="mt-2 flex gap-1">
-          <CompInput type="text" value={urlInput} onChange={e => setUrlInput(e.target.value)}
-            onKeyDown={e => {
-              const composing = e.nativeEvent.isComposing || e.key === 'Process'
-              if (!composing && e.key === 'Enter') handleUrlSubmit()
+          <CompInput
+            type="text"
+            value={urlInput}
+            onChange={(e) => setUrlInput(e.target.value)}
+            onKeyDown={(e) => {
+              const composing =
+                e.nativeEvent.isComposing || e.key === "Process";
+              if (!composing && e.key === "Enter") handleUrlSubmit();
             }}
-            placeholder={t('workflow.mediaUpload.urlPlaceholder', 'https://...')} autoFocus
-            className="flex-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-blue-500/50" />
-          <button onClick={handleUrlSubmit}
-            className="px-2 py-1 rounded-md text-[10px] font-medium bg-blue-500 text-white hover:bg-blue-600 transition-colors">
-            {t('common.ok', 'OK')}
+            placeholder={t(
+              "workflow.mediaUpload.urlPlaceholder",
+              "https://...",
+            )}
+            autoFocus
+            className="flex-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+          />
+          <button
+            onClick={handleUrlSubmit}
+            className="px-2 py-1 rounded-md text-[10px] font-medium bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+          >
+            {t("common.ok", "OK")}
           </button>
         </div>
       )}
-      {uploadState === 'error' && (
-        <div className="mt-2 text-[10px] text-red-400 text-center">{uploadError}</div>
+      {uploadState === "error" && (
+        <div className="mt-2 text-[10px] text-red-400 text-center">
+          {uploadError}
+        </div>
       )}
       <div className="mt-2 text-[9px] text-muted-foreground/50 text-center">
-        {t('workflow.mediaUpload.supportedTypes', 'Image, Video, Audio')}
+        {t("workflow.mediaUpload.supportedTypes", "Image, Video, Audio")}
       </div>
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -213,183 +340,364 @@ export function MediaUploadBody({ params, onBatchChange, onPreview }: {
    Features: rich textarea, Prompt Optimizer, Prompt Library (snippets)
    ══════════════════════════════════════════════════════════════════════ */
 
-const SNIPPETS_KEY = 'wavespeed_prompt_snippets'
-interface PromptSnippet { id: string; name: string; text: string }
+const SNIPPETS_KEY = "wavespeed_prompt_snippets";
+interface PromptSnippet {
+  id: string;
+  name: string;
+  text: string;
+}
 
 function loadSnippets(): PromptSnippet[] {
-  try { return JSON.parse(localStorage.getItem(SNIPPETS_KEY) || '[]') } catch { return [] }
+  try {
+    return JSON.parse(localStorage.getItem(SNIPPETS_KEY) || "[]");
+  } catch {
+    return [];
+  }
 }
 
-export function TextInputBody({ params, onParamChange }: {
-  params: Record<string, unknown>
-  onParamChange: (updates: Record<string, unknown>) => void
+export function TextInputBody({
+  params,
+  onParamChange,
+}: {
+  params: Record<string, unknown>;
+  onParamChange: (updates: Record<string, unknown>) => void;
 }) {
-  const { t } = useTranslation()
-  const text = String(params.text ?? '')
-  const [snippetOpen, setSnippetOpen] = useState(false)
-  const [showSaveInput, setShowSaveInput] = useState(false)
-  const [saveName, setSaveName] = useState('')
-  const [snippets, setSnippets] = useState<PromptSnippet[]>(loadSnippets)
-  const snippetRef = useRef<HTMLDivElement>(null)
-  const [isOptimizing, setIsOptimizing] = useState(false)
-  const [optimizeError, setOptimizeError] = useState('')
+  const { t } = useTranslation();
+  const text = String(params.text ?? "");
+  const [snippetOpen, setSnippetOpen] = useState(false);
+  const [showSaveInput, setShowSaveInput] = useState(false);
+  const [saveName, setSaveName] = useState("");
+  const [snippets, setSnippets] = useState<PromptSnippet[]>(loadSnippets);
+  const snippetRef = useRef<HTMLDivElement>(null);
+  const [isOptimizing, setIsOptimizing] = useState(false);
+  const [optimizeError, setOptimizeError] = useState("");
 
-  const optimizerSettings = ((params.__optimizerSettings as Record<string, unknown> | undefined) ?? {})
-  const optimizeOnRun = Boolean(optimizerSettings.optimizeOnRun ?? optimizerSettings.autoOptimize ?? false)
-  const manualOptimizedLocked = typeof optimizerSettings.lastManualOptimizedText === 'string'
-    && optimizerSettings.lastManualOptimizedText === text
+  const optimizerSettings =
+    (params.__optimizerSettings as Record<string, unknown> | undefined) ?? {};
+  const optimizeOnRun = Boolean(
+    optimizerSettings.optimizeOnRun ?? optimizerSettings.autoOptimize ?? false,
+  );
+  const manualOptimizedLocked =
+    typeof optimizerSettings.lastManualOptimizedText === "string" &&
+    optimizerSettings.lastManualOptimizedText === text;
 
   const updateOptimizerSettings = (next: Record<string, unknown>) => {
-    onParamChange({ __optimizerSettings: next })
-  }
+    onParamChange({ __optimizerSettings: next });
+  };
 
   const toggleOptimizeOnRun = () => {
-    const { autoOptimize: _legacy, ...rest } = optimizerSettings
-    updateOptimizerSettings({ ...rest, optimizeOnRun: !optimizeOnRun })
-  }
+    const { autoOptimize: _legacy, ...rest } = optimizerSettings;
+    updateOptimizerSettings({ ...rest, optimizeOnRun: !optimizeOnRun });
+  };
 
   useEffect(() => {
-    if (!snippetOpen) return
+    if (!snippetOpen) return;
     const pointerHandler = (e: PointerEvent) => {
-      if (snippetRef.current && !snippetRef.current.contains(e.target as Node)) {
-        setSnippetOpen(false); setShowSaveInput(false)
+      if (
+        snippetRef.current &&
+        !snippetRef.current.contains(e.target as Node)
+      ) {
+        setSnippetOpen(false);
+        setShowSaveInput(false);
       }
-    }
+    };
     const keyHandler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') { setSnippetOpen(false); setShowSaveInput(false) }
-    }
-    window.addEventListener('pointerdown', pointerHandler, true)
-    window.addEventListener('keydown', keyHandler)
+      if (e.key === "Escape") {
+        setSnippetOpen(false);
+        setShowSaveInput(false);
+      }
+    };
+    window.addEventListener("pointerdown", pointerHandler, true);
+    window.addEventListener("keydown", keyHandler);
     return () => {
-      window.removeEventListener('pointerdown', pointerHandler, true)
-      window.removeEventListener('keydown', keyHandler)
-    }
-  }, [snippetOpen])
+      window.removeEventListener("pointerdown", pointerHandler, true);
+      window.removeEventListener("keydown", keyHandler);
+    };
+  }, [snippetOpen]);
 
   const doSave = () => {
-    if (!saveName.trim() || !text.trim()) return
-    const updated = [{ id: `snp-${Date.now()}`, name: saveName.trim(), text }, ...snippets]
-    setSnippets(updated); localStorage.setItem(SNIPPETS_KEY, JSON.stringify(updated))
-    setSaveName(''); setShowSaveInput(false)
-  }
+    if (!saveName.trim() || !text.trim()) return;
+    const updated = [
+      { id: `snp-${Date.now()}`, name: saveName.trim(), text },
+      ...snippets,
+    ];
+    setSnippets(updated);
+    localStorage.setItem(SNIPPETS_KEY, JSON.stringify(updated));
+    setSaveName("");
+    setShowSaveInput(false);
+  };
 
   const doLoad = (s: PromptSnippet) => {
-    const { lastManualOptimizedText: _manual, ...rest } = optimizerSettings
-    onParamChange({ text: s.text, __optimizerSettings: rest })
-    setSnippetOpen(false)
-  }
+    const { lastManualOptimizedText: _manual, ...rest } = optimizerSettings;
+    onParamChange({ text: s.text, __optimizerSettings: rest });
+    setSnippetOpen(false);
+  };
 
   const doDelete = (e: React.MouseEvent, id: string) => {
-    e.stopPropagation()
-    const updated = snippets.filter(s => s.id !== id)
-    setSnippets(updated); localStorage.setItem(SNIPPETS_KEY, JSON.stringify(updated))
-  }
+    e.stopPropagation();
+    const updated = snippets.filter((s) => s.id !== id);
+    setSnippets(updated);
+    localStorage.setItem(SNIPPETS_KEY, JSON.stringify(updated));
+  };
 
   const handleManualOptimize = async () => {
-    if (!text.trim() || isOptimizing) return
-    setIsOptimizing(true); setOptimizeError('')
+    if (!text.trim() || isOptimizing) return;
+    setIsOptimizing(true);
+    setOptimizeError("");
     try {
-      const { optimizeOnRun: _opt, autoOptimize: _legacy, lastManualOptimizedText: _manual, ...settingsForApi } = optimizerSettings
-      const optimized = await apiClient.optimizePrompt({ ...settingsForApi, text })
-      const { autoOptimize: _legacy2, ...rest } = optimizerSettings
-      onParamChange({ text: optimized, __optimizerSettings: { ...rest, optimizeOnRun, lastManualOptimizedText: optimized } })
+      const {
+        optimizeOnRun: _opt,
+        autoOptimize: _legacy,
+        lastManualOptimizedText: _manual,
+        ...settingsForApi
+      } = optimizerSettings;
+      const optimized = await apiClient.optimizePrompt({
+        ...settingsForApi,
+        text,
+      });
+      const { autoOptimize: _legacy2, ...rest } = optimizerSettings;
+      onParamChange({
+        text: optimized,
+        __optimizerSettings: {
+          ...rest,
+          optimizeOnRun,
+          lastManualOptimizedText: optimized,
+        },
+      });
     } catch (err) {
-      setOptimizeError(err instanceof Error ? err.message : t('workflow.textInput.optimizeFailed', 'Optimize failed'))
-    } finally { setIsOptimizing(false) }
-  }
+      setOptimizeError(
+        err instanceof Error
+          ? err.message
+          : t("workflow.textInput.optimizeFailed", "Optimize failed"),
+      );
+    } finally {
+      setIsOptimizing(false);
+    }
+  };
 
   return (
-    <div className="px-3 py-2" onClick={e => e.stopPropagation()}>
+    <div className="px-3 py-2" onClick={(e) => e.stopPropagation()}>
       <div className="rounded-lg border border-blue-500/20 bg-blue-500/5 p-2 mb-2">
-      <div className="flex items-center gap-0.5 mb-1.5">
-        <div className="relative" ref={snippetRef}>
-          <button onClick={() => { setSnippetOpen(!snippetOpen); setShowSaveInput(false) }}
-            title={t('workflow.textInput.promptLibrary', 'Prompt Library')}
-            className={`flex items-center justify-center w-6 h-6 rounded-md transition-colors
-              ${snippetOpen ? 'bg-blue-500/20 text-blue-400' : 'hover:bg-[hsl(var(--accent))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'}`}>
-            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
-            </svg>
-          </button>
-          {snippetOpen && (
-            <div className="absolute top-7 left-0 z-[100] w-52 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-xl"
-              onClick={e => e.stopPropagation()}>
-              {!showSaveInput ? (
-                <button onClick={() => setShowSaveInput(true)} disabled={!text.trim()}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-[11px] hover:bg-[hsl(var(--accent))] transition-colors disabled:opacity-40 disabled:cursor-not-allowed rounded-t-lg">
-                  <span>💾</span> <span>{t('workflow.textInput.saveCurrent', 'Save Current')}</span>
-                </button>
-              ) : (
-                <div className="px-2 py-2 flex gap-1">
-                  <CompInput type="text" value={saveName} onChange={e => setSaveName(e.target.value)}
-                    onKeyDown={e => { const composing = e.nativeEvent.isComposing || e.key === 'Process'; if (!composing && e.key === 'Enter') doSave(); e.stopPropagation() }}
-                    placeholder={t('workflow.textInput.namePlaceholder', 'Name...')} autoFocus
-                    className="flex-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-blue-500/50" />
-                  <button onClick={doSave} disabled={!saveName.trim()}
-                    className="px-2 py-1 rounded text-[10px] font-medium bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-40 transition-colors">
-                    {t('workflow.save', 'Save')}
+        <div className="flex items-center gap-0.5 mb-1.5">
+          <div className="relative" ref={snippetRef}>
+            <button
+              onClick={() => {
+                setSnippetOpen(!snippetOpen);
+                setShowSaveInput(false);
+              }}
+              title={t("workflow.textInput.promptLibrary", "Prompt Library")}
+              className={`flex items-center justify-center w-6 h-6 rounded-md transition-colors
+              ${snippetOpen ? "bg-blue-500/20 text-blue-400" : "hover:bg-[hsl(var(--accent))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"}`}
+            >
+              <svg
+                width="13"
+                height="13"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
+                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
+              </svg>
+            </button>
+            {snippetOpen && (
+              <div
+                className="absolute top-7 left-0 z-[100] w-52 rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] shadow-xl"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {!showSaveInput ? (
+                  <button
+                    onClick={() => setShowSaveInput(true)}
+                    disabled={!text.trim()}
+                    className="w-full flex items-center gap-2 px-3 py-2 text-[11px] hover:bg-[hsl(var(--accent))] transition-colors disabled:opacity-40 disabled:cursor-not-allowed rounded-t-lg"
+                  >
+                    <span>💾</span>{" "}
+                    <span>
+                      {t("workflow.textInput.saveCurrent", "Save Current")}
+                    </span>
                   </button>
+                ) : (
+                  <div className="px-2 py-2 flex gap-1">
+                    <CompInput
+                      type="text"
+                      value={saveName}
+                      onChange={(e) => setSaveName(e.target.value)}
+                      onKeyDown={(e) => {
+                        const composing =
+                          e.nativeEvent.isComposing || e.key === "Process";
+                        if (!composing && e.key === "Enter") doSave();
+                        e.stopPropagation();
+                      }}
+                      placeholder={t(
+                        "workflow.textInput.namePlaceholder",
+                        "Name...",
+                      )}
+                      autoFocus
+                      className="flex-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1 text-[11px] focus:outline-none focus:ring-1 focus:ring-blue-500/50"
+                    />
+                    <button
+                      onClick={doSave}
+                      disabled={!saveName.trim()}
+                      className="px-2 py-1 rounded text-[10px] font-medium bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-40 transition-colors"
+                    >
+                      {t("workflow.save", "Save")}
+                    </button>
+                  </div>
+                )}
+                {snippets.length > 0 && (
+                  <div className="mx-2 h-px bg-[hsl(var(--border))]" />
+                )}
+                <div className="max-h-[180px] overflow-y-auto py-0.5">
+                  {snippets.map((s) => (
+                    <div
+                      key={s.id}
+                      className="flex items-center gap-1 px-3 py-1.5 hover:bg-[hsl(var(--accent))] transition-colors cursor-pointer group"
+                      onClick={() => doLoad(s)}
+                    >
+                      <span
+                        className="flex-1 text-[11px] truncate"
+                        title={s.text}
+                      >
+                        {s.name}
+                      </span>
+                      <button
+                        onClick={(e) => doDelete(e, s.id)}
+                        className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 transition-all text-[11px] px-0.5"
+                      >
+                        ✕
+                      </button>
+                    </div>
+                  ))}
                 </div>
-              )}
-              {snippets.length > 0 && <div className="mx-2 h-px bg-[hsl(var(--border))]" />}
-              <div className="max-h-[180px] overflow-y-auto py-0.5">
-                {snippets.map(s => (
-                  <div key={s.id} className="flex items-center gap-1 px-3 py-1.5 hover:bg-[hsl(var(--accent))] transition-colors cursor-pointer group" onClick={() => doLoad(s)}>
-                    <span className="flex-1 text-[11px] truncate" title={s.text}>{s.name}</span>
-                    <button onClick={e => doDelete(e, s.id)} className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 transition-all text-[11px] px-0.5">✕</button>
+                {snippets.length === 0 && (
+                  <div className="px-3 py-3 text-[10px] text-[hsl(var(--muted-foreground))] text-center">
+                    {t(
+                      "workflow.textInput.noSavedSnippets",
+                      "No saved snippets",
+                    )}
                   </div>
-                ))}
+                )}
               </div>
-              {snippets.length === 0 && (
-                <div className="px-3 py-3 text-[10px] text-[hsl(var(--muted-foreground))] text-center">{t('workflow.textInput.noSavedSnippets', 'No saved snippets')}</div>
+            )}
+          </div>
+          <div className="ml-1 flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={handleManualOptimize}
+              disabled={isOptimizing || !text.trim()}
+              className="inline-flex h-6 items-center gap-1 rounded-md border border-blue-500/45 bg-blue-500/15 px-2.5 text-[10px] font-semibold text-blue-600 dark:text-blue-200 shadow-sm transition-all hover:bg-blue-500/25 hover:shadow-blue-500/20 disabled:cursor-not-allowed disabled:opacity-30 disabled:border-[hsl(var(--border))] disabled:bg-[hsl(var(--muted))] disabled:text-[hsl(var(--muted-foreground))] disabled:shadow-none"
+              title={t(
+                "workflow.textInput.optimizeNowTitle",
+                "Optimize text now",
               )}
-            </div>
+            >
+              {isOptimizing ? (
+                <>
+                  <svg
+                    className="animate-spin"
+                    width="10"
+                    height="10"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2.5"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      strokeDasharray="60"
+                      strokeDashoffset="20"
+                    />
+                  </svg>
+                  {t("workflow.textInput.optimizing", "Optimizing...")}
+                </>
+              ) : (
+                <>
+                  <svg
+                    width="10"
+                    height="10"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3Z" />
+                  </svg>
+                  {t("workflow.textInput.optimizeNow", "Optimize Now")}
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={toggleOptimizeOnRun}
+              className={`inline-flex h-6 items-center gap-1.5 rounded-md border px-2.5 text-[10px] font-semibold transition-all ${optimizeOnRun ? "border-emerald-500/55 bg-emerald-500/15 text-emerald-600 dark:text-emerald-200 shadow-sm" : "border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"}`}
+              title={t(
+                "workflow.textInput.autoOnRunTitle",
+                "Only optimize when Run is clicked",
+              )}
+            >
+              <span
+                className={`inline-block h-1.5 w-1.5 rounded-full ${optimizeOnRun ? "bg-emerald-500 dark:bg-emerald-300" : "bg-[hsl(var(--muted-foreground))]/70"}`}
+              />
+              {t("workflow.textInput.autoOnRun", "Optimize On Run")}
+            </button>
+          </div>
+          <div className="flex-1" />
+          <span className="text-[9px] text-[hsl(var(--muted-foreground))]">
+            {text.length} {t("workflow.textInput.chars", "chars")}
+          </span>
+        </div>
+        <div className="mb-1 flex items-center justify-between rounded-md border border-blue-500/20 bg-blue-500/10 px-2 py-1">
+          {optimizeOnRun ? (
+            <span className="text-[10px] font-medium text-emerald-300">
+              {t(
+                "workflow.textInput.optimizeOnRunEnabled",
+                "Enabled: Optimize On Run",
+              )}
+            </span>
+          ) : (
+            <span className="text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
+              {t(
+                "workflow.textInput.optimizeOffHint",
+                "Default: no optimization (run with original text)",
+              )}
+            </span>
           )}
         </div>
-        <div className="ml-1 flex items-center gap-1.5">
-          <button type="button" onClick={handleManualOptimize} disabled={isOptimizing || !text.trim()}
-            className="inline-flex h-6 items-center gap-1 rounded-md border border-blue-500/45 bg-blue-500/15 px-2.5 text-[10px] font-semibold text-blue-600 dark:text-blue-200 shadow-sm transition-all hover:bg-blue-500/25 hover:shadow-blue-500/20 disabled:cursor-not-allowed disabled:opacity-30 disabled:border-[hsl(var(--border))] disabled:bg-[hsl(var(--muted))] disabled:text-[hsl(var(--muted-foreground))] disabled:shadow-none"
-            title={t('workflow.textInput.optimizeNowTitle', 'Optimize text now')}>
-            {isOptimizing ? (
-              <><svg className="animate-spin" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" /></svg>{t('workflow.textInput.optimizing', 'Optimizing...')}</>
-            ) : (
-              <><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3Z"/></svg>{t('workflow.textInput.optimizeNow', 'Optimize Now')}</>
+        {manualOptimizedLocked && (
+          <div className="mb-1 rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-[10px] text-amber-300">
+            {t(
+              "workflow.textInput.manualOptimizedHint",
+              "Manually optimized. Auto-on-run will be skipped until text changes.",
             )}
-          </button>
-          <button type="button" onClick={toggleOptimizeOnRun}
-            className={`inline-flex h-6 items-center gap-1.5 rounded-md border px-2.5 text-[10px] font-semibold transition-all ${optimizeOnRun ? 'border-emerald-500/55 bg-emerald-500/15 text-emerald-600 dark:text-emerald-200 shadow-sm' : 'border-[hsl(var(--border))] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]'}`}
-            title={t('workflow.textInput.autoOnRunTitle', 'Only optimize when Run is clicked')}>
-            <span className={`inline-block h-1.5 w-1.5 rounded-full ${optimizeOnRun ? 'bg-emerald-500 dark:bg-emerald-300' : 'bg-[hsl(var(--muted-foreground))]/70'}`} />
-            {t('workflow.textInput.autoOnRun', 'Optimize On Run')}
-          </button>
-        </div>
-        <div className="flex-1" />
-        <span className="text-[9px] text-[hsl(var(--muted-foreground))]">{text.length} {t('workflow.textInput.chars', 'chars')}</span>
-      </div>
-      <div className="mb-1 flex items-center justify-between rounded-md border border-blue-500/20 bg-blue-500/10 px-2 py-1">
-        {optimizeOnRun
-          ? <span className="text-[10px] font-medium text-emerald-300">{t('workflow.textInput.optimizeOnRunEnabled', 'Enabled: Optimize On Run')}</span>
-          : <span className="text-[10px] font-medium text-[hsl(var(--muted-foreground))]">{t('workflow.textInput.optimizeOffHint', 'Default: no optimization (run with original text)')}</span>}
-      </div>
-      {manualOptimizedLocked && (
-        <div className="mb-1 rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-[10px] text-amber-300">
-          {t('workflow.textInput.manualOptimizedHint', 'Manually optimized. Auto-on-run will be skipped until text changes.')}
-        </div>
-      )}
-      {optimizeError && (
-        <div className="mb-1 rounded-md border border-red-500/30 bg-red-500/10 px-2 py-1 text-[10px] text-red-300">{optimizeError}</div>
-      )}
+          </div>
+        )}
+        {optimizeError && (
+          <div className="mb-1 rounded-md border border-red-500/30 bg-red-500/10 px-2 py-1 text-[10px] text-red-300">
+            {optimizeError}
+          </div>
+        )}
       </div>
 
       <WorkflowPromptOptimizer
         currentPrompt={text}
         onOptimized={(optimized) => onParamChange({ text: optimized })}
         quickSettings={optimizerSettings}
-        onQuickSettingsChange={(settings) => onParamChange({ __optimizerSettings: settings })}
+        onQuickSettingsChange={(settings) =>
+          onParamChange({ __optimizerSettings: settings })
+        }
         optimizeOnRun={optimizeOnRun}
         onOptimizeOnRunChange={(enabled) => {
-          const { autoOptimize: _legacy, ...rest } = optimizerSettings
-          onParamChange({ __optimizerSettings: { ...rest, optimizeOnRun: enabled } })
+          const { autoOptimize: _legacy, ...rest } = optimizerSettings;
+          onParamChange({
+            __optimizerSettings: { ...rest, optimizeOnRun: enabled },
+          });
         }}
         showRunToggle={false}
         showQuickOptimize={false}
@@ -399,15 +707,25 @@ export function TextInputBody({ params, onParamChange }: {
       />
 
       <FormField
-        field={{ name: 'text', type: 'textarea', label: t('workflow.textInput.text', 'Text'), required: false, placeholder: t('workflow.textInput.enterTextOrPrompt', 'Enter text or prompt...') }}
+        field={{
+          name: "text",
+          type: "textarea",
+          label: t("workflow.textInput.text", "Text"),
+          required: false,
+          placeholder: t(
+            "workflow.textInput.enterTextOrPrompt",
+            "Enter text or prompt...",
+          ),
+        }}
         value={text}
-        onChange={v => {
-          const { lastManualOptimizedText: _manual, ...rest } = optimizerSettings
-          onParamChange({ text: v, __optimizerSettings: rest })
+        onChange={(v) => {
+          const { lastManualOptimizedText: _manual, ...rest } =
+            optimizerSettings;
+          onParamChange({ text: v, __optimizerSettings: rest });
         }}
         formValues={params}
         hideLabel
       />
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/custom-node/CustomNodeParamControls.tsx b/src/workflow/components/canvas/custom-node/CustomNodeParamControls.tsx
index 7aa909ff..cb6f70eb 100644
--- a/src/workflow/components/canvas/custom-node/CustomNodeParamControls.tsx
+++ b/src/workflow/components/canvas/custom-node/CustomNodeParamControls.tsx
@@ -3,133 +3,246 @@
  *
  * ParamRow, MediaRow, LoraRow, JsonRow, DefParamControl, InputPortControl
  */
-import { useState, useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { apiClient } from '@/api/client'
-import { useWorkflowStore } from '../../../stores/workflow.store'
-import { Paintbrush, Dices } from 'lucide-react'
-import { MaskEditor } from '@/components/playground/MaskEditor'
-import { WorkflowPromptOptimizer } from '../WorkflowPromptOptimizer'
-import { CompInput, CompTextarea } from '../composition-input'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
-import type { ParamDefinition, PortDefinition, ModelParamSchema } from '@/workflow/types/node-defs'
-
-import { TEXTAREA_NAMES, RANDOM_SEED_MAX, NODE_INPUT_ACCEPT_RULES, formatLabel } from './CustomNodeTypes'
-import { HandleAnchor } from './CustomNodeHandleAnchor'
-import { Row, LinkedBadge, Tip, UploadStatusBadge, ToggleSwitch, NumberInput, FileBtn, SizeInput } from './CustomNodePrimitives'
+import { useState, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "@/api/client";
+import { useWorkflowStore } from "../../../stores/workflow.store";
+import { Paintbrush, Dices } from "lucide-react";
+import { MaskEditor } from "@/components/playground/MaskEditor";
+import { WorkflowPromptOptimizer } from "../WorkflowPromptOptimizer";
+import { CompInput, CompTextarea } from "../composition-input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type {
+  ParamDefinition,
+  PortDefinition,
+  ModelParamSchema,
+} from "@/workflow/types/node-defs";
+
+import {
+  TEXTAREA_NAMES,
+  RANDOM_SEED_MAX,
+  NODE_INPUT_ACCEPT_RULES,
+  formatLabel,
+} from "./CustomNodeTypes";
+import { HandleAnchor } from "./CustomNodeHandleAnchor";
+import {
+  Row,
+  LinkedBadge,
+  Tip,
+  UploadStatusBadge,
+  ToggleSwitch,
+  NumberInput,
+  FileBtn,
+  SizeInput,
+} from "./CustomNodePrimitives";
 
 /* ══════════════════════════════════════════════════════════════════════
    ParamRow — one row per regular (non-media) schema parameter
    ══════════════════════════════════════════════════════════════════════ */
 
-export function ParamRow({ nodeId, schema, value, connected, onChange, onDisconnect, edges, nodes, optimizerSettings, onOptimizerSettingsChange }: {
-  nodeId: string; schema: ModelParamSchema; value: unknown; connected: boolean
-  onChange: (v: unknown) => void
-  onDisconnect?: () => void
-  edges?: Array<{ id: string; source: string; target: string; targetHandle?: string | null }>
-  nodes?: Array<{ id: string; data: { label?: string } }>
-  optimizerSettings?: Record<string, unknown>
-  onOptimizerSettingsChange?: (settings: Record<string, unknown>) => void
+export function ParamRow({
+  nodeId,
+  schema,
+  value,
+  connected,
+  onChange,
+  onDisconnect,
+  edges,
+  nodes,
+  optimizerSettings,
+  onOptimizerSettingsChange,
+}: {
+  nodeId: string;
+  schema: ModelParamSchema;
+  value: unknown;
+  connected: boolean;
+  onChange: (v: unknown) => void;
+  onDisconnect?: () => void;
+  edges?: Array<{
+    id: string;
+    source: string;
+    target: string;
+    targetHandle?: string | null;
+  }>;
+  nodes?: Array<{ id: string; data: { label?: string } }>;
+  optimizerSettings?: Record<string, unknown>;
+  onOptimizerSettingsChange?: (settings: Record<string, unknown>) => void;
 }) {
-  const { t } = useTranslation()
-  const label = schema.label ?? formatLabel(schema.name)
-  const ft = schema.fieldType ?? (TEXTAREA_NAMES.has(schema.name.toLowerCase()) ? 'textarea' : undefined)
-  const isSeed = schema.name.toLowerCase() === 'seed'
-  const handleId = `param-${schema.name}`
-  const cur = value ?? schema.default
-  const showEditor = !connected
+  const { t } = useTranslation();
+  const label = schema.label ?? formatLabel(schema.name);
+  const ft =
+    schema.fieldType ??
+    (TEXTAREA_NAMES.has(schema.name.toLowerCase()) ? "textarea" : undefined);
+  const isSeed = schema.name.toLowerCase() === "seed";
+  const handleId = `param-${schema.name}`;
+  const cur = value ?? schema.default;
+  const showEditor = !connected;
 
-  const inputCls = 'w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 placeholder:text-[hsl(var(--muted-foreground))]'
-  const selectCls = 'rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50'
+  const inputCls =
+    "w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 focus:border-blue-500 placeholder:text-[hsl(var(--muted-foreground))]";
+  const selectCls =
+    "rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50";
 
   // ── Textarea: full-width below label ──
-  if (ft === 'textarea') {
-    const isPromptField = schema.name.toLowerCase() === 'prompt'
+  if (ft === "textarea") {
+    const isPromptField = schema.name.toLowerCase() === "prompt";
     return (
       <div className="px-3 py-1">
         <label className="flex items-center gap-1 mb-1 text-xs font-medium text-blue-400">
           <HandleAnchor id={handleId} type="target" connected={connected} />
-          {label}{schema.required && <span className="text-red-400">*</span>}
+          {label}
+          {schema.required && <span className="text-red-400">*</span>}
           {schema.description && <Tip text={schema.description} />}
           {isPromptField && !connected && (
             <WorkflowPromptOptimizer
-              currentPrompt={String(cur ?? '')}
-              onOptimized={v => onChange(v)}
+              currentPrompt={String(cur ?? "")}
+              onOptimized={(v) => onChange(v)}
               quickSettings={optimizerSettings}
               onQuickSettingsChange={onOptimizerSettingsChange}
-              optimizeOnRun={Boolean(optimizerSettings?.optimizeOnRun ?? optimizerSettings?.autoOptimize)}
+              optimizeOnRun={Boolean(
+                optimizerSettings?.optimizeOnRun ??
+                optimizerSettings?.autoOptimize,
+              )}
               onOptimizeOnRunChange={(enabled) => {
-                const { autoOptimize: _legacy, ...rest } = optimizerSettings ?? {}
-                onOptimizerSettingsChange?.({ ...rest, optimizeOnRun: enabled })
+                const { autoOptimize: _legacy, ...rest } =
+                  optimizerSettings ?? {};
+                onOptimizerSettingsChange?.({
+                  ...rest,
+                  optimizeOnRun: enabled,
+                });
               }}
             />
           )}
         </label>
         <div>
-          {connected ? <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} onDisconnect={onDisconnect} /> : (
-            <CompTextarea value={String(cur ?? '')} onChange={e => onChange(e.target.value)}
-              placeholder={schema.placeholder ?? schema.description ?? label} rows={3}
+          {connected ? (
+            <LinkedBadge
+              nodeId={nodeId}
+              handleId={handleId}
+              edges={edges}
+              nodes={nodes}
+              onDisconnect={onDisconnect}
+            />
+          ) : (
+            <CompTextarea
+              value={String(cur ?? "")}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder={schema.placeholder ?? schema.description ?? label}
+              rows={3}
               className={`nodrag ${inputCls} resize-y min-h-[60px] max-h-[300px]`}
-              onClick={e => e.stopPropagation()} />
+              onClick={(e) => e.stopPropagation()}
+            />
           )}
         </div>
       </div>
-    )
+    );
   }
 
   // ── Slider ──
-  if (ft === 'slider' && schema.min !== undefined && schema.max !== undefined) {
-    const numVal = cur !== undefined && cur !== null ? Number(cur) : schema.min
+  if (ft === "slider" && schema.min !== undefined && schema.max !== undefined) {
+    const numVal = cur !== undefined && cur !== null ? Number(cur) : schema.min;
     return (
       <div className="px-3 py-1">
         <div>
           <div className="flex items-center gap-1 mb-0.5">
             <span className="text-xs text-blue-400 font-medium flex items-center gap-1 flex-shrink-0">
               <HandleAnchor id={handleId} type="target" connected={connected} />
-              {label}{schema.required && <span className="text-red-400">*</span>}
+              {label}
+              {schema.required && <span className="text-red-400">*</span>}
               {schema.description && <Tip text={schema.description} />}
             </span>
             <div className="flex-1" />
-            {connected ? <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} onDisconnect={onDisconnect} /> : (
-              <span className="text-[11px] text-foreground font-medium min-w-[30px] text-right">{numVal}</span>
+            {connected ? (
+              <LinkedBadge
+                nodeId={nodeId}
+                handleId={handleId}
+                edges={edges}
+                nodes={nodes}
+                onDisconnect={onDisconnect}
+              />
+            ) : (
+              <span className="text-[11px] text-foreground font-medium min-w-[30px] text-right">
+                {numVal}
+              </span>
             )}
           </div>
           {showEditor && (
-            <div className="flex items-center gap-1.5" onClick={e => e.stopPropagation()}>
-              <span className="text-[9px] text-muted-foreground">{schema.min}</span>
-              <input type="range" min={schema.min} max={schema.max} step={schema.step ?? (schema.type === 'integer' ? 1 : 0.1)}
-                value={numVal} onChange={e => onChange(Number(e.target.value))}
-                className="nodrag flex-1 h-1 accent-blue-500 cursor-pointer" />
-              <span className="text-[9px] text-muted-foreground">{schema.max}</span>
+            <div
+              className="flex items-center gap-1.5"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <span className="text-[9px] text-muted-foreground">
+                {schema.min}
+              </span>
+              <input
+                type="range"
+                min={schema.min}
+                max={schema.max}
+                step={schema.step ?? (schema.type === "integer" ? 1 : 0.1)}
+                value={numVal}
+                onChange={(e) => onChange(Number(e.target.value))}
+                className="nodrag flex-1 h-1 accent-blue-500 cursor-pointer"
+              />
+              <span className="text-[9px] text-muted-foreground">
+                {schema.max}
+              </span>
             </div>
           )}
         </div>
       </div>
-    )
+    );
   }
 
   // ── Size ──
-  if (ft === 'size') {
+  if (ft === "size") {
     return (
       <Row>
         <div className="flex items-center gap-2">
           <span className="text-xs text-blue-400 font-medium flex items-center gap-1 flex-shrink-0">
             <HandleAnchor id={handleId} type="target" connected={connected} />
-            {label}{schema.description && <Tip text={schema.description} />}
+            {label}
+            {schema.description && <Tip text={schema.description} />}
           </span>
-          <div className="flex-1 min-w-0 flex justify-end" onClick={e => e.stopPropagation()}>
-            {connected ? <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} onDisconnect={onDisconnect} />
-              : schema.enum && schema.enum.length > 0 ? (
-                <select value={String(cur ?? schema.enum[0] ?? '')} onChange={e => onChange(e.target.value)} className={`nodrag ${selectCls} w-full max-w-[160px] text-right`}>
-                  {schema.enum.map(o => <option key={o} value={o}>{o}</option>)}
-                </select>
-              ) : (
-                <SizeInput value={String(cur ?? '')} onChange={(v: string) => onChange(v)} min={schema.min} max={schema.max} />
-              )}
+          <div
+            className="flex-1 min-w-0 flex justify-end"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {connected ? (
+              <LinkedBadge
+                nodeId={nodeId}
+                handleId={handleId}
+                edges={edges}
+                nodes={nodes}
+                onDisconnect={onDisconnect}
+              />
+            ) : schema.enum && schema.enum.length > 0 ? (
+              <select
+                value={String(cur ?? schema.enum[0] ?? "")}
+                onChange={(e) => onChange(e.target.value)}
+                className={`nodrag ${selectCls} w-full max-w-[160px] text-right`}
+              >
+                {schema.enum.map((o) => (
+                  <option key={o} value={o}>
+                    {o}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <SizeInput
+                value={String(cur ?? "")}
+                onChange={(v: string) => onChange(v)}
+                min={schema.min}
+                max={schema.max}
+              />
+            )}
           </div>
         </div>
       </Row>
-    )
+    );
   }
 
   // ── All other types ──
@@ -138,394 +251,659 @@ export function ParamRow({ nodeId, schema, value, connected, onChange, onDisconn
       <div className="flex items-center gap-2">
         <span className="text-xs text-blue-400 font-medium whitespace-nowrap flex items-center gap-1 flex-shrink-0">
           <HandleAnchor id={handleId} type="target" connected={connected} />
-          {label}{schema.required && <span className="text-red-400">*</span>}
+          {label}
+          {schema.required && <span className="text-red-400">*</span>}
           {schema.description && <Tip text={schema.description} />}
         </span>
-        <div className="flex-1 min-w-0 flex justify-end items-center gap-1" onClick={e => e.stopPropagation()}>
-          {connected ? <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} onDisconnect={onDisconnect} />
-            : (ft === 'select' || (schema.type === 'enum' && schema.enum)) ? (
-              <select value={String(cur ?? (schema.enum?.[0]) ?? '')} onChange={e => onChange(e.target.value)} className={`nodrag ${selectCls} w-full max-w-[180px] text-right`}>
-                {(schema.enum ?? []).map(o => <option key={o} value={o}>{o}</option>)}
-              </select>
-            ) : schema.type === 'boolean' || ft === 'boolean' ? <ToggleSwitch checked={Boolean(cur)} onChange={onChange} />
-            : schema.type === 'number' || schema.type === 'integer' || ft === 'number' ? (
-              <>
-                <NumberInput
-                  value={cur as number | undefined}
-                  min={schema.min}
-                  max={schema.max}
-                  step={schema.step ?? (schema.type === 'integer' ? 1 : 0.1)}
-                  onChange={onChange}
-                  placeholder={isSeed && !schema.required ? t('workflow.seedRandomPlaceholder', 'Random') : undefined}
-                />
-                {isSeed && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <button
-                        type="button"
-                        onClick={() => onChange(Math.floor(Math.random() * RANDOM_SEED_MAX))}
-                        className="p-1.5 rounded bg-blue-500/10 hover:bg-blue-500/20 transition-colors flex-shrink-0"
-                      >
-                        <Dices className="h-4 w-4 text-blue-400" />
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">
-                      <p>{t('playground.randomSeed')}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                )}
-              </>
-            ) : (
-              <CompInput type="text" value={String(cur ?? '')} onChange={e => onChange(e.target.value)}
-                placeholder={schema.placeholder ?? schema.description ?? label} className={`${inputCls} max-w-[180px] text-right`} />
-            )}
+        <div
+          className="flex-1 min-w-0 flex justify-end items-center gap-1"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {connected ? (
+            <LinkedBadge
+              nodeId={nodeId}
+              handleId={handleId}
+              edges={edges}
+              nodes={nodes}
+              onDisconnect={onDisconnect}
+            />
+          ) : ft === "select" || (schema.type === "enum" && schema.enum) ? (
+            <select
+              value={String(cur ?? schema.enum?.[0] ?? "")}
+              onChange={(e) => onChange(e.target.value)}
+              className={`nodrag ${selectCls} w-full max-w-[180px] text-right`}
+            >
+              {(schema.enum ?? []).map((o) => (
+                <option key={o} value={o}>
+                  {o}
+                </option>
+              ))}
+            </select>
+          ) : schema.type === "boolean" || ft === "boolean" ? (
+            <ToggleSwitch checked={Boolean(cur)} onChange={onChange} />
+          ) : schema.type === "number" ||
+            schema.type === "integer" ||
+            ft === "number" ? (
+            <>
+              <NumberInput
+                value={cur as number | undefined}
+                min={schema.min}
+                max={schema.max}
+                step={schema.step ?? (schema.type === "integer" ? 1 : 0.1)}
+                onChange={onChange}
+                placeholder={
+                  isSeed && !schema.required
+                    ? t("workflow.seedRandomPlaceholder", "Random")
+                    : undefined
+                }
+              />
+              {isSeed && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={() =>
+                        onChange(Math.floor(Math.random() * RANDOM_SEED_MAX))
+                      }
+                      className="p-1.5 rounded bg-blue-500/10 hover:bg-blue-500/20 transition-colors flex-shrink-0"
+                    >
+                      <Dices className="h-4 w-4 text-blue-400" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    <p>{t("playground.randomSeed")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </>
+          ) : (
+            <CompInput
+              type="text"
+              value={String(cur ?? "")}
+              onChange={(e) => onChange(e.target.value)}
+              placeholder={schema.placeholder ?? schema.description ?? label}
+              className={`${inputCls} max-w-[180px] text-right`}
+            />
+          )}
         </div>
       </div>
     </Row>
-  )
+  );
 }
 
-
 /* ══════════════════════════════════════════════════════════════════════
    MediaRow — single or multi media parameter with upload states
    ══════════════════════════════════════════════════════════════════════ */
 
-export function MediaRow({ nodeId, schema, value, connected, connectedSet, onChange, onPreview, edges, nodes }: {
-  nodeId: string; schema: ModelParamSchema; value: unknown; connected: boolean; connectedSet: Set<string>
-  onChange: (v: unknown) => void; onPreview: (src: string) => void
-  edges?: Array<{ id: string; source: string; target: string; targetHandle?: string | null }>
-  nodes?: Array<{ id: string; data: { label?: string } }>
+export function MediaRow({
+  nodeId,
+  schema,
+  value,
+  connected,
+  connectedSet,
+  onChange,
+  onPreview,
+  edges,
+  nodes,
+}: {
+  nodeId: string;
+  schema: ModelParamSchema;
+  value: unknown;
+  connected: boolean;
+  connectedSet: Set<string>;
+  onChange: (v: unknown) => void;
+  onPreview: (src: string) => void;
+  edges?: Array<{
+    id: string;
+    source: string;
+    target: string;
+    targetHandle?: string | null;
+  }>;
+  nodes?: Array<{ id: string; data: { label?: string } }>;
 }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const disconnectHandle = (handleId: string) => {
-    const edge = edges?.find(e => e.target === nodeId && e.targetHandle === handleId)
-    if (edge) useWorkflowStore.getState().removeEdge(edge.id)
-  }
-  const label = schema.label ?? formatLabel(schema.name)
-  const handleId = `param-${schema.name}`
-  const nameLC = schema.name.toLowerCase()
-  const acceptType = schema.mediaType === 'image' ? 'image/*' : schema.mediaType === 'video' ? 'video/*' : schema.mediaType === 'audio' ? 'audio/*' : '*/*'
-  const [uploadState, setUploadState] = useState<'idle' | 'uploading' | 'success' | 'error'>('idle')
-  const [uploadError, setUploadError] = useState('')
+    const edge = edges?.find(
+      (e) => e.target === nodeId && e.targetHandle === handleId,
+    );
+    if (edge) useWorkflowStore.getState().removeEdge(edge.id);
+  };
+  const label = schema.label ?? formatLabel(schema.name);
+  const handleId = `param-${schema.name}`;
+  const nameLC = schema.name.toLowerCase();
+  const acceptType =
+    schema.mediaType === "image"
+      ? "image/*"
+      : schema.mediaType === "video"
+        ? "video/*"
+        : schema.mediaType === "audio"
+          ? "audio/*"
+          : "*/*";
+  const [uploadState, setUploadState] = useState<
+    "idle" | "uploading" | "success" | "error"
+  >("idle");
+  const [uploadError, setUploadError] = useState("");
 
-  const isArray = nameLC.endsWith('images') || nameLC.endsWith('videos') || nameLC.endsWith('audios')
-    || nameLC.endsWith('image_urls') || nameLC.endsWith('video_urls') || nameLC.endsWith('audio_urls')
-    || nameLC.endsWith('_urls')
+  const isArray =
+    nameLC.endsWith("images") ||
+    nameLC.endsWith("videos") ||
+    nameLC.endsWith("audios") ||
+    nameLC.endsWith("image_urls") ||
+    nameLC.endsWith("video_urls") ||
+    nameLC.endsWith("audio_urls") ||
+    nameLC.endsWith("_urls");
 
   const doUpload = async (file: File, cb: (url: string) => void) => {
-    setUploadState('uploading'); setUploadError('')
+    setUploadState("uploading");
+    setUploadError("");
     try {
-      const url = await apiClient.uploadFile(file)
-      cb(url)
-      setUploadState('success')
-      setTimeout(() => setUploadState('idle'), 2000)
+      const url = await apiClient.uploadFile(file);
+      cb(url);
+      setUploadState("success");
+      setTimeout(() => setUploadState("idle"), 2000);
     } catch (err) {
-      setUploadState('error')
-      setUploadError(err instanceof Error ? err.message : t('workflow.mediaUpload.uploadFailed', 'Upload failed'))
+      setUploadState("error");
+      setUploadError(
+        err instanceof Error
+          ? err.message
+          : t("workflow.mediaUpload.uploadFailed", "Upload failed"),
+      );
     }
-  }
+  };
 
   const isValidUrl = (v: string) => {
-    if (!v.trim()) return true
+    if (!v.trim()) return true;
     try {
-      const url = new URL(v)
-      return url.protocol === 'http:' || url.protocol === 'https:'
-    } catch { return false }
-  }
+      const url = new URL(v);
+      return url.protocol === "http:" || url.protocol === "https:";
+    } catch {
+      return false;
+    }
+  };
 
-  const isPreviewable = (v: string) => v && !v.startsWith('blob:') && isValidUrl(v)
+  const isPreviewable = (v: string) =>
+    v && !v.startsWith("blob:") && isValidUrl(v);
 
   if (isArray) {
-    const items: string[] = Array.isArray(value) ? value : (value ? [String(value)] : [''])
+    const items: string[] = Array.isArray(value)
+      ? value
+      : value
+        ? [String(value)]
+        : [""];
     const canDeleteIndex = (i: number) => {
-      if (i !== items.length - 1) return false
-      const hid = `${schema.name}[${i}]`
-      return !connectedSet.has(hid)
-    }
+      if (i !== items.length - 1) return false;
+      const hid = `${schema.name}[${i}]`;
+      return !connectedSet.has(hid);
+    };
 
     return (
       <>
         <div className="px-3 py-1">
           <div className="flex items-center gap-1 text-xs font-medium text-green-400">
-            {label}{schema.required && <span className="text-red-400">*</span>}
+            {label}
+            {schema.required && <span className="text-red-400">*</span>}
             {schema.description && <Tip text={schema.description} />}
-            <span className="text-[10px] text-[hsl(var(--muted-foreground))] font-normal ml-1">({items.length})</span>
+            <span className="text-[10px] text-[hsl(var(--muted-foreground))] font-normal ml-1">
+              ({items.length})
+            </span>
             <UploadStatusBadge state={uploadState} error={uploadError} />
           </div>
         </div>
         {items.map((v, i) => {
-          const hid = `${schema.name}[${i}]`
-          const conn = connectedSet.has(hid)
-          const urlValid = isValidUrl(v)
+          const hid = `${schema.name}[${i}]`;
+          const conn = connectedSet.has(hid);
+          const urlValid = isValidUrl(v);
           return (
             <div key={i} className="min-h-[32px] px-3 py-0.5">
               <div>
                 <div className="flex items-center gap-1">
                   <HandleAnchor id={hid} type="target" connected={conn} media />
-                  <span className="text-[10px] text-[hsl(var(--muted-foreground))] w-5 flex-shrink-0">[{i + 1}]</span>
-                  {conn ? <LinkedBadge nodeId={nodeId} handleId={hid} edges={edges} nodes={nodes} onDisconnect={() => disconnectHandle(hid)} /> : (
+                  <span className="text-[10px] text-[hsl(var(--muted-foreground))] w-5 flex-shrink-0">
+                    [{i + 1}]
+                  </span>
+                  {conn ? (
+                    <LinkedBadge
+                      nodeId={nodeId}
+                      handleId={hid}
+                      edges={edges}
+                      nodes={nodes}
+                      onDisconnect={() => disconnectHandle(hid)}
+                    />
+                  ) : (
                     <>
-                      <CompInput type="text" value={v || ''} placeholder={t('workflow.mediaUpload.urlShortPlaceholder', 'URL...')}
-                        onChange={e => { const a = [...items]; a[i] = e.target.value; onChange(a) }}
-                        onClick={e => e.stopPropagation()}
-                        className={`flex-1 rounded-md border bg-[hsl(var(--background))] px-2 py-1 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 ${urlValid ? 'border-[hsl(var(--border))] focus:ring-green-500/50' : 'border-red-500 focus:ring-red-500/50'}`} />
-                      <FileBtn accept={acceptType} uploading={uploadState === 'uploading'}
-                        onFile={(f: File) => doUpload(f, url => { const a = [...items]; a[i] = url; onChange(a) })} />
+                      <CompInput
+                        type="text"
+                        value={v || ""}
+                        placeholder={t(
+                          "workflow.mediaUpload.urlShortPlaceholder",
+                          "URL...",
+                        )}
+                        onChange={(e) => {
+                          const a = [...items];
+                          a[i] = e.target.value;
+                          onChange(a);
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                        className={`flex-1 rounded-md border bg-[hsl(var(--background))] px-2 py-1 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 ${urlValid ? "border-[hsl(var(--border))] focus:ring-green-500/50" : "border-red-500 focus:ring-red-500/50"}`}
+                      />
+                      <FileBtn
+                        accept={acceptType}
+                        uploading={uploadState === "uploading"}
+                        onFile={(f: File) =>
+                          doUpload(f, (url) => {
+                            const a = [...items];
+                            a[i] = url;
+                            onChange(a);
+                          })
+                        }
+                      />
                     </>
                   )}
                   {canDeleteIndex(i) ? (
-                    <button onClick={e => { e.stopPropagation(); onChange(items.slice(0, -1)) }}
-                      className="text-red-400/70 hover:text-red-400 text-sm px-0.5" title={t('workflow.removeLast', 'Remove last')}>✕</button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onChange(items.slice(0, -1));
+                      }}
+                      className="text-red-400/70 hover:text-red-400 text-sm px-0.5"
+                      title={t("workflow.removeLast", "Remove last")}
+                    >
+                      ✕
+                    </button>
                   ) : (
                     <div className="w-4" />
                   )}
                 </div>
                 {!urlValid && v.trim() && (
-                  <div className="pl-7 text-[9px] text-red-400 mt-0.5">{t('workflow.invalidUrl', 'Invalid URL')}</div>
+                  <div className="pl-7 text-[9px] text-red-400 mt-0.5">
+                    {t("workflow.invalidUrl", "Invalid URL")}
+                  </div>
                 )}
-                {isPreviewable(v) && schema.mediaType === 'image' && (
+                {isPreviewable(v) && schema.mediaType === "image" && (
                   <div className="pl-6 mt-0.5">
-                    <img src={v} alt="" onClick={e => { e.stopPropagation(); onPreview(v) }}
-                      className="max-h-[50px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-1 hover:ring-blue-500/40" />
+                    <img
+                      src={v}
+                      alt=""
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onPreview(v);
+                      }}
+                      className="max-h-[50px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-1 hover:ring-blue-500/40"
+                    />
                   </div>
                 )}
               </div>
             </div>
-          )
+          );
         })}
         <div className="px-3 py-0.5">
-          <button onClick={e => { e.stopPropagation(); onChange([...items, '']) }}
-            className="w-full py-1.5 ml-2 rounded-md border border-dashed border-blue-500/30 text-[11px] font-medium text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 hover:border-blue-500/50 transition-colors">
-            + {t('workflow.add', 'Add')}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange([...items, ""]);
+            }}
+            className="w-full py-1.5 ml-2 rounded-md border border-dashed border-blue-500/30 text-[11px] font-medium text-blue-400 hover:text-blue-300 hover:bg-blue-500/10 hover:border-blue-500/50 transition-colors"
+          >
+            + {t("workflow.add", "Add")}
           </button>
         </div>
       </>
-    )
+    );
   }
 
   /* ── Single media ── */
-  const sval = typeof value === 'string' ? value : ''
-  const urlValid = isValidUrl(sval)
+  const sval = typeof value === "string" ? value : "";
+  const urlValid = isValidUrl(sval);
 
   return (
     <div className="px-3 py-1">
       <label className="flex items-center gap-1 mb-1 text-xs font-medium text-green-400">
         <HandleAnchor id={handleId} type="target" connected={connected} media />
-        {label}{schema.required && <span className="text-red-400">*</span>}
+        {label}
+        {schema.required && <span className="text-red-400">*</span>}
         {schema.description && <Tip text={schema.description} />}
         <UploadStatusBadge state={uploadState} error={uploadError} />
       </label>
       <div>
-        {connected ? <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} onDisconnect={() => disconnectHandle(handleId)} /> : (
+        {connected ? (
+          <LinkedBadge
+            nodeId={nodeId}
+            handleId={handleId}
+            edges={edges}
+            nodes={nodes}
+            onDisconnect={() => disconnectHandle(handleId)}
+          />
+        ) : (
           <>
             <div className="flex items-center gap-1">
               <CompInput
                 type="text"
                 value={sval}
-                placeholder={t('workflow.enterField', { field: label.toLowerCase(), defaultValue: `Enter ${label.toLowerCase()}...` })}
-                onChange={e => onChange(e.target.value)} onClick={e => e.stopPropagation()}
-                className={`flex-1 rounded-md border bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 ${urlValid ? 'border-[hsl(var(--border))] focus:ring-green-500/50' : 'border-red-500 focus:ring-red-500/50'}`} />
-              <FileBtn accept={acceptType} uploading={uploadState === 'uploading'} onFile={(f: File) => doUpload(f, url => onChange(url))} />
+                placeholder={t("workflow.enterField", {
+                  field: label.toLowerCase(),
+                  defaultValue: `Enter ${label.toLowerCase()}...`,
+                })}
+                onChange={(e) => onChange(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                className={`flex-1 rounded-md border bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 ${urlValid ? "border-[hsl(var(--border))] focus:ring-green-500/50" : "border-red-500 focus:ring-red-500/50"}`}
+              />
+              <FileBtn
+                accept={acceptType}
+                uploading={uploadState === "uploading"}
+                onFile={(f: File) => doUpload(f, (url) => onChange(url))}
+              />
             </div>
-            {!urlValid && sval.trim() && <div className="text-[9px] text-red-400 mt-0.5">{t('workflow.invalidUrl', 'Invalid URL')}</div>}
-            {isPreviewable(sval) && schema.mediaType === 'image' && (
-              <img src={sval} alt="" onClick={e => { e.stopPropagation(); onPreview(sval) }}
-                className="mt-1.5 max-h-[80px] rounded-md border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow" />
+            {!urlValid && sval.trim() && (
+              <div className="text-[9px] text-red-400 mt-0.5">
+                {t("workflow.invalidUrl", "Invalid URL")}
+              </div>
+            )}
+            {isPreviewable(sval) && schema.mediaType === "image" && (
+              <img
+                src={sval}
+                alt=""
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onPreview(sval);
+                }}
+                className="mt-1.5 max-h-[80px] rounded-md border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow"
+              />
             )}
-            {isPreviewable(sval) && schema.mediaType === 'video' && (
-              <video src={sval} controls className="mt-1.5 max-h-[80px] rounded-md border border-[hsl(var(--border))]" onClick={e => e.stopPropagation()} />
+            {isPreviewable(sval) && schema.mediaType === "video" && (
+              <video
+                src={sval}
+                controls
+                className="mt-1.5 max-h-[80px] rounded-md border border-[hsl(var(--border))]"
+                onClick={(e) => e.stopPropagation()}
+              />
             )}
           </>
         )}
       </div>
     </div>
-  )
+  );
 }
 
-
 /* ══════════════════════════════════════════════════════════════════════
    LoraRow — inline LoRA editor (path + scale, add/remove)
    ══════════════════════════════════════════════════════════════════════ */
 
-interface LoraItem { path: string; scale: number }
+interface LoraItem {
+  path: string;
+  scale: number;
+}
 
-export function LoraRow({ schema, value, onChange }: {
-  schema: ModelParamSchema; value: unknown; onChange: (v: unknown) => void
+export function LoraRow({
+  schema,
+  value,
+  onChange,
+}: {
+  schema: ModelParamSchema;
+  value: unknown;
+  onChange: (v: unknown) => void;
 }) {
-  const label = schema.label ?? formatLabel(schema.name)
-  const maxItems = schema.maxItems ?? 3
-  const items: LoraItem[] = Array.isArray(value) ? value : []
-  const [inputPath, setInputPath] = useState('')
+  const label = schema.label ?? formatLabel(schema.name);
+  const maxItems = schema.maxItems ?? 3;
+  const items: LoraItem[] = Array.isArray(value) ? value : [];
+  const [inputPath, setInputPath] = useState("");
 
   const addLora = () => {
-    const path = inputPath.trim()
-    if (!path || items.length >= maxItems) return
-    if (items.some(l => l.path === path)) return
-    onChange([...items, { path, scale: 1 }])
-    setInputPath('')
-  }
+    const path = inputPath.trim();
+    if (!path || items.length >= maxItems) return;
+    if (items.some((l) => l.path === path)) return;
+    onChange([...items, { path, scale: 1 }]);
+    setInputPath("");
+  };
 
   const removeLora = (index: number) => {
-    onChange(items.filter((_, i) => i !== index))
-  }
+    onChange(items.filter((_, i) => i !== index));
+  };
 
   const updateScale = (index: number, scale: number) => {
-    onChange(items.map((l, i) => i === index ? { ...l, scale } : l))
-  }
+    onChange(items.map((l, i) => (i === index ? { ...l, scale } : l)));
+  };
 
   return (
     <div className="relative px-3 py-1">
       <label className="flex items-center gap-1 mb-1 text-xs font-medium text-purple-400">
-        {label}{schema.required && <span className="text-red-400">*</span>}
+        {label}
+        {schema.required && <span className="text-red-400">*</span>}
         {schema.description && <Tip text={schema.description} />}
-        <span className="text-[10px] text-[hsl(var(--muted-foreground))] font-normal ml-1">({items.length}/{maxItems})</span>
+        <span className="text-[10px] text-[hsl(var(--muted-foreground))] font-normal ml-1">
+          ({items.length}/{maxItems})
+        </span>
       </label>
       <div className="space-y-1.5">
         {items.map((lora, i) => (
-          <div key={lora.path} className="flex items-center gap-1.5 p-1.5 rounded-md bg-[hsl(var(--muted))] border border-[hsl(var(--border))]" onClick={e => e.stopPropagation()}>
-            <span className="text-[10px] text-[hsl(var(--foreground))] truncate flex-1 min-w-0" title={lora.path}>{lora.path}</span>
-            <input type="range" min={0} max={4} step={0.1} value={lora.scale}
-              onChange={e => updateScale(i, Number(e.target.value))}
-              className="nodrag w-16 h-1 accent-purple-500 cursor-pointer flex-shrink-0" />
-            <span className="text-[9px] text-[hsl(var(--muted-foreground))] w-6 text-right flex-shrink-0">{lora.scale.toFixed(1)}</span>
-            <button onClick={() => removeLora(i)} className="text-red-400/70 hover:text-red-400 text-sm flex-shrink-0">✕</button>
+          <div
+            key={lora.path}
+            className="flex items-center gap-1.5 p-1.5 rounded-md bg-[hsl(var(--muted))] border border-[hsl(var(--border))]"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span
+              className="text-[10px] text-[hsl(var(--foreground))] truncate flex-1 min-w-0"
+              title={lora.path}
+            >
+              {lora.path}
+            </span>
+            <input
+              type="range"
+              min={0}
+              max={4}
+              step={0.1}
+              value={lora.scale}
+              onChange={(e) => updateScale(i, Number(e.target.value))}
+              className="nodrag w-16 h-1 accent-purple-500 cursor-pointer flex-shrink-0"
+            />
+            <span className="text-[9px] text-[hsl(var(--muted-foreground))] w-6 text-right flex-shrink-0">
+              {lora.scale.toFixed(1)}
+            </span>
+            <button
+              onClick={() => removeLora(i)}
+              className="text-red-400/70 hover:text-red-400 text-sm flex-shrink-0"
+            >
+              ✕
+            </button>
           </div>
         ))}
         {items.length < maxItems && (
-          <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
-            <CompInput type="text" value={inputPath} placeholder="user/repo or .safetensors URL"
-              onChange={e => setInputPath(e.target.value)}
-              onKeyDown={e => {
-                const composing = e.nativeEvent.isComposing || e.key === 'Process'
-                if (!composing && e.key === 'Enter') addLora()
+          <div
+            className="flex items-center gap-1"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CompInput
+              type="text"
+              value={inputPath}
+              placeholder="user/repo or .safetensors URL"
+              onChange={(e) => setInputPath(e.target.value)}
+              onKeyDown={(e) => {
+                const composing =
+                  e.nativeEvent.isComposing || e.key === "Process";
+                if (!composing && e.key === "Enter") addLora();
               }}
-              className="flex-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-purple-500/50 placeholder:text-[hsl(var(--muted-foreground))]" />
-            <button onClick={addLora} disabled={!inputPath.trim()}
-              className="px-2 py-1 rounded-md text-[10px] font-medium bg-purple-500/15 text-purple-400 hover:bg-purple-500/25 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex-shrink-0">
+              className="flex-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1 text-[11px] text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-purple-500/50 placeholder:text-[hsl(var(--muted-foreground))]"
+            />
+            <button
+              onClick={addLora}
+              disabled={!inputPath.trim()}
+              className="px-2 py-1 rounded-md text-[10px] font-medium bg-purple-500/15 text-purple-400 hover:bg-purple-500/25 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex-shrink-0"
+            >
               + Add
             </button>
           </div>
         )}
       </div>
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    JsonRow — JSON textarea for complex types (array, object)
    ══════════════════════════════════════════════════════════════════════ */
 
-export function JsonRow({ nodeId, schema, value, connected, onChange, edges, nodes }: {
-  nodeId: string; schema: ModelParamSchema; value: unknown; connected: boolean
-  onChange: (v: unknown) => void
-  edges?: Array<{ id: string; source: string; target: string; targetHandle?: string | null }>
-  nodes?: Array<{ id: string; data: { label?: string } }>
+export function JsonRow({
+  nodeId,
+  schema,
+  value,
+  connected,
+  onChange,
+  edges,
+  nodes,
+}: {
+  nodeId: string;
+  schema: ModelParamSchema;
+  value: unknown;
+  connected: boolean;
+  onChange: (v: unknown) => void;
+  edges?: Array<{
+    id: string;
+    source: string;
+    target: string;
+    targetHandle?: string | null;
+  }>;
+  nodes?: Array<{ id: string; data: { label?: string } }>;
 }) {
-  const label = schema.label ?? formatLabel(schema.name)
-  const handleId = `param-${schema.name}`
+  const label = schema.label ?? formatLabel(schema.name);
+  const handleId = `param-${schema.name}`;
 
   const displayValue = useMemo(() => {
     if (value === undefined || value === null) {
       if (schema.default !== undefined) {
-        return typeof schema.default === 'string' ? schema.default : JSON.stringify(schema.default, null, 2)
+        return typeof schema.default === "string"
+          ? schema.default
+          : JSON.stringify(schema.default, null, 2);
       }
-      return ''
+      return "";
     }
-    if (typeof value === 'string') return value
-    return JSON.stringify(value, null, 2)
-  }, [value, schema.default])
+    if (typeof value === "string") return value;
+    return JSON.stringify(value, null, 2);
+  }, [value, schema.default]);
 
   const handleChange = (raw: string) => {
     try {
-      const parsed = JSON.parse(raw)
-      onChange(parsed)
+      const parsed = JSON.parse(raw);
+      onChange(parsed);
     } catch {
-      onChange(raw)
+      onChange(raw);
     }
-  }
+  };
 
   const onDisconnect = () => {
-    const edge = edges?.find(e => e.target === nodeId && e.targetHandle === handleId)
-    if (edge) useWorkflowStore.getState().removeEdge(edge.id)
-  }
+    const edge = edges?.find(
+      (e) => e.target === nodeId && e.targetHandle === handleId,
+    );
+    if (edge) useWorkflowStore.getState().removeEdge(edge.id);
+  };
 
   return (
     <div className="px-3 py-1">
       <label className="flex items-center gap-1 mb-1 text-xs font-medium text-orange-400">
         <HandleAnchor id={handleId} type="target" connected={connected} />
-        {label}{schema.required && <span className="text-red-400">*</span>}
+        {label}
+        {schema.required && <span className="text-red-400">*</span>}
         {schema.description && <Tip text={schema.description} />}
-        <span className="text-[10px] text-[hsl(var(--muted-foreground))] font-normal ml-1">JSON</span>
+        <span className="text-[10px] text-[hsl(var(--muted-foreground))] font-normal ml-1">
+          JSON
+        </span>
       </label>
       <div>
-        {connected ? <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} onDisconnect={onDisconnect} /> : (
-          <CompTextarea value={displayValue} onChange={e => handleChange(e.target.value)}
-            placeholder={schema.placeholder ?? `e.g. [1, 2, 3] or {"key": "value"}`}
-            rows={3} onClick={e => e.stopPropagation()}
-            className="nodrag w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-orange-500/50 focus:border-orange-500 placeholder:text-[hsl(var(--muted-foreground))] resize-y min-h-[48px] max-h-[300px] font-mono" />
+        {connected ? (
+          <LinkedBadge
+            nodeId={nodeId}
+            handleId={handleId}
+            edges={edges}
+            nodes={nodes}
+            onDisconnect={onDisconnect}
+          />
+        ) : (
+          <CompTextarea
+            value={displayValue}
+            onChange={(e) => handleChange(e.target.value)}
+            placeholder={
+              schema.placeholder ?? `e.g. [1, 2, 3] or {"key": "value"}`
+            }
+            rows={3}
+            onClick={(e) => e.stopPropagation()}
+            className="nodrag w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-orange-500/50 focus:border-orange-500 placeholder:text-[hsl(var(--muted-foreground))] resize-y min-h-[48px] max-h-[300px] font-mono"
+          />
         )}
       </div>
     </div>
-  )
+  );
 }
 
-
 /* ══════════════════════════════════════════════════════════════════════
    DefParamControl — control for ParamDefinition-based params
    ══════════════════════════════════════════════════════════════════════ */
 
-export function DefParamControl({ nodeId, param, value, onChange }: { nodeId: string; param: ParamDefinition; value: unknown; onChange: (v: unknown) => void }) {
-  const { t } = useTranslation()
-  const cls = 'rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50'
-  const cur = value ?? param.default
-  const workflowId = useWorkflowStore(s => s.workflowId)
-  const saveWorkflow = useWorkflowStore(s => s.saveWorkflow)
-  const nodeType = useWorkflowStore(s => s.nodes.find(n => n.id === nodeId)?.data?.nodeType as string | undefined)
-  const [uploading, setUploading] = useState(false)
-  const [selectingDir, setSelectingDir] = useState(false)
-  const [openingDir, setOpeningDir] = useState(false)
+export function DefParamControl({
+  nodeId,
+  param,
+  value,
+  onChange,
+}: {
+  nodeId: string;
+  param: ParamDefinition;
+  value: unknown;
+  onChange: (v: unknown) => void;
+}) {
+  const { t } = useTranslation();
+  const cls =
+    "rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50";
+  const cur = value ?? param.default;
+  const workflowId = useWorkflowStore((s) => s.workflowId);
+  const saveWorkflow = useWorkflowStore((s) => s.saveWorkflow);
+  const nodeType = useWorkflowStore(
+    (s) =>
+      s.nodes.find((n) => n.id === nodeId)?.data?.nodeType as
+        | string
+        | undefined,
+  );
+  const [uploading, setUploading] = useState(false);
+  const [selectingDir, setSelectingDir] = useState(false);
+  const [openingDir, setOpeningDir] = useState(false);
 
   const ensureWorkflowId = useCallback(async () => {
-    let wfId = workflowId
+    let wfId = workflowId;
     if (!wfId) {
-      await saveWorkflow()
-      wfId = useWorkflowStore.getState().workflowId
+      await saveWorkflow();
+      wfId = useWorkflowStore.getState().workflowId;
     }
-    return wfId
-  }, [workflowId, saveWorkflow])
+    return wfId;
+  }, [workflowId, saveWorkflow]);
 
-  if (nodeType === 'output/file' && param.key === 'outputDir') {
-    const textVal = String(cur ?? '')
+  if (nodeType === "output/file" && param.key === "outputDir") {
+    const textVal = String(cur ?? "");
     const handlePickDirectory = async () => {
       try {
-        setSelectingDir(true)
-        const result = await window.electronAPI?.selectDirectory?.()
-        if (result?.success && result.path) onChange(result.path)
+        setSelectingDir(true);
+        const result = await window.electronAPI?.selectDirectory?.();
+        if (result?.success && result.path) onChange(result.path);
       } catch (error) {
-        console.error('Select directory failed:', error)
+        console.error("Select directory failed:", error);
       } finally {
-        setSelectingDir(false)
+        setSelectingDir(false);
       }
-    }
+    };
 
     const handleOpenDirectory = async () => {
       try {
-        setOpeningDir(true)
-        const dir = textVal.trim()
+        setOpeningDir(true);
+        const dir = textVal.trim();
         if (dir) {
-          await window.electronAPI?.openFileLocation?.(dir)
-          return
+          await window.electronAPI?.openFileLocation?.(dir);
+          return;
         }
-        const wfId = await ensureWorkflowId()
-        if (!wfId) return
-        const { storageIpc } = await import('../../../ipc/ipc-client')
-        await storageIpc.openWorkflowFolder(wfId)
+        const wfId = await ensureWorkflowId();
+        if (!wfId) return;
+        const { storageIpc } = await import("../../../ipc/ipc-client");
+        await storageIpc.openWorkflowFolder(wfId);
       } catch (error) {
-        console.error('Open output folder failed:', error)
+        console.error("Open output folder failed:", error);
       } finally {
-        setOpeningDir(false)
+        setOpeningDir(false);
       }
-    }
+    };
 
     return (
       <div className="w-full max-w-[260px] space-y-1.5">
@@ -533,103 +911,205 @@ export function DefParamControl({ nodeId, param, value, onChange }: { nodeId: st
           <CompInput
             type="text"
             value={textVal}
-            onChange={e => onChange(e.target.value)}
-            placeholder={t('workflow.nodeDefs.output/file.params.outputDir.placeholder', 'Leave empty to use workflow default output directory')}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={t(
+              "workflow.nodeDefs.output/file.params.outputDir.placeholder",
+              "Leave empty to use workflow default output directory",
+            )}
             className={`${cls} flex-1`}
-            onClick={e => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
           />
           <button
             type="button"
-            onClick={e => { e.stopPropagation(); handlePickDirectory() }}
-            title={t('workflow.selectDirectory', 'Select directory')}
+            onClick={(e) => {
+              e.stopPropagation();
+              handlePickDirectory();
+            }}
+            title={t("workflow.selectDirectory", "Select directory")}
             className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] transition-colors ${
-              selectingDir ? 'bg-blue-500/25 animate-pulse text-blue-300' : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
+              selectingDir
+                ? "bg-blue-500/25 animate-pulse text-blue-300"
+                : "bg-blue-500/15 text-blue-400 hover:bg-blue-500/25"
             }`}
           >
             📂
           </button>
           <button
             type="button"
-            onClick={e => { e.stopPropagation(); handleOpenDirectory() }}
-            title={textVal.trim() ? t('workflow.openFolder', 'Open folder') : t('workflow.openWorkflowFolder', 'Open workflow folder')}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleOpenDirectory();
+            }}
+            title={
+              textVal.trim()
+                ? t("workflow.openFolder", "Open folder")
+                : t("workflow.openWorkflowFolder", "Open workflow folder")
+            }
             className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] transition-colors ${
-              openingDir ? 'bg-blue-500/25 animate-pulse text-blue-300' : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
+              openingDir
+                ? "bg-blue-500/25 animate-pulse text-blue-300"
+                : "bg-blue-500/15 text-blue-400 hover:bg-blue-500/25"
             }`}
           >
             ↗
           </button>
         </div>
-        <div className="text-[10px] text-muted-foreground truncate" title={textVal || t('workflow.outputDirFallbackHint', 'Not set: will export to workflow default directory')}>
-          {textVal || t('workflow.outputDirFallbackHint', 'Not set: will export to workflow default directory')}
+        <div
+          className="text-[10px] text-muted-foreground truncate"
+          title={
+            textVal ||
+            t(
+              "workflow.outputDirFallbackHint",
+              "Not set: will export to workflow default directory",
+            )
+          }
+        >
+          {textVal ||
+            t(
+              "workflow.outputDirFallbackHint",
+              "Not set: will export to workflow default directory",
+            )}
         </div>
       </div>
-    )
+    );
   }
 
-  if (param.type === 'select' && param.options) {
+  if (param.type === "select" && param.options) {
     return (
-      <select value={String(cur ?? '')} onChange={e => onChange(e.target.value)} className={`nodrag ${cls} max-w-[160px]`} onClick={e => e.stopPropagation()}>
-        {param.options.map(o => (
+      <select
+        value={String(cur ?? "")}
+        onChange={(e) => onChange(e.target.value)}
+        className={`nodrag ${cls} max-w-[160px]`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {param.options.map((o) => (
           <option key={o.value} value={o.value}>
-            {t(`workflow.nodeDefs.${nodeType}.params.${param.key}.options.${o.value}`, o.label)}
+            {t(
+              `workflow.nodeDefs.${nodeType}.params.${param.key}.options.${o.value}`,
+              o.label,
+            )}
           </option>
         ))}
       </select>
-    )
+    );
   }
-  if (param.type === 'file') {
-    const textVal = String(cur ?? '')
+  if (param.type === "file") {
+    const textVal = String(cur ?? "");
     const handleFile = async (file: File) => {
       try {
-        setUploading(true)
-        const wfId = await ensureWorkflowId()
-        if (!wfId) throw new Error('Workflow not saved yet.')
-        const { storageIpc } = await import('../../../ipc/ipc-client')
-        const data = await file.arrayBuffer()
-        const localPath = await storageIpc.saveUploadedFile(wfId, nodeId, file.name, data)
-        onChange(`local-asset://${encodeURIComponent(localPath)}`)
+        setUploading(true);
+        const wfId = await ensureWorkflowId();
+        if (!wfId) throw new Error("Workflow not saved yet.");
+        const { storageIpc } = await import("../../../ipc/ipc-client");
+        const data = await file.arrayBuffer();
+        const localPath = await storageIpc.saveUploadedFile(
+          wfId,
+          nodeId,
+          file.name,
+          data,
+        );
+        onChange(`local-asset://${encodeURIComponent(localPath)}`);
       } catch (error) {
-        console.error('Local upload failed:', error)
+        console.error("Local upload failed:", error);
       } finally {
-        setUploading(false)
+        setUploading(false);
       }
-    }
+    };
     return (
       <div className="flex items-center gap-1.5 w-full max-w-[220px]">
         <CompInput
           type="text"
           value={textVal}
-          onChange={e => onChange(e.target.value)}
-          placeholder={t('workflow.localFileOrUrl', 'Local file or URL')}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={t("workflow.localFileOrUrl", "Local file or URL")}
           className={`${cls} flex-1`}
-          onClick={e => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
         />
-        <label className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] cursor-pointer transition-colors ${uploading ? 'bg-blue-500/25 animate-pulse' : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'}`}
-          onClick={e => e.stopPropagation()}>
+        <label
+          className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] cursor-pointer transition-colors ${uploading ? "bg-blue-500/25 animate-pulse" : "bg-blue-500/15 text-blue-400 hover:bg-blue-500/25"}`}
+          onClick={(e) => e.stopPropagation()}
+        >
           {uploading ? (
-            <svg className="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" /></svg>
+            <svg
+              className="animate-spin"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="10"
+                strokeDasharray="60"
+                strokeDashoffset="20"
+              />
+            </svg>
           ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
             </svg>
           )}
-          <input type="file" className="hidden" disabled={uploading}
-            onChange={e => {
-              const f = e.target.files?.[0]
-              if (f) handleFile(f)
+          <input
+            type="file"
+            className="hidden"
+            disabled={uploading}
+            onChange={(e) => {
+              const f = e.target.files?.[0];
+              if (f) handleFile(f);
             }}
-            onClick={e => e.stopPropagation()} />
+            onClick={(e) => e.stopPropagation()}
+          />
         </label>
       </div>
-    )
+    );
   }
-  if (param.type === 'boolean') return <ToggleSwitch checked={Boolean(cur)} onChange={onChange} />
-  if (param.type === 'number' || param.type === 'slider') return <NumberInput value={cur as number | undefined} min={param.validation?.min} max={param.validation?.max} step={param.validation?.step ?? 1} onChange={onChange} />
-  if (param.type === 'textarea') return <CompTextarea value={String(cur ?? '')} onChange={e => onChange(e.target.value)} className={`nodrag ${cls} w-full min-h-[40px] resize-y max-h-[300px]`} onClick={e => e.stopPropagation()} />
-  return <CompInput type="text" value={String(cur ?? '')} onChange={e => onChange(e.target.value)} className={`${cls} max-w-[160px]`} onClick={e => e.stopPropagation()} />
+  if (param.type === "boolean")
+    return <ToggleSwitch checked={Boolean(cur)} onChange={onChange} />;
+  if (param.type === "number" || param.type === "slider")
+    return (
+      <NumberInput
+        value={cur as number | undefined}
+        min={param.validation?.min}
+        max={param.validation?.max}
+        step={param.validation?.step ?? 1}
+        onChange={onChange}
+      />
+    );
+  if (param.type === "textarea")
+    return (
+      <CompTextarea
+        value={String(cur ?? "")}
+        onChange={(e) => onChange(e.target.value)}
+        className={`nodrag ${cls} w-full min-h-[40px] resize-y max-h-[300px]`}
+        onClick={(e) => e.stopPropagation()}
+      />
+    );
+  return (
+    <CompInput
+      type="text"
+      value={String(cur ?? "")}
+      onChange={(e) => onChange(e.target.value)}
+      className={`${cls} max-w-[160px]`}
+      onClick={(e) => e.stopPropagation()}
+    />
+  );
 }
 
-
 /* ══════════════════════════════════════════════════════════════════════
    InputPortControl — file/media input for PortDefinition-based inputs
    ══════════════════════════════════════════════════════════════════════ */
@@ -642,117 +1122,157 @@ export function InputPortControl({
   onPreview,
   referenceImageUrl,
   showDrawMaskButton,
-  showPreview = true
+  showPreview = true,
 }: {
-  nodeId: string
-  port: PortDefinition
-  value: unknown
-  onChange: (v: unknown) => void
-  onPreview?: (src: string) => void
-  referenceImageUrl?: string
-  showDrawMaskButton?: boolean
-  showPreview?: boolean
+  nodeId: string;
+  port: PortDefinition;
+  value: unknown;
+  onChange: (v: unknown) => void;
+  onPreview?: (src: string) => void;
+  referenceImageUrl?: string;
+  showDrawMaskButton?: boolean;
+  showPreview?: boolean;
 }) {
-  const { t } = useTranslation()
-  const nodeType = useWorkflowStore(s => s.nodes.find(n => n.id === nodeId)?.data?.nodeType as string | undefined)
-  const workflowId = useWorkflowStore(s => s.workflowId)
-  const saveWorkflow = useWorkflowStore(s => s.saveWorkflow)
-  const [uploading, setUploading] = useState(false)
-  const [maskEditorOpen, setMaskEditorOpen] = useState(false)
-  const [drawingMask, setDrawingMask] = useState(false)
-  const textVal = String(value ?? '')
-  const cls = 'rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50'
+  const { t } = useTranslation();
+  const nodeType = useWorkflowStore(
+    (s) =>
+      s.nodes.find((n) => n.id === nodeId)?.data?.nodeType as
+        | string
+        | undefined,
+  );
+  const workflowId = useWorkflowStore((s) => s.workflowId);
+  const saveWorkflow = useWorkflowStore((s) => s.saveWorkflow);
+  const [uploading, setUploading] = useState(false);
+  const [maskEditorOpen, setMaskEditorOpen] = useState(false);
+  const [drawingMask, setDrawingMask] = useState(false);
+  const textVal = String(value ?? "");
+  const cls =
+    "rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50";
 
   const detectSource = textVal
     ? (/^local-asset:\/\//i.test(textVal)
         ? (() => {
             try {
-              return decodeURIComponent(textVal.replace(/^local-asset:\/\//i, '')).toLowerCase()
+              return decodeURIComponent(
+                textVal.replace(/^local-asset:\/\//i, ""),
+              ).toLowerCase();
             } catch {
-              return textVal.toLowerCase()
+              return textVal.toLowerCase();
             }
           })()
         : textVal.toLowerCase()
-    ).split('?')[0]
-    : ''
-  const isPreviewableUrl = /^https?:\/\//i.test(textVal) || /^blob:/i.test(textVal) || /^local-asset:\/\//i.test(textVal) || /^data:/i.test(textVal)
-  const isImageByExt = /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(detectSource)
-  const isVideoByExt = /\.(mp4|webm|mov|avi|mkv)$/.test(detectSource)
-  const isAudioByExt = /\.(mp3|wav|ogg|flac|aac|m4a)$/.test(detectSource)
-  const isDataImage = /^data:image\//i.test(textVal)
-  const isDataVideo = /^data:video\//i.test(textVal)
-  const isDataAudio = /^data:audio\//i.test(textVal)
-  const typeHint = String(port.dataType ?? '')
-  const isImage = isDataImage || (isPreviewableUrl && (isImageByExt || (typeHint === 'image' && !isVideoByExt && !isAudioByExt)))
-  const isVideo = isDataVideo || (isPreviewableUrl && (isVideoByExt || (typeHint === 'video' && !isImageByExt && !isAudioByExt)))
-  const isAudio = isDataAudio || (isPreviewableUrl && (isAudioByExt || (typeHint === 'audio' && !isImageByExt && !isVideoByExt)))
+      ).split("?")[0]
+    : "";
+  const isPreviewableUrl =
+    /^https?:\/\//i.test(textVal) ||
+    /^blob:/i.test(textVal) ||
+    /^local-asset:\/\//i.test(textVal) ||
+    /^data:/i.test(textVal);
+  const isImageByExt = /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(
+    detectSource,
+  );
+  const isVideoByExt = /\.(mp4|webm|mov|avi|mkv)$/.test(detectSource);
+  const isAudioByExt = /\.(mp3|wav|ogg|flac|aac|m4a)$/.test(detectSource);
+  const isDataImage = /^data:image\//i.test(textVal);
+  const isDataVideo = /^data:video\//i.test(textVal);
+  const isDataAudio = /^data:audio\//i.test(textVal);
+  const typeHint = String(port.dataType ?? "");
+  const isImage =
+    isDataImage ||
+    (isPreviewableUrl &&
+      (isImageByExt ||
+        (typeHint === "image" && !isVideoByExt && !isAudioByExt)));
+  const isVideo =
+    isDataVideo ||
+    (isPreviewableUrl &&
+      (isVideoByExt ||
+        (typeHint === "video" && !isImageByExt && !isAudioByExt)));
+  const isAudio =
+    isDataAudio ||
+    (isPreviewableUrl &&
+      (isAudioByExt ||
+        (typeHint === "audio" && !isImageByExt && !isVideoByExt)));
 
   const ensureWorkflowId = useCallback(async () => {
-    let wfId = workflowId
+    let wfId = workflowId;
     if (!wfId) {
-      await saveWorkflow()
-      wfId = useWorkflowStore.getState().workflowId
+      await saveWorkflow();
+      wfId = useWorkflowStore.getState().workflowId;
     }
-    return wfId
-  }, [workflowId, saveWorkflow])
-
-  const nodeRule = nodeType ? NODE_INPUT_ACCEPT_RULES[nodeType] : undefined
-  const acceptFromRule = typeof nodeRule === 'string'
-    ? nodeRule
-    : nodeRule?.[port.key]
-
-  const accept = acceptFromRule
-    ?? (port.dataType === 'image'
-      ? 'image/*'
-      : port.dataType === 'video'
-        ? 'video/*'
-        : port.dataType === 'audio'
-          ? 'audio/*'
-          : '*/*')
-
-  const canUpload = port.dataType === 'image'
-    || port.dataType === 'video'
-    || port.dataType === 'audio'
-    || port.dataType === 'url'
-    || port.dataType === 'any'
+    return wfId;
+  }, [workflowId, saveWorkflow]);
+
+  const nodeRule = nodeType ? NODE_INPUT_ACCEPT_RULES[nodeType] : undefined;
+  const acceptFromRule =
+    typeof nodeRule === "string" ? nodeRule : nodeRule?.[port.key];
+
+  const accept =
+    acceptFromRule ??
+    (port.dataType === "image"
+      ? "image/*"
+      : port.dataType === "video"
+        ? "video/*"
+        : port.dataType === "audio"
+          ? "audio/*"
+          : "*/*");
+
+  const canUpload =
+    port.dataType === "image" ||
+    port.dataType === "video" ||
+    port.dataType === "audio" ||
+    port.dataType === "url" ||
+    port.dataType === "any";
 
   const handleFile = async (file: File) => {
     try {
-      setUploading(true)
-      const wfId = await ensureWorkflowId()
-      if (!wfId) throw new Error('Workflow not saved yet.')
-      const { storageIpc } = await import('../../../ipc/ipc-client')
-      const data = await file.arrayBuffer()
-      const localPath = await storageIpc.saveUploadedFile(wfId, nodeId, file.name, data)
-      onChange(`local-asset://${encodeURIComponent(localPath)}`)
+      setUploading(true);
+      const wfId = await ensureWorkflowId();
+      if (!wfId) throw new Error("Workflow not saved yet.");
+      const { storageIpc } = await import("../../../ipc/ipc-client");
+      const data = await file.arrayBuffer();
+      const localPath = await storageIpc.saveUploadedFile(
+        wfId,
+        nodeId,
+        file.name,
+        data,
+      );
+      onChange(`local-asset://${encodeURIComponent(localPath)}`);
     } catch (error) {
-      console.error('Input upload failed:', error)
+      console.error("Input upload failed:", error);
     } finally {
-      setUploading(false)
+      setUploading(false);
     }
-  }
+  };
 
   const handleDrawMaskOpen = useCallback(() => {
-    if (!referenceImageUrl?.trim()) return
-    setMaskEditorOpen(true)
-  }, [referenceImageUrl])
+    if (!referenceImageUrl?.trim()) return;
+    setMaskEditorOpen(true);
+  }, [referenceImageUrl]);
 
-  const handleMaskComplete = useCallback(async (blob: Blob) => {
-    try {
-      setDrawingMask(true)
-      const wfId = await ensureWorkflowId()
-      if (!wfId) throw new Error('Workflow not saved yet.')
-      const { storageIpc } = await import('../../../ipc/ipc-client')
-      const data = await blob.arrayBuffer()
-      const localPath = await storageIpc.saveUploadedFile(wfId, nodeId, 'mask-drawn.png', data)
-      onChange(`local-asset://${encodeURIComponent(localPath)}`)
-      setMaskEditorOpen(false)
-    } catch (error) {
-      console.error('Mask save failed:', error)
-    } finally {
-      setDrawingMask(false)
-    }
-  }, [ensureWorkflowId, nodeId, onChange])
+  const handleMaskComplete = useCallback(
+    async (blob: Blob) => {
+      try {
+        setDrawingMask(true);
+        const wfId = await ensureWorkflowId();
+        if (!wfId) throw new Error("Workflow not saved yet.");
+        const { storageIpc } = await import("../../../ipc/ipc-client");
+        const data = await blob.arrayBuffer();
+        const localPath = await storageIpc.saveUploadedFile(
+          wfId,
+          nodeId,
+          "mask-drawn.png",
+          data,
+        );
+        onChange(`local-asset://${encodeURIComponent(localPath)}`);
+        setMaskEditorOpen(false);
+      } catch (error) {
+        console.error("Mask save failed:", error);
+      } finally {
+        setDrawingMask(false);
+      }
+    },
+    [ensureWorkflowId, nodeId, onChange],
+  );
 
   return (
     <div className="w-full space-y-2">
@@ -760,56 +1280,117 @@ export function InputPortControl({
         <CompInput
           type="text"
           value={textVal}
-          onChange={e => onChange(e.target.value)}
-          placeholder={t('workflow.localFileOrUrl', 'Local file or URL')}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={t("workflow.localFileOrUrl", "Local file or URL")}
           className={`${cls} flex-1`}
-          onClick={e => e.stopPropagation()}
+          onClick={(e) => e.stopPropagation()}
         />
         {showDrawMaskButton && (
           <button
             type="button"
-            title={referenceImageUrl?.trim() ? t('workflow.drawMask') : t('workflow.drawMaskNeedInput')}
+            title={
+              referenceImageUrl?.trim()
+                ? t("workflow.drawMask")
+                : t("workflow.drawMaskNeedInput")
+            }
             disabled={!referenceImageUrl?.trim() || drawingMask}
-            onClick={e => { e.stopPropagation(); handleDrawMaskOpen() }}
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDrawMaskOpen();
+            }}
             className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] transition-colors nodrag ${
               referenceImageUrl?.trim()
-                ? 'cursor-pointer bg-purple-500/15 text-purple-400 hover:bg-purple-500/25'
-                : 'cursor-not-allowed opacity-50'
-            } ${drawingMask ? 'animate-pulse' : ''}`}
+                ? "cursor-pointer bg-purple-500/15 text-purple-400 hover:bg-purple-500/25"
+                : "cursor-not-allowed opacity-50"
+            } ${drawingMask ? "animate-pulse" : ""}`}
           >
             {drawingMask ? (
-              <svg className="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" /></svg>
+              <svg
+                className="animate-spin"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  strokeDasharray="60"
+                  strokeDashoffset="20"
+                />
+              </svg>
             ) : (
               <Paintbrush className="h-4 w-4" />
             )}
           </button>
         )}
         {canUpload && (
-          <label className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] cursor-pointer transition-colors ${uploading ? 'bg-blue-500/25 animate-pulse' : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'}`}
-            onClick={e => e.stopPropagation()}>
+          <label
+            className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] cursor-pointer transition-colors ${uploading ? "bg-blue-500/25 animate-pulse" : "bg-blue-500/15 text-blue-400 hover:bg-blue-500/25"}`}
+            onClick={(e) => e.stopPropagation()}
+          >
             {uploading ? (
-              <svg className="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" /></svg>
+              <svg
+                className="animate-spin"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                  strokeDasharray="60"
+                  strokeDashoffset="20"
+                />
+              </svg>
             ) : (
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="17 8 12 3 7 8" />
+                <line x1="12" y1="3" x2="12" y2="15" />
               </svg>
             )}
-            <input type="file" accept={accept} className="hidden" disabled={uploading}
-              onChange={e => {
-                const f = e.target.files?.[0]
-                if (f) handleFile(f)
+            <input
+              type="file"
+              accept={accept}
+              className="hidden"
+              disabled={uploading}
+              onChange={(e) => {
+                const f = e.target.files?.[0];
+                if (f) handleFile(f);
               }}
-              onClick={e => e.stopPropagation()} />
+              onClick={(e) => e.stopPropagation()}
+            />
           </label>
         )}
       </div>
       {showPreview && textVal.trim() && (isImage || isVideo || isAudio) && (
-        <div className="mt-1" onClick={e => e.stopPropagation()}>
+        <div className="mt-1" onClick={(e) => e.stopPropagation()}>
           {isImage && (
             <img
               src={textVal}
               alt=""
-              onClick={e => { e.stopPropagation(); onPreview?.(textVal) }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onPreview?.(textVal);
+              }}
               className="w-full max-h-[420px] rounded-lg border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow bg-black/5"
             />
           )}
@@ -821,7 +1402,11 @@ export function InputPortControl({
             />
           )}
           {isAudio && (
-            <audio src={textVal} controls className="w-full max-h-10 rounded-lg border border-[hsl(var(--border))]" />
+            <audio
+              src={textVal}
+              controls
+              className="w-full max-h-10 rounded-lg border border-[hsl(var(--border))]"
+            />
           )}
         </div>
       )}
@@ -834,5 +1419,5 @@ export function InputPortControl({
         />
       )}
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/custom-node/CustomNodePrimitives.tsx b/src/workflow/components/canvas/custom-node/CustomNodePrimitives.tsx
index 95e7a000..2af01623 100644
--- a/src/workflow/components/canvas/custom-node/CustomNodePrimitives.tsx
+++ b/src/workflow/components/canvas/custom-node/CustomNodePrimitives.tsx
@@ -4,21 +4,17 @@
  * Row, LinkedBadge, ConnectedInputControl, LockIcon, UploadStatusBadge,
  * ToggleSwitch, NumberInput, FileBtn, Tip, SizeInput, Inline3DViewer
  */
-import React, { useRef, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useExecutionStore } from '../../../stores/execution.store'
-import { useWorkflowStore } from '../../../stores/workflow.store'
+import React, { useRef, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useExecutionStore } from "../../../stores/execution.store";
+import { useWorkflowStore } from "../../../stores/workflow.store";
 
 /* ══════════════════════════════════════════════════════════════════════
    Row — simple padding wrapper for parameter rows
    ══════════════════════════════════════════════════════════════════════ */
 
 export function Row({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="min-h-[32px] px-3 py-1">
-      {children}
-    </div>
-  )
+  return <div className="min-h-[32px] px-3 py-1">{children}</div>;
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -27,47 +23,93 @@ export function Row({ children }: { children: React.ReactNode }) {
 
 export function LockIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="flex-shrink-0">
-      <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="flex-shrink-0"
+    >
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
     </svg>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    LinkedBadge — "linked to NodeLabel" with lock icon; click to disconnect
    ══════════════════════════════════════════════════════════════════════ */
 
-export function LinkedBadge({ nodeId, handleId, edges, nodes, onDisconnect }: {
-  nodeId?: string; handleId?: string
-  edges?: Array<{ id: string; source: string; sourceHandle?: string | null; target: string; targetHandle?: string | null }>
-  nodes?: Array<{ id: string; data: { label?: string; nodeType?: string } }>
-  onDisconnect?: () => void
+export function LinkedBadge({
+  nodeId,
+  handleId,
+  edges,
+  nodes,
+  onDisconnect,
+}: {
+  nodeId?: string;
+  handleId?: string;
+  edges?: Array<{
+    id: string;
+    source: string;
+    sourceHandle?: string | null;
+    target: string;
+    targetHandle?: string | null;
+  }>;
+  nodes?: Array<{ id: string; data: { label?: string; nodeType?: string } }>;
+  onDisconnect?: () => void;
 }) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   if (!nodeId || !handleId || !edges || !nodes) {
-    return <span className="inline-flex items-center gap-1 text-[11px] text-blue-400 italic"><LockIcon /> {t('workflow.linked', 'linked')}</span>
+    return (
+      <span className="inline-flex items-center gap-1 text-[11px] text-blue-400 italic">
+        <LockIcon /> {t("workflow.linked", "linked")}
+      </span>
+    );
   }
-  const edge = edges.find(e => e.target === nodeId && e.targetHandle === handleId)
+  const edge = edges.find(
+    (e) => e.target === nodeId && e.targetHandle === handleId,
+  );
   if (!edge) {
-    return <span className="inline-flex items-center gap-1 text-[11px] text-blue-400 italic"><LockIcon /> {t('workflow.linked', 'linked')}</span>
+    return (
+      <span className="inline-flex items-center gap-1 text-[11px] text-blue-400 italic">
+        <LockIcon /> {t("workflow.linked", "linked")}
+      </span>
+    );
   }
-  const sourceNode = nodes.find(n => n.id === edge.source)
-  const sourceShortId = edge.source.slice(0, 8)
-  const sourceLabel = sourceNode?.data?.label
-  const sourceName = sourceLabel ? `${sourceLabel} #${sourceShortId}` : sourceShortId
+  const sourceNode = nodes.find((n) => n.id === edge.source);
+  const sourceShortId = edge.source.slice(0, 8);
+  const sourceLabel = sourceNode?.data?.label;
+  const sourceName = sourceLabel
+    ? `${sourceLabel} #${sourceShortId}`
+    : sourceShortId;
 
   return (
     <span className="inline-flex items-center gap-1 text-[11px] text-blue-400 italic">
       {onDisconnect ? (
-        <button onClick={e => { e.stopPropagation(); onDisconnect() }}
-          title={t('workflow.disconnectLink', 'Unlock: disconnect this link')}
-          className="hover:text-red-400 transition-colors">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onDisconnect();
+          }}
+          title={t("workflow.disconnectLink", "Unlock: disconnect this link")}
+          className="hover:text-red-400 transition-colors"
+        >
           <LockIcon />
         </button>
-      ) : <LockIcon />}
-      {t('workflow.linkedTo', 'linked to')} <span className="font-medium not-italic truncate max-w-[100px]">{sourceName}</span>
+      ) : (
+        <LockIcon />
+      )}
+      {t("workflow.linkedTo", "linked to")}{" "}
+      <span className="font-medium not-italic truncate max-w-[100px]">
+        {sourceName}
+      </span>
     </span>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -80,79 +122,123 @@ export function ConnectedInputControl({
   edges,
   nodes,
   onPreview,
-  showPreview = true
+  showPreview = true,
 }: {
-  nodeId?: string
-  handleId?: string
-  edges?: Array<{ id: string; source: string; sourceHandle?: string | null; target: string; targetHandle?: string | null }>
-  nodes?: Array<{ id: string; data: { label?: string; nodeType?: string; params?: Record<string, unknown> } }>
-  onPreview?: (src: string) => void
-  showPreview?: boolean
+  nodeId?: string;
+  handleId?: string;
+  edges?: Array<{
+    id: string;
+    source: string;
+    sourceHandle?: string | null;
+    target: string;
+    targetHandle?: string | null;
+  }>;
+  nodes?: Array<{
+    id: string;
+    data: {
+      label?: string;
+      nodeType?: string;
+      params?: Record<string, unknown>;
+    };
+  }>;
+  onPreview?: (src: string) => void;
+  showPreview?: boolean;
 }) {
-  const lastResults = useExecutionStore(s => s.lastResults)
+  const lastResults = useExecutionStore((s) => s.lastResults);
 
   if (!nodeId || !handleId || !edges || !nodes) {
-    return <LinkedBadge />
+    return <LinkedBadge />;
   }
 
-  const edge = edges.find(e => e.target === nodeId && e.targetHandle === handleId)
-  if (!edge) return <LinkedBadge />
+  const edge = edges.find(
+    (e) => e.target === nodeId && e.targetHandle === handleId,
+  );
+  if (!edge) return <LinkedBadge />;
 
-  const sourceNode = nodes.find(n => n.id === edge.source)
-  const sourceParams = sourceNode?.data?.params ?? {}
-  const latestResultUrl = lastResults[edge.source]?.[0]?.urls?.[0] ?? ''
+  const sourceNode = nodes.find((n) => n.id === edge.source);
+  const sourceParams = sourceNode?.data?.params ?? {};
+  const latestResultUrl = lastResults[edge.source]?.[0]?.urls?.[0] ?? "";
 
   const pickPreviewUrl = (): string => {
     const isMediaLike = (u: string) =>
-      /^https?:\/\//i.test(u) || /^blob:/i.test(u) || /^local-asset:\/\//i.test(u) || /^data:/i.test(u)
+      /^https?:\/\//i.test(u) ||
+      /^blob:/i.test(u) ||
+      /^local-asset:\/\//i.test(u) ||
+      /^data:/i.test(u);
 
     // Prefer actual execution results — this is the real output of the source node
-    if (latestResultUrl && isMediaLike(latestResultUrl)) return latestResultUrl
+    if (latestResultUrl && isMediaLike(latestResultUrl)) return latestResultUrl;
 
     // Only fall back to source params for input-type nodes (media-upload)
     // that store their value directly in params. Do NOT use generic params
     // like 'input'/'output' which are the source node's own inputs, not outputs.
-    const uploadedUrl = String(sourceParams.uploadedUrl ?? '')
-    if (uploadedUrl && isMediaLike(uploadedUrl)) return uploadedUrl
+    const uploadedUrl = String(sourceParams.uploadedUrl ?? "");
+    if (uploadedUrl && isMediaLike(uploadedUrl)) return uploadedUrl;
 
-    return ''
-  }
+    return "";
+  };
 
-  const previewUrl = pickPreviewUrl()
+  const previewUrl = pickPreviewUrl();
   const detectSource = previewUrl
     ? (/^local-asset:\/\//i.test(previewUrl)
         ? (() => {
             try {
-              return decodeURIComponent(previewUrl.replace(/^local-asset:\/\//i, '')).toLowerCase()
+              return decodeURIComponent(
+                previewUrl.replace(/^local-asset:\/\//i, ""),
+              ).toLowerCase();
             } catch {
-              return previewUrl.toLowerCase()
+              return previewUrl.toLowerCase();
             }
           })()
         : previewUrl.toLowerCase()
-      ).split('?')[0]
-    : ''
-  const isImage = /^data:image\//i.test(previewUrl) || /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(detectSource)
-  const isVideo = /^data:video\//i.test(previewUrl) || /\.(mp4|webm|mov|avi|mkv)$/.test(detectSource)
-  const isAudio = /^data:audio\//i.test(previewUrl) || /\.(mp3|wav|ogg|flac|aac|m4a)$/.test(detectSource)
+      ).split("?")[0]
+    : "";
+  const isImage =
+    /^data:image\//i.test(previewUrl) ||
+    /\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(detectSource);
+  const isVideo =
+    /^data:video\//i.test(previewUrl) ||
+    /\.(mp4|webm|mov|avi|mkv)$/.test(detectSource);
+  const isAudio =
+    /^data:audio\//i.test(previewUrl) ||
+    /\.(mp3|wav|ogg|flac|aac|m4a)$/.test(detectSource);
 
   return (
     <div className="w-full space-y-2">
-      <LinkedBadge nodeId={nodeId} handleId={handleId} edges={edges} nodes={nodes} />
+      <LinkedBadge
+        nodeId={nodeId}
+        handleId={handleId}
+        edges={edges}
+        nodes={nodes}
+      />
       {showPreview && previewUrl && onPreview && (
-        <div className="mt-1 flex items-center gap-1" onClick={e => e.stopPropagation()}>
+        <div
+          className="mt-1 flex items-center gap-1"
+          onClick={(e) => e.stopPropagation()}
+        >
           {isImage && (
             <button
               type="button"
-              onClick={e => { e.stopPropagation(); onPreview(previewUrl) }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onPreview(previewUrl);
+              }}
               className="relative rounded-md border border-[hsl(var(--border))] bg-muted/50 overflow-hidden h-16 w-16 flex-shrink-0 cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow"
             >
-              <img src={previewUrl} alt="" className="w-full h-full object-cover" />
+              <img
+                src={previewUrl}
+                alt=""
+                className="w-full h-full object-cover"
+              />
             </button>
           )}
           {isVideo && (
             <button
               type="button"
-              onClick={e => { e.stopPropagation(); onPreview(previewUrl) }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onPreview(previewUrl);
+              }}
               className="relative rounded-md border border-[hsl(var(--border))] bg-muted/50 overflow-hidden h-16 w-16 flex-shrink-0 cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow"
             >
               <video
@@ -162,8 +248,8 @@ export function ConnectedInputControl({
                 playsInline
                 onMouseEnter={(e) => e.currentTarget.play()}
                 onMouseLeave={(e) => {
-                  e.currentTarget.pause()
-                  e.currentTarget.currentTime = 0
+                  e.currentTarget.pause();
+                  e.currentTarget.currentTime = 0;
                 }}
               />
             </button>
@@ -171,99 +257,225 @@ export function ConnectedInputControl({
           {isAudio && (
             <button
               type="button"
-              onClick={e => { e.stopPropagation(); onPreview(previewUrl) }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onPreview(previewUrl);
+              }}
               className="relative rounded-md border border-[hsl(var(--border))] bg-muted/50 overflow-hidden h-16 w-16 flex-shrink-0 cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow flex items-center justify-center"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-[hsl(var(--muted-foreground))]">
-                <path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-6 w-6 text-[hsl(var(--muted-foreground))]"
+              >
+                <path d="M9 18V5l12-2v13" />
+                <circle cx="6" cy="18" r="3" />
+                <circle cx="18" cy="16" r="3" />
               </svg>
             </button>
           )}
         </div>
       )}
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    UploadStatusBadge
    ══════════════════════════════════════════════════════════════════════ */
 
-export function UploadStatusBadge({ state, error }: { state: string; error: string }) {
-  const { t } = useTranslation()
-  if (state === 'uploading') return <span className="ml-auto text-[10px] text-blue-400 animate-pulse">{t('workflow.mediaUpload.uploadingShort', 'Uploading...')}</span>
-  if (state === 'success') return <span className="ml-auto text-[10px] text-green-400">✓ {t('workflow.mediaUpload.uploaded', 'Uploaded')}</span>
-  if (state === 'error') return <span className="ml-auto text-[10px] text-red-400" title={error}>✕ {t('workflow.mediaUpload.failed', 'Failed')}</span>
-  return null
+export function UploadStatusBadge({
+  state,
+  error,
+}: {
+  state: string;
+  error: string;
+}) {
+  const { t } = useTranslation();
+  if (state === "uploading")
+    return (
+      <span className="ml-auto text-[10px] text-blue-400 animate-pulse">
+        {t("workflow.mediaUpload.uploadingShort", "Uploading...")}
+      </span>
+    );
+  if (state === "success")
+    return (
+      <span className="ml-auto text-[10px] text-green-400">
+        ✓ {t("workflow.mediaUpload.uploaded", "Uploaded")}
+      </span>
+    );
+  if (state === "error")
+    return (
+      <span className="ml-auto text-[10px] text-red-400" title={error}>
+        ✕ {t("workflow.mediaUpload.failed", "Failed")}
+      </span>
+    );
+  return null;
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    ToggleSwitch
    ══════════════════════════════════════════════════════════════════════ */
 
-export function ToggleSwitch({ checked, onChange }: { checked: boolean; onChange: (v: unknown) => void }) {
+export function ToggleSwitch({
+  checked,
+  onChange,
+}: {
+  checked: boolean;
+  onChange: (v: unknown) => void;
+}) {
   return (
-    <button type="button" onClick={e => { e.stopPropagation(); onChange(!checked) }}
-      className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer focus:outline-none ${checked ? 'bg-blue-500' : 'bg-[hsl(var(--muted))]'}`}>
-      <span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform ${checked ? 'translate-x-4' : 'translate-x-0'}`} />
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        onChange(!checked);
+      }}
+      className={`relative inline-flex h-5 w-9 flex-shrink-0 rounded-full border-2 border-transparent transition-colors cursor-pointer focus:outline-none ${checked ? "bg-blue-500" : "bg-[hsl(var(--muted))]"}`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform transition-transform ${checked ? "translate-x-4" : "translate-x-0"}`}
+      />
     </button>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    NumberInput
    ══════════════════════════════════════════════════════════════════════ */
 
-export function NumberInput({ value, min, max, step, onChange, placeholder }: {
-  value: number | undefined; min?: number; max?: number; step: number; onChange: (v: unknown) => void; placeholder?: string
+export function NumberInput({
+  value,
+  min,
+  max,
+  step,
+  onChange,
+  placeholder,
+}: {
+  value: number | undefined;
+  min?: number;
+  max?: number;
+  step: number;
+  onChange: (v: unknown) => void;
+  placeholder?: string;
 }) {
-  const shouldRound = step >= 1 && Number.isInteger(step)
+  const shouldRound = step >= 1 && Number.isInteger(step);
 
   // Clamp (and round for integer steps) on blur
   const handleBlur = () => {
-    if (value === undefined || value === null) return
-    let clamped = Number(value)
-    if (shouldRound) clamped = Math.round(clamped)
-    if (min !== undefined && clamped < min) clamped = min
-    if (max !== undefined && clamped > max) clamped = max
-    if (clamped !== Number(value)) onChange(clamped)
-  }
+    if (value === undefined || value === null) return;
+    let clamped = Number(value);
+    if (shouldRound) clamped = Math.round(clamped);
+    if (min !== undefined && clamped < min) clamped = min;
+    if (max !== undefined && clamped > max) clamped = max;
+    if (clamped !== Number(value)) onChange(clamped);
+  };
 
   return (
-    <div className="flex items-center gap-1.5" onClick={e => e.stopPropagation()}>
-      <input type="number" value={value !== undefined && value !== null ? value : ''} min={min} max={max} step={step}
-        onChange={e => {
-          if (e.target.value === '') { onChange(undefined); return }
-          const n = Number(e.target.value)
-          onChange(shouldRound ? Math.round(n) : n)
+    <div
+      className="flex items-center gap-1.5"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <input
+        type="number"
+        value={value !== undefined && value !== null ? value : ""}
+        min={min}
+        max={max}
+        step={step}
+        onChange={(e) => {
+          if (e.target.value === "") {
+            onChange(undefined);
+            return;
+          }
+          const n = Number(e.target.value);
+          onChange(shouldRound ? Math.round(n) : n);
         }}
         onBlur={handleBlur}
         placeholder={placeholder}
-        className="w-full max-w-[120px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-right text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 placeholder:text-[hsl(var(--muted-foreground))] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
-      {min !== undefined && max !== undefined && <span className="text-[9px] text-[hsl(var(--muted-foreground))] whitespace-nowrap">{min}–{max}</span>}
+        className="w-full max-w-[120px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-right text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 placeholder:text-[hsl(var(--muted-foreground))] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+      />
+      {min !== undefined && max !== undefined && (
+        <span className="text-[9px] text-[hsl(var(--muted-foreground))] whitespace-nowrap">
+          {min}–{max}
+        </span>
+      )}
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    FileBtn — small upload button
    ══════════════════════════════════════════════════════════════════════ */
 
-export function FileBtn({ accept, onFile, uploading }: { accept: string; onFile: (f: File) => void; uploading?: boolean }) {
+export function FileBtn({
+  accept,
+  onFile,
+  uploading,
+}: {
+  accept: string;
+  onFile: (f: File) => void;
+  uploading?: boolean;
+}) {
   return (
-    <label className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] cursor-pointer transition-colors ${uploading ? 'bg-blue-500/25 animate-pulse' : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'}`}
-      onClick={e => e.stopPropagation()}>
+    <label
+      className={`flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-md border border-[hsl(var(--border))] cursor-pointer transition-colors ${uploading ? "bg-blue-500/25 animate-pulse" : "bg-blue-500/15 text-blue-400 hover:bg-blue-500/25"}`}
+      onClick={(e) => e.stopPropagation()}
+    >
       {uploading ? (
-        <svg className="animate-spin" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" strokeDasharray="60" strokeDashoffset="20" /></svg>
+        <svg
+          className="animate-spin"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+            strokeDasharray="60"
+            strokeDashoffset="20"
+          />
+        </svg>
       ) : (
-        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line x1="12" y1="3" x2="12" y2="15" />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+          <polyline points="17 8 12 3 7 8" />
+          <line x1="12" y1="3" x2="12" y2="15" />
         </svg>
       )}
-      <input type="file" accept={accept} className="hidden" disabled={uploading}
-        onChange={e => { const f = e.target.files?.[0]; if (f) onFile(f) }} onClick={e => e.stopPropagation()} />
+      <input
+        type="file"
+        accept={accept}
+        className="hidden"
+        disabled={uploading}
+        onChange={(e) => {
+          const f = e.target.files?.[0];
+          if (f) onFile(f);
+        }}
+        onClick={(e) => e.stopPropagation()}
+      />
     </label>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
@@ -272,86 +484,143 @@ export function FileBtn({ accept, onFile, uploading }: { accept: string; onFile:
 
 export function Tip({ text }: { text: string }) {
   return (
-    <span className="relative group cursor-help inline-flex items-center" onClick={e => e.stopPropagation()}>
-      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-[hsl(var(--muted-foreground))] opacity-50 hover:opacity-100">
-        <circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" /><line x1="12" y1="17" x2="12.01" y2="17" />
+    <span
+      className="relative group cursor-help inline-flex items-center"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-[hsl(var(--muted-foreground))] opacity-50 hover:opacity-100"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
       </svg>
       <span className="absolute bottom-full left-0 mb-2 w-max max-w-[320px] px-3 py-2.5 rounded-lg bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] text-[11px] leading-[1.6] shadow-xl border border-[hsl(var(--border))] opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity z-50">
         {text}
       </span>
     </span>
-  )
+  );
 }
 
-
 /* ══════════════════════════════════════════════════════════════════════
    SizeInput — dual W×H number fields. Value format: "W*H" (e.g. "1024*1024")
    ══════════════════════════════════════════════════════════════════════ */
 
-export function SizeInput({ value, onChange, min, max }: { value: string; onChange: (v: string) => void; min?: number; max?: number }) {
-  const parts = value.split('*')
-  const w = parseInt(parts[0]) || 512
-  const h = parseInt(parts[1] ?? parts[0]) || 512
+export function SizeInput({
+  value,
+  onChange,
+  min,
+  max,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  min?: number;
+  max?: number;
+}) {
+  const parts = value.split("*");
+  const w = parseInt(parts[0]) || 512;
+  const h = parseInt(parts[1] ?? parts[0]) || 512;
 
   const clamp = (v: number) => {
-    if (min !== undefined && v < min) return min
-    if (max !== undefined && v > max) return max
-    return v
-  }
+    if (min !== undefined && v < min) return min;
+    if (max !== undefined && v > max) return max;
+    return v;
+  };
 
-  const numCls = 'w-[52px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1 py-1 text-[11px] text-center text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none'
+  const numCls =
+    "w-[52px] rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-1 py-1 text-[11px] text-center text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none";
 
   return (
-    <div className="flex items-center gap-1" onClick={e => e.stopPropagation()}>
-      <input type="number" value={w} min={min} max={max} step={64}
-        onChange={e => onChange(`${clamp(Number(e.target.value))}*${h}`)}
-        onBlur={e => onChange(`${clamp(Number(e.target.value))}*${h}`)}
-        className={numCls} title="Width" />
+    <div
+      className="flex items-center gap-1"
+      onClick={(e) => e.stopPropagation()}
+    >
+      <input
+        type="number"
+        value={w}
+        min={min}
+        max={max}
+        step={64}
+        onChange={(e) => onChange(`${clamp(Number(e.target.value))}*${h}`)}
+        onBlur={(e) => onChange(`${clamp(Number(e.target.value))}*${h}`)}
+        className={numCls}
+        title="Width"
+      />
       <span className="text-[10px] text-muted-foreground">×</span>
-      <input type="number" value={h} min={min} max={max} step={64}
-        onChange={e => onChange(`${w}*${clamp(Number(e.target.value))}`)}
-        onBlur={e => onChange(`${w}*${clamp(Number(e.target.value))}`)}
-        className={numCls} title="Height" />
+      <input
+        type="number"
+        value={h}
+        min={min}
+        max={max}
+        step={64}
+        onChange={(e) => onChange(`${w}*${clamp(Number(e.target.value))}`)}
+        onBlur={(e) => onChange(`${w}*${clamp(Number(e.target.value))}`)}
+        className={numCls}
+        title="Height"
+      />
       {min !== undefined && max !== undefined && (
-        <span className="text-[8px] text-muted-foreground/60 whitespace-nowrap">{min}-{max}</span>
+        <span className="text-[8px] text-muted-foreground/60 whitespace-nowrap">
+          {min}-{max}
+        </span>
       )}
     </div>
-  )
+  );
 }
 
 /* ══════════════════════════════════════════════════════════════════════
    Inline3DViewer — lightweight inline 3D model preview using @google/model-viewer
    ══════════════════════════════════════════════════════════════════════ */
 
-export function Inline3DViewer({ src, onClick }: { src: string; onClick?: () => void }) {
-  const containerRef = useRef<HTMLDivElement>(null)
+export function Inline3DViewer({
+  src,
+  onClick,
+}: {
+  src: string;
+  onClick?: () => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    import('@google/model-viewer').catch(() => {})
-  }, [])
+    import("@google/model-viewer").catch(() => {});
+  }, []);
 
   useEffect(() => {
-    if (!containerRef.current) return
-    const el = document.createElement('model-viewer') as HTMLElement
-    el.setAttribute('src', src)
-    el.setAttribute('camera-controls', '')
-    el.setAttribute('auto-rotate', '')
-    el.setAttribute('shadow-intensity', '1')
-    el.setAttribute('environment-image', 'neutral')
-    el.style.width = '100%'
-    el.style.height = '100%'
-    el.style.borderRadius = '8px'
-    el.style.background = 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)'
-    containerRef.current.innerHTML = ''
-    containerRef.current.appendChild(el)
-    return () => { if (containerRef.current) containerRef.current.innerHTML = '' }
-  }, [src])
+    if (!containerRef.current) return;
+    const el = document.createElement("model-viewer") as HTMLElement;
+    el.setAttribute("src", src);
+    el.setAttribute("camera-controls", "");
+    el.setAttribute("auto-rotate", "");
+    el.setAttribute("shadow-intensity", "1");
+    el.setAttribute("environment-image", "neutral");
+    el.style.width = "100%";
+    el.style.height = "100%";
+    el.style.borderRadius = "8px";
+    el.style.background =
+      "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)";
+    containerRef.current.innerHTML = "";
+    containerRef.current.appendChild(el);
+    return () => {
+      if (containerRef.current) containerRef.current.innerHTML = "";
+    };
+  }, [src]);
 
   return (
     <div
       ref={containerRef}
-      onClick={e => { e.stopPropagation(); onClick?.() }}
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick?.();
+      }}
       className="w-full aspect-square rounded-lg border border-[hsl(var(--border))] overflow-hidden cursor-pointer hover:ring-2 hover:ring-blue-500/40 transition-shadow"
     />
-  )
+  );
 }
diff --git a/src/workflow/components/canvas/custom-node/CustomNodeTypes.ts b/src/workflow/components/canvas/custom-node/CustomNodeTypes.ts
index 577b2f0d..389072a2 100644
--- a/src/workflow/components/canvas/custom-node/CustomNodeTypes.ts
+++ b/src/workflow/components/canvas/custom-node/CustomNodeTypes.ts
@@ -1,91 +1,113 @@
 /**
  * Shared types, constants, and utility functions for CustomNode components.
  */
-import type { ParamDefinition, PortDefinition, ModelParamSchema } from '@/workflow/types/node-defs'
-import type { FormFieldConfig } from '@/lib/schemaToForm'
+import type {
+  ParamDefinition,
+  PortDefinition,
+  ModelParamSchema,
+} from "@/workflow/types/node-defs";
+import type { FormFieldConfig } from "@/lib/schemaToForm";
 
 /* ── types ───────────────────────────────────────────────────────────── */
 
 export interface CustomNodeData {
-  nodeType: string
-  params: Record<string, unknown>
-  label: string
-  paramDefinitions?: ParamDefinition[]
-  inputDefinitions?: PortDefinition[]
-  outputDefinitions?: PortDefinition[]
-  modelInputSchema?: ModelParamSchema[]
+  nodeType: string;
+  params: Record<string, unknown>;
+  label: string;
+  paramDefinitions?: ParamDefinition[];
+  inputDefinitions?: PortDefinition[];
+  outputDefinitions?: PortDefinition[];
+  modelInputSchema?: ModelParamSchema[];
 }
 
 /* ── constants ───────────────────────────────────────────────────────── */
 
-export const HANDLE_SIZE = 12
-export const ACCENT = 'hsl(var(--primary))'
-export const ACCENT_MEDIA = 'hsl(142 71% 45%)'
+export const HANDLE_SIZE = 12;
+export const ACCENT = "hsl(var(--primary))";
+export const ACCENT_MEDIA = "hsl(142 71% 45%)";
 
-export const MIN_NODE_WIDTH = 300
-export const MIN_NODE_HEIGHT = 80
-export const DEFAULT_NODE_WIDTH = 380
+export const MIN_NODE_WIDTH = 300;
+export const MIN_NODE_HEIGHT = 80;
+export const DEFAULT_NODE_WIDTH = 380;
 
 export const TEXTAREA_NAMES = new Set([
-  'prompt', 'negative_prompt', 'text', 'description', 'content', 'system_prompt',
-])
+  "prompt",
+  "negative_prompt",
+  "text",
+  "description",
+  "content",
+  "system_prompt",
+]);
 
 // Same range as playground (FormField generateRandomSeed)
-export const RANDOM_SEED_MAX = 65536
+export const RANDOM_SEED_MAX = 65536;
 
 /**
  * Centralized file-picker accept rules by workflow node type.
  * Keep node-specific constraints here to avoid scattered if/else logic.
  */
-export const NODE_INPUT_ACCEPT_RULES: Record<string, string | Record<string, string>> = {
-  'free-tool/image-enhancer': { input: 'image/*' },
-  'free-tool/background-remover': { input: 'image/*' },
-  'free-tool/face-enhancer': { input: 'image/*' },
-  'free-tool/video-enhancer': { input: 'video/*' },
-  'free-tool/face-swapper': { source: 'image/*', target: 'image/*' },
-  'free-tool/image-eraser': { input: 'image/*', mask_image: 'image/*' },
-  'free-tool/segment-anything': { input: 'image/*' },
-  'free-tool/image-converter': { input: 'image/*' },
-  'free-tool/video-converter': { input: 'video/*' },
-  'free-tool/audio-converter': { input: 'audio/*' },
-  'free-tool/media-trimmer': { input: 'video/*,audio/*' },
-  'free-tool/media-merger': {
-    input1: 'video/*,audio/*',
-    input2: 'video/*,audio/*',
-    input3: 'video/*,audio/*',
-    input4: 'video/*,audio/*',
-    input5: 'video/*,audio/*'
+export const NODE_INPUT_ACCEPT_RULES: Record<
+  string,
+  string | Record<string, string>
+> = {
+  "free-tool/image-enhancer": { input: "image/*" },
+  "free-tool/background-remover": { input: "image/*" },
+  "free-tool/face-enhancer": { input: "image/*" },
+  "free-tool/video-enhancer": { input: "video/*" },
+  "free-tool/face-swapper": { source: "image/*", target: "image/*" },
+  "free-tool/image-eraser": { input: "image/*", mask_image: "image/*" },
+  "free-tool/segment-anything": { input: "image/*" },
+  "free-tool/image-converter": { input: "image/*" },
+  "free-tool/video-converter": { input: "video/*" },
+  "free-tool/audio-converter": { input: "audio/*" },
+  "free-tool/media-trimmer": { input: "video/*,audio/*" },
+  "free-tool/media-merger": {
+    input1: "video/*,audio/*",
+    input2: "video/*,audio/*",
+    input3: "video/*,audio/*",
+    input4: "video/*,audio/*",
+    input5: "video/*,audio/*",
   },
-  'input/media-upload': { output: 'image/*,video/*,audio/*' }
-}
+  "input/media-upload": { output: "image/*,video/*,audio/*" },
+};
 
 export const ML_FREE_TOOLS = new Set([
-  'free-tool/image-enhancer', 'free-tool/background-remover', 'free-tool/face-enhancer',
-  'free-tool/video-enhancer', 'free-tool/face-swapper', 'free-tool/image-eraser',
-  'free-tool/segment-anything'
-])
+  "free-tool/image-enhancer",
+  "free-tool/background-remover",
+  "free-tool/face-enhancer",
+  "free-tool/video-enhancer",
+  "free-tool/face-swapper",
+  "free-tool/image-eraser",
+  "free-tool/segment-anything",
+]);
 
 /* ── utility functions ───────────────────────────────────────────────── */
 
 export function formatLabel(name: string): string {
-  return name.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
+  return name
+    .split("_")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
 }
 
 /** Convert workflow ParamDefinition to Playground FormFieldConfig for consistent FormField rendering */
-export function paramDefToFormFieldConfig(p: ParamDefinition, nodeType?: string): FormFieldConfig | null {
-  if (nodeType === 'output/file' && p.key === 'outputDir') return null
+export function paramDefToFormFieldConfig(
+  p: ParamDefinition,
+  nodeType?: string,
+): FormFieldConfig | null {
+  if (nodeType === "output/file" && p.key === "outputDir") return null;
   const typeMap = {
-    string: 'text' as const,
-    number: 'number' as const,
-    boolean: 'boolean' as const,
-    select: 'select' as const,
-    file: 'file' as const,
-    textarea: 'textarea' as const,
-    slider: 'slider' as const
-  }
-  const formType = typeMap[p.type]
-  if (!formType) return null
-  const options = p.options?.map(o => o.value)
+    string: "text" as const,
+    number: "number" as const,
+    boolean: "boolean" as const,
+    select: "select" as const,
+    file: "file" as const,
+    textarea: "textarea" as const,
+    slider: "slider" as const,
+  };
+  const formType = typeMap[p.type];
+  if (!formType) return null;
+  const options = p.options?.map((o) => o.value);
   return {
     name: p.key,
     type: formType,
@@ -96,36 +118,48 @@ export function paramDefToFormFieldConfig(p: ParamDefinition, nodeType?: string)
     max: p.validation?.max,
     step: p.validation?.step,
     options,
-    description: p.description
-  }
+    description: p.description,
+  };
 }
 
 /** Convert input PortDefinition to FormFieldConfig so we can use Playground FormField (text, url, or file). */
-export function portToFormFieldConfig(port: PortDefinition, nodeType?: string): FormFieldConfig | null {
-  if (port.dataType === 'text' || port.dataType === 'url') {
+export function portToFormFieldConfig(
+  port: PortDefinition,
+  nodeType?: string,
+): FormFieldConfig | null {
+  if (port.dataType === "text" || port.dataType === "url") {
     return {
       name: port.key,
-      type: 'text',
+      type: "text",
       label: port.label,
       required: port.required,
-      placeholder: port.dataType === 'url' ? 'https://...' : undefined
-    }
+      placeholder: port.dataType === "url" ? "https://..." : undefined,
+    };
   }
-  if (port.dataType === 'image' || port.dataType === 'video' || port.dataType === 'audio' || port.dataType === 'any') {
-    const rule = nodeType ? NODE_INPUT_ACCEPT_RULES[nodeType] : undefined
-    const acceptFromRule = typeof rule === 'string' ? rule : rule?.[port.key]
-    const accept = acceptFromRule
-      ?? (port.dataType === 'image' ? 'image/*'
-        : port.dataType === 'video' ? 'video/*'
-        : port.dataType === 'audio' ? 'audio/*'
-        : '*/*')
+  if (
+    port.dataType === "image" ||
+    port.dataType === "video" ||
+    port.dataType === "audio" ||
+    port.dataType === "any"
+  ) {
+    const rule = nodeType ? NODE_INPUT_ACCEPT_RULES[nodeType] : undefined;
+    const acceptFromRule = typeof rule === "string" ? rule : rule?.[port.key];
+    const accept =
+      acceptFromRule ??
+      (port.dataType === "image"
+        ? "image/*"
+        : port.dataType === "video"
+          ? "video/*"
+          : port.dataType === "audio"
+            ? "audio/*"
+            : "*/*");
     return {
       name: port.key,
-      type: 'file',
+      type: "file",
       label: port.label,
       required: port.required,
-      accept
-    }
+      accept,
+    };
   }
-  return null
+  return null;
 }
diff --git a/src/workflow/components/canvas/custom-node/NodeIcons.tsx b/src/workflow/components/canvas/custom-node/NodeIcons.tsx
index 8af979d0..9de33e97 100644
--- a/src/workflow/components/canvas/custom-node/NodeIcons.tsx
+++ b/src/workflow/components/canvas/custom-node/NodeIcons.tsx
@@ -3,39 +3,55 @@
  * Uses the same lucide-react icons as the Free Tools page for consistency.
  */
 import {
-  Video, ImageUp, Sparkles, ArrowLeftRight, Eraser, Wand2,
-  MousePointer2, FileVideo, FileAudio, FileImage, Scissors, Combine,
-  Upload, Type, Cpu, Eye, Download, GitMerge, ListFilter,
+  Video,
+  ImageUp,
+  Sparkles,
+  ArrowLeftRight,
+  Eraser,
+  Wand2,
+  MousePointer2,
+  FileVideo,
+  FileAudio,
+  FileImage,
+  Scissors,
+  Combine,
+  Upload,
+  Type,
+  Cpu,
+  Eye,
+  Download,
+  GitMerge,
+  ListFilter,
   type LucideIcon,
-} from 'lucide-react'
+} from "lucide-react";
 
 const NODE_ICON_MAP: Record<string, LucideIcon> = {
   // Free tools — same icons as FreeToolsPage
-  'free-tool/video-enhancer': Video,
-  'free-tool/image-enhancer': ImageUp,
-  'free-tool/face-enhancer': Sparkles,
-  'free-tool/face-swapper': ArrowLeftRight,
-  'free-tool/background-remover': Eraser,
-  'free-tool/image-eraser': Wand2,
-  'free-tool/segment-anything': MousePointer2,
-  'free-tool/video-converter': FileVideo,
-  'free-tool/audio-converter': FileAudio,
-  'free-tool/image-converter': FileImage,
-  'free-tool/media-trimmer': Scissors,
-  'free-tool/media-merger': Combine,
+  "free-tool/video-enhancer": Video,
+  "free-tool/image-enhancer": ImageUp,
+  "free-tool/face-enhancer": Sparkles,
+  "free-tool/face-swapper": ArrowLeftRight,
+  "free-tool/background-remover": Eraser,
+  "free-tool/image-eraser": Wand2,
+  "free-tool/segment-anything": MousePointer2,
+  "free-tool/video-converter": FileVideo,
+  "free-tool/audio-converter": FileAudio,
+  "free-tool/image-converter": FileImage,
+  "free-tool/media-trimmer": Scissors,
+  "free-tool/media-merger": Combine,
   // Input
-  'input/media-upload': Upload,
-  'input/text-input': Type,
+  "input/media-upload": Upload,
+  "input/text-input": Type,
   // AI Task
-  'ai-task/run': Cpu,
+  "ai-task/run": Cpu,
   // Output
-  'output/preview': Eye,
-  'output/file': Download,
+  "output/preview": Eye,
+  "output/file": Download,
   // Processing
-  'processing/concat': GitMerge,
-  'processing/select': ListFilter,
-}
+  "processing/concat": GitMerge,
+  "processing/select": ListFilter,
+};
 
 export function getNodeIcon(nodeType: string): LucideIcon | null {
-  return NODE_ICON_MAP[nodeType] ?? null
+  return NODE_ICON_MAP[nodeType] ?? null;
 }
diff --git a/src/workflow/components/panels/CostPanel.tsx b/src/workflow/components/panels/CostPanel.tsx
index be985627..ea856df0 100644
--- a/src/workflow/components/panels/CostPanel.tsx
+++ b/src/workflow/components/panels/CostPanel.tsx
@@ -2,41 +2,67 @@
  * Cost panel — budget display and configuration.
  * Rewritten with Tailwind + shadcn/ui.
  */
-import { useEffect, useState } from 'react'
-import { costIpc } from '../../ipc/ipc-client'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import type { BudgetConfig } from '@/workflow/types/ipc'
+import { useEffect, useState } from "react";
+import { costIpc } from "../../ipc/ipc-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import type { BudgetConfig } from "@/workflow/types/ipc";
 
 export function CostPanel() {
-  const [budget, setBudget] = useState<BudgetConfig>({ perExecutionLimit: 10, dailyLimit: 100 })
-  const [dailySpend, setDailySpend] = useState(0)
-  const [editing, setEditing] = useState(false)
+  const [budget, setBudget] = useState<BudgetConfig>({
+    perExecutionLimit: 10,
+    dailyLimit: 100,
+  });
+  const [dailySpend, setDailySpend] = useState(0);
+  const [editing, setEditing] = useState(false);
 
   useEffect(() => {
-    costIpc.getBudget().then(setBudget).catch(() => {})
-    costIpc.getDailySpend().then(setDailySpend).catch(() => {})
-  }, [])
+    costIpc
+      .getBudget()
+      .then(setBudget)
+      .catch(() => {});
+    costIpc
+      .getDailySpend()
+      .then(setDailySpend)
+      .catch(() => {});
+  }, []);
 
-  const handleSave = async () => { await costIpc.setBudget(budget); setEditing(false) }
+  const handleSave = async () => {
+    await costIpc.setBudget(budget);
+    setEditing(false);
+  };
 
   return (
     <div className="p-3">
       <h3 className="text-sm font-semibold mb-3">Cost Control</h3>
       <p className="text-[11px] text-muted-foreground mb-3">
-        Estimates use model base prices; actual API cost may vary with inputs (resolution, length, etc.).
+        Estimates use model base prices; actual API cost may vary with inputs
+        (resolution, length, etc.).
       </p>
       <div className="mb-3">
         <div className="text-xs text-muted-foreground">Daily Spend</div>
-        <div className={`text-lg font-bold ${dailySpend > budget.dailyLimit * 0.8 ? 'text-destructive' : 'text-green-400'}`}>
+        <div
+          className={`text-lg font-bold ${dailySpend > budget.dailyLimit * 0.8 ? "text-destructive" : "text-green-400"}`}
+        >
           ${dailySpend.toFixed(2)} / ${budget.dailyLimit.toFixed(2)}
         </div>
       </div>
       <div className="mb-3">
         <div className="text-xs text-muted-foreground">Per-Execution Limit</div>
         {editing ? (
-          <Input type="number" step={0.5} min={0} value={budget.perExecutionLimit}
-            onChange={e => setBudget(b => ({ ...b, perExecutionLimit: Number(e.target.value) }))} className="h-8 text-xs" />
+          <Input
+            type="number"
+            step={0.5}
+            min={0}
+            value={budget.perExecutionLimit}
+            onChange={(e) =>
+              setBudget((b) => ({
+                ...b,
+                perExecutionLimit: Number(e.target.value),
+              }))
+            }
+            className="h-8 text-xs"
+          />
         ) : (
           <div className="text-sm">${budget.perExecutionLimit.toFixed(2)}</div>
         )}
@@ -44,15 +70,27 @@ export function CostPanel() {
       <div className="mb-3">
         <div className="text-xs text-muted-foreground">Daily Limit</div>
         {editing ? (
-          <Input type="number" step={1} min={0} value={budget.dailyLimit}
-            onChange={e => setBudget(b => ({ ...b, dailyLimit: Number(e.target.value) }))} className="h-8 text-xs" />
+          <Input
+            type="number"
+            step={1}
+            min={0}
+            value={budget.dailyLimit}
+            onChange={(e) =>
+              setBudget((b) => ({ ...b, dailyLimit: Number(e.target.value) }))
+            }
+            className="h-8 text-xs"
+          />
         ) : (
           <div className="text-sm">${budget.dailyLimit.toFixed(2)}</div>
         )}
       </div>
-      <Button variant="outline" size="sm" onClick={editing ? handleSave : () => setEditing(true)}>
-        {editing ? 'Save' : 'Edit Budget'}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={editing ? handleSave : () => setEditing(true)}
+      >
+        {editing ? "Save" : "Edit Budget"}
       </Button>
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/panels/MonitorSidePanel.tsx b/src/workflow/components/panels/MonitorSidePanel.tsx
index 36637e63..31d54af6 100644
--- a/src/workflow/components/panels/MonitorSidePanel.tsx
+++ b/src/workflow/components/panels/MonitorSidePanel.tsx
@@ -2,128 +2,215 @@
  * MonitorSidePanel — right-side panel for run history.
  * Styled to match the NodePalette (left sidebar) for visual consistency.
  */
-import { useState, useEffect, useCallback } from 'react'
-import { ChevronDown, ChevronRight, X, ChevronsUpDown } from 'lucide-react'
-import { useExecutionStore, type RunSession } from '../../stores/execution.store'
-import { useUIStore } from '../../stores/ui.store'
-import { historyIpc } from '../../ipc/ipc-client'
-import { getOutputItemType, decodeDataText } from '../../lib/outputDisplay'
-import { cn } from '@/lib/utils'
-import type { NodeStatus, NodeExecutionRecord } from '@/workflow/types/execution'
+import { useState, useEffect, useCallback } from "react";
+import { ChevronDown, ChevronRight, X, ChevronsUpDown } from "lucide-react";
+import {
+  useExecutionStore,
+  type RunSession,
+} from "../../stores/execution.store";
+import { useUIStore } from "../../stores/ui.store";
+import { historyIpc } from "../../ipc/ipc-client";
+import { getOutputItemType, decodeDataText } from "../../lib/outputDisplay";
+import { cn } from "@/lib/utils";
+import type {
+  NodeStatus,
+  NodeExecutionRecord,
+} from "@/workflow/types/execution";
 
 /* ── Output Preview ───────────────────────────────────────────────── */
 
-function OutputPreview({ urls, durationMs, cost, label = 'Output' }: {
-  urls: string[]; durationMs?: number | null; cost?: number; label?: string
+function OutputPreview({
+  urls,
+  durationMs,
+  cost,
+  label = "Output",
+}: {
+  urls: string[];
+  durationMs?: number | null;
+  cost?: number;
+  label?: string;
 }) {
-  const openPreview = useUIStore(s => s.openPreview)
-  const validItems = urls.filter((u): u is string => u != null && typeof u === 'string')
-  if (validItems.length === 0) return null
+  const openPreview = useUIStore((s) => s.openPreview);
+  const validItems = urls.filter(
+    (u): u is string => u != null && typeof u === "string",
+  );
+  if (validItems.length === 0) return null;
 
   return (
     <div className="text-[10px]">
-      <div className="text-[9px] text-green-400 font-semibold uppercase tracking-wider mb-1">{label}</div>
+      <div className="text-[9px] text-green-400 font-semibold uppercase tracking-wider mb-1">
+        {label}
+      </div>
       {(durationMs != null || (cost != null && cost !== undefined)) && (
         <div className="flex items-center gap-3 py-0.5 text-muted-foreground mb-1">
-          {durationMs != null && <span>⏱ {(durationMs / 1000).toFixed(1)}s</span>}
-          {cost != null && cost !== undefined && <span>💰 ${Number(cost).toFixed(4)}</span>}
+          {durationMs != null && (
+            <span>⏱ {(durationMs / 1000).toFixed(1)}s</span>
+          )}
+          {cost != null && cost !== undefined && (
+            <span>💰 ${Number(cost).toFixed(4)}</span>
+          )}
         </div>
       )}
       <div className="flex gap-1.5 flex-wrap">
         {validItems.map((item, i) => {
-          const type = getOutputItemType(item)
-          if (type === 'text') {
-            const displayText = item.startsWith('data:text/') ? decodeDataText(item) : item
+          const type = getOutputItemType(item);
+          if (type === "text") {
+            const displayText = item.startsWith("data:text/")
+              ? decodeDataText(item)
+              : item;
             return (
-              <div key={i} className="w-full rounded border border-border/50 bg-muted/10 p-2 max-h-[120px] overflow-y-auto">
-                <pre className="text-[9px] text-foreground/80 whitespace-pre-wrap break-words font-sans">{displayText}</pre>
+              <div
+                key={i}
+                className="w-full rounded border border-border/50 bg-muted/10 p-2 max-h-[120px] overflow-y-auto"
+              >
+                <pre className="text-[9px] text-foreground/80 whitespace-pre-wrap break-words font-sans">
+                  {displayText}
+                </pre>
               </div>
-            )
+            );
           }
-          if (type === 'image') {
+          if (type === "image") {
             return (
-              <div key={i} className="relative group flex-1 min-w-[60px] max-w-[100px]">
-                <img src={item} alt=""
-                  onClick={() => openPreview(item, validItems.filter(u => getOutputItemType(u) === 'image'))}
-                  className="w-full h-16 rounded border border-border/50 object-cover cursor-pointer hover:ring-1 hover:ring-primary/50 bg-black/10" />
+              <div
+                key={i}
+                className="relative group flex-1 min-w-[60px] max-w-[100px]"
+              >
+                <img
+                  src={item}
+                  alt=""
+                  onClick={() =>
+                    openPreview(
+                      item,
+                      validItems.filter(
+                        (u) => getOutputItemType(u) === "image",
+                      ),
+                    )
+                  }
+                  className="w-full h-16 rounded border border-border/50 object-cover cursor-pointer hover:ring-1 hover:ring-primary/50 bg-black/10"
+                />
               </div>
-            )
+            );
           }
-          if (type === 'video') {
+          if (type === "video") {
             return (
-              <div key={i} className="relative flex-1 min-w-[60px] max-w-[100px] rounded border border-border/50 overflow-hidden bg-black/10">
-                <video src={item} preload="metadata" className="w-full h-16 object-cover" onClick={() => openPreview(item)} />
+              <div
+                key={i}
+                className="relative flex-1 min-w-[60px] max-w-[100px] rounded border border-border/50 overflow-hidden bg-black/10"
+              >
+                <video
+                  src={item}
+                  preload="metadata"
+                  className="w-full h-16 object-cover"
+                  onClick={() => openPreview(item)}
+                />
                 <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                   <div className="w-5 h-5 rounded-full bg-black/50 flex items-center justify-center">
-                    <svg width="8" height="8" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
+                    <svg width="8" height="8" viewBox="0 0 24 24" fill="white">
+                      <polygon points="5,3 19,12 5,21" />
+                    </svg>
                   </div>
                 </div>
               </div>
-            )
+            );
           }
-          if (type === 'audio') {
+          if (type === "audio") {
             return (
-              <div key={i} className="flex-1 min-w-[100px] rounded border border-border/50 bg-muted/10 p-1">
+              <div
+                key={i}
+                className="flex-1 min-w-[100px] rounded border border-border/50 bg-muted/10 p-1"
+              >
                 <audio src={item} controls className="w-full h-6" />
               </div>
-            )
+            );
           }
-          if (type === '3d') {
+          if (type === "3d") {
             return (
-              <div key={i} className="flex-1 min-w-[60px] rounded border border-border/50 bg-muted/10 p-2 text-center cursor-pointer hover:bg-muted/20" onClick={() => openPreview(item)}>
+              <div
+                key={i}
+                className="flex-1 min-w-[60px] rounded border border-border/50 bg-muted/10 p-2 text-center cursor-pointer hover:bg-muted/20"
+                onClick={() => openPreview(item)}
+              >
                 <span className="text-xs">🧊 3D</span>
               </div>
-            )
+            );
           }
           return (
-            <a key={i} href={item} target="_blank" rel="noopener noreferrer" className="text-[9px] text-blue-400 hover:underline truncate max-w-[160px] block">
-              {item.startsWith('data:') ? 'Data' : item.split('/').pop() || 'File'}
+            <a
+              key={i}
+              href={item}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[9px] text-blue-400 hover:underline truncate max-w-[160px] block"
+            >
+              {item.startsWith("data:")
+                ? "Data"
+                : item.split("/").pop() || "File"}
             </a>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
 function LastResultOutput({ nodeId }: { nodeId: string }) {
-  const lastResults = useExecutionStore(s => s.lastResults[nodeId] ?? [])
-  const latest = lastResults[0]
-  if (!latest?.urls?.length) return null
-  return <OutputPreview urls={latest.urls} durationMs={latest.durationMs} cost={latest.cost} label="Output (latest run)" />
+  const lastResults = useExecutionStore((s) => s.lastResults[nodeId] ?? []);
+  const latest = lastResults[0];
+  if (!latest?.urls?.length) return null;
+  return (
+    <OutputPreview
+      urls={latest.urls}
+      durationMs={latest.durationMs}
+      cost={latest.cost}
+      label="Output (latest run)"
+    />
+  );
 }
 
 /* ── Main Panel ───────────────────────────────────────────────────── */
 
-export function MonitorSidePanel({ workflowId }: { workflowId?: string | null }) {
-  const runSessions = useExecutionStore(s => s.runSessions)
-  const nodeStatuses = useExecutionStore(s => s.nodeStatuses)
-  const progressMap = useExecutionStore(s => s.progressMap)
-  const errorMessages = useExecutionStore(s => s.errorMessages)
-  const cancelAll = useExecutionStore(s => s.cancelAll)
-  const togglePanel = useUIStore(s => s.toggleWorkflowResultsPanel)
-  const width = useUIStore(s => s.workflowResultsPanelWidth)
-  const setSidebarWidth = useUIStore(s => s.setWorkflowResultsPanelWidth)
-  const [dragging, setDragging] = useState(false)
+export function MonitorSidePanel({
+  workflowId,
+}: {
+  workflowId?: string | null;
+}) {
+  const runSessions = useExecutionStore((s) => s.runSessions);
+  const nodeStatuses = useExecutionStore((s) => s.nodeStatuses);
+  const progressMap = useExecutionStore((s) => s.progressMap);
+  const errorMessages = useExecutionStore((s) => s.errorMessages);
+  const cancelAll = useExecutionStore((s) => s.cancelAll);
+  const togglePanel = useUIStore((s) => s.toggleWorkflowResultsPanel);
+  const width = useUIStore((s) => s.workflowResultsPanelWidth);
+  const setSidebarWidth = useUIStore((s) => s.setWorkflowResultsPanelWidth);
+  const [dragging, setDragging] = useState(false);
 
-  const byWorkflow = workflowId ? runSessions.filter(s => s.workflowId === workflowId) : runSessions
-  const fullRunsOnly = byWorkflow.filter(s => s.scope === 'full' || !s.scope)
-  const filteredSessions = fullRunsOnly.length > 0 ? fullRunsOnly : byWorkflow.filter(s => s.scope === 'full' || !s.scope)
+  const byWorkflow = workflowId
+    ? runSessions.filter((s) => s.workflowId === workflowId)
+    : runSessions;
+  const fullRunsOnly = byWorkflow.filter((s) => s.scope === "full" || !s.scope);
+  const filteredSessions =
+    fullRunsOnly.length > 0
+      ? fullRunsOnly
+      : byWorkflow.filter((s) => s.scope === "full" || !s.scope);
 
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    setDragging(true)
-    const startX = e.clientX
-    const startWidth = width
-    const onMove = (ev: MouseEvent) => setSidebarWidth(startWidth + (startX - ev.clientX))
-    const onUp = () => {
-      setDragging(false)
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [width, setSidebarWidth])
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setDragging(true);
+      const startX = e.clientX;
+      const startWidth = width;
+      const onMove = (ev: MouseEvent) =>
+        setSidebarWidth(startWidth + (startX - ev.clientX));
+      const onUp = () => {
+        setDragging(false);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [width, setSidebarWidth],
+  );
 
   return (
     <div
@@ -132,7 +219,9 @@ export function MonitorSidePanel({ workflowId }: { workflowId?: string | null })
     >
       {/* ── header ── */}
       <div className="flex items-center justify-between px-4 h-12 border-b border-border/70 shrink-0">
-        <span className="font-semibold text-[13px] text-foreground">History</span>
+        <span className="font-semibold text-[13px] text-foreground">
+          History
+        </span>
         <button
           onClick={togglePanel}
           className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
@@ -150,10 +239,15 @@ export function MonitorSidePanel({ workflowId }: { workflowId?: string | null })
           </div>
         ) : (
           <div className="space-y-1">
-            {filteredSessions.map(session => (
-              <SessionCard key={session.id} session={session} nodeStatuses={nodeStatuses}
-                progressMap={progressMap} errorMessages={errorMessages}
-                onCancel={() => cancelAll(session.workflowId)} />
+            {filteredSessions.map((session) => (
+              <SessionCard
+                key={session.id}
+                session={session}
+                nodeStatuses={nodeStatuses}
+                progressMap={progressMap}
+                errorMessages={errorMessages}
+                onCancel={() => cancelAll(session.workflowId)}
+              />
             ))}
           </div>
         )}
@@ -163,72 +257,111 @@ export function MonitorSidePanel({ workflowId }: { workflowId?: string | null })
       <div
         onMouseDown={onResizeStart}
         className={cn(
-          'absolute left-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors',
-          dragging ? 'bg-primary' : 'hover:bg-primary/50'
+          "absolute left-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors",
+          dragging ? "bg-primary" : "hover:bg-primary/50",
         )}
       />
     </div>
-  )
+  );
 }
 
-
 /* ── Session Card ─────────────────────────────────────────────────── */
 
-function SessionCard({ session, nodeStatuses, progressMap, errorMessages, onCancel }: {
-  session: RunSession
-  nodeStatuses: Record<string, NodeStatus>
-  progressMap: Record<string, { progress: number; message?: string }>
-  errorMessages: Record<string, string>
-  onCancel: () => void
+function SessionCard({
+  session,
+  nodeStatuses,
+  progressMap,
+  errorMessages,
+  onCancel,
+}: {
+  session: RunSession;
+  nodeStatuses: Record<string, NodeStatus>;
+  progressMap: Record<string, { progress: number; message?: string }>;
+  errorMessages: Record<string, string>;
+  onCancel: () => void;
 }) {
-  const [collapsed, setCollapsed] = useState(session.status !== 'running')
+  const [collapsed, setCollapsed] = useState(session.status !== "running");
   /** Signal to expand/collapse all node rows within this session */
-  const [nodeExpandSignal, setNodeExpandSignal] = useState(0)
-  const nodesAllExpanded = nodeExpandSignal % 2 === 1
-  const { nodeIds, nodeLabels, nodeResults, nodeCosts, status } = session
-  const total = nodeIds.length
-  const completed = Object.values(nodeResults).filter(v => v === 'done').length
-  const errors = Object.values(nodeResults).filter(v => v === 'error').length
-  const pct = total > 0 ? Math.round(((completed + errors) / total) * 100) : 0
-  const totalCost = Object.values(nodeCosts).reduce((sum, c) => sum + c, 0)
+  const [nodeExpandSignal, setNodeExpandSignal] = useState(0);
+  const nodesAllExpanded = nodeExpandSignal % 2 === 1;
+  const { nodeIds, nodeLabels, nodeResults, nodeCosts, status } = session;
+  const total = nodeIds.length;
+  const completed = Object.values(nodeResults).filter(
+    (v) => v === "done",
+  ).length;
+  const errors = Object.values(nodeResults).filter((v) => v === "error").length;
+  const pct = total > 0 ? Math.round(((completed + errors) / total) * 100) : 0;
+  const totalCost = Object.values(nodeCosts).reduce((sum, c) => sum + c, 0);
 
-  const statusColor = status === 'running' ? 'text-blue-400' :
-    status === 'completed' ? 'text-green-400' :
-    status === 'error' ? 'text-orange-400' : 'text-muted-foreground'
-  const statusLabel = status === 'running' ? 'Running' :
-    status === 'completed' ? 'Completed' :
-    status === 'error' ? 'Has errors' : 'Cancelled'
+  const statusColor =
+    status === "running"
+      ? "text-blue-400"
+      : status === "completed"
+        ? "text-green-400"
+        : status === "error"
+          ? "text-orange-400"
+          : "text-muted-foreground";
+  const statusLabel =
+    status === "running"
+      ? "Running"
+      : status === "completed"
+        ? "Completed"
+        : status === "error"
+          ? "Has errors"
+          : "Cancelled";
 
-  const elapsed = Math.round((Date.now() - new Date(session.startedAt).getTime()) / 1000)
-  const elapsedStr = elapsed >= 60 ? `${Math.floor(elapsed / 60)}m ${elapsed % 60}s` : `${elapsed}s`
+  const elapsed = Math.round(
+    (Date.now() - new Date(session.startedAt).getTime()) / 1000,
+  );
+  const elapsedStr =
+    elapsed >= 60
+      ? `${Math.floor(elapsed / 60)}m ${elapsed % 60}s`
+      : `${elapsed}s`;
 
   return (
     <div className="rounded-lg overflow-hidden border border-border/40 bg-card mb-0.5">
-      <div className="flex items-center gap-1.5 px-2.5 py-1.5 cursor-pointer hover:bg-muted/60 transition-colors"
-        onClick={() => setCollapsed(!collapsed)}>
+      <div
+        className="flex items-center gap-1.5 px-2.5 py-1.5 cursor-pointer hover:bg-muted/60 transition-colors"
+        onClick={() => setCollapsed(!collapsed)}
+      >
         <span className="text-muted-foreground/80 w-3.5 h-3.5 flex items-center justify-center flex-shrink-0">
-          {collapsed ? <ChevronRight className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
+          {collapsed ? (
+            <ChevronRight className="w-3 h-3" />
+          ) : (
+            <ChevronDown className="w-3 h-3" />
+          )}
         </span>
-        <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0',
-          status === 'running' ? 'bg-blue-500 animate-pulse' :
-          status === 'completed' ? 'bg-green-500' :
-          status === 'error' ? 'bg-orange-500' : 'bg-muted-foreground')} />
+        <span
+          className={cn(
+            "w-1.5 h-1.5 rounded-full flex-shrink-0",
+            status === "running"
+              ? "bg-blue-500 animate-pulse"
+              : status === "completed"
+                ? "bg-green-500"
+                : status === "error"
+                  ? "bg-orange-500"
+                  : "bg-muted-foreground",
+          )}
+        />
         <div className="flex-1 min-w-0">
-          <div className="text-[11px] font-medium truncate text-foreground/90">{session.workflowName}</div>
+          <div className="text-[11px] font-medium truncate text-foreground/90">
+            {session.workflowName}
+          </div>
           <div className="text-[9px] text-muted-foreground/70">
             {new Date(session.startedAt).toLocaleTimeString()}
-            <span className="text-muted-foreground/60 ml-2">{elapsedStr} ago</span>
-            {totalCost > 0 && <span className="text-amber-400/70 ml-1">💰 ${totalCost.toFixed(4)}</span>}
+            <span className="text-muted-foreground/60 ml-2">
+              {elapsedStr} ago
+            </span>
           </div>
         </div>
         <button
-          onClick={e => {
-            e.stopPropagation()
-            if (collapsed) setCollapsed(false)
-            setNodeExpandSignal(s => s + 1)
+          onClick={(e) => {
+            e.stopPropagation();
+            if (collapsed) setCollapsed(false);
+            setNodeExpandSignal((s) => s + 1);
           }}
           className="rounded-md p-1 text-muted-foreground/60 hover:bg-muted hover:text-foreground transition-colors flex-shrink-0"
-          title={nodesAllExpanded ? 'Collapse all nodes' : 'Expand all nodes'}
+          title={nodesAllExpanded ? "Collapse all nodes" : "Expand all nodes"}
         >
           <ChevronsUpDown className="w-3.5 h-3.5" />
         </button>
@@ -236,12 +369,21 @@ function SessionCard({ session, nodeStatuses, progressMap, errorMessages, onCanc
 
       {/* Status + controls */}
       <div className="flex items-center gap-2 px-2.5 pb-1.5">
-        <span className={cn('text-[9px] font-medium', statusColor)}>{statusLabel}</span>
-        <span className="text-[9px] text-muted-foreground/50">{completed + errors}/{total}</span>
+        <span className={cn("text-[9px] font-medium", statusColor)}>
+          {statusLabel}
+        </span>
+        <span className="text-[9px] text-muted-foreground/50">
+          {completed + errors}/{total}
+        </span>
         <div className="flex-1" />
-        {status === 'running' && (
-          <button onClick={e => { e.stopPropagation(); onCancel() }}
-            className="text-[9px] px-2 py-0.5 rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors">
+        {status === "running" && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onCancel();
+            }}
+            className="text-[9px] px-2 py-0.5 rounded-md bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors"
+          >
             Stop
           </button>
         )}
@@ -251,120 +393,208 @@ function SessionCard({ session, nodeStatuses, progressMap, errorMessages, onCanc
         <>
           <div className="px-2.5 pb-1.5">
             <div className="h-1 rounded-full bg-muted/50 overflow-hidden">
-              <div className={cn('h-full rounded-full transition-all duration-500',
-                errors > 0 ? 'bg-orange-500' : status === 'completed' ? 'bg-green-500' : 'bg-blue-500')}
-                style={{ width: `${pct}%` }} />
+              <div
+                className={cn(
+                  "h-full rounded-full transition-all duration-500",
+                  errors > 0
+                    ? "bg-orange-500"
+                    : status === "completed"
+                      ? "bg-green-500"
+                      : "bg-blue-500",
+                )}
+                style={{ width: `${pct}%` }}
+              />
             </div>
           </div>
           <div className="px-1.5 pb-1.5 space-y-px">
-            {nodeIds.map(nodeId => (
-              <NodeRow key={nodeId} nodeId={nodeId} label={nodeLabels[nodeId] || nodeId.slice(0, 8)}
-                sessionResult={nodeResults[nodeId]} isSessionRunning={status === 'running'}
-                liveStatus={nodeStatuses[nodeId]} progress={progressMap[nodeId]}
-                errorMessage={errorMessages[nodeId]} expandSignal={nodeExpandSignal} />
+            {nodeIds.map((nodeId) => (
+              <NodeRow
+                key={nodeId}
+                nodeId={nodeId}
+                label={nodeLabels[nodeId] || nodeId.slice(0, 8)}
+                sessionResult={nodeResults[nodeId]}
+                isSessionRunning={status === "running"}
+                liveStatus={nodeStatuses[nodeId]}
+                progress={progressMap[nodeId]}
+                errorMessage={errorMessages[nodeId]}
+                expandSignal={nodeExpandSignal}
+              />
             ))}
           </div>
         </>
       )}
     </div>
-  )
+  );
 }
 
 /* ── Node Row ─────────────────────────────────────────────────────── */
 
-function NodeRow({ nodeId, label, sessionResult, isSessionRunning, liveStatus, progress, errorMessage, expandSignal }: {
-  nodeId: string; label: string; sessionResult: 'running' | 'done' | 'error'
-  isSessionRunning: boolean; liveStatus?: NodeStatus
-  progress?: { progress: number; message?: string }; errorMessage?: string
-  expandSignal: number
+function NodeRow({
+  nodeId,
+  label,
+  sessionResult,
+  isSessionRunning,
+  liveStatus,
+  progress,
+  errorMessage,
+  expandSignal,
+}: {
+  nodeId: string;
+  label: string;
+  sessionResult: "running" | "done" | "error";
+  isSessionRunning: boolean;
+  liveStatus?: NodeStatus;
+  progress?: { progress: number; message?: string };
+  errorMessage?: string;
+  expandSignal: number;
 }) {
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(false);
 
   // React to expand/collapse all signal from parent SessionCard
   useEffect(() => {
-    if (expandSignal === 0) return
-    setExpanded(expandSignal % 2 === 1)
-  }, [expandSignal])
-  const [record, setRecord] = useState<NodeExecutionRecord | null>(null)
-  const [loading, setLoading] = useState(false)
-  const lastResults = useExecutionStore(s => s.lastResults[nodeId] ?? [])
-  const hasLastResult = lastResults.length > 0 && (lastResults[0].urls?.length ?? 0) > 0
-  const isLiveRunning = isSessionRunning && liveStatus === 'running'
-  const isDone = sessionResult === 'done' || sessionResult === 'error'
-  const displayError = errorMessage ?? (record?.resultMetadata as Record<string, unknown> | undefined)?.error as string | undefined
+    if (expandSignal === 0) return;
+    setExpanded(expandSignal % 2 === 1);
+  }, [expandSignal]);
+  const [record, setRecord] = useState<NodeExecutionRecord | null>(null);
+  const [loading, setLoading] = useState(false);
+  const lastResults = useExecutionStore((s) => s.lastResults[nodeId] ?? []);
+  const hasLastResult =
+    lastResults.length > 0 && (lastResults[0].urls?.length ?? 0) > 0;
+  const isLiveRunning = isSessionRunning && liveStatus === "running";
+  const isDone = sessionResult === "done" || sessionResult === "error";
+  const displayError =
+    errorMessage ??
+    ((record?.resultMetadata as Record<string, unknown> | undefined)?.error as
+      | string
+      | undefined);
 
   useEffect(() => {
-    if (!expanded || !isDone || record) return
-    setLoading(true)
-    historyIpc.list(nodeId).then(records => {
-      if (records?.length) setRecord(records[0])
-      setLoading(false)
-    }).catch(() => setLoading(false))
-  }, [expanded, isDone, nodeId, record])
+    if (!expanded || !isDone || record) return;
+    setLoading(true);
+    historyIpc
+      .list(nodeId)
+      .then((records) => {
+        if (records?.length) setRecord(records[0]);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [expanded, isDone, nodeId, record]);
 
   return (
     <div className="rounded overflow-hidden">
-      <div className={cn(
-        'flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors rounded-lg',
-        expanded ? 'bg-muted/60' : 'hover:bg-muted/40'
-      )} onClick={() => isDone && setExpanded(!expanded)}>
-        <span className={cn('w-1.5 h-1.5 rounded-full flex-shrink-0',
-          isLiveRunning ? 'bg-blue-500 animate-pulse' :
-          sessionResult === 'done' ? 'bg-green-500' :
-          sessionResult === 'error' ? 'bg-red-500' : 'bg-muted-foreground/20')} />
-        <span className="text-[10px] truncate flex-1 min-w-0 text-foreground/80">{label}</span>
-        {isLiveRunning && progress && <span className="text-[9px] text-blue-400">{Math.round(progress.progress)}%</span>}
-        {isLiveRunning && !progress && <span className="text-[9px] text-blue-400 animate-pulse">...</span>}
-        {!isLiveRunning && sessionResult === 'done' && <span className="text-[9px] text-green-400/80">done</span>}
-        {!isLiveRunning && sessionResult === 'error' && <span className="text-[9px] text-red-400/80">error</span>}
+      <div
+        className={cn(
+          "flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors rounded-lg",
+          expanded ? "bg-muted/60" : "hover:bg-muted/40",
+        )}
+        onClick={() => isDone && setExpanded(!expanded)}
+      >
+        <span
+          className={cn(
+            "w-1.5 h-1.5 rounded-full flex-shrink-0",
+            isLiveRunning
+              ? "bg-blue-500 animate-pulse"
+              : sessionResult === "done"
+                ? "bg-green-500"
+                : sessionResult === "error"
+                  ? "bg-red-500"
+                  : "bg-muted-foreground/20",
+          )}
+        />
+        <span className="text-[10px] truncate flex-1 min-w-0 text-foreground/80">
+          {label}
+        </span>
+        {isLiveRunning && progress && (
+          <span className="text-[9px] text-blue-400">
+            {Math.round(progress.progress)}%
+          </span>
+        )}
+        {isLiveRunning && !progress && (
+          <span className="text-[9px] text-blue-400 animate-pulse">...</span>
+        )}
+        {!isLiveRunning && sessionResult === "done" && (
+          <span className="text-[9px] text-green-400/80">done</span>
+        )}
+        {!isLiveRunning && sessionResult === "error" && (
+          <span className="text-[9px] text-red-400/80">error</span>
+        )}
         {isDone && (
           <span className="text-muted-foreground/60 ml-0.5 flex-shrink-0">
-            {expanded ? <ChevronDown className="w-2.5 h-2.5" /> : <ChevronRight className="w-2.5 h-2.5" />}
+            {expanded ? (
+              <ChevronDown className="w-2.5 h-2.5" />
+            ) : (
+              <ChevronRight className="w-2.5 h-2.5" />
+            )}
           </span>
         )}
       </div>
 
-      {sessionResult === 'error' && errorMessage && (
-        <div className="mx-2 mt-0.5 mb-1 px-2 py-1 rounded border border-red-500/20 bg-red-500/5 text-[9px] text-red-400/80 leading-tight break-words line-clamp-2" title={errorMessage}>
+      {sessionResult === "error" && errorMessage && (
+        <div
+          className="mx-2 mt-0.5 mb-1 px-2 py-1 rounded border border-red-500/20 bg-red-500/5 text-[9px] text-red-400/80 leading-tight break-words line-clamp-2"
+          title={errorMessage}
+        >
           {errorMessage}
         </div>
       )}
 
       {expanded && (
         <div className="mx-1.5 mb-1 rounded border border-border/40 bg-background overflow-hidden">
-          {loading && <div className="p-2 text-[9px] text-muted-foreground/60 animate-pulse text-center">Loading...</div>}
-          {!loading && record && <NodeIODetail record={record} liveErrorMessage={errorMessage} />}
+          {loading && (
+            <div className="p-2 text-[9px] text-muted-foreground/60 animate-pulse text-center">
+              Loading...
+            </div>
+          )}
+          {!loading && record && (
+            <NodeIODetail record={record} liveErrorMessage={errorMessage} />
+          )}
           {!loading && !record && (
             <div className="p-2 text-[9px] text-muted-foreground/60">
-              {sessionResult === 'error' ? (
+              {sessionResult === "error" ? (
                 <div>
-                  <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-1">Error</div>
+                  <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-1">
+                    Error
+                  </div>
                   <div className="text-red-400/80 whitespace-pre-wrap break-words p-1.5 rounded bg-red-500/5">
-                    {displayError || 'Execution failed.'}
+                    {displayError || "Execution failed."}
                   </div>
                 </div>
-              ) : hasLastResult ? <LastResultOutput nodeId={nodeId} /> : <div className="text-center">No data</div>}
+              ) : hasLastResult ? (
+                <LastResultOutput nodeId={nodeId} />
+              ) : (
+                <div className="text-center">No data</div>
+              )}
             </div>
           )}
         </div>
       )}
     </div>
-  )
+  );
 }
 
 /* ── Node I/O Detail ──────────────────────────────────────────────── */
 
-function NodeIODetail({ record, liveErrorMessage }: { record: NodeExecutionRecord; liveErrorMessage?: string }) {
-  const meta = record.resultMetadata as Record<string, unknown> | null
-  const resultUrls = (meta?.resultUrls as string[]) ?? (record.resultPath ? [record.resultPath] : [])
-  const error = liveErrorMessage ?? (meta?.error as string | undefined)
-  const modelId = meta?.modelId as string | undefined
-  const raw = meta?.raw as Record<string, unknown> | undefined
+function NodeIODetail({
+  record,
+  liveErrorMessage,
+}: {
+  record: NodeExecutionRecord;
+  liveErrorMessage?: string;
+}) {
+  const meta = record.resultMetadata as Record<string, unknown> | null;
+  const resultUrls =
+    (meta?.resultUrls as string[]) ??
+    (record.resultPath ? [record.resultPath] : []);
+  const error = liveErrorMessage ?? (meta?.error as string | undefined);
+  const modelId = meta?.modelId as string | undefined;
+  const raw = meta?.raw as Record<string, unknown> | undefined;
 
   return (
     <div className="text-[10px]">
       <div className="flex items-center gap-2 px-2.5 py-1 bg-muted/20 border-b border-border/30 text-muted-foreground/70 text-[9px]">
-        {record.durationMs != null && <span>⏱ {(record.durationMs / 1000).toFixed(1)}s</span>}
+        {record.durationMs != null && (
+          <span>⏱ {(record.durationMs / 1000).toFixed(1)}s</span>
+        )}
         <span>💰 ${record.cost.toFixed(4)}</span>
         {modelId && <span className="truncate">{modelId}</span>}
       </div>
@@ -375,18 +605,24 @@ function NodeIODetail({ record, liveErrorMessage }: { record: NodeExecutionRecor
       )}
       {error && (
         <div className="px-2.5 pb-1.5">
-          <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-0.5">Error</div>
-          <div className="text-red-400/80 p-1.5 rounded bg-red-500/5 leading-tight whitespace-pre-wrap break-words max-h-[150px] overflow-y-auto">{error}</div>
+          <div className="text-[9px] text-red-400 font-semibold uppercase tracking-wider mb-0.5">
+            Error
+          </div>
+          <div className="text-red-400/80 p-1.5 rounded bg-red-500/5 leading-tight whitespace-pre-wrap break-words max-h-[150px] overflow-y-auto">
+            {error}
+          </div>
         </div>
       )}
       {raw && (
         <div className="px-2.5 pb-1.5 border-t border-border/30 pt-1.5">
-          <div className="text-[9px] text-blue-400 font-semibold uppercase tracking-wider mb-0.5">Input</div>
+          <div className="text-[9px] text-blue-400 font-semibold uppercase tracking-wider mb-0.5">
+            Input
+          </div>
           <pre className="text-[8px] text-foreground/50 font-mono bg-muted/10 rounded p-1.5 overflow-x-auto max-h-[100px] overflow-y-auto whitespace-pre-wrap break-all">
             {JSON.stringify(raw, null, 2).slice(0, 800)}
           </pre>
         </div>
       )}
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/panels/NodeConfigPanel.tsx b/src/workflow/components/panels/NodeConfigPanel.tsx
index b59134e6..e286d259 100644
--- a/src/workflow/components/panels/NodeConfigPanel.tsx
+++ b/src/workflow/components/panels/NodeConfigPanel.tsx
@@ -2,198 +2,310 @@
  * Node configuration panel — model selection for AI Task nodes.
  * Reuses the playground ModelSelector.
  */
-import { useState, useEffect, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import { useExecutionStore } from '../../stores/execution.store'
-import { useUIStore } from '../../stores/ui.store'
-import { modelsIpc } from '../../ipc/ipc-client'
-import { useModelsStore } from '@/stores/modelsStore'
-import { convertDesktopModel } from '../../lib/model-converter'
-import { ModelSelector } from '@/components/playground/ModelSelector'
-import type { ParamDefinition, WaveSpeedModel } from '@/workflow/types/node-defs'
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import { useExecutionStore } from "../../stores/execution.store";
+import { useUIStore } from "../../stores/ui.store";
+import { modelsIpc } from "../../ipc/ipc-client";
+import { useModelsStore } from "@/stores/modelsStore";
+import { convertDesktopModel } from "../../lib/model-converter";
+import { ModelSelector } from "@/components/playground/ModelSelector";
+import type {
+  ParamDefinition,
+  WaveSpeedModel,
+} from "@/workflow/types/node-defs";
 
 /* ── Recent models (localStorage) ──────────────────────────────────── */
 
-const RECENT_KEY = 'wavespeed_workflow_recent_models'
-const MAX_RECENT = 5
+const RECENT_KEY = "wavespeed_workflow_recent_models";
+const MAX_RECENT = 5;
 
-function getRecentModels(): Array<{ modelId: string; displayName: string; category: string }> {
+function getRecentModels(): Array<{
+  modelId: string;
+  displayName: string;
+  category: string;
+}> {
   try {
-    return JSON.parse(localStorage.getItem(RECENT_KEY) || '[]')
-  } catch { return [] }
+    return JSON.parse(localStorage.getItem(RECENT_KEY) || "[]");
+  } catch {
+    return [];
+  }
 }
 
 function pushRecentModel(model: WaveSpeedModel) {
-  const recent = getRecentModels().filter(m => m.modelId !== model.modelId)
-  recent.unshift({ modelId: model.modelId, displayName: model.displayName, category: model.category })
-  localStorage.setItem(RECENT_KEY, JSON.stringify(recent.slice(0, MAX_RECENT)))
+  const recent = getRecentModels().filter((m) => m.modelId !== model.modelId);
+  recent.unshift({
+    modelId: model.modelId,
+    displayName: model.displayName,
+    category: model.category,
+  });
+  localStorage.setItem(RECENT_KEY, JSON.stringify(recent.slice(0, MAX_RECENT)));
 }
 
 /* ── Main panel ─────────────────────────────────────────────────────── */
 
 interface NodeConfigPanelProps {
-  paramDefs: ParamDefinition[]
+  paramDefs: ParamDefinition[];
   /** When true, render without title and with compact padding (e.g. inside node card) */
-  embeddedInNode?: boolean
+  embeddedInNode?: boolean;
 }
 
-export function NodeConfigPanel({ paramDefs, embeddedInNode }: NodeConfigPanelProps) {
-  const { t } = useTranslation()
-  const selectedNodeId = useUIStore(s => s.selectedNodeId)
-  const nodes = useWorkflowStore(s => s.nodes)
-  const updateNodeParams = useWorkflowStore(s => s.updateNodeParams)
+export function NodeConfigPanel({
+  paramDefs,
+  embeddedInNode,
+}: NodeConfigPanelProps) {
+  const { t } = useTranslation();
+  const selectedNodeId = useUIStore((s) => s.selectedNodeId);
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const updateNodeParams = useWorkflowStore((s) => s.updateNodeParams);
 
-  const node = nodes.find(n => n.id === selectedNodeId)
+  const node = nodes.find((n) => n.id === selectedNodeId);
   if (!node || !selectedNodeId) {
-    return <div className="p-3 text-muted-foreground text-sm">{t('workflow.selectNode', 'Select a node to configure')}</div>
+    return (
+      <div className="p-3 text-muted-foreground text-sm">
+        {t("workflow.selectNode", "Select a node to configure")}
+      </div>
+    );
   }
 
   // Annotation nodes
-  if (node.data.nodeType === 'annotation') {
-    return <div className="p-3 text-muted-foreground text-sm">{t('workflow.annotationHint', 'Double-click the note on the canvas to edit it.')}</div>
+  if (node.data.nodeType === "annotation") {
+    return (
+      <div className="p-3 text-muted-foreground text-sm">
+        {t(
+          "workflow.annotationHint",
+          "Double-click the note on the canvas to edit it.",
+        )}
+      </div>
+    );
   }
 
-  const isAITask = node.data.nodeType === 'ai-task/run'
-  const params = node.data.params ?? {}
-  const handleChange = (key: string, value: unknown) => updateNodeParams(selectedNodeId, { ...params, [key]: value })
+  const isAITask = node.data.nodeType === "ai-task/run";
+  const params = node.data.params ?? {};
+  const handleChange = (key: string, value: unknown) =>
+    updateNodeParams(selectedNodeId, { ...params, [key]: value });
 
   return (
-    <div className={embeddedInNode ? 'p-2 overflow-hidden w-full min-w-0 flex flex-col flex-1 min-h-0' : 'p-3 overflow-hidden w-full min-w-0 flex flex-col flex-1'}>
+    <div
+      className={
+        embeddedInNode
+          ? "p-2 overflow-hidden w-full min-w-0 flex flex-col flex-1 min-h-0"
+          : "p-3 overflow-hidden w-full min-w-0 flex flex-col flex-1"
+      }
+    >
       {!embeddedInNode && (
         <h3 className="text-sm font-semibold mb-3 flex-shrink-0">
-          {isAITask ? t('workflow.modelSelection', 'Model Selection') : t('workflow.config', 'Configuration')}
+          {isAITask
+            ? t("workflow.modelSelection", "Model Selection")
+            : t("workflow.config", "Configuration")}
         </h3>
       )}
       {isAITask ? (
-        <AITaskModelSelector params={params} onChange={handleChange} embedded={embeddedInNode} />
+        <AITaskModelSelector
+          params={params}
+          onChange={handleChange}
+          embedded={embeddedInNode}
+        />
       ) : (
-        <div className={embeddedInNode ? 'overflow-y-auto scrollbar-auto-hide max-h-[280px]' : 'flex-1 overflow-y-auto scrollbar-auto-hide'}>
-          <StaticParamForm nodeType={node.data.nodeType} paramDefs={paramDefs} params={params} onChange={handleChange} />
+        <div
+          className={
+            embeddedInNode
+              ? "overflow-y-auto scrollbar-auto-hide max-h-[280px]"
+              : "flex-1 overflow-y-auto scrollbar-auto-hide"
+          }
+        >
+          <StaticParamForm
+            nodeType={node.data.nodeType}
+            paramDefs={paramDefs}
+            params={params}
+            onChange={handleChange}
+          />
         </div>
       )}
     </div>
-  )
+  );
 }
 
 /* ── AI Task Model Selector ─────────────────────────────────────────── */
 
-function AITaskModelSelector({ params, onChange, embedded }: { params: Record<string, unknown>; onChange: (key: string, value: unknown) => void; embedded?: boolean }) {
-  const { t } = useTranslation()
-  const selectedNodeId = useUIStore(s => s.selectedNodeId)
-  const updateNodeData = useWorkflowStore(s => s.updateNodeData)
-  const edges = useWorkflowStore(s => s.edges)
-  const removeEdgesByIds = useWorkflowStore(s => s.removeEdgesByIds)
-  const currentModelId = String(params.modelId ?? '')
-  const models = useModelsStore(s => s.models)
-  const isLoading = useModelsStore(s => s.isLoading)
-  const storeError = useModelsStore(s => s.error)
-  const fetchModels = useModelsStore(s => s.fetchModels)
-  const getModelById = useModelsStore(s => s.getModelById)
-  const [refreshingCatalog, setRefreshingCatalog] = useState(false)
+function AITaskModelSelector({
+  params,
+  onChange,
+  embedded,
+}: {
+  params: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+  embedded?: boolean;
+}) {
+  const { t } = useTranslation();
+  const selectedNodeId = useUIStore((s) => s.selectedNodeId);
+  const updateNodeData = useWorkflowStore((s) => s.updateNodeData);
+  const edges = useWorkflowStore((s) => s.edges);
+  const removeEdgesByIds = useWorkflowStore((s) => s.removeEdgesByIds);
+  const currentModelId = String(params.modelId ?? "");
+  const models = useModelsStore((s) => s.models);
+  const isLoading = useModelsStore((s) => s.isLoading);
+  const storeError = useModelsStore((s) => s.error);
+  const fetchModels = useModelsStore((s) => s.fetchModels);
+  const getModelById = useModelsStore((s) => s.getModelById);
+  const [refreshingCatalog, setRefreshingCatalog] = useState(false);
   const error = storeError
-    ? (typeof storeError === 'string' ? storeError : t('workflow.modelSelector.loadFailed', 'Failed to load models.'))
-    : (models.length === 0 && !isLoading ? t('workflow.modelSelector.noModelsLoaded', 'No models loaded. Click "Refresh Models" below.') : null)
+    ? typeof storeError === "string"
+      ? storeError
+      : t("workflow.modelSelector.loadFailed", "Failed to load models.")
+    : models.length === 0 && !isLoading
+      ? t(
+          "workflow.modelSelector.noModelsLoaded",
+          'No models loaded. Click "Refresh Models" below.',
+        )
+      : null;
 
   useEffect(() => {
-    if (models.length === 0) fetchModels()
-  }, [models.length, fetchModels])
+    if (models.length === 0) fetchModels();
+  }, [models.length, fetchModels]);
 
   const handleRefreshModels = useCallback(async () => {
     try {
-      setRefreshingCatalog(true)
-      await fetchModels(true)
-      const latestModels = useModelsStore.getState().models
-      if (latestModels.length > 0 && typeof window !== 'undefined' && window.workflowAPI) {
-        await modelsIpc.sync(latestModels)
+      setRefreshingCatalog(true);
+      await fetchModels(true);
+      const latestModels = useModelsStore.getState().models;
+      if (
+        latestModels.length > 0 &&
+        typeof window !== "undefined" &&
+        window.workflowAPI
+      ) {
+        await modelsIpc.sync(latestModels);
       }
     } catch {
       // error comes from store
     } finally {
-      setRefreshingCatalog(false)
+      setRefreshingCatalog(false);
     }
-  }, [fetchModels])
-
-  const applyModelSelection = useCallback((model: WaveSpeedModel) => {
-    if (selectedNodeId && currentModelId) {
-      const newParamNames = new Set(model.inputSchema.map(p => p.name))
-      const edgesToRemove = edges.filter(e => {
-        if (e.source === selectedNodeId) return false
-        if (e.target === selectedNodeId) {
-          const th = e.targetHandle ?? ''
-          if (th.startsWith('input-')) return false
-          if (th.startsWith('param-')) {
-            const paramName = th.slice('param-'.length)
-            return !newParamNames.has(paramName)
+  }, [fetchModels]);
+
+  const applyModelSelection = useCallback(
+    (model: WaveSpeedModel) => {
+      if (selectedNodeId && currentModelId) {
+        const newParamNames = new Set(model.inputSchema.map((p) => p.name));
+        const edgesToRemove = edges.filter((e) => {
+          if (e.source === selectedNodeId) return false;
+          if (e.target === selectedNodeId) {
+            const th = e.targetHandle ?? "";
+            if (th.startsWith("input-")) return false;
+            if (th.startsWith("param-")) {
+              const paramName = th.slice("param-".length);
+              return !newParamNames.has(paramName);
+            }
           }
+          return false;
+        });
+        if (edgesToRemove.length > 0)
+          removeEdgesByIds(edgesToRemove.map((e) => e.id));
+      }
+
+      if (selectedNodeId) {
+        const oldParams =
+          (useWorkflowStore
+            .getState()
+            .nodes.find((n) => n.id === selectedNodeId)?.data?.params as Record<
+            string,
+            unknown
+          >) ?? {};
+        const internalParams: Record<string, unknown> = {};
+        for (const [k, v] of Object.entries(oldParams)) {
+          if (k.startsWith("__")) internalParams[k] = v;
         }
-        return false
-      })
-      if (edgesToRemove.length > 0) removeEdgesByIds(edgesToRemove.map(e => e.id))
-    }
+        delete internalParams.__hiddenRuns;
+        const newParams: Record<string, unknown> = {
+          ...internalParams,
+          modelId: model.modelId,
+        };
+        for (const p of model.inputSchema) {
+          if (p.default !== undefined) newParams[p.name] = p.default;
+        }
+        useWorkflowStore.getState().updateNodeParams(selectedNodeId, newParams);
 
-    if (selectedNodeId) {
-      const oldParams = useWorkflowStore.getState().nodes.find(n => n.id === selectedNodeId)?.data?.params as Record<string, unknown> ?? {}
-      const internalParams: Record<string, unknown> = {}
-      for (const [k, v] of Object.entries(oldParams)) {
-        if (k.startsWith('__')) internalParams[k] = v
-      }
-      delete internalParams.__hiddenRuns
-      const newParams: Record<string, unknown> = { ...internalParams, modelId: model.modelId }
-      for (const p of model.inputSchema) {
-        if (p.default !== undefined) newParams[p.name] = p.default
-      }
-      useWorkflowStore.getState().updateNodeParams(selectedNodeId, newParams)
-
-      const allNodes = useWorkflowStore.getState().nodes
-      const baseName = model.displayName
-      const otherLabels = allNodes
-        .filter(n => n.id !== selectedNodeId && n.data?.nodeType === 'ai-task/run')
-        .map(n => String(n.data?.label ?? '').trim())
-      let finalLabel = baseName
-      if (otherLabels.includes(finalLabel)) {
-        let idx = 2
-        while (otherLabels.includes(`${baseName} (${idx})`)) idx++
-        finalLabel = `${baseName} (${idx})`
+        const allNodes = useWorkflowStore.getState().nodes;
+        const baseName = model.displayName;
+        const otherLabels = allNodes
+          .filter(
+            (n) =>
+              n.id !== selectedNodeId && n.data?.nodeType === "ai-task/run",
+          )
+          .map((n) => String(n.data?.label ?? "").trim());
+        let finalLabel = baseName;
+        if (otherLabels.includes(finalLabel)) {
+          let idx = 2;
+          while (otherLabels.includes(`${baseName} (${idx})`)) idx++;
+          finalLabel = `${baseName} (${idx})`;
+        }
+        updateNodeData(selectedNodeId, {
+          modelInputSchema: model.inputSchema,
+          label: finalLabel,
+        });
+
+        useExecutionStore.getState().updateNodeStatus(selectedNodeId, "idle");
+        useExecutionStore.setState((s) => {
+          const newResults = { ...s.lastResults };
+          delete newResults[selectedNodeId];
+          const newFetched = new Set(s._fetchedNodes);
+          newFetched.delete(selectedNodeId);
+          return { lastResults: newResults, _fetchedNodes: newFetched };
+        });
       }
-      updateNodeData(selectedNodeId, { modelInputSchema: model.inputSchema, label: finalLabel })
-
-      useExecutionStore.getState().updateNodeStatus(selectedNodeId, 'idle')
-      useExecutionStore.setState(s => {
-        const newResults = { ...s.lastResults }
-        delete newResults[selectedNodeId]
-        const newFetched = new Set(s._fetchedNodes)
-        newFetched.delete(selectedNodeId)
-        return { lastResults: newResults, _fetchedNodes: newFetched }
-      })
-    }
 
-    onChange('modelId', model.modelId)
-    pushRecentModel(model)
-  }, [onChange, selectedNodeId, updateNodeData, edges, currentModelId, removeEdgesByIds])
+      onChange("modelId", model.modelId);
+      pushRecentModel(model);
+    },
+    [
+      onChange,
+      selectedNodeId,
+      updateNodeData,
+      edges,
+      currentModelId,
+      removeEdgesByIds,
+    ],
+  );
 
-  const handleModelChange = useCallback((modelId: string) => {
-    const storeModel = getModelById(modelId)
-    if (!storeModel) return
-    const model = convertDesktopModel(storeModel)
-    applyModelSelection(model)
-  }, [getModelById, applyModelSelection])
+  const handleModelChange = useCallback(
+    (modelId: string) => {
+      const storeModel = getModelById(modelId);
+      if (!storeModel) return;
+      const model = convertDesktopModel(storeModel);
+      applyModelSelection(model);
+    },
+    [getModelById, applyModelSelection],
+  );
 
   if (isLoading && models.length === 0) {
     return (
       <div className="overflow-hidden min-w-0">
         <div className="flex flex-col items-center justify-center py-8 gap-3">
           <div className="w-8 h-8 rounded-full border-2 border-blue-400 border-t-transparent animate-spin" />
-          <div className="text-xs text-muted-foreground">{t('workflow.modelSelector.loadingModels', 'Loading models...')}</div>
-          <div className="text-[10px] text-muted-foreground/60">{t('workflow.modelSelector.loadingHint', 'This may take a few seconds on first launch')}</div>
+          <div className="text-xs text-muted-foreground">
+            {t("workflow.modelSelector.loadingModels", "Loading models...")}
+          </div>
+          <div className="text-[10px] text-muted-foreground/60">
+            {t(
+              "workflow.modelSelector.loadingHint",
+              "This may take a few seconds on first launch",
+            )}
+          </div>
         </div>
       </div>
-    )
+    );
   }
 
   return (
-    <div className={`overflow-hidden min-w-0 w-full flex flex-col ${embedded ? 'flex-1 min-h-0' : 'flex-1'}`}>
-      {error && <div className="text-destructive text-xs p-2 mb-3 rounded border border-destructive bg-destructive/10">{error}</div>}
+    <div
+      className={`overflow-hidden min-w-0 w-full flex flex-col ${embedded ? "flex-1 min-h-0" : "flex-1"}`}
+    >
+      {error && (
+        <div className="text-destructive text-xs p-2 mb-3 rounded border border-destructive bg-destructive/10">
+          {error}
+        </div>
+      )}
       <div className="flex items-center gap-1.5 mb-2">
         <div className="flex-1 min-w-0">
           <ModelSelector
@@ -207,49 +319,107 @@ function AITaskModelSelector({ params, onChange, embedded }: { params: Record<st
           onClick={handleRefreshModels}
           disabled={isLoading || refreshingCatalog}
           className="h-8 w-8 flex-shrink-0 flex items-center justify-center rounded-md border border-[hsl(var(--border))] text-muted-foreground hover:text-foreground hover:bg-accent transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          title={refreshingCatalog ? t('workflow.modelSelector.refreshing', 'Refreshing...') : t('workflow.refreshModels', 'Refresh Models')}
+          title={
+            refreshingCatalog
+              ? t("workflow.modelSelector.refreshing", "Refreshing...")
+              : t("workflow.refreshModels", "Refresh Models")
+          }
         >
-          <svg className={refreshingCatalog ? 'animate-spin' : ''} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21.5 2v6h-6"/><path d="M2.5 22v-6h-6"/><path d="M2 11.5a10 10 0 0 1 18.8-4.3"/><path d="M22 12.5a10 10 0 0 1-18.8 4.2"/>
+          <svg
+            className={refreshingCatalog ? "animate-spin" : ""}
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M21.5 2v6h-6" />
+            <path d="M2.5 22v-6h-6" />
+            <path d="M2 11.5a10 10 0 0 1 18.8-4.3" />
+            <path d="M22 12.5a10 10 0 0 1-18.8 4.2" />
           </svg>
         </button>
       </div>
     </div>
-  )
+  );
 }
 
 /* ── Static Param Form (non-AI nodes) ───────────────────────────────── */
 
-function StaticParamForm({ nodeType, paramDefs, params, onChange }: { nodeType: string; paramDefs: ParamDefinition[]; params: Record<string, unknown>; onChange: (key: string, value: unknown) => void }) {
-  const { t } = useTranslation()
-  const cls = 'w-full rounded border border-input bg-background px-2 py-1.5 text-xs'
+function StaticParamForm({
+  nodeType,
+  paramDefs,
+  params,
+  onChange,
+}: {
+  nodeType: string;
+  paramDefs: ParamDefinition[];
+  params: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+}) {
+  const { t } = useTranslation();
+  const cls =
+    "w-full rounded border border-input bg-background px-2 py-1.5 text-xs";
   return (
     <>
-      {paramDefs.map(def => (
+      {paramDefs.map((def) => (
         <div key={def.key} className="mb-2.5">
           <label className="block text-xs text-muted-foreground mb-1">
-            {t(`workflow.nodeDefs.${nodeType}.params.${def.key}.label`, def.label)}
+            {t(
+              `workflow.nodeDefs.${nodeType}.params.${def.key}.label`,
+              def.label,
+            )}
           </label>
-          {def.type === 'select' ? (
-            <select value={String(params[def.key] ?? def.default ?? '')} onChange={e => onChange(def.key, e.target.value)} className={cls}>
-              {def.options?.map(opt => (
+          {def.type === "select" ? (
+            <select
+              value={String(params[def.key] ?? def.default ?? "")}
+              onChange={(e) => onChange(def.key, e.target.value)}
+              className={cls}
+            >
+              {def.options?.map((opt) => (
                 <option key={opt.value} value={opt.value}>
-                  {t(`workflow.nodeDefs.${nodeType}.params.${def.key}.options.${opt.value}`, opt.label)}
+                  {t(
+                    `workflow.nodeDefs.${nodeType}.params.${def.key}.options.${opt.value}`,
+                    opt.label,
+                  )}
                 </option>
               ))}
             </select>
-          ) : def.type === 'boolean' ? (
-            <input type="checkbox" checked={Boolean(params[def.key] ?? def.default)} onChange={e => onChange(def.key, e.target.checked)} />
-          ) : def.type === 'number' || def.type === 'slider' ? (
-            <input type="number" value={Number(params[def.key] ?? def.default ?? 0)} min={def.validation?.min} max={def.validation?.max}
-              step={def.validation?.step} onChange={e => onChange(def.key, Number(e.target.value))} className={cls} />
-          ) : def.type === 'textarea' ? (
-            <textarea value={String(params[def.key] ?? def.default ?? '')} onChange={e => onChange(def.key, e.target.value)} className={`${cls} min-h-[60px] resize-y`} />
+          ) : def.type === "boolean" ? (
+            <input
+              type="checkbox"
+              checked={Boolean(params[def.key] ?? def.default)}
+              onChange={(e) => onChange(def.key, e.target.checked)}
+            />
+          ) : def.type === "number" || def.type === "slider" ? (
+            <input
+              type="number"
+              value={Number(params[def.key] ?? def.default ?? 0)}
+              min={def.validation?.min}
+              max={def.validation?.max}
+              step={def.validation?.step}
+              onChange={(e) => onChange(def.key, Number(e.target.value))}
+              className={cls}
+            />
+          ) : def.type === "textarea" ? (
+            <textarea
+              value={String(params[def.key] ?? def.default ?? "")}
+              onChange={(e) => onChange(def.key, e.target.value)}
+              className={`${cls} min-h-[60px] resize-y`}
+            />
           ) : (
-            <input type="text" value={String(params[def.key] ?? def.default ?? '')} onChange={e => onChange(def.key, e.target.value)} className={cls} />
+            <input
+              type="text"
+              value={String(params[def.key] ?? def.default ?? "")}
+              onChange={(e) => onChange(def.key, e.target.value)}
+              className={cls}
+            />
           )}
         </div>
       ))}
     </>
-  )
+  );
 }
diff --git a/src/workflow/components/panels/ResultsPanel.tsx b/src/workflow/components/panels/ResultsPanel.tsx
index a6f6e381..4bd15dd8 100644
--- a/src/workflow/components/panels/ResultsPanel.tsx
+++ b/src/workflow/components/panels/ResultsPanel.tsx
@@ -7,193 +7,242 @@
  * view with left/right navigation. Clicking the preview opens the full
  * gallery overlay with arrow key support.
  */
-import { useEffect, useState, useCallback, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { useUIStore } from '../../stores/ui.store'
-import { useExecutionStore } from '../../stores/execution.store'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import { historyIpc } from '../../ipc/ipc-client'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { getOutputItemType, decodeDataText, isImageUrl } from '../../lib/outputDisplay'
-import type { NodeExecutionRecord } from '@/workflow/types/execution'
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useUIStore } from "../../stores/ui.store";
+import { useExecutionStore } from "../../stores/execution.store";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import { historyIpc } from "../../ipc/ipc-client";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  getOutputItemType,
+  decodeDataText,
+  isImageUrl,
+} from "../../lib/outputDisplay";
+import type { NodeExecutionRecord } from "@/workflow/types/execution";
 
 interface ResultsPanelProps {
   /** When true, compact layout for embedding inside node card */
-  embeddedInNode?: boolean
+  embeddedInNode?: boolean;
   /** When set (e.g. when embedded in a node card), show this node's results regardless of selection */
-  nodeId?: string
+  nodeId?: string;
 }
 
-export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPanelProps = {}) {
-  const { t } = useTranslation()
-  const selectedNodeId = useUIStore(s => s.selectedNodeId)
-  const nodeId = nodeIdProp ?? selectedNodeId
-  const openPreview = useUIStore(s => s.openPreview)
-  const nodeStatuses = useExecutionStore(s => s.nodeStatuses)
-  const clearNodeResults = useExecutionStore(s => s.clearNodeResults)
-  const lastResults = useExecutionStore(s => s.lastResults)
-  const [records, setRecords] = useState<NodeExecutionRecord[]>([])
-  const [prevStatus, setPrevStatus] = useState<string>('idle')
+export function ResultsPanel({
+  embeddedInNode,
+  nodeId: nodeIdProp,
+}: ResultsPanelProps = {}) {
+  const { t } = useTranslation();
+  const selectedNodeId = useUIStore((s) => s.selectedNodeId);
+  const nodeId = nodeIdProp ?? selectedNodeId;
+  const openPreview = useUIStore((s) => s.openPreview);
+  const nodeStatuses = useExecutionStore((s) => s.nodeStatuses);
+  const clearNodeResults = useExecutionStore((s) => s.clearNodeResults);
+  const lastResults = useExecutionStore((s) => s.lastResults);
+  const [records, setRecords] = useState<NodeExecutionRecord[]>([]);
+  const [prevStatus, setPrevStatus] = useState<string>("idle");
   /** Index of the currently visible card in stacked (embedded) mode */
-  const [stackIndex, setStackIndex] = useState(0)
+  const [stackIndex, setStackIndex] = useState(0);
   /** Track slide direction for animation */
-  const prevIndexRef = useRef(0)
-  const slideDirection = stackIndex > prevIndexRef.current ? 'left' : stackIndex < prevIndexRef.current ? 'right' : 'none'
-  useEffect(() => { prevIndexRef.current = stackIndex }, [stackIndex])
+  const prevIndexRef = useRef(0);
+  const slideDirection =
+    stackIndex > prevIndexRef.current
+      ? "left"
+      : stackIndex < prevIndexRef.current
+        ? "right"
+        : "none";
+  useEffect(() => {
+    prevIndexRef.current = stackIndex;
+  }, [stackIndex]);
 
   const loadRecords = useCallback(async () => {
-    if (!nodeId) { setRecords([]); return }
+    if (!nodeId) {
+      setRecords([]);
+      return;
+    }
     try {
-      const r = await historyIpc.list(nodeId)
-      setRecords(r || [])
-    } catch { setRecords([]) }
-  }, [nodeId])
+      const r = await historyIpc.list(nodeId);
+      setRecords(r || []);
+    } catch {
+      setRecords([]);
+    }
+  }, [nodeId]);
 
-  useEffect(() => { loadRecords() }, [loadRecords])
+  useEffect(() => {
+    loadRecords();
+  }, [loadRecords]);
 
   // Auto-refresh when execution completes
   useEffect(() => {
-    if (!nodeId) return
-    const currentStatus = nodeStatuses[nodeId] || 'idle'
-    if (prevStatus === 'running' && currentStatus !== 'running') setTimeout(loadRecords, 1500)
-    setPrevStatus(currentStatus)
-  }, [nodeId, nodeStatuses, loadRecords, prevStatus])
+    if (!nodeId) return;
+    const currentStatus = nodeStatuses[nodeId] || "idle";
+    if (prevStatus === "running" && currentStatus !== "running")
+      setTimeout(loadRecords, 1500);
+    setPrevStatus(currentStatus);
+  }, [nodeId, nodeStatuses, loadRecords, prevStatus]);
 
   /** Delete a single execution record + files, refresh list */
-  const handleDeleteOne = useCallback(async (executionId: string) => {
-    try {
-      await historyIpc.delete(executionId)
-      setRecords(prev => prev.filter(r => r.id !== executionId))
-      if (nodeId) clearNodeResults(nodeId)
-    } catch (err) {
-      console.error('Failed to delete execution:', err)
-    }
-  }, [nodeId, clearNodeResults])
+  const handleDeleteOne = useCallback(
+    async (executionId: string) => {
+      try {
+        await historyIpc.delete(executionId);
+        setRecords((prev) => prev.filter((r) => r.id !== executionId));
+        if (nodeId) clearNodeResults(nodeId);
+      } catch (err) {
+        console.error("Failed to delete execution:", err);
+      }
+    },
+    [nodeId, clearNodeResults],
+  );
 
   /** Delete ALL execution records + files for this node */
   const handleDeleteAll = useCallback(async () => {
-    if (!nodeId) return
+    if (!nodeId) return;
     try {
-      await historyIpc.deleteAll(nodeId)
-      setRecords([])
-      clearNodeResults(nodeId)
-      const node = useWorkflowStore.getState().nodes.find(n => n.id === nodeId)
+      await historyIpc.deleteAll(nodeId);
+      setRecords([]);
+      clearNodeResults(nodeId);
+      const node = useWorkflowStore
+        .getState()
+        .nodes.find((n) => n.id === nodeId);
       if (node) {
-        const { __hiddenRuns: _, __showLatestOnly: _2, ...rest } = node.data.params as Record<string, unknown>
-        useWorkflowStore.getState().updateNodeParams(nodeId, rest)
+        const {
+          __hiddenRuns: _,
+          __showLatestOnly: _2,
+          ...rest
+        } = node.data.params as Record<string, unknown>;
+        useWorkflowStore.getState().updateNodeParams(nodeId, rest);
       }
     } catch (err) {
-      console.error('Failed to delete all executions:', err)
+      console.error("Failed to delete all executions:", err);
     }
-  }, [nodeId, clearNodeResults])
+  }, [nodeId, clearNodeResults]);
 
   if (!nodeId) {
-    return <div className="p-4 text-muted-foreground text-sm text-center">Select a node to view results</div>
+    return (
+      <div className="p-4 text-muted-foreground text-sm text-center">
+        Select a node to view results
+      </div>
+    );
   }
 
-  const currentNodeStatus = nodeStatuses[nodeId]
+  const currentNodeStatus = nodeStatuses[nodeId];
 
   // When history is empty (e.g. just finished), show lastResults as synthetic records so preview is visible
-  const lastResultsForNode = lastResults[nodeId] ?? []
+  const lastResultsForNode = lastResults[nodeId] ?? [];
   const displayRecords: NodeExecutionRecord[] =
     records.length > 0
       ? records
       : lastResultsForNode.map((item, idx) => ({
           id: `last-${idx}`,
           nodeId,
-          workflowId: '',
-          inputHash: '',
-          paramsHash: '',
-          status: 'success' as const,
-          resultPath: item.urls[0] ?? '',
+          workflowId: "",
+          inputHash: "",
+          paramsHash: "",
+          status: "success" as const,
+          resultPath: item.urls[0] ?? "",
           resultMetadata: { resultUrls: item.urls },
           durationMs: item.durationMs ?? null,
           cost: item.cost ?? 0,
           createdAt: item.time,
           score: null,
-          starred: false
-        }))
-  const isSyntheticRecord = (id: string) => id.startsWith('last-')
+          starred: false,
+        }));
+  const isSyntheticRecord = (id: string) => id.startsWith("last-");
 
   // Extract all output URLs from a record
   const getUrls = (rec: NodeExecutionRecord): string[] => {
-    const meta = rec.resultMetadata as Record<string, unknown> | null
-    const metaUrls = meta?.resultUrls as string[] | undefined
+    const meta = rec.resultMetadata as Record<string, unknown> | null;
+    const metaUrls = meta?.resultUrls as string[] | undefined;
     if (metaUrls && Array.isArray(metaUrls) && metaUrls.length > 0) {
-      return metaUrls.filter(u => u && typeof u === 'string')
+      return metaUrls.filter((u) => u && typeof u === "string");
     }
-    return rec.resultPath ? [rec.resultPath] : []
-  }
+    return rec.resultPath ? [rec.resultPath] : [];
+  };
 
   const panelImageUrls = displayRecords
-    .filter(rec => rec.status === 'success')
-    .flatMap(rec => getUrls(rec))
-    .filter(isImageUrl)
+    .filter((rec) => rec.status === "success")
+    .flatMap((rec) => getUrls(rec))
+    .filter(isImageUrl);
 
   const handleDownload = async (url: string) => {
     // Determine correct filename with extension for any URL type
     const guessExt = (u: string): string => {
       // Try to extract extension from URL path
-      const pathPart = u.split('?')[0].split('#')[0]
-      const lastSegment = pathPart.split('/').pop() || ''
-      const dotIdx = lastSegment.lastIndexOf('.')
-      if (dotIdx > 0) return lastSegment.substring(dotIdx + 1).toLowerCase()
-      return ''
-    }
+      const pathPart = u.split("?")[0].split("#")[0];
+      const lastSegment = pathPart.split("/").pop() || "";
+      const dotIdx = lastSegment.lastIndexOf(".");
+      if (dotIdx > 0) return lastSegment.substring(dotIdx + 1).toLowerCase();
+      return "";
+    };
 
-    let filename: string
-    const existingExt = guessExt(url)
+    let filename: string;
+    const existingExt = guessExt(url);
 
-    if (url.startsWith('blob:') || !existingExt) {
+    if (url.startsWith("blob:") || !existingExt) {
       // Fetch the resource to determine MIME type
       const mimeExt: Record<string, string> = {
-        'video/mp4': 'mp4', 'video/webm': 'webm', 'video/quicktime': 'mov',
-        'video/x-msvideo': 'avi', 'video/x-matroska': 'mkv',
-        'audio/mpeg': 'mp3', 'audio/wav': 'wav', 'audio/ogg': 'ogg',
-        'audio/flac': 'flac', 'audio/aac': 'aac', 'audio/mp4': 'm4a',
-        'image/png': 'png', 'image/jpeg': 'jpg', 'image/webp': 'webp',
-        'image/gif': 'gif', 'application/octet-stream': 'bin',
-      }
+        "video/mp4": "mp4",
+        "video/webm": "webm",
+        "video/quicktime": "mov",
+        "video/x-msvideo": "avi",
+        "video/x-matroska": "mkv",
+        "audio/mpeg": "mp3",
+        "audio/wav": "wav",
+        "audio/ogg": "ogg",
+        "audio/flac": "flac",
+        "audio/aac": "aac",
+        "audio/mp4": "m4a",
+        "image/png": "png",
+        "image/jpeg": "jpg",
+        "image/webp": "webp",
+        "image/gif": "gif",
+        "application/octet-stream": "bin",
+      };
       try {
-        const resp = await fetch(url, { method: 'HEAD' })
-        const contentType = resp.headers.get('content-type')?.split(';')[0]?.trim() || ''
-        const ext = mimeExt[contentType] || 'mp4'
-        filename = `result-${Date.now()}.${ext}`
+        const resp = await fetch(url, { method: "HEAD" });
+        const contentType =
+          resp.headers.get("content-type")?.split(";")[0]?.trim() || "";
+        const ext = mimeExt[contentType] || "mp4";
+        filename = `result-${Date.now()}.${ext}`;
       } catch {
-        filename = `result-${Date.now()}.mp4`
+        filename = `result-${Date.now()}.mp4`;
       }
     } else {
-      filename = url.split('/').pop()?.split('?')[0] || `result.${existingExt}`
+      filename = url.split("/").pop()?.split("?")[0] || `result.${existingExt}`;
     }
 
     // Browser download: fetch blob and create object URL for reliable download
     try {
-      const resp = await fetch(url)
-      const blob = await resp.blob()
-      const blobUrl = URL.createObjectURL(blob)
-      const a = document.createElement('a')
-      a.href = blobUrl
-      a.download = filename
-      document.body.appendChild(a)
-      a.click()
-      document.body.removeChild(a)
+      const resp = await fetch(url);
+      const blob = await resp.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = blobUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
       // Revoke after a short delay to ensure download starts
-      setTimeout(() => URL.revokeObjectURL(blobUrl), 1000)
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
     } catch {
       // Fallback: direct link
-      const a = document.createElement('a')
-      a.href = url
-      a.download = filename
-      a.click()
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      a.click();
     }
-  }
+  };
 
   // Clamp stackIndex when displayRecords changes
-  const clampedIndex = Math.min(stackIndex, Math.max(0, displayRecords.length - 1))
+  const clampedIndex = Math.min(
+    stackIndex,
+    Math.max(0, displayRecords.length - 1),
+  );
   useEffect(() => {
-    if (clampedIndex !== stackIndex) setStackIndex(clampedIndex)
-  }, [clampedIndex, stackIndex])
+    if (clampedIndex !== stackIndex) setStackIndex(clampedIndex);
+  }, [clampedIndex, stackIndex]);
 
   /* ── Stacked card view for embedded-in-node mode ─────────────── */
   if (embeddedInNode) {
@@ -201,27 +250,40 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
       return (
         <div className="flex flex-col min-h-0 flex-1">
           <div className="flex justify-between items-center px-2 pt-1.5 pb-1">
-            <h3 className="font-semibold text-xs">{t('workflow.results', 'Results')} (0)</h3>
+            <h3 className="font-semibold text-xs">
+              {t("workflow.results", "Results")} (0)
+            </h3>
           </div>
-          <p className="text-muted-foreground text-xs py-4 text-center">{t('workflow.noExecutions', 'No executions yet')}</p>
+          <p className="text-muted-foreground text-xs py-4 text-center">
+            {t("workflow.noExecutions", "No executions yet")}
+          </p>
         </div>
-      )
+      );
     }
 
-    const total = displayRecords.length
-    const currentRec = displayRecords[clampedIndex]
-    const currentUrls = currentRec.status === 'success' ? getUrls(currentRec) : []
-    const currentError = currentRec.status === 'error' && currentRec.resultMetadata?.error ? String(currentRec.resultMetadata.error) : null
+    const total = displayRecords.length;
+    const currentRec = displayRecords[clampedIndex];
+    const currentUrls =
+      currentRec.status === "success" ? getUrls(currentRec) : [];
+    const currentError =
+      currentRec.status === "error" && currentRec.resultMetadata?.error
+        ? String(currentRec.resultMetadata.error)
+        : null;
 
     return (
       <div className="flex flex-col min-h-0 flex-1">
         {/* Header — only clear-all button */}
         <div className="flex justify-end items-center px-2 pt-1.5 pb-1">
           {records.length > 0 && (
-            <button onClick={handleDeleteAll}
+            <button
+              onClick={handleDeleteAll}
               className="text-[10px] text-red-400/70 hover:text-red-400 transition-colors"
-              title={t('workflow.clearAllResults', 'Clear all results and delete files')}>
-              {t('workflow.clearAll', 'Clear all')}
+              title={t(
+                "workflow.clearAllResults",
+                "Clear all results and delete files",
+              )}
+            >
+              {t("workflow.clearAll", "Clear all")}
             </button>
           )}
         </div>
@@ -229,71 +291,62 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
         {/* Result area */}
         <div className="px-2 pb-1">
           {/* Status bar */}
-          <div className={`flex items-center gap-2 px-2.5 py-1.5 rounded-t-lg
-            ${currentRec.status === 'success' ? 'bg-green-500/5' : currentRec.status === 'error' ? 'bg-red-500/5' : 'bg-[hsl(var(--muted))]'}`}>
-            <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0
-              ${currentRec.status === 'success' ? 'bg-green-500' : currentRec.status === 'error' ? 'bg-red-500' : 'bg-muted-foreground'}`} />
+          <div
+            className={`flex items-center gap-2 px-2.5 py-1.5 rounded-t-lg
+            ${currentRec.status === "success" ? "bg-green-500/5" : currentRec.status === "error" ? "bg-red-500/5" : "bg-[hsl(var(--muted))]"}`}
+          >
+            <span
+              className={`w-1.5 h-1.5 rounded-full flex-shrink-0
+              ${currentRec.status === "success" ? "bg-green-500" : currentRec.status === "error" ? "bg-red-500" : "bg-muted-foreground"}`}
+            />
             <span className="text-[10px] text-muted-foreground flex-1 truncate leading-none">
-              {new Date(currentRec.createdAt).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+              {new Date(currentRec.createdAt).toLocaleString(undefined, {
+                month: "short",
+                day: "numeric",
+                hour: "2-digit",
+                minute: "2-digit",
+              })}
+            </span>
+            {currentRec.durationMs != null && (
+              <span className="text-[9px] text-muted-foreground leading-none">
+                ⏱{(currentRec.durationMs / 1000).toFixed(1)}s
+              </span>
+            )}
+            <span className="text-[9px] text-muted-foreground leading-none">
+              💰${currentRec.cost.toFixed(4)}
             </span>
-            {currentRec.durationMs != null && <span className="text-[9px] text-muted-foreground leading-none">⏱{(currentRec.durationMs / 1000).toFixed(1)}s</span>}
-            <span className="text-[9px] text-muted-foreground leading-none">💰${currentRec.cost.toFixed(4)}</span>
             {currentNodeStatus && (
-              <span className={`text-[9px] px-1.5 py-0.5 rounded leading-none
-                ${currentNodeStatus === 'running' ? 'bg-blue-500/20 text-blue-400' :
-                  currentNodeStatus === 'confirmed' ? 'bg-green-500/20 text-green-400' :
-                  currentNodeStatus === 'error' ? 'bg-red-500/20 text-red-400' :
-                  'bg-muted text-muted-foreground'}`}>
-                {currentNodeStatus === 'running' ? 'Running...' :
-                 currentNodeStatus === 'confirmed' ? 'Done' :
-                 currentNodeStatus === 'error' ? 'Error' : 'Idle'}
+              <span
+                className={`text-[9px] px-1.5 py-0.5 rounded leading-none
+                ${
+                  currentNodeStatus === "running"
+                    ? "bg-blue-500/20 text-blue-400"
+                    : currentNodeStatus === "confirmed"
+                      ? "bg-green-500/20 text-green-400"
+                      : currentNodeStatus === "error"
+                        ? "bg-red-500/20 text-red-400"
+                        : "bg-muted text-muted-foreground"
+                }`}
+              >
+                {currentNodeStatus === "running"
+                  ? "Running..."
+                  : currentNodeStatus === "confirmed"
+                    ? "Done"
+                    : currentNodeStatus === "error"
+                      ? "Error"
+                      : "Idle"}
               </span>
             )}
           </div>
 
           {/* Result content — carousel with adjacent peeks for media, full-width for text */}
-          {currentUrls.length > 0 && (() => {
-            const isTextResult = currentUrls.every(u => getOutputItemType(u) === 'text')
-            return isTextResult ? (
-              <div className="px-1 py-1.5">
-                {currentUrls.map((url, ui) => (
-                  <StackedResultItem
-                    key={ui}
-                    url={url}
-                    allImageUrls={panelImageUrls}
-                    openPreview={openPreview}
-                    onDownload={handleDownload}
-                  />
-                ))}
-              </div>
-            ) : (
-            <div className="relative overflow-hidden rounded-b-lg flex justify-center py-1.5">
-              <div className="relative w-fit">
-                {/* Previous result peek — anchored to left edge of center image */}
-                {total > 1 && clampedIndex > 0 && (() => {
-                  const prevRec = displayRecords[clampedIndex - 1]
-                  const prevUrls = prevRec.status === 'success' ? getUrls(prevRec) : []
-                  const prevImg = prevUrls.find(u => isImageUrl(u))
-                  return prevImg ? (
-                    <div
-                      className="absolute left-0 top-[15%] bottom-[15%] w-[26px] -translate-x-full cursor-pointer overflow-hidden rounded-l opacity-50 hover:opacity-80 transition-opacity z-0"
-                      onClick={() => setStackIndex(i => Math.max(0, i - 1))}
-                    >
-                      <img src={prevImg} alt="" className="w-full h-full object-cover" />
-                    </div>
-                  ) : null
-                })()}
-
-                {/* Center image(s) — animated slide */}
-                <div
-                  key={clampedIndex}
-                  className="relative z-10 flex gap-2 flex-wrap justify-center"
-                  style={{
-                    animation: slideDirection !== 'none'
-                      ? `carousel-slide-${slideDirection} 0.25s ease-out`
-                      : undefined,
-                  }}
-                >
+          {currentUrls.length > 0 &&
+            (() => {
+              const isTextResult = currentUrls.every(
+                (u) => getOutputItemType(u) === "text",
+              );
+              return isTextResult ? (
+                <div className="px-1 py-1.5">
                   {currentUrls.map((url, ui) => (
                     <StackedResultItem
                       key={ui}
@@ -304,25 +357,82 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
                     />
                   ))}
                 </div>
+              ) : (
+                <div className="relative overflow-hidden rounded-b-lg flex justify-center py-1.5">
+                  <div className="relative w-fit">
+                    {/* Previous result peek — anchored to left edge of center image */}
+                    {total > 1 &&
+                      clampedIndex > 0 &&
+                      (() => {
+                        const prevRec = displayRecords[clampedIndex - 1];
+                        const prevUrls =
+                          prevRec.status === "success" ? getUrls(prevRec) : [];
+                        const prevImg = prevUrls.find((u) => isImageUrl(u));
+                        return prevImg ? (
+                          <div
+                            className="absolute left-0 top-[15%] bottom-[15%] w-[26px] -translate-x-full cursor-pointer overflow-hidden rounded-l opacity-50 hover:opacity-80 transition-opacity z-0"
+                            onClick={() =>
+                              setStackIndex((i) => Math.max(0, i - 1))
+                            }
+                          >
+                            <img
+                              src={prevImg}
+                              alt=""
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                        ) : null;
+                      })()}
 
-                {/* Next result peek — anchored to right edge of center image */}
-                {total > 1 && clampedIndex < total - 1 && (() => {
-                  const nextRec = displayRecords[clampedIndex + 1]
-                  const nextUrls = nextRec.status === 'success' ? getUrls(nextRec) : []
-                  const nextImg = nextUrls.find(u => isImageUrl(u))
-                  return nextImg ? (
+                    {/* Center image(s) — animated slide */}
                     <div
-                      className="absolute right-0 top-[15%] bottom-[15%] w-[26px] translate-x-full cursor-pointer overflow-hidden rounded-r opacity-50 hover:opacity-80 transition-opacity z-0"
-                      onClick={() => setStackIndex(i => Math.min(total - 1, i + 1))}
+                      key={clampedIndex}
+                      className="relative z-10 flex gap-2 flex-wrap justify-center"
+                      style={{
+                        animation:
+                          slideDirection !== "none"
+                            ? `carousel-slide-${slideDirection} 0.25s ease-out`
+                            : undefined,
+                      }}
                     >
-                      <img src={nextImg} alt="" className="w-full h-full object-cover" />
+                      {currentUrls.map((url, ui) => (
+                        <StackedResultItem
+                          key={ui}
+                          url={url}
+                          allImageUrls={panelImageUrls}
+                          openPreview={openPreview}
+                          onDownload={handleDownload}
+                        />
+                      ))}
                     </div>
-                  ) : null
-                })()}
-              </div>
-            </div>
-            )
-          })()}
+
+                    {/* Next result peek — anchored to right edge of center image */}
+                    {total > 1 &&
+                      clampedIndex < total - 1 &&
+                      (() => {
+                        const nextRec = displayRecords[clampedIndex + 1];
+                        const nextUrls =
+                          nextRec.status === "success" ? getUrls(nextRec) : [];
+                        const nextImg = nextUrls.find((u) => isImageUrl(u));
+                        return nextImg ? (
+                          <div
+                            className="absolute right-0 top-[15%] bottom-[15%] w-[26px] translate-x-full cursor-pointer overflow-hidden rounded-r opacity-50 hover:opacity-80 transition-opacity z-0"
+                            onClick={() =>
+                              setStackIndex((i) => Math.min(total - 1, i + 1))
+                            }
+                          >
+                            <img
+                              src={nextImg}
+                              alt=""
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                        ) : null;
+                      })()}
+                  </div>
+                </div>
+              );
+            })()}
 
           {/* Error */}
           {currentError && (
@@ -337,7 +447,7 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
           {total > 1 && (
             <div className="flex items-center justify-center gap-2 mt-1">
               <button
-                onClick={() => setStackIndex(i => Math.max(0, i - 1))}
+                onClick={() => setStackIndex((i) => Math.max(0, i - 1))}
                 disabled={clampedIndex === 0}
                 className="p-0.5 rounded hover:bg-accent disabled:opacity-30 disabled:cursor-default transition-colors"
               >
@@ -347,7 +457,7 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
                 {clampedIndex + 1} / {total}
               </span>
               <button
-                onClick={() => setStackIndex(i => Math.min(total - 1, i + 1))}
+                onClick={() => setStackIndex((i) => Math.min(total - 1, i + 1))}
                 disabled={clampedIndex === total - 1}
                 className="p-0.5 rounded hover:bg-accent disabled:opacity-30 disabled:cursor-default transition-colors"
               >
@@ -357,7 +467,7 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
           )}
         </div>
       </div>
-    )
+    );
   }
 
   /* ── Full list view (side panel / standalone) ────────────────── */
@@ -365,24 +475,42 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
     <div className="flex flex-col h-full">
       {/* Header */}
       <div className="flex justify-between items-center flex-shrink-0 px-3 pt-3 pb-2">
-        <h3 className="font-semibold text-sm">{t('workflow.results', 'Results')} ({displayRecords.length})</h3>
+        <h3 className="font-semibold text-sm">
+          {t("workflow.results", "Results")} ({displayRecords.length})
+        </h3>
         <div className="flex items-center gap-2">
           {records.length > 0 && (
-            <button onClick={handleDeleteAll}
+            <button
+              onClick={handleDeleteAll}
               className="text-[10px] text-red-400/70 hover:text-red-400 transition-colors"
-              title={t('workflow.clearAllResults', 'Clear all results and delete files')}>
-              {t('workflow.clearAll', 'Clear all')}
+              title={t(
+                "workflow.clearAllResults",
+                "Clear all results and delete files",
+              )}
+            >
+              {t("workflow.clearAll", "Clear all")}
             </button>
           )}
           {currentNodeStatus && (
-            <span className={`text-[10px] px-1.5 py-0.5 rounded
-              ${currentNodeStatus === 'running' ? 'bg-blue-500/20 text-blue-400' :
-                currentNodeStatus === 'confirmed' ? 'bg-green-500/20 text-green-400' :
-                currentNodeStatus === 'error' ? 'bg-red-500/20 text-red-400' :
-                'bg-muted text-muted-foreground'}`}>
-              {currentNodeStatus === 'running' ? 'Running...' :
-               currentNodeStatus === 'confirmed' ? 'Done' :
-               currentNodeStatus === 'error' ? 'Error' : 'Idle'}
+            <span
+              className={`text-[10px] px-1.5 py-0.5 rounded
+              ${
+                currentNodeStatus === "running"
+                  ? "bg-blue-500/20 text-blue-400"
+                  : currentNodeStatus === "confirmed"
+                    ? "bg-green-500/20 text-green-400"
+                    : currentNodeStatus === "error"
+                      ? "bg-red-500/20 text-red-400"
+                      : "bg-muted text-muted-foreground"
+              }`}
+            >
+              {currentNodeStatus === "running"
+                ? "Running..."
+                : currentNodeStatus === "confirmed"
+                  ? "Done"
+                  : currentNodeStatus === "error"
+                    ? "Error"
+                    : "Idle"}
             </span>
           )}
         </div>
@@ -390,32 +518,59 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
 
       {/* Execution list */}
       <ScrollArea className="flex-1 min-h-0 px-3 pb-3">
-        {displayRecords.length === 0 && <p className="text-muted-foreground text-sm py-6 text-center">{t('workflow.noExecutions', 'No executions yet')}</p>}
+        {displayRecords.length === 0 && (
+          <p className="text-muted-foreground text-sm py-6 text-center">
+            {t("workflow.noExecutions", "No executions yet")}
+          </p>
+        )}
 
         <div className="space-y-2">
           {displayRecords.map((rec, idx) => {
-            const urls = rec.status === 'success' ? getUrls(rec) : []
-            const errorMessage = rec.status === 'error' && rec.resultMetadata?.error ? String(rec.resultMetadata.error) : null
-            const synthetic = isSyntheticRecord(rec.id)
+            const urls = rec.status === "success" ? getUrls(rec) : [];
+            const errorMessage =
+              rec.status === "error" && rec.resultMetadata?.error
+                ? String(rec.resultMetadata.error)
+                : null;
+            const synthetic = isSyntheticRecord(rec.id);
 
             return (
-              <div key={rec.id} className="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--background))] overflow-hidden">
+              <div
+                key={rec.id}
+                className="rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--background))] overflow-hidden"
+              >
                 {/* Header — status + timestamp + meta */}
-                <div className={`flex items-center gap-2 px-3 py-1.5
-                  ${rec.status === 'success' ? 'bg-green-500/5' : rec.status === 'error' ? 'bg-red-500/5' : 'bg-[hsl(var(--muted))]'}`}>
-                  <span className={`w-2 h-2 rounded-full flex-shrink-0
-                    ${rec.status === 'success' ? 'bg-green-500' : rec.status === 'error' ? 'bg-red-500' : 'bg-muted-foreground'}`} />
-                  <span className={`text-[11px] font-medium flex-1
-                    ${rec.status === 'success' ? 'text-green-400' : rec.status === 'error' ? 'text-red-400' : 'text-muted-foreground'}`}>
+                <div
+                  className={`flex items-center gap-2 px-3 py-1.5
+                  ${rec.status === "success" ? "bg-green-500/5" : rec.status === "error" ? "bg-red-500/5" : "bg-[hsl(var(--muted))]"}`}
+                >
+                  <span
+                    className={`w-2 h-2 rounded-full flex-shrink-0
+                    ${rec.status === "success" ? "bg-green-500" : rec.status === "error" ? "bg-red-500" : "bg-muted-foreground"}`}
+                  />
+                  <span
+                    className={`text-[11px] font-medium flex-1
+                    ${rec.status === "success" ? "text-green-400" : rec.status === "error" ? "text-red-400" : "text-muted-foreground"}`}
+                  >
                     #{displayRecords.length - idx} {rec.status}
                   </span>
                   <span className="text-[9px] text-muted-foreground">
-                    {new Date(rec.createdAt).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+                    {new Date(rec.createdAt).toLocaleString(undefined, {
+                      month: "short",
+                      day: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      second: "2-digit",
+                    })}
                   </span>
                   {!synthetic && (
-                    <button onClick={() => handleDeleteOne(rec.id)}
+                    <button
+                      onClick={() => handleDeleteOne(rec.id)}
                       className="text-[10px] text-muted-foreground hover:text-red-400 transition-colors ml-1"
-                      title={t('workflow.deleteResult', 'Delete this result and files')}>
+                      title={t(
+                        "workflow.deleteResult",
+                        "Delete this result and files",
+                      )}
+                    >
                       ✕
                     </button>
                   )}
@@ -423,89 +578,170 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
 
                 {/* Duration + cost */}
                 <div className="flex items-center gap-3 px-3 py-1 text-[10px] text-muted-foreground border-b border-[hsl(var(--border))]">
-                  {rec.durationMs != null && <span>⏱ {(rec.durationMs / 1000).toFixed(1)}s</span>}
+                  {rec.durationMs != null && (
+                    <span>⏱ {(rec.durationMs / 1000).toFixed(1)}s</span>
+                  )}
                   <span>💰 ${rec.cost.toFixed(4)}</span>
-                  {idx === 0 && <span className="text-green-400 ml-auto">{synthetic ? t('workflow.latestRun', 'Latest run') : 'Latest'}</span>}
+                  {idx === 0 && (
+                    <span className="text-green-400 ml-auto">
+                      {synthetic
+                        ? t("workflow.latestRun", "Latest run")
+                        : "Latest"}
+                    </span>
+                  )}
                 </div>
 
                 {/* Result outputs — image, video, audio, text, 3D, file */}
                 {urls.length > 0 && (
                   <div className="p-2 flex gap-2 flex-wrap">
                     {urls.map((url, ui) => {
-                      const type = getOutputItemType(url)
+                      const type = getOutputItemType(url);
 
-                      if (type === 'text') {
-                        const displayText = url.startsWith('data:text/') ? decodeDataText(url) : url
+                      if (type === "text") {
+                        const displayText = url.startsWith("data:text/")
+                          ? decodeDataText(url)
+                          : url;
                         return (
-                          <div key={ui} className="w-full min-w-0 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))]/50 p-2 max-h-[200px] overflow-y-auto">
-                            <pre className="text-[11px] text-foreground/90 whitespace-pre-wrap break-words font-sans">{displayText}</pre>
+                          <div
+                            key={ui}
+                            className="w-full min-w-0 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))]/50 p-2 max-h-[200px] overflow-y-auto"
+                          >
+                            <pre className="text-[11px] text-foreground/90 whitespace-pre-wrap break-words font-sans">
+                              {displayText}
+                            </pre>
                           </div>
-                        )
+                        );
                       }
 
-                      if (type === 'image') {
+                      if (type === "image") {
                         return (
-                          <div key={ui} className="relative group flex-1 min-w-[100px]">
-                            <img src={url} alt="" onClick={() => openPreview(url, panelImageUrls)}
-                              className="w-full max-h-[160px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 bg-black/10" />
-                            <button onClick={() => handleDownload(url)}
-                              className="absolute top-1 right-1 h-7 px-2 rounded-md bg-blue-600 text-white text-[10px] font-medium flex items-center gap-1 hover:bg-blue-700 shadow-md transition-colors">
-                              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/><line x1="4" y1="21" x2="20" y2="21"/>
+                          <div
+                            key={ui}
+                            className="relative group flex-1 min-w-[100px]"
+                          >
+                            <img
+                              src={url}
+                              alt=""
+                              onClick={() => openPreview(url, panelImageUrls)}
+                              className="w-full max-h-[160px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40 bg-black/10"
+                            />
+                            <button
+                              onClick={() => handleDownload(url)}
+                              className="absolute top-1 right-1 h-7 px-2 rounded-md bg-blue-600 text-white text-[10px] font-medium flex items-center gap-1 hover:bg-blue-700 shadow-md transition-colors"
+                            >
+                              <svg
+                                width="12"
+                                height="12"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2.5"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              >
+                                <polyline points="7 10 12 15 17 10" />
+                                <line x1="12" y1="15" x2="12" y2="3" />
+                                <line x1="4" y1="21" x2="20" y2="21" />
                               </svg>
-                              {t('workflow.download', 'Download')}
+                              {t("workflow.download", "Download")}
                             </button>
                           </div>
-                        )
+                        );
                       }
 
-                      if (type === '3d') {
+                      if (type === "3d") {
                         return (
-                          <div key={ui} className="flex-1 min-w-[100px] cursor-pointer rounded border border-[hsl(var(--border))] bg-gradient-to-br from-[#1a1a2e] to-[#0f3460] p-3 flex flex-col items-center justify-center text-center hover:ring-2 hover:ring-blue-500/40 transition-all"
+                          <div
+                            key={ui}
+                            className="flex-1 min-w-[100px] cursor-pointer rounded border border-[hsl(var(--border))] bg-gradient-to-br from-[#1a1a2e] to-[#0f3460] p-3 flex flex-col items-center justify-center text-center hover:ring-2 hover:ring-blue-500/40 transition-all"
                             style={{ minHeight: 100 }}
-                            onClick={() => openPreview(url)}>
+                            onClick={() => openPreview(url)}
+                          >
                             <div className="text-xl mb-1">🧊</div>
-                            <div className="text-[10px] text-blue-300 font-medium">3D Model</div>
-                            <div className="text-[8px] text-white/30 truncate max-w-full mt-0.5">{url.startsWith('data:') ? 'Data' : url.split('/').pop()?.split('?')[0]}</div>
+                            <div className="text-[10px] text-blue-300 font-medium">
+                              3D Model
+                            </div>
+                            <div className="text-[8px] text-white/30 truncate max-w-full mt-0.5">
+                              {url.startsWith("data:")
+                                ? "Data"
+                                : url.split("/").pop()?.split("?")[0]}
+                            </div>
                           </div>
-                        )
+                        );
                       }
 
-                      if (type === 'video') {
+                      if (type === "video") {
                         return (
-                          <div key={ui} className="relative group flex-1 min-w-[100px]">
-                            <video src={url} preload="metadata" className="w-full max-h-[160px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer"
-                              onClick={() => openPreview(url)} />
+                          <div
+                            key={ui}
+                            className="relative group flex-1 min-w-[100px]"
+                          >
+                            <video
+                              src={url}
+                              preload="metadata"
+                              className="w-full max-h-[160px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer"
+                              onClick={() => openPreview(url)}
+                            />
                             <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                               <div className="w-8 h-8 rounded-full bg-black/50 flex items-center justify-center">
-                                <svg width="12" height="12" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
+                                <svg
+                                  width="12"
+                                  height="12"
+                                  viewBox="0 0 24 24"
+                                  fill="white"
+                                >
+                                  <polygon points="5,3 19,12 5,21" />
+                                </svg>
                               </div>
                             </div>
-                            <button onClick={() => handleDownload(url)}
-                              className="absolute top-1 right-1 h-7 px-2 rounded-md bg-blue-600 text-white text-[10px] font-medium flex items-center gap-1 hover:bg-blue-700 shadow-md transition-colors">
-                              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                                <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/><line x1="4" y1="21" x2="20" y2="21"/>
+                            <button
+                              onClick={() => handleDownload(url)}
+                              className="absolute top-1 right-1 h-7 px-2 rounded-md bg-blue-600 text-white text-[10px] font-medium flex items-center gap-1 hover:bg-blue-700 shadow-md transition-colors"
+                            >
+                              <svg
+                                width="12"
+                                height="12"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                strokeWidth="2.5"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              >
+                                <polyline points="7 10 12 15 17 10" />
+                                <line x1="12" y1="15" x2="12" y2="3" />
+                                <line x1="4" y1="21" x2="20" y2="21" />
                               </svg>
-                              {t('workflow.download', 'Download')}
+                              {t("workflow.download", "Download")}
                             </button>
                           </div>
-                        )
+                        );
                       }
 
-                      if (type === 'audio') {
+                      if (type === "audio") {
                         return (
-                          <div key={ui} className="flex-1 min-w-[100px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-2">
+                          <div
+                            key={ui}
+                            className="flex-1 min-w-[100px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-2"
+                          >
                             <audio src={url} controls className="w-full" />
                           </div>
-                        )
+                        );
                       }
 
                       return (
-                        <div key={ui} className="flex-1 min-w-[100px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-2 text-center cursor-pointer hover:bg-accent transition-colors"
-                          onClick={() => openPreview(url)}>
-                          <div className="text-[10px] text-muted-foreground truncate">{url.startsWith('data:') ? 'Data' : url.split('/').pop()?.split('?')[0] || 'File'}</div>
+                        <div
+                          key={ui}
+                          className="flex-1 min-w-[100px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-2 text-center cursor-pointer hover:bg-accent transition-colors"
+                          onClick={() => openPreview(url)}
+                        >
+                          <div className="text-[10px] text-muted-foreground truncate">
+                            {url.startsWith("data:")
+                              ? "Data"
+                              : url.split("/").pop()?.split("?")[0] || "File"}
+                          </div>
                         </div>
-                      )
+                      );
                     })}
                   </div>
                 )}
@@ -519,92 +755,144 @@ export function ResultsPanel({ embeddedInNode, nodeId: nodeIdProp }: ResultsPane
                   </div>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       </ScrollArea>
     </div>
-  )
+  );
 }
 
-
 /* ── Compact result item used inside the stacked card view ──────── */
-function StackedResultItem({ url, allImageUrls, openPreview, onDownload }: {
-  url: string
-  allImageUrls: string[]
-  openPreview: (src: string, items?: string[]) => void
-  onDownload: (url: string) => void
+function StackedResultItem({
+  url,
+  allImageUrls,
+  openPreview,
+  onDownload,
+}: {
+  url: string;
+  allImageUrls: string[];
+  openPreview: (src: string, items?: string[]) => void;
+  onDownload: (url: string) => void;
 }) {
-  const type = getOutputItemType(url)
+  const type = getOutputItemType(url);
 
-  if (type === 'text') {
-    const displayText = url.startsWith('data:text/') ? decodeDataText(url) : url
+  if (type === "text") {
+    const displayText = url.startsWith("data:text/")
+      ? decodeDataText(url)
+      : url;
     return (
       <div className="w-full min-w-0 rounded-lg bg-[hsl(var(--muted))]/30 px-3 py-2 max-h-[120px] overflow-y-auto nodrag nowheel select-text cursor-text">
-        <p className="text-[11px] text-foreground/80 whitespace-pre-wrap break-words leading-relaxed text-left select-text">{displayText}</p>
+        <p className="text-[11px] text-foreground/80 whitespace-pre-wrap break-words leading-relaxed text-left select-text">
+          {displayText}
+        </p>
       </div>
-    )
+    );
   }
 
-  if (type === 'image') {
+  if (type === "image") {
     return (
       <div className="relative group w-fit mx-auto">
-        <img src={url} alt="" onClick={() => openPreview(url, allImageUrls)}
-          className="max-w-full max-h-[160px] rounded object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40" />
-        <button onClick={() => onDownload(url)}
-          className="absolute top-1.5 right-1.5 h-7 w-7 rounded-md bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 shadow-lg transition-colors">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/><line x1="4" y1="21" x2="20" y2="21"/>
+        <img
+          src={url}
+          alt=""
+          onClick={() => openPreview(url, allImageUrls)}
+          className="max-w-full max-h-[160px] rounded object-contain cursor-pointer hover:ring-2 hover:ring-blue-500/40"
+        />
+        <button
+          onClick={() => onDownload(url)}
+          className="absolute top-1.5 right-1.5 h-7 w-7 rounded-md bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 shadow-lg transition-colors"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+            <line x1="4" y1="21" x2="20" y2="21" />
           </svg>
         </button>
       </div>
-    )
+    );
   }
 
-  if (type === 'video') {
+  if (type === "video") {
     return (
       <div className="relative group flex-1 min-w-[80px]">
-        <video src={url} preload="metadata" className="w-full max-h-[140px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer"
-          onClick={() => openPreview(url)} />
+        <video
+          src={url}
+          preload="metadata"
+          className="w-full max-h-[140px] rounded border border-[hsl(var(--border))] object-contain cursor-pointer"
+          onClick={() => openPreview(url)}
+        />
         <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
           <div className="w-7 h-7 rounded-full bg-black/50 flex items-center justify-center">
-            <svg width="10" height="10" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="white">
+              <polygon points="5,3 19,12 5,21" />
+            </svg>
           </div>
         </div>
-        <button onClick={() => onDownload(url)}
-          className="absolute top-1.5 right-1.5 h-7 w-7 rounded-md bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 shadow-lg transition-colors">
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/><line x1="4" y1="21" x2="20" y2="21"/>
+        <button
+          onClick={() => onDownload(url)}
+          className="absolute top-1.5 right-1.5 h-7 w-7 rounded-md bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700 shadow-lg transition-colors"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+            <line x1="4" y1="21" x2="20" y2="21" />
           </svg>
         </button>
       </div>
-    )
+    );
   }
 
-  if (type === 'audio') {
+  if (type === "audio") {
     return (
       <div className="flex-1 min-w-[80px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-1.5">
         <audio src={url} controls className="w-full h-8" />
       </div>
-    )
+    );
   }
 
-  if (type === '3d') {
+  if (type === "3d") {
     return (
-      <div className="flex-1 min-w-[80px] cursor-pointer rounded border border-[hsl(var(--border))] bg-gradient-to-br from-[#1a1a2e] to-[#0f3460] p-2 flex flex-col items-center justify-center text-center hover:ring-2 hover:ring-blue-500/40 transition-all"
+      <div
+        className="flex-1 min-w-[80px] cursor-pointer rounded border border-[hsl(var(--border))] bg-gradient-to-br from-[#1a1a2e] to-[#0f3460] p-2 flex flex-col items-center justify-center text-center hover:ring-2 hover:ring-blue-500/40 transition-all"
         style={{ minHeight: 80 }}
-        onClick={() => openPreview(url)}>
+        onClick={() => openPreview(url)}
+      >
         <div className="text-lg mb-0.5">🧊</div>
         <div className="text-[9px] text-blue-300 font-medium">3D Model</div>
       </div>
-    )
+    );
   }
 
   // Fallback — generic file
   return (
-    <div className="flex-1 min-w-[80px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-2 text-center cursor-pointer hover:bg-accent transition-colors"
-      onClick={() => openPreview(url)}>
-      <div className="text-[9px] text-muted-foreground truncate">{url.startsWith('data:') ? 'Data' : url.split('/').pop()?.split('?')[0] || 'File'}</div>
+    <div
+      className="flex-1 min-w-[80px] rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] p-2 text-center cursor-pointer hover:bg-accent transition-colors"
+      onClick={() => openPreview(url)}
+    >
+      <div className="text-[9px] text-muted-foreground truncate">
+        {url.startsWith("data:")
+          ? "Data"
+          : url.split("/").pop()?.split("?")[0] || "File"}
+      </div>
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/panels/SettingsPanel.tsx b/src/workflow/components/panels/SettingsPanel.tsx
index 21e0e419..b37af345 100644
--- a/src/workflow/components/panels/SettingsPanel.tsx
+++ b/src/workflow/components/panels/SettingsPanel.tsx
@@ -2,28 +2,28 @@
  * Settings panel — model refresh only.
  * API keys are managed via Desktop's main Settings page.
  */
-import { modelsIpc } from '../../ipc/ipc-client'
-import { useModelsStore } from '@/stores/modelsStore'
-import { Button } from '@/components/ui/button'
+import { modelsIpc } from "../../ipc/ipc-client";
+import { useModelsStore } from "@/stores/modelsStore";
+import { Button } from "@/components/ui/button";
 
 export function SettingsPanel() {
-  const models = useModelsStore(s => s.models)
-  const isLoading = useModelsStore(s => s.isLoading)
-  const error = useModelsStore(s => s.error)
-  const hasFetched = useModelsStore(s => s.hasFetched)
-  const fetchModels = useModelsStore(s => s.fetchModels)
+  const models = useModelsStore((s) => s.models);
+  const isLoading = useModelsStore((s) => s.isLoading);
+  const error = useModelsStore((s) => s.error);
+  const hasFetched = useModelsStore((s) => s.hasFetched);
+  const fetchModels = useModelsStore((s) => s.fetchModels);
 
   const handleRefreshModels = async () => {
     try {
-      await fetchModels(true)
-      const latestModels = useModelsStore.getState().models
+      await fetchModels(true);
+      const latestModels = useModelsStore.getState().models;
       if (latestModels.length > 0) {
-        await modelsIpc.sync(latestModels)
+        await modelsIpc.sync(latestModels);
       }
     } catch (err) {
-      console.error('Model refresh failed:', err)
+      console.error("Model refresh failed:", err);
     }
-  }
+  };
 
   return (
     <div className="p-3">
@@ -33,19 +33,32 @@ export function SettingsPanel() {
       <div>
         <div className="flex items-center justify-between mb-2">
           <h4 className="text-xs font-semibold">Model Catalog</h4>
-          {hasFetched && <span className="text-[10px] text-muted-foreground">{models.length} models</span>}
+          {hasFetched && (
+            <span className="text-[10px] text-muted-foreground">
+              {models.length} models
+            </span>
+          )}
         </div>
-        <Button variant="outline" size="sm" onClick={handleRefreshModels} disabled={isLoading} className="w-full">
-          {isLoading ? 'Loading...' : 'Refresh Models'}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleRefreshModels}
+          disabled={isLoading}
+          className="w-full"
+        >
+          {isLoading ? "Loading..." : "Refresh Models"}
         </Button>
         {error && <div className="mt-2 text-xs text-red-400">{error}</div>}
         {hasFetched && !error && (
-          <div className="mt-2 text-[10px] text-green-400">{models.length} models loaded and synced</div>
+          <div className="mt-2 text-[10px] text-green-400">
+            {models.length} models loaded and synced
+          </div>
         )}
         <div className="mt-1.5 text-[10px] text-muted-foreground leading-relaxed">
-          Shared with Models page and Playground. API keys are managed in the main Settings page.
+          Shared with Models page and Playground. API keys are managed in the
+          main Settings page.
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/panels/TemplatePanel.tsx b/src/workflow/components/panels/TemplatePanel.tsx
index af9e95b6..d679f1cb 100644
--- a/src/workflow/components/panels/TemplatePanel.tsx
+++ b/src/workflow/components/panels/TemplatePanel.tsx
@@ -2,90 +2,126 @@
  * TemplatePanel — left sidebar panel for browsing workflow templates.
  * Matches the design of NodePalette and WorkflowList.
  */
-import { useEffect, useState, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useUIStore } from '../../stores/ui.store'
-import { useTemplateStore } from '@/stores/templateStore'
-import { Heart, Flame, BarChart3, Play, Sparkles, Workflow } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import type { Template, TemplateFilter } from '@/types/template'
+import { useEffect, useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useUIStore } from "../../stores/ui.store";
+import { useTemplateStore } from "@/stores/templateStore";
+import {
+  Heart,
+  Flame,
+  BarChart3,
+  Play,
+  Sparkles,
+  Workflow,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Template, TemplateFilter } from "@/types/template";
 
-type SourceFilter = 'all' | 'public' | 'custom' | 'favorites'
+type SourceFilter = "all" | "public" | "custom" | "favorites";
 
 interface TemplatePanelProps {
-  onUseTemplate: (template: Template) => void
+  onUseTemplate: (template: Template) => void;
 }
 
 export function TemplatePanel({ onUseTemplate }: TemplatePanelProps) {
-  const { t } = useTranslation()
-  const toggleTemplatePanel = useUIStore(s => s.toggleTemplatePanel)
-  const width = useUIStore(s => s.sidebarWidth)
-  const setSidebarWidth = useUIStore(s => s.setSidebarWidth)
-  const { toggleFavorite, useTemplate: incrementUseCount } = useTemplateStore()
-
-  const [templates, setTemplates] = useState<Template[]>([])
-  const [isLoading, setIsLoading] = useState(false)
-  const [query, setQuery] = useState('')
-  const [sourceFilter, setSourceFilter] = useState<SourceFilter>('all')
-  const [sortBy, setSortBy] = useState<'updatedAt' | 'useCount'>('updatedAt')
-  const [dragging, setDragging] = useState(false)
+  const { t } = useTranslation();
+  const toggleTemplatePanel = useUIStore((s) => s.toggleTemplatePanel);
+  const width = useUIStore((s) => s.sidebarWidth);
+  const setSidebarWidth = useUIStore((s) => s.setSidebarWidth);
+  const { toggleFavorite, useTemplate: incrementUseCount } = useTemplateStore();
+
+  const [templates, setTemplates] = useState<Template[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [query, setQuery] = useState("");
+  const [sourceFilter, setSourceFilter] = useState<SourceFilter>("all");
+  const [sortBy, setSortBy] = useState<"updatedAt" | "useCount">("updatedAt");
+  const [dragging, setDragging] = useState(false);
 
   const loadTemplates = useCallback(async () => {
-    setIsLoading(true)
+    setIsLoading(true);
     try {
       const filter: TemplateFilter = {
-        templateType: 'workflow',
+        templateType: "workflow",
         search: query || undefined,
         sortBy,
-        type: sourceFilter === 'public' ? 'public' : sourceFilter === 'custom' ? 'custom' : undefined,
-        isFavorite: sourceFilter === 'favorites' ? true : undefined,
-      }
-      const result = await (window.workflowAPI?.invoke?.('template:query', filter) as Promise<Template[]>)
-      setTemplates(result ?? [])
+        type:
+          sourceFilter === "public"
+            ? "public"
+            : sourceFilter === "custom"
+              ? "custom"
+              : undefined,
+        isFavorite: sourceFilter === "favorites" ? true : undefined,
+      };
+      const result = await (window.workflowAPI?.invoke?.(
+        "template:query",
+        filter,
+      ) as Promise<Template[]>);
+      setTemplates(result ?? []);
     } catch {
-      setTemplates([])
+      setTemplates([]);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [query, sortBy, sourceFilter])
+  }, [query, sortBy, sourceFilter]);
 
-  useEffect(() => { loadTemplates() }, [loadTemplates])
+  useEffect(() => {
+    loadTemplates();
+  }, [loadTemplates]);
 
   const handleUse = async (template: Template) => {
-    await incrementUseCount(template.id)
-    onUseTemplate(template)
-  }
+    await incrementUseCount(template.id);
+    onUseTemplate(template);
+  };
 
   const handleToggleFavorite = async (template: Template) => {
-    await toggleFavorite(template.id)
-    setTemplates(prev => prev.map(t => t.id === template.id ? { ...t, isFavorite: !t.isFavorite } : t))
-  }
-
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    setDragging(true)
-    const startX = e.clientX
-    const startWidth = width
-    const onMove = (ev: MouseEvent) => { setSidebarWidth(startWidth + (ev.clientX - startX)) }
-    const onUp = () => { setDragging(false); document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp) }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [width, setSidebarWidth])
+    await toggleFavorite(template.id);
+    setTemplates((prev) =>
+      prev.map((t) =>
+        t.id === template.id ? { ...t, isFavorite: !t.isFavorite } : t,
+      ),
+    );
+  };
+
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setDragging(true);
+      const startX = e.clientX;
+      const startWidth = width;
+      const onMove = (ev: MouseEvent) => {
+        setSidebarWidth(startWidth + (ev.clientX - startX));
+      };
+      const onUp = () => {
+        setDragging(false);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [width, setSidebarWidth],
+  );
 
   const sourceOptions: { key: SourceFilter; label: string }[] = [
-    { key: 'all', label: t('templates.allSources') },
-    { key: 'public', label: t('templates.public') },
-    { key: 'custom', label: t('templates.myTemplates') },
-    { key: 'favorites', label: '★' },
-  ]
+    { key: "all", label: t("templates.allSources") },
+    { key: "public", label: t("templates.public") },
+    { key: "custom", label: t("templates.myTemplates") },
+    { key: "favorites", label: "★" },
+  ];
 
   return (
-    <div className="border-r border-border bg-card text-card-foreground flex flex-col relative overflow-hidden h-full"
-      style={{ width, minWidth: 0 }}>
+    <div
+      className="border-r border-border bg-card text-card-foreground flex flex-col relative overflow-hidden h-full"
+      style={{ width, minWidth: 0 }}
+    >
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
-        <span className="font-semibold text-xs">{t('templates.title')}</span>
-        <button onClick={toggleTemplatePanel} className="text-muted-foreground hover:text-foreground text-xs px-1" title={t('common.close', 'Close')}>
+        <span className="font-semibold text-xs">{t("templates.title")}</span>
+        <button
+          onClick={toggleTemplatePanel}
+          className="text-muted-foreground hover:text-foreground text-xs px-1"
+          title={t("common.close", "Close")}
+        >
           ✕
         </button>
       </div>
@@ -95,23 +131,23 @@ export function TemplatePanel({ onUseTemplate }: TemplatePanelProps) {
         <input
           type="text"
           value={query}
-          onChange={e => setQuery(e.target.value)}
-          placeholder={t('templates.searchPlaceholder', 'Search templates...')}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={t("templates.searchPlaceholder", "Search templates...")}
           className="w-full rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--background))] px-2 py-1.5 text-xs text-[hsl(var(--foreground))] focus:outline-none focus:ring-1 focus:ring-blue-500/50"
         />
       </div>
 
       {/* Source filter pills */}
       <div className="px-2.5 py-1.5 border-b border-border flex items-center gap-1 flex-wrap">
-        {sourceOptions.map(opt => (
+        {sourceOptions.map((opt) => (
           <button
             key={opt.key}
             onClick={() => setSourceFilter(opt.key)}
             className={cn(
-              'px-2 py-0.5 text-[10px] rounded-full border transition-colors',
+              "px-2 py-0.5 text-[10px] rounded-full border transition-colors",
               sourceFilter === opt.key
-                ? 'bg-primary/15 border-primary/30 text-primary'
-                : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-accent'
+                ? "bg-primary/15 border-primary/30 text-primary"
+                : "border-transparent text-muted-foreground hover:text-foreground hover:bg-accent",
             )}
           >
             {opt.label}
@@ -119,11 +155,17 @@ export function TemplatePanel({ onUseTemplate }: TemplatePanelProps) {
         ))}
         {/* Sort toggle */}
         <button
-          onClick={() => setSortBy(s => s === 'updatedAt' ? 'useCount' : 'updatedAt')}
+          onClick={() =>
+            setSortBy((s) => (s === "updatedAt" ? "useCount" : "updatedAt"))
+          }
           className="ml-auto px-1.5 py-0.5 text-[10px] text-muted-foreground hover:text-foreground transition-colors"
-          title={sortBy === 'updatedAt' ? t('templates.newest') : t('templates.mostUsed')}
+          title={
+            sortBy === "updatedAt"
+              ? t("templates.newest")
+              : t("templates.mostUsed")
+          }
         >
-          {sortBy === 'updatedAt' ? '⏰' : '🔥'}
+          {sortBy === "updatedAt" ? "⏰" : "🔥"}
         </button>
       </div>
 
@@ -137,70 +179,100 @@ export function TemplatePanel({ onUseTemplate }: TemplatePanelProps) {
 
         {!isLoading && templates.length === 0 && (
           <div className="px-3 py-8 text-xs text-muted-foreground text-center">
-            {t('templates.noTemplates')}
+            {t("templates.noTemplates")}
           </div>
         )}
 
-        {!isLoading && templates.map(template => {
-          const tName = template.i18nKey
-            ? t(`presetTemplates.${template.i18nKey}.name`, { defaultValue: template.name })
-            : template.name
-          const tDesc = template.i18nKey && template.description
-            ? t(`presetTemplates.${template.i18nKey}.description`, { defaultValue: template.description })
-            : template.description
-          return (
-          <div
-            key={template.id}
-            className="group mx-1.5 mb-0.5 rounded-md hover:bg-accent transition-colors"
-          >
-            <div className="flex items-start gap-2 px-2.5 py-2">
-              {/* Icon */}
-              <div className="w-8 h-8 flex-shrink-0 rounded bg-muted/50 flex items-center justify-center mt-0.5">
-                {template.templateType === 'playground'
-                  ? <Sparkles className="h-4 w-4 text-muted-foreground/60" />
-                  : <Workflow className="h-4 w-4 text-muted-foreground/60" />}
-              </div>
-              {/* Info */}
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-1">
-                  <span className="text-xs font-medium truncate">{tName}</span>
+        {!isLoading &&
+          templates.map((template) => {
+            const tName = template.i18nKey
+              ? t(`presetTemplates.${template.i18nKey}.name`, {
+                  defaultValue: template.name,
+                })
+              : template.name;
+            const tDesc =
+              template.i18nKey && template.description
+                ? t(`presetTemplates.${template.i18nKey}.description`, {
+                    defaultValue: template.description,
+                  })
+                : template.description;
+            return (
+              <div
+                key={template.id}
+                className="group mx-1.5 mb-0.5 rounded-md hover:bg-accent transition-colors"
+              >
+                <div className="flex items-start gap-2 px-2.5 py-2">
+                  {/* Icon */}
+                  <div className="w-8 h-8 flex-shrink-0 rounded bg-muted/50 flex items-center justify-center mt-0.5">
+                    {template.templateType === "playground" ? (
+                      <Sparkles className="h-4 w-4 text-muted-foreground/60" />
+                    ) : (
+                      <Workflow className="h-4 w-4 text-muted-foreground/60" />
+                    )}
+                  </div>
+                  {/* Info */}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-1">
+                      <span className="text-xs font-medium truncate">
+                        {tName}
+                      </span>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleToggleFavorite(template);
+                        }}
+                        className={cn(
+                          "p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
+                          template.isFavorite
+                            ? "text-red-500 opacity-100"
+                            : "text-muted-foreground hover:text-red-500",
+                        )}
+                      >
+                        <Heart
+                          className={cn(
+                            "h-3 w-3",
+                            template.isFavorite && "fill-current",
+                          )}
+                        />
+                      </button>
+                    </div>
+                    {tDesc && (
+                      <p className="text-[10px] text-muted-foreground line-clamp-1 mt-0.5">
+                        {tDesc}
+                      </p>
+                    )}
+                    <div className="flex items-center gap-2 text-[10px] text-muted-foreground mt-0.5">
+                      <span className="flex items-center gap-0.5">
+                        <Flame className="h-2.5 w-2.5" />
+                        {template.useCount}
+                      </span>
+                      {template.workflowData && (
+                        <span className="flex items-center gap-0.5">
+                          <BarChart3 className="h-2.5 w-2.5" />
+                          {template.workflowData.nodeCount}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                  {/* Use button */}
                   <button
-                    onClick={(e) => { e.stopPropagation(); handleToggleFavorite(template) }}
-                    className={cn("p-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity",
-                      template.isFavorite ? "text-red-500 opacity-100" : "text-muted-foreground hover:text-red-500")}
+                    onClick={() => handleUse(template)}
+                    className="self-center flex-shrink-0 h-6 px-2 rounded text-[10px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1 opacity-0 group-hover:opacity-100"
                   >
-                    <Heart className={cn("h-3 w-3", template.isFavorite && "fill-current")} />
+                    <Play className="h-2.5 w-2.5" />
+                    {t("templates.use")}
                   </button>
                 </div>
-                {tDesc && (
-                  <p className="text-[10px] text-muted-foreground line-clamp-1 mt-0.5">{tDesc}</p>
-                )}
-                <div className="flex items-center gap-2 text-[10px] text-muted-foreground mt-0.5">
-                  <span className="flex items-center gap-0.5"><Flame className="h-2.5 w-2.5" />{template.useCount}</span>
-                  {template.workflowData && (
-                    <span className="flex items-center gap-0.5"><BarChart3 className="h-2.5 w-2.5" />{template.workflowData.nodeCount}</span>
-                  )}
-                </div>
               </div>
-              {/* Use button */}
-              <button
-                onClick={() => handleUse(template)}
-                className="self-center flex-shrink-0 h-6 px-2 rounded text-[10px] font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex items-center gap-1 opacity-0 group-hover:opacity-100"
-              >
-                <Play className="h-2.5 w-2.5" />
-                {t('templates.use')}
-              </button>
-            </div>
-          </div>
-          )
-        })}
+            );
+          })}
       </div>
 
       {/* Resize handle */}
       <div
         onMouseDown={onResizeStart}
-        className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors ${dragging ? 'bg-primary' : 'hover:bg-primary/50'}`}
+        className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors ${dragging ? "bg-primary" : "hover:bg-primary/50"}`}
       />
     </div>
-  )
+  );
 }
diff --git a/src/workflow/components/panels/WorkflowResultsPanel.tsx b/src/workflow/components/panels/WorkflowResultsPanel.tsx
index 0b4744ea..dd43b889 100644
--- a/src/workflow/components/panels/WorkflowResultsPanel.tsx
+++ b/src/workflow/components/panels/WorkflowResultsPanel.tsx
@@ -3,98 +3,116 @@
  * in reversed execution order (most recently executed first).
  * Resizable width via drag on the left edge (like the left nodes panel).
  */
-import { useMemo, useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useUIStore } from '../../stores/ui.store'
-import { useExecutionStore } from '../../stores/execution.store'
-import { useWorkflowStore } from '../../stores/workflow.store'
-import { topologicalLevels } from '../../lib/topological'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { getOutputItemType, decodeDataText } from '../../lib/outputDisplay'
-import { PanelRightClose } from 'lucide-react'
+import { useMemo, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useUIStore } from "../../stores/ui.store";
+import { useExecutionStore } from "../../stores/execution.store";
+import { useWorkflowStore } from "../../stores/workflow.store";
+import { topologicalLevels } from "../../lib/topological";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { getOutputItemType, decodeDataText } from "../../lib/outputDisplay";
+import { PanelRightClose } from "lucide-react";
 
 /** Node id + display title (node label + model name for API nodes) + latest result urls, ordered by reversed execution order */
-function useOrderedResultNodes(): Array<{ nodeId: string; label: string; status: string; urls: string[] }> {
-  const nodes = useWorkflowStore(s => s.nodes)
-  const edges = useWorkflowStore(s => s.edges)
-  const lastResults = useExecutionStore(s => s.lastResults)
-  const nodeStatuses = useExecutionStore(s => s.nodeStatuses)
-  const runSessions = useExecutionStore(s => s.runSessions)
+function useOrderedResultNodes(): Array<{
+  nodeId: string;
+  label: string;
+  status: string;
+  urls: string[];
+}> {
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const edges = useWorkflowStore((s) => s.edges);
+  const lastResults = useExecutionStore((s) => s.lastResults);
+  const nodeStatuses = useExecutionStore((s) => s.nodeStatuses);
+  const runSessions = useExecutionStore((s) => s.runSessions);
 
   return useMemo(() => {
-    const nodeIds = nodes.map(n => n.id)
-    const idToDisplayLabel: Record<string, string> = {}
+    const nodeIds = nodes.map((n) => n.id);
+    const idToDisplayLabel: Record<string, string> = {};
     for (const n of nodes) {
-      const rawTitle = (n.data?.label as string)?.trim()
-      const nodeType = n.data?.nodeType as string | undefined
-      const params = (n.data?.params ?? {}) as Record<string, unknown>
-      const modelId = params.modelId as string | undefined
-      if (nodeType === 'ai-task/run' && modelId) {
+      const rawTitle = (n.data?.label as string)?.trim();
+      const nodeType = n.data?.nodeType as string | undefined;
+      const params = (n.data?.params ?? {}) as Record<string, unknown>;
+      const modelId = params.modelId as string | undefined;
+      if (nodeType === "ai-task/run" && modelId) {
         // Avoid duplicating when node label was already set to the model id/name
-        idToDisplayLabel[n.id] = (rawTitle && rawTitle !== modelId) ? `${rawTitle} · ${modelId}` : modelId
+        idToDisplayLabel[n.id] =
+          rawTitle && rawTitle !== modelId
+            ? `${rawTitle} · ${modelId}`
+            : modelId;
       } else {
-        idToDisplayLabel[n.id] = rawTitle || nodeType || n.id.slice(0, 8)
+        idToDisplayLabel[n.id] = rawTitle || nodeType || n.id.slice(0, 8);
       }
     }
 
     // Execution order (reversed = most recent first)
-    let orderedIds: string[]
-    const latestSession = runSessions[0]
+    let orderedIds: string[];
+    const latestSession = runSessions[0];
     if (latestSession?.nodeIds?.length) {
-      orderedIds = [...latestSession.nodeIds].reverse()
+      orderedIds = [...latestSession.nodeIds].reverse();
     } else {
-      const simpleEdges = edges.map(e => ({ sourceNodeId: e.source, targetNodeId: e.target }))
-      const levels = topologicalLevels(nodeIds, simpleEdges)
-      const execOrder = levels.flat()
-      orderedIds = [...execOrder].reverse()
+      const simpleEdges = edges.map((e) => ({
+        sourceNodeId: e.source,
+        targetNodeId: e.target,
+      }));
+      const levels = topologicalLevels(nodeIds, simpleEdges);
+      const execOrder = levels.flat();
+      orderedIds = [...execOrder].reverse();
     }
 
-    const withResults = orderedIds.filter(id => {
-      const arr = lastResults[id]
-      return Array.isArray(arr) && arr.length > 0 && arr[0].urls?.length
-    })
+    const withResults = orderedIds.filter((id) => {
+      const arr = lastResults[id];
+      return Array.isArray(arr) && arr.length > 0 && arr[0].urls?.length;
+    });
 
-    return withResults.map(nodeId => {
-      const arr = lastResults[nodeId] ?? []
-      const latest = arr[0]
-      const urls = latest?.urls ?? []
-      const status = nodeStatuses[nodeId] ?? 'idle'
+    return withResults.map((nodeId) => {
+      const arr = lastResults[nodeId] ?? [];
+      const latest = arr[0];
+      const urls = latest?.urls ?? [];
+      const status = nodeStatuses[nodeId] ?? "idle";
       return {
         nodeId,
         label: idToDisplayLabel[nodeId] ?? nodeId.slice(0, 8),
         status,
-        urls
-      }
-    })
-  }, [nodes, edges, lastResults, nodeStatuses, runSessions])
+        urls,
+      };
+    });
+  }, [nodes, edges, lastResults, nodeStatuses, runSessions]);
 }
 
 export function WorkflowResultsPanel() {
-  const { t } = useTranslation()
-  const width = useUIStore(s => s.workflowResultsPanelWidth)
-  const setWorkflowResultsPanelWidth = useUIStore(s => s.setWorkflowResultsPanelWidth)
-  const toggleWorkflowResultsPanel = useUIStore(s => s.toggleWorkflowResultsPanel)
-  const selectNode = useUIStore(s => s.selectNode)
-  const openPreview = useUIStore(s => s.openPreview)
-  const ordered = useOrderedResultNodes()
-  const [dragging, setDragging] = useState(false)
+  const { t } = useTranslation();
+  const width = useUIStore((s) => s.workflowResultsPanelWidth);
+  const setWorkflowResultsPanelWidth = useUIStore(
+    (s) => s.setWorkflowResultsPanelWidth,
+  );
+  const toggleWorkflowResultsPanel = useUIStore(
+    (s) => s.toggleWorkflowResultsPanel,
+  );
+  const selectNode = useUIStore((s) => s.selectNode);
+  const openPreview = useUIStore((s) => s.openPreview);
+  const ordered = useOrderedResultNodes();
+  const [dragging, setDragging] = useState(false);
 
-  const onResizeStart = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    setDragging(true)
-    const startX = e.clientX
-    const startWidth = width
-    const onMove = (ev: MouseEvent) => {
-      setWorkflowResultsPanelWidth(startWidth + (startX - ev.clientX))
-    }
-    const onUp = () => {
-      setDragging(false)
-      document.removeEventListener('mousemove', onMove)
-      document.removeEventListener('mouseup', onUp)
-    }
-    document.addEventListener('mousemove', onMove)
-    document.addEventListener('mouseup', onUp)
-  }, [width, setWorkflowResultsPanelWidth])
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setDragging(true);
+      const startX = e.clientX;
+      const startWidth = width;
+      const onMove = (ev: MouseEvent) => {
+        setWorkflowResultsPanelWidth(startWidth + (startX - ev.clientX));
+      };
+      const onUp = () => {
+        setDragging(false);
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    },
+    [width, setWorkflowResultsPanelWidth],
+  );
 
   return (
     <div
@@ -106,17 +124,17 @@ export function WorkflowResultsPanel() {
         role="separator"
         aria-orientation="vertical"
         onMouseDown={onResizeStart}
-        className={`absolute left-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors ${dragging ? 'bg-primary' : 'hover:bg-primary/50'}`}
+        className={`absolute left-0 top-0 bottom-0 w-1 cursor-col-resize z-10 transition-colors ${dragging ? "bg-primary" : "hover:bg-primary/50"}`}
       />
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border">
         <h3 className="text-sm font-semibold text-foreground">
-          {t('workflow.workflowResults', 'Workflow Results')}
+          {t("workflow.workflowResults", "Workflow Results")}
         </h3>
         <button
           onClick={toggleWorkflowResultsPanel}
           className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-          title={t('workflow.closeResultsPanel', 'Close panel')}
+          title={t("workflow.closeResultsPanel", "Close panel")}
         >
           <PanelRightClose className="w-4 h-4" />
         </button>
@@ -127,7 +145,10 @@ export function WorkflowResultsPanel() {
         <div className="p-2 space-y-2">
           {ordered.length === 0 && (
             <p className="text-muted-foreground text-sm py-6 text-center px-2">
-              {t('workflow.noResultsYet', 'No results yet. Run the workflow to see outputs here.')}
+              {t(
+                "workflow.noResultsYet",
+                "No results yet. Run the workflow to see outputs here.",
+              )}
             </p>
           )}
           {ordered.map(({ nodeId, label, status, urls }) => (
@@ -140,55 +161,89 @@ export function WorkflowResultsPanel() {
                 onClick={() => selectNode(nodeId)}
                 className="w-full text-left px-3 py-2 flex items-center justify-between gap-2 hover:bg-accent/50 transition-colors"
               >
-                <span className="text-xs font-medium text-foreground min-w-0 break-words">{label}</span>
+                <span className="text-xs font-medium text-foreground min-w-0 break-words">
+                  {label}
+                </span>
                 <span
                   className={`text-[10px] px-1.5 py-0.5 rounded shrink-0
-                    ${status === 'running' ? 'bg-blue-500/20 text-blue-400' :
-                      status === 'confirmed' ? 'bg-green-500/20 text-green-400' :
-                      status === 'error' ? 'bg-red-500/20 text-red-400' :
-                      'bg-muted text-muted-foreground'}`}
+                    ${
+                      status === "running"
+                        ? "bg-blue-500/20 text-blue-400"
+                        : status === "confirmed"
+                          ? "bg-green-500/20 text-green-400"
+                          : status === "error"
+                            ? "bg-red-500/20 text-red-400"
+                            : "bg-muted text-muted-foreground"
+                    }`}
                 >
-                  {status === 'running' ? t('workflow.running', 'Running') :
-                    status === 'confirmed' ? t('workflow.done', 'Done') :
-                    status === 'error' ? t('workflow.error', 'Error') : t('workflow.idle', 'Idle')}
+                  {status === "running"
+                    ? t("workflow.running", "Running")
+                    : status === "confirmed"
+                      ? t("workflow.done", "Done")
+                      : status === "error"
+                        ? t("workflow.error", "Error")
+                        : t("workflow.idle", "Idle")}
                 </span>
               </button>
               {urls.length > 0 && (
                 <div className="px-2 pb-2 flex gap-1.5 flex-wrap">
                   {urls.slice(0, 3).map((url, ui) => {
-                    const type = getOutputItemType(url)
-                    if (type === 'image') {
+                    const type = getOutputItemType(url);
+                    if (type === "image") {
                       return (
                         <button
                           key={ui}
                           type="button"
-                          onClick={e => { e.stopPropagation(); openPreview(url, urls) }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            openPreview(url, urls);
+                          }}
                           className="flex-1 min-w-[60px] max-w-[100px] rounded border border-border overflow-hidden bg-muted/30 hover:ring-2 hover:ring-primary/40 transition-all"
                         >
-                          <img src={url} alt="" className="w-full aspect-square object-cover" />
+                          <img
+                            src={url}
+                            alt=""
+                            className="w-full aspect-square object-cover"
+                          />
                         </button>
-                      )
+                      );
                     }
-                    if (type === 'video') {
+                    if (type === "video") {
                       return (
                         <button
                           key={ui}
                           type="button"
-                          onClick={e => { e.stopPropagation(); openPreview(url) }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            openPreview(url);
+                          }}
                           className="flex-1 min-w-[60px] max-w-[100px] rounded border border-border overflow-hidden bg-black/20 hover:ring-2 hover:ring-primary/40 transition-all relative"
                         >
-                          <video src={url} className="w-full aspect-square object-cover" />
+                          <video
+                            src={url}
+                            className="w-full aspect-square object-cover"
+                          />
                           <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                             <div className="w-6 h-6 rounded-full bg-black/50 flex items-center justify-center">
-                              <svg width="10" height="10" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
+                              <svg
+                                width="10"
+                                height="10"
+                                viewBox="0 0 24 24"
+                                fill="white"
+                              >
+                                <polygon points="5,3 19,12 5,21" />
+                              </svg>
                             </div>
                           </div>
                         </button>
-                      )
+                      );
                     }
-                    if (type === 'text') {
-                      const text = url.startsWith('data:text/') ? decodeDataText(url) : url
-                      const short = text.length > 80 ? text.slice(0, 80) + '…' : text
+                    if (type === "text") {
+                      const text = url.startsWith("data:text/")
+                        ? decodeDataText(url)
+                        : url;
+                      const short =
+                        text.length > 80 ? text.slice(0, 80) + "…" : text;
                       return (
                         <div
                           key={ui}
@@ -196,21 +251,28 @@ export function WorkflowResultsPanel() {
                         >
                           {short}
                         </div>
-                      )
+                      );
                     }
                     return (
                       <button
                         key={ui}
                         type="button"
-                        onClick={e => { e.stopPropagation(); openPreview(url) }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          openPreview(url);
+                        }}
                         className="flex-1 min-w-[60px] max-w-[100px] rounded border border-border bg-muted/30 p-2 text-[10px] text-muted-foreground truncate hover:bg-accent transition-colors"
                       >
-                        {url.startsWith('data:') ? 'Data' : (url.split('/').pop()?.split('?')[0] || 'File')}
+                        {url.startsWith("data:")
+                          ? "Data"
+                          : url.split("/").pop()?.split("?")[0] || "File"}
                       </button>
-                    )
+                    );
                   })}
                   {urls.length > 3 && (
-                    <span className="text-[10px] text-muted-foreground self-center">+{urls.length - 3}</span>
+                    <span className="text-[10px] text-muted-foreground self-center">
+                      +{urls.length - 3}
+                    </span>
                   )}
                 </div>
               )}
@@ -219,5 +281,5 @@ export function WorkflowResultsPanel() {
         </div>
       </ScrollArea>
     </div>
-  )
+  );
 }
diff --git a/src/workflow/constants.ts b/src/workflow/constants.ts
index 4ed018ff..4a690c8e 100644
--- a/src/workflow/constants.ts
+++ b/src/workflow/constants.ts
@@ -2,46 +2,49 @@
  * Shared constants for workflow module.
  */
 
-import type { NodeStatus, EdgeStatus } from './types/execution'
+import type { NodeStatus, EdgeStatus } from "./types/execution";
 
 /** Top status bar color */
 export const NODE_STATUS_COLORS: Record<NodeStatus, string> = {
-  idle: 'transparent',
-  running: '#3B82F6',
-  confirmed: '#22C55E',
-  unconfirmed: '#F97316',
-  error: '#EF4444'
-} as const
+  idle: "transparent",
+  running: "#3B82F6",
+  confirmed: "#22C55E",
+  unconfirmed: "#F97316",
+  error: "#EF4444",
+} as const;
 
 /** Border CSS class per status */
 export const NODE_STATUS_BORDER: Record<NodeStatus, string> = {
-  idle: 'border-[hsl(var(--border))]',
-  running: 'border-blue-500 shadow-[0_0_15px_rgba(59,130,246,.25)]',
-  confirmed: 'border-green-500/60',
-  unconfirmed: 'border-orange-500/60',
-  error: 'border-red-500/60'
-} as const
+  idle: "border-[hsl(var(--border))]",
+  running: "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,.25)]",
+  confirmed: "border-green-500/60",
+  unconfirmed: "border-orange-500/60",
+  error: "border-red-500/60",
+} as const;
 
-export const EDGE_STATUS_STYLES: Record<EdgeStatus, { strokeDasharray: string; opacity: number }> = {
-  'no-data': { strokeDasharray: '5 5', opacity: 0.5 },
-  'has-data': { strokeDasharray: 'none', opacity: 1.0 }
-} as const
+export const EDGE_STATUS_STYLES: Record<
+  EdgeStatus,
+  { strokeDasharray: string; opacity: number }
+> = {
+  "no-data": { strokeDasharray: "5 5", opacity: 0.5 },
+  "has-data": { strokeDasharray: "none", opacity: 1.0 },
+} as const;
 
 export const DEFAULT_BUDGET = {
   perExecutionLimit: 10.0,
-  dailyLimit: 100.0
-} as const
+  dailyLimit: 100.0,
+} as const;
 
-export const MAX_RETRIES = 3
-export const RETRY_BACKOFF_BASE_MS = 1000
-export const MAX_PARALLEL_EXECUTIONS = 5
-export const DB_FILENAME = 'workflow.db'
-export const ARTIFACTS_DIR = 'workflow-data'
-export const WAVESPEED_API_BASE = 'https://api.wavespeed.ai'
-export const TASK_TIMEOUT_MS = 30 * 60 * 1000
-export const TASK_POLL_INTERVAL_MS = 3000
-export const MODEL_CACHE_TTL_MS = 24 * 60 * 60 * 1000
+export const MAX_RETRIES = 3;
+export const RETRY_BACKOFF_BASE_MS = 1000;
+export const MAX_PARALLEL_EXECUTIONS = 5;
+export const DB_FILENAME = "workflow.db";
+export const ARTIFACTS_DIR = "workflow-data";
+export const WAVESPEED_API_BASE = "https://api.wavespeed.ai";
+export const TASK_TIMEOUT_MS = 30 * 60 * 1000;
+export const TASK_POLL_INTERVAL_MS = 3000;
+export const MODEL_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
 
 /** Default naming template for output files.
  *  Variables: {model}, {node}, {date}, {time}, {index}, {seed}, {workflow}, {ext} */
-export const DEFAULT_NAMING_TEMPLATE = '{model}_{date}_{index}.{ext}'
+export const DEFAULT_NAMING_TEMPLATE = "{model}_{date}_{index}.{ext}";
diff --git a/src/workflow/hooks/useFreeToolListener.ts b/src/workflow/hooks/useFreeToolListener.ts
index f43473b6..73fa6db8 100644
--- a/src/workflow/hooks/useFreeToolListener.ts
+++ b/src/workflow/hooks/useFreeToolListener.ts
@@ -2,138 +2,183 @@
  * Sets up IPC listener for free-tool:execute from main process.
  * Renderer runs the Web Worker and responds via free-tool:complete/error.
  */
-import { useEffect } from 'react'
-import { freeToolIpc } from '../ipc/ipc-client'
-import { useExecutionStore } from '../stores/execution.store'
-import { runImageEnhancer, runBackgroundRemover, runFaceEnhancer, runVideoEnhancer, runFaceSwapper, runImageEraser, runSegmentAnything } from '../lib/free-tool-runner'
+import { useEffect } from "react";
+import { freeToolIpc } from "../ipc/ipc-client";
+import { useExecutionStore } from "../stores/execution.store";
+import {
+  runImageEnhancer,
+  runBackgroundRemover,
+  runFaceEnhancer,
+  runVideoEnhancer,
+  runFaceSwapper,
+  runImageEraser,
+  runSegmentAnything,
+} from "../lib/free-tool-runner";
 
 function getApi() {
-  return window.workflowAPI
+  return window.workflowAPI;
 }
 
 export function useFreeToolListener(): void {
   useEffect(() => {
     const handler = async (data: {
-      requestId: string
-      nodeType: string
-      workflowId: string
-      nodeId: string
-      inputs: Record<string, string>
-      params: Record<string, unknown>
+      requestId: string;
+      nodeType: string;
+      workflowId: string;
+      nodeId: string;
+      inputs: Record<string, string>;
+      params: Record<string, unknown>;
     }) => {
-      const { requestId, nodeType, workflowId, nodeId, inputs, params } = data
+      const { requestId, nodeType, workflowId, nodeId, inputs, params } = data;
 
       // Progress callback that updates the execution store directly
       const onProgress = (progress: number, message?: string) => {
-        useExecutionStore.getState().updateProgress(nodeId, progress, message)
-      }
+        useExecutionStore.getState().updateProgress(nodeId, progress, message);
+      };
 
       try {
-        if (nodeType === 'free-tool/image-enhancer') {
-          const inputUrl = inputs.input
-          if (!inputUrl) throw new Error('Missing input')
-          const outputData = await runImageEnhancer(inputUrl, params as { model?: string; scale?: string }, onProgress)
+        if (nodeType === "free-tool/image-enhancer") {
+          const inputUrl = inputs.input;
+          if (!inputUrl) throw new Error("Missing input");
+          const outputData = await runImageEnhancer(
+            inputUrl,
+            params as { model?: string; scale?: string },
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'png',
-            outputPrefix: 'image_enhancer'
-          })
-        } else if (nodeType === 'free-tool/background-remover') {
-          const inputUrl = inputs.input
-          if (!inputUrl) throw new Error('Missing input')
-          const outputData = await runBackgroundRemover(inputUrl, params as { model?: string }, onProgress)
+            outputExt: "png",
+            outputPrefix: "image_enhancer",
+          });
+        } else if (nodeType === "free-tool/background-remover") {
+          const inputUrl = inputs.input;
+          if (!inputUrl) throw new Error("Missing input");
+          const outputData = await runBackgroundRemover(
+            inputUrl,
+            params as { model?: string },
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'png',
-            outputPrefix: 'background_remover'
-          })
-        } else if (nodeType === 'free-tool/face-enhancer') {
-          const inputUrl = inputs.input
-          if (!inputUrl) throw new Error('Missing input')
-          const outputData = await runFaceEnhancer(inputUrl, params, onProgress)
+            outputExt: "png",
+            outputPrefix: "background_remover",
+          });
+        } else if (nodeType === "free-tool/face-enhancer") {
+          const inputUrl = inputs.input;
+          if (!inputUrl) throw new Error("Missing input");
+          const outputData = await runFaceEnhancer(
+            inputUrl,
+            params,
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'png',
-            outputPrefix: 'face_enhancer'
-          })
-        } else if (nodeType === 'free-tool/video-enhancer') {
-          const inputUrl = inputs.input
-          if (!inputUrl) throw new Error('Missing input')
-          const outputData = await runVideoEnhancer(inputUrl, params as { model?: string; scale?: string }, onProgress)
+            outputExt: "png",
+            outputPrefix: "face_enhancer",
+          });
+        } else if (nodeType === "free-tool/video-enhancer") {
+          const inputUrl = inputs.input;
+          if (!inputUrl) throw new Error("Missing input");
+          const outputData = await runVideoEnhancer(
+            inputUrl,
+            params as { model?: string; scale?: string },
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'webm',
-            outputPrefix: 'video_enhancer'
-          })
-        } else if (nodeType === 'free-tool/face-swapper') {
-          const sourceUrl = inputs.source
-          const targetUrl = inputs.target
-          if (!sourceUrl || !targetUrl) throw new Error('Missing source or target image')
-          const outputData = await runFaceSwapper(sourceUrl, targetUrl, params, onProgress)
+            outputExt: "webm",
+            outputPrefix: "video_enhancer",
+          });
+        } else if (nodeType === "free-tool/face-swapper") {
+          const sourceUrl = inputs.source;
+          const targetUrl = inputs.target;
+          if (!sourceUrl || !targetUrl)
+            throw new Error("Missing source or target image");
+          const outputData = await runFaceSwapper(
+            sourceUrl,
+            targetUrl,
+            params,
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'png',
-            outputPrefix: 'face_swapper'
-          })
-        } else if (nodeType === 'free-tool/image-eraser') {
-          const imageUrl = inputs.input
-          const maskUrl = inputs.mask_image
-          if (!imageUrl || !maskUrl) throw new Error('Missing image or mask')
-          const outputData = await runImageEraser(imageUrl, maskUrl, params, onProgress)
+            outputExt: "png",
+            outputPrefix: "face_swapper",
+          });
+        } else if (nodeType === "free-tool/image-eraser") {
+          const imageUrl = inputs.input;
+          const maskUrl = inputs.mask_image;
+          if (!imageUrl || !maskUrl) throw new Error("Missing image or mask");
+          const outputData = await runImageEraser(
+            imageUrl,
+            maskUrl,
+            params,
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'png',
-            outputPrefix: 'image_eraser'
-          })
-        } else if (nodeType === 'free-tool/segment-anything') {
-          const inputUrl = inputs.input
-          if (!inputUrl) throw new Error('Missing input')
-          const outputData = await runSegmentAnything(inputUrl, params as { pointX?: number; pointY?: number; __segmentPoints?: string; __previewMask?: string; invertMask?: boolean }, onProgress)
+            outputExt: "png",
+            outputPrefix: "image_eraser",
+          });
+        } else if (nodeType === "free-tool/segment-anything") {
+          const inputUrl = inputs.input;
+          if (!inputUrl) throw new Error("Missing input");
+          const outputData = await runSegmentAnything(
+            inputUrl,
+            params as {
+              pointX?: number;
+              pointY?: number;
+              __segmentPoints?: string;
+              __previewMask?: string;
+              invertMask?: boolean;
+            },
+            onProgress,
+          );
           await freeToolIpc.complete({
             requestId,
             workflowId,
             nodeId,
             outputData,
-            outputExt: 'png',
-            outputPrefix: 'segment_mask'
-          })
+            outputExt: "png",
+            outputPrefix: "segment_mask",
+          });
         } else {
           await freeToolIpc.error({
             requestId,
-            error: `Unsupported free-tool node type: ${nodeType}`
-          })
+            error: `Unsupported free-tool node type: ${nodeType}`,
+          });
         }
       } catch (err) {
         await freeToolIpc.error({
           requestId,
-          error: err instanceof Error ? err.message : String(err)
-        })
+          error: err instanceof Error ? err.message : String(err),
+        });
       }
-    }
+    };
 
-    const api = getApi()
-    if (!api) return
-    api.on('free-tool:execute', handler)
+    const api = getApi();
+    if (!api) return;
+    api.on("free-tool:execute", handler);
     return () => {
-      api.removeListener('free-tool:execute', handler)
-    }
-  }, [])
+      api.removeListener("free-tool:execute", handler);
+    };
+  }, []);
 }
diff --git a/src/workflow/hooks/useUndoRedo.ts b/src/workflow/hooks/useUndoRedo.ts
index a74ca648..903faf5f 100644
--- a/src/workflow/hooks/useUndoRedo.ts
+++ b/src/workflow/hooks/useUndoRedo.ts
@@ -1,43 +1,49 @@
 /**
  * Undo/Redo hook using command pattern.
  */
-import { useState, useCallback } from 'react'
+import { useState, useCallback } from "react";
 
 export interface Command {
-  type: string
-  execute: () => void
-  undo: () => void
+  type: string;
+  execute: () => void;
+  undo: () => void;
 }
 
 export function useUndoRedo() {
-  const [undoStack, setUndoStack] = useState<Command[]>([])
-  const [redoStack, setRedoStack] = useState<Command[]>([])
+  const [undoStack, setUndoStack] = useState<Command[]>([]);
+  const [redoStack, setRedoStack] = useState<Command[]>([]);
 
   const execute = useCallback((command: Command) => {
-    command.execute()
-    setUndoStack(prev => [...prev, command])
-    setRedoStack([])
-  }, [])
+    command.execute();
+    setUndoStack((prev) => [...prev, command]);
+    setRedoStack([]);
+  }, []);
 
   const undo = useCallback(() => {
-    setUndoStack(prev => {
-      if (prev.length === 0) return prev
-      const command = prev[prev.length - 1]
-      command.undo()
-      setRedoStack(r => [...r, command])
-      return prev.slice(0, -1)
-    })
-  }, [])
+    setUndoStack((prev) => {
+      if (prev.length === 0) return prev;
+      const command = prev[prev.length - 1];
+      command.undo();
+      setRedoStack((r) => [...r, command]);
+      return prev.slice(0, -1);
+    });
+  }, []);
 
   const redo = useCallback(() => {
-    setRedoStack(prev => {
-      if (prev.length === 0) return prev
-      const command = prev[prev.length - 1]
-      command.execute()
-      setUndoStack(u => [...u, command])
-      return prev.slice(0, -1)
-    })
-  }, [])
+    setRedoStack((prev) => {
+      if (prev.length === 0) return prev;
+      const command = prev[prev.length - 1];
+      command.execute();
+      setUndoStack((u) => [...u, command]);
+      return prev.slice(0, -1);
+    });
+  }, []);
 
-  return { execute, undo, redo, canUndo: undoStack.length > 0, canRedo: redoStack.length > 0 }
+  return {
+    execute,
+    undo,
+    redo,
+    canUndo: undoStack.length > 0,
+    canRedo: redoStack.length > 0,
+  };
 }
diff --git a/src/workflow/ipc/ipc-client.ts b/src/workflow/ipc/ipc-client.ts
index 0d0240d4..d44e6164 100644
--- a/src/workflow/ipc/ipc-client.ts
+++ b/src/workflow/ipc/ipc-client.ts
@@ -12,184 +12,248 @@ import type {
   WorkflowSummary,
   CostEstimate,
   BudgetConfig,
-  ApiKeyConfig
-} from '@/workflow/types/ipc'
-import type { Workflow } from '@/workflow/types/workflow'
-import type { NodeExecutionRecord, EdgeStatus } from '@/workflow/types/execution'
-import type { NodeTypeDefinition, WaveSpeedModel } from '@/workflow/types/node-defs'
-import { browserWorkflowAPI } from '@/workflow/browser/workflow-api'
+  ApiKeyConfig,
+} from "@/workflow/types/ipc";
+import type { Workflow } from "@/workflow/types/workflow";
+import type {
+  NodeExecutionRecord,
+  EdgeStatus,
+} from "@/workflow/types/execution";
+import type {
+  NodeTypeDefinition,
+  WaveSpeedModel,
+} from "@/workflow/types/node-defs";
+import { browserWorkflowAPI } from "@/workflow/browser/workflow-api";
 
 function getApi() {
-  if (typeof window === 'undefined') return undefined
-  return window.workflowAPI ?? browserWorkflowAPI
+  if (typeof window === "undefined") return undefined;
+  return window.workflowAPI ?? browserWorkflowAPI;
 }
 
 export function invoke<C extends IpcChannelName>(
   channel: C,
-  args: IpcArgs<C>
+  args: IpcArgs<C>,
 ): Promise<IpcResult<C>> {
-  const api = getApi()
-  if (!api) return Promise.reject(new Error('Workflow API not available'))
-  return api.invoke(channel, args) as Promise<IpcResult<C>>
+  const api = getApi();
+  if (!api) return Promise.reject(new Error("Workflow API not available"));
+  return api.invoke(channel, args) as Promise<IpcResult<C>>;
 }
 
 export function on<C extends IpcChannelName>(
   channel: C,
-  callback: (args: IpcArgs<C>) => void
+  callback: (args: IpcArgs<C>) => void,
 ): void {
-  const api = getApi()
-  if (!api) return
-  api.on(channel, callback as (...args: unknown[]) => void)
+  const api = getApi();
+  if (!api) return;
+  api.on(channel, callback as (...args: unknown[]) => void);
 }
 
 export function removeListener<C extends IpcChannelName>(
   channel: C,
-  callback: (args: IpcArgs<C>) => void
+  callback: (args: IpcArgs<C>) => void,
 ): void {
-  const api = getApi()
-  if (!api) return
-  api.removeListener(channel, callback as (...args: unknown[]) => void)
+  const api = getApi();
+  if (!api) return;
+  api.removeListener(channel, callback as (...args: unknown[]) => void);
 }
 
-
 // ─── Workflow IPC ────────────────────────────────────────────────────────────
 
 export const workflowIpc = {
   create: (input: CreateWorkflowInput): Promise<Workflow> =>
-    invoke('workflow:create', input),
+    invoke("workflow:create", input),
   save: (input: SaveWorkflowInput): Promise<void> =>
-    invoke('workflow:save', input),
-  load: (id: string): Promise<Workflow> =>
-    invoke('workflow:load', { id }),
+    invoke("workflow:save", input),
+  load: (id: string): Promise<Workflow> => invoke("workflow:load", { id }),
   list: (): Promise<WorkflowSummary[]> =>
-    invoke('workflow:list', undefined as void),
+    invoke("workflow:list", undefined as void),
   rename: (id: string, name: string): Promise<void> =>
-    invoke('workflow:rename', { id, name }),
-  delete: (id: string): Promise<void> =>
-    invoke('workflow:delete', { id }),
+    invoke("workflow:rename", { id, name }),
+  delete: (id: string): Promise<void> => invoke("workflow:delete", { id }),
   duplicate: (id: string): Promise<Workflow> =>
-    invoke('workflow:duplicate', { id })
-}
+    invoke("workflow:duplicate", { id }),
+};
 
 // ─── History IPC ─────────────────────────────────────────────────────────────
 
 export const historyIpc = {
   list: (nodeId: string): Promise<NodeExecutionRecord[]> =>
-    invoke('history:list', { nodeId }),
+    invoke("history:list", { nodeId }),
   /** Delete a single execution record and its local result files */
   delete: (executionId: string): Promise<void> =>
-    invoke('history:delete', { executionId }),
+    invoke("history:delete", { executionId }),
   /** Delete ALL execution records for a node and their local result files */
   deleteAll: (nodeId: string): Promise<void> =>
-    invoke('history:delete-all', { nodeId }),
+    invoke("history:delete-all", { nodeId }),
   setCurrent: (nodeId: string, executionId: string): Promise<void> =>
-    invoke('history:set-current', { nodeId, executionId }),
+    invoke("history:set-current", { nodeId, executionId }),
   star: (executionId: string, starred: boolean): Promise<void> =>
-    invoke('history:star', { executionId, starred }),
+    invoke("history:star", { executionId, starred }),
   score: (executionId: string, score: number): Promise<void> =>
-    invoke('history:score', { executionId, score })
-}
+    invoke("history:score", { executionId, score }),
+};
 
 // ─── Cost IPC ────────────────────────────────────────────────────────────────
 
 export const costIpc = {
   estimate: (workflowId: string, nodeIds: string[]): Promise<CostEstimate> =>
-    invoke('cost:estimate', { workflowId, nodeIds }),
+    invoke("cost:estimate", { workflowId, nodeIds }),
   getBudget: (): Promise<BudgetConfig> =>
-    invoke('cost:get-budget', undefined as void),
+    invoke("cost:get-budget", undefined as void),
   setBudget: (config: BudgetConfig): Promise<void> =>
-    invoke('cost:set-budget', config),
+    invoke("cost:set-budget", config),
   getDailySpend: (): Promise<number> =>
-    invoke('cost:get-daily-spend', undefined as void)
-}
+    invoke("cost:get-daily-spend", undefined as void),
+};
 
 // ─── Settings IPC ────────────────────────────────────────────────────────────
 
 export const settingsIpc = {
   getApiKeys: (): Promise<ApiKeyConfig> =>
-    invoke('settings:get-api-keys', undefined as void),
+    invoke("settings:get-api-keys", undefined as void),
   setApiKeys: (config: ApiKeyConfig): Promise<void> =>
-    invoke('settings:set-api-keys', config)
-}
+    invoke("settings:set-api-keys", config),
+};
 
 // ─── Registry IPC ────────────────────────────────────────────────────────────
 
 export const registryIpc = {
   getAll: (): Promise<NodeTypeDefinition[]> =>
-    invoke('registry:get-all', undefined as void)
-}
+    invoke("registry:get-all", undefined as void),
+};
 
 // ─── Models IPC ──────────────────────────────────────────────────────────────
 
 export const modelsIpc = {
   /** Sync Desktop's model list to main process for workflow execution. */
   sync: (models: unknown[]): Promise<void> =>
-    rawInvoke('models:sync', models) as Promise<void>,
+    rawInvoke("models:sync", models) as Promise<void>,
   list: (): Promise<WaveSpeedModel[]> =>
-    invoke('models:list', undefined as void),
-  search: (query: string, category?: string, provider?: string): Promise<WaveSpeedModel[]> =>
-    invoke('models:search', { query, category, provider }),
+    invoke("models:list", undefined as void),
+  search: (
+    query: string,
+    category?: string,
+    provider?: string,
+  ): Promise<WaveSpeedModel[]> =>
+    invoke("models:search", { query, category, provider }),
   getSchema: (modelId: string): Promise<WaveSpeedModel | null> =>
-    invoke('models:get-schema', { modelId })
-}
+    invoke("models:get-schema", { modelId }),
+};
 
 // ─── Storage IPC ─────────────────────────────────────────────────────────────
 
 // Storage channels are not in the typed IpcChannelName union, so we use raw invoke
 const rawInvoke = (channel: string, args?: unknown): Promise<unknown> => {
-  const api = getApi()
-  if (!api) return Promise.reject(new Error('Workflow API not available (run in Electron)'))
-  return api.invoke(channel, args)
-}
+  const api = getApi();
+  if (!api)
+    return Promise.reject(
+      new Error("Workflow API not available (run in Electron)"),
+    );
+  return api.invoke(channel, args);
+};
 
 export const storageIpc = {
   getWorkflowSnapshot: (workflowId: string) =>
-    rawInvoke('storage:get-workflow-snapshot', { workflowId }),
-  getExecutionCache: (workflowId: string, nodeId: string, executionId: string) =>
-    rawInvoke('storage:get-execution-cache', { workflowId, nodeId, executionId }),
+    rawInvoke("storage:get-workflow-snapshot", { workflowId }),
+  getExecutionCache: (
+    workflowId: string,
+    nodeId: string,
+    executionId: string,
+  ) =>
+    rawInvoke("storage:get-execution-cache", {
+      workflowId,
+      nodeId,
+      executionId,
+    }),
   listNodeExecutions: (workflowId: string, nodeId: string) =>
-    rawInvoke('storage:list-node-executions', { workflowId, nodeId }) as Promise<string[]>,
+    rawInvoke("storage:list-node-executions", {
+      workflowId,
+      nodeId,
+    }) as Promise<string[]>,
   listUploadedFiles: (workflowId: string, nodeId: string) =>
-    rawInvoke('storage:list-uploaded-files', { workflowId, nodeId }) as Promise<string[]>,
-  saveUploadedFile: (workflowId: string, nodeId: string, filename: string, data: ArrayBuffer) =>
-    rawInvoke('storage:save-uploaded-file', { workflowId, nodeId, filename, data }) as Promise<string>,
+    rawInvoke("storage:list-uploaded-files", { workflowId, nodeId }) as Promise<
+      string[]
+    >,
+  saveUploadedFile: (
+    workflowId: string,
+    nodeId: string,
+    filename: string,
+    data: ArrayBuffer,
+  ) =>
+    rawInvoke("storage:save-uploaded-file", {
+      workflowId,
+      nodeId,
+      filename,
+      data,
+    }) as Promise<string>,
   copyUploadedFile: (workflowId: string, nodeId: string, sourcePath: string) =>
-    rawInvoke('storage:copy-uploaded-file', { workflowId, nodeId, sourcePath }) as Promise<string>,
+    rawInvoke("storage:copy-uploaded-file", {
+      workflowId,
+      nodeId,
+      sourcePath,
+    }) as Promise<string>,
   getWorkflowDiskUsage: (workflowId: string) =>
-    rawInvoke('storage:get-workflow-disk-usage', { workflowId }) as Promise<number>,
+    rawInvoke("storage:get-workflow-disk-usage", {
+      workflowId,
+    }) as Promise<number>,
   deleteWorkflowFiles: (workflowId: string) =>
-    rawInvoke('storage:delete-workflow-files', { workflowId }) as Promise<void>,
-  exportWorkflowJson: (workflowId: string, workflowName: string, graphDefinition: unknown) =>
-    rawInvoke('storage:export-workflow-json', { workflowId, workflowName, graphDefinition }) as Promise<string | null>,
+    rawInvoke("storage:delete-workflow-files", { workflowId }) as Promise<void>,
+  exportWorkflowJson: (
+    workflowId: string,
+    workflowName: string,
+    graphDefinition: unknown,
+  ) =>
+    rawInvoke("storage:export-workflow-json", {
+      workflowId,
+      workflowName,
+      graphDefinition,
+    }) as Promise<string | null>,
   openArtifactsFolder: () =>
-    rawInvoke('storage:open-artifacts-folder', {}) as Promise<void>,
+    rawInvoke("storage:open-artifacts-folder", {}) as Promise<void>,
   openWorkflowFolder: (workflowId: string) =>
-    rawInvoke('storage:open-workflow-folder', { workflowId }) as Promise<void>,
+    rawInvoke("storage:open-workflow-folder", { workflowId }) as Promise<void>,
   importWorkflowJson: () =>
-    rawInvoke('storage:import-workflow-json') as Promise<{ id: string; name: string } | null>,
+    rawInvoke("storage:import-workflow-json") as Promise<{
+      id: string;
+      name: string;
+    } | null>,
   cleanWorkflowOutputs: (workflowId: string) =>
-    rawInvoke('storage:clean-workflow-outputs', { workflowId }) as Promise<void>,
+    rawInvoke("storage:clean-workflow-outputs", {
+      workflowId,
+    }) as Promise<void>,
   deleteNodeOutputs: (workflowId: string, nodeId: string) =>
-    rawInvoke('storage:delete-node-outputs', { workflowId, nodeId }) as Promise<void>
-}
+    rawInvoke("storage:delete-node-outputs", {
+      workflowId,
+      nodeId,
+    }) as Promise<void>,
+};
 
 // ─── Free-tool (renderer execution) IPC ─────────────────────────────────────
 
 export const freeToolIpc = {
-  complete: (payload: { requestId: string; workflowId: string; nodeId: string; outputData: string; outputExt: string; outputPrefix: string }) =>
-    rawInvoke('free-tool:complete', payload),
+  complete: (payload: {
+    requestId: string;
+    workflowId: string;
+    nodeId: string;
+    outputData: string;
+    outputExt: string;
+    outputPrefix: string;
+  }) => rawInvoke("free-tool:complete", payload),
   error: (payload: { requestId: string; error: string }) =>
-    rawInvoke('free-tool:error', payload)
-}
+    rawInvoke("free-tool:error", payload),
+};
 
 // ─── Upload IPC ──────────────────────────────────────────────────────────────
 
 export const uploadIpc = {
   uploadFile: async (file: File): Promise<string> => {
-    const arrayBuffer = await file.arrayBuffer()
-    return rawInvoke('upload:file', { fileData: arrayBuffer, filename: file.name }) as Promise<string>
-  }
-}
+    const arrayBuffer = await file.arrayBuffer();
+    return rawInvoke("upload:file", {
+      fileData: arrayBuffer,
+      filename: file.name,
+    }) as Promise<string>;
+  },
+};
 
 // ─── Default export ──────────────────────────────────────────────────────────
 
@@ -202,7 +266,7 @@ export const ipcClient = {
   models: modelsIpc,
   storage: storageIpc,
   upload: uploadIpc,
-  freeTool: freeToolIpc
-}
+  freeTool: freeToolIpc,
+};
 
-export default ipcClient
+export default ipcClient;
diff --git a/src/workflow/lib/free-tool-runner.ts b/src/workflow/lib/free-tool-runner.ts
index e4fdcbdf..bffa6b40 100644
--- a/src/workflow/lib/free-tool-runner.ts
+++ b/src/workflow/lib/free-tool-runner.ts
@@ -2,78 +2,86 @@
  * Standalone runner for workflow free-tools that use Web Workers.
  * Called from free-tool:execute IPC handler in renderer.
  */
-type ModelType = 'slim' | 'medium' | 'thick'
-type ScaleType = '2x' | '3x' | '4x'
-type BgRemoverModel = 'isnet_quint8' | 'isnet_fp16' | 'isnet'
+type ModelType = "slim" | "medium" | "thick";
+type ScaleType = "2x" | "3x" | "4x";
+type BgRemoverModel = "isnet_quint8" | "isnet_fp16" | "isnet";
 
 interface ImageEnhancerParams {
-  model?: string
-  scale?: string
+  model?: string;
+  scale?: string;
 }
 
 interface BackgroundRemoverParams {
-  model?: string
+  model?: string;
 }
 
 function imageDataToFloat32(imageData: ImageData): Float32Array {
-  const { width, height, data } = imageData
-  const result = new Float32Array(width * height * 3)
+  const { width, height, data } = imageData;
+  const result = new Float32Array(width * height * 3);
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 4
-      const dstIdx = (y * width + x) * 3
-      result[dstIdx] = data[srcIdx] / 255
-      result[dstIdx + 1] = data[srcIdx + 1] / 255
-      result[dstIdx + 2] = data[srcIdx + 2] / 255
+      const srcIdx = (y * width + x) * 4;
+      const dstIdx = (y * width + x) * 3;
+      result[dstIdx] = data[srcIdx] / 255;
+      result[dstIdx + 1] = data[srcIdx + 1] / 255;
+      result[dstIdx + 2] = data[srcIdx + 2] / 255;
     }
   }
-  return result
+  return result;
 }
 
-function float32ToImageData(data: Float32Array, width: number, height: number): ImageData {
-  const imageData = new ImageData(width, height)
-  const pixels = imageData.data
+function float32ToImageData(
+  data: Float32Array,
+  width: number,
+  height: number,
+): ImageData {
+  const imageData = new ImageData(width, height);
+  const pixels = imageData.data;
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
-      const srcIdx = (y * width + x) * 3
-      const dstIdx = (y * width + x) * 4
-      pixels[dstIdx] = Math.round(data[srcIdx] * 255)
-      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255)
-      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255)
-      pixels[dstIdx + 3] = 255
+      const srcIdx = (y * width + x) * 3;
+      const dstIdx = (y * width + x) * 4;
+      pixels[dstIdx] = Math.round(data[srcIdx] * 255);
+      pixels[dstIdx + 1] = Math.round(data[srcIdx + 1] * 255);
+      pixels[dstIdx + 2] = Math.round(data[srcIdx + 2] * 255);
+      pixels[dstIdx + 3] = 255;
     }
   }
-  return imageData
+  return imageData;
 }
 
-function imageDataToDataURL(imageData: ImageData, width: number, height: number): string {
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d')!
-  ctx.putImageData(imageData, 0, 0)
-  return canvas.toDataURL('image/png')
+function imageDataToDataURL(
+  imageData: ImageData,
+  width: number,
+  height: number,
+): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
 }
 
 function dataURLToBase64(dataUrl: string): string {
-  const base64 = dataUrl.split(',')[1]
-  if (!base64) throw new Error('Invalid data URL')
-  return base64
+  const base64 = dataUrl.split(",")[1];
+  if (!base64) throw new Error("Invalid data URL");
+  return base64;
 }
 
 async function loadImageAsImageData(url: string): Promise<ImageData> {
-  const res = await fetch(url)
-  if (!res.ok) throw new Error(`Failed to fetch image: ${res.status}`)
-  const blob = await res.blob()
-  const bitmap = await createImageBitmap(blob)
-  const canvas = document.createElement('canvas')
-  canvas.width = bitmap.width
-  canvas.height = bitmap.height
-  const ctx = canvas.getContext('2d')!
-  ctx.drawImage(bitmap, 0, 0)
-  const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height)
-  bitmap.close()
-  return imageData
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch image: ${res.status}`);
+  const blob = await res.blob();
+  const bitmap = await createImageBitmap(blob);
+  const canvas = document.createElement("canvas");
+  canvas.width = bitmap.width;
+  canvas.height = bitmap.height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.drawImage(bitmap, 0, 0);
+  const imageData = ctx.getImageData(0, 0, bitmap.width, bitmap.height);
+  bitmap.close();
+  return imageData;
 }
 
 /**
@@ -82,60 +90,68 @@ async function loadImageAsImageData(url: string): Promise<ImageData> {
 export async function runImageEnhancer(
   inputUrl: string,
   params: ImageEnhancerParams,
-  onProgress?: (progress: number, message?: string) => void
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  const model = (params.model ?? 'slim') as ModelType
-  const scale = (params.scale ?? '2x') as ScaleType
+  const model = (params.model ?? "slim") as ModelType;
+  const scale = (params.scale ?? "2x") as ScaleType;
 
-  if (!['slim', 'medium', 'thick'].includes(model)) {
-    throw new Error(`Invalid model: ${model}`)
+  if (!["slim", "medium", "thick"].includes(model)) {
+    throw new Error(`Invalid model: ${model}`);
   }
-  if (!['2x', '3x', '4x'].includes(scale)) {
-    throw new Error(`Invalid scale: ${scale}`)
+  if (!["2x", "3x", "4x"].includes(scale)) {
+    throw new Error(`Invalid scale: ${scale}`);
   }
 
-  onProgress?.(5, 'Loading image...')
-  const imageData = await loadImageAsImageData(inputUrl)
+  onProgress?.(5, "Loading image...");
+  const imageData = await loadImageAsImageData(inputUrl);
 
-  const worker = new Worker(new URL('../../workers/upscaler.worker.ts', import.meta.url), { type: 'module' })
+  const worker = new Worker(
+    new URL("../../workers/upscaler.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
   return new Promise((resolve, reject) => {
     const handleMessage = (e: MessageEvent) => {
-      const { type, payload } = e.data
-      if (type === 'phase') {
-        onProgress?.(15, payload?.phase === 'download' ? 'Downloading model...' : 'Processing...')
-      } else if (type === 'progress') {
-        const p = payload?.progress ?? 0
-        onProgress?.(15 + Math.round(p * 0.8), 'Upscaling...')
-      } else if (type === 'loaded') {
-        onProgress?.(25, 'Model loaded, upscaling...')
+      const { type, payload } = e.data;
+      if (type === "phase") {
+        onProgress?.(
+          15,
+          payload?.phase === "download"
+            ? "Downloading model..."
+            : "Processing...",
+        );
+      } else if (type === "progress") {
+        const p = payload?.progress ?? 0;
+        onProgress?.(15 + Math.round(p * 0.8), "Upscaling...");
+      } else if (type === "loaded") {
+        onProgress?.(25, "Model loaded, upscaling...");
         worker.postMessage({
-          type: 'upscale',
-          payload: { imageData, id: 0 }
-        })
-      } else if (type === 'result') {
-        const { imageData: resultData, width, height } = payload
-        const dataUrl = imageDataToDataURL(resultData, width, height)
-        worker.terminate()
-        onProgress?.(100, 'Done')
-        resolve(dataURLToBase64(dataUrl))
-      } else if (type === 'error') {
-        worker.terminate()
-        reject(new Error(String(payload ?? 'Unknown error')))
+          type: "upscale",
+          payload: { imageData, id: 0 },
+        });
+      } else if (type === "result") {
+        const { imageData: resultData, width, height } = payload;
+        const dataUrl = imageDataToDataURL(resultData, width, height);
+        worker.terminate();
+        onProgress?.(100, "Done");
+        resolve(dataURLToBase64(dataUrl));
+      } else if (type === "error") {
+        worker.terminate();
+        reject(new Error(String(payload ?? "Unknown error")));
       }
-    }
+    };
 
-    worker.onmessage = handleMessage
+    worker.onmessage = handleMessage;
     worker.onerror = (ev) => {
-      worker.terminate()
-      reject(new Error(ev.message || 'Worker error'))
-    }
+      worker.terminate();
+      reject(new Error(ev.message || "Worker error"));
+    };
 
     worker.postMessage({
-      type: 'load',
-      payload: { model, scale, id: 0 }
-    })
-  })
+      type: "load",
+      payload: { model, scale, id: 0 },
+    });
+  });
 }
 
 /**
@@ -144,57 +160,65 @@ export async function runImageEnhancer(
 export async function runBackgroundRemover(
   inputUrl: string,
   params: BackgroundRemoverParams,
-  onProgress?: (progress: number, message?: string) => void
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  const model = (params.model ?? 'isnet_fp16') as BgRemoverModel
-  if (!['isnet_quint8', 'isnet_fp16', 'isnet'].includes(model)) {
-    throw new Error(`Invalid model: ${model}`)
+  const model = (params.model ?? "isnet_fp16") as BgRemoverModel;
+  if (!["isnet_quint8", "isnet_fp16", "isnet"].includes(model)) {
+    throw new Error(`Invalid model: ${model}`);
   }
 
-  onProgress?.(5, 'Loading image...')
-  const res = await fetch(inputUrl)
-  if (!res.ok) throw new Error(`Failed to fetch image: ${res.status}`)
-  const imageBlob = await res.blob()
+  onProgress?.(5, "Loading image...");
+  const res = await fetch(inputUrl);
+  if (!res.ok) throw new Error(`Failed to fetch image: ${res.status}`);
+  const imageBlob = await res.blob();
 
-  const worker = new Worker(new URL('../../workers/backgroundRemover.worker.ts', import.meta.url), { type: 'module' })
+  const worker = new Worker(
+    new URL("../../workers/backgroundRemover.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
   return new Promise((resolve, reject) => {
     const handleMessage = (e: MessageEvent) => {
-      const { type, payload } = e.data
-      if (type === 'phase') {
-        onProgress?.(20, payload?.phase === 'download' ? 'Downloading model...' : 'Removing background...')
-      } else if (type === 'progress') {
-        const p = payload?.progress ?? 0
-        onProgress?.(20 + Math.round(p * 0.75), 'Processing...')
-      } else if (type === 'result') {
-        const { arrayBuffer } = payload
-        worker.terminate()
-        onProgress?.(100, 'Done')
-        const blob = new Blob([arrayBuffer])
-        const reader = new FileReader()
+      const { type, payload } = e.data;
+      if (type === "phase") {
+        onProgress?.(
+          20,
+          payload?.phase === "download"
+            ? "Downloading model..."
+            : "Removing background...",
+        );
+      } else if (type === "progress") {
+        const p = payload?.progress ?? 0;
+        onProgress?.(20 + Math.round(p * 0.75), "Processing...");
+      } else if (type === "result") {
+        const { arrayBuffer } = payload;
+        worker.terminate();
+        onProgress?.(100, "Done");
+        const blob = new Blob([arrayBuffer]);
+        const reader = new FileReader();
         reader.onload = () => {
-          const dataUrl = reader.result as string
-          resolve(dataUrl.split(',')[1] ?? '')
-        }
-        reader.onerror = () => reject(new Error('Failed to read result'))
-        reader.readAsDataURL(blob)
-      } else if (type === 'error') {
-        worker.terminate()
-        reject(new Error(String(payload ?? 'Unknown error')))
+          const dataUrl = reader.result as string;
+          resolve(dataUrl.split(",")[1] ?? "");
+        };
+        reader.onerror = () => reject(new Error("Failed to read result"));
+        reader.readAsDataURL(blob);
+      } else if (type === "error") {
+        worker.terminate();
+        reject(new Error(String(payload ?? "Unknown error")));
       }
-    }
+    };
 
-    worker.onmessage = handleMessage
+    worker.onmessage = handleMessage;
     worker.onerror = (ev) => {
-      worker.terminate()
-      reject(new Error(ev.message || 'Worker error'))
-    }
+      worker.terminate();
+      reject(new Error(ev.message || "Worker error"));
+    };
 
     worker.postMessage({
-      type: 'process',
-      payload: { imageBlob, model, outputType: 'foreground', id: 0 }
-    })
-  })
+      type: "process",
+      payload: { imageBlob, model, outputType: "foreground", id: 0 },
+    });
+  });
 }
 
 /**
@@ -203,54 +227,63 @@ export async function runBackgroundRemover(
 export async function runFaceEnhancer(
   inputUrl: string,
   _params: Record<string, unknown>,
-  onProgress?: (progress: number, message?: string) => void
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  onProgress?.(5, 'Loading image...')
-  const imageData = await loadImageAsImageData(inputUrl)
-  const float32Data = imageDataToFloat32(imageData)
+  onProgress?.(5, "Loading image...");
+  const imageData = await loadImageAsImageData(inputUrl);
+  const float32Data = imageDataToFloat32(imageData);
 
-  const worker = new Worker(new URL('../../workers/faceEnhancer.worker.ts', import.meta.url), { type: 'module' })
+  const worker = new Worker(
+    new URL("../../workers/faceEnhancer.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
   return new Promise((resolve, reject) => {
     const handleMessage = (e: MessageEvent) => {
-      const { type, payload } = e.data
-      if (type === 'phase') {
-        onProgress?.(10, 'Processing...')
-      } else if (type === 'progress') {
-        const p = payload?.progress ?? 0
-        onProgress?.(10 + Math.round(p * 0.8), 'Enhancing faces...')
-      } else if (type === 'ready') {
-        onProgress?.(15, 'Model loaded, enhancing...')
-        const dataCopy = new Float32Array(float32Data)
+      const { type, payload } = e.data;
+      if (type === "phase") {
+        onProgress?.(10, "Processing...");
+      } else if (type === "progress") {
+        const p = payload?.progress ?? 0;
+        onProgress?.(10 + Math.round(p * 0.8), "Enhancing faces...");
+      } else if (type === "ready") {
+        onProgress?.(15, "Model loaded, enhancing...");
+        const dataCopy = new Float32Array(float32Data);
         worker.postMessage(
           {
-            type: 'enhance',
-            payload: { imageData: dataCopy, width: imageData.width, height: imageData.height, id: 0 }
+            type: "enhance",
+            payload: {
+              imageData: dataCopy,
+              width: imageData.width,
+              height: imageData.height,
+              id: 0,
+            },
           },
-          { transfer: [dataCopy.buffer] }
-        )
-      } else if (type === 'result') {
-        const { data, width, height } = payload
-        const float32 = data instanceof Float32Array ? data : new Float32Array(data)
-        const imageDataOut = float32ToImageData(float32, width, height)
-        const dataUrl = imageDataToDataURL(imageDataOut, width, height)
-        worker.terminate()
-        onProgress?.(100, 'Done')
-        resolve(dataURLToBase64(dataUrl))
-      } else if (type === 'error') {
-        worker.terminate()
-        reject(new Error(String(payload ?? 'Unknown error')))
+          { transfer: [dataCopy.buffer] },
+        );
+      } else if (type === "result") {
+        const { data, width, height } = payload;
+        const float32 =
+          data instanceof Float32Array ? data : new Float32Array(data);
+        const imageDataOut = float32ToImageData(float32, width, height);
+        const dataUrl = imageDataToDataURL(imageDataOut, width, height);
+        worker.terminate();
+        onProgress?.(100, "Done");
+        resolve(dataURLToBase64(dataUrl));
+      } else if (type === "error") {
+        worker.terminate();
+        reject(new Error(String(payload ?? "Unknown error")));
       }
-    }
+    };
 
-    worker.onmessage = handleMessage
+    worker.onmessage = handleMessage;
     worker.onerror = (ev) => {
-      worker.terminate()
-      reject(new Error(ev.message || 'Worker error'))
-    }
+      worker.terminate();
+      reject(new Error(ev.message || "Worker error"));
+    };
 
-    worker.postMessage({ type: 'init', payload: { id: 0, timeout: 600000 } })
-  })
+    worker.postMessage({ type: "init", payload: { id: 0, timeout: 600000 } });
+  });
 }
 
 /**
@@ -259,138 +292,160 @@ export async function runFaceEnhancer(
 export async function runVideoEnhancer(
   inputUrl: string,
   params: { model?: string; scale?: string },
-  onProgress?: (progress: number, message?: string) => void
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  const model = (params.model ?? 'slim') as ModelType
-  const scale = (params.scale ?? '2x') as ScaleType
-  if (!['slim', 'medium', 'thick'].includes(model)) throw new Error(`Invalid model: ${model}`)
-  if (!['2x', '3x', '4x'].includes(scale)) throw new Error(`Invalid scale: ${scale}`)
-
-  const { Muxer, ArrayBufferTarget } = await import('webm-muxer')
-  const video = document.createElement('video')
-  video.muted = true
-  video.crossOrigin = 'anonymous'
-  video.src = inputUrl
+  const model = (params.model ?? "slim") as ModelType;
+  const scale = (params.scale ?? "2x") as ScaleType;
+  if (!["slim", "medium", "thick"].includes(model))
+    throw new Error(`Invalid model: ${model}`);
+  if (!["2x", "3x", "4x"].includes(scale))
+    throw new Error(`Invalid scale: ${scale}`);
+
+  const { Muxer, ArrayBufferTarget } = await import("webm-muxer");
+  const video = document.createElement("video");
+  video.muted = true;
+  video.crossOrigin = "anonymous";
+  video.src = inputUrl;
 
   await new Promise<void>((resolve, reject) => {
-    video.onloadedmetadata = () => resolve()
-    video.onerror = () => reject(new Error('Failed to load video'))
-  })
-
-  const scaleMultiplier = parseInt(scale.replace('x', ''))
-  const targetFps = 30
-  const frameInterval = 1 / targetFps
-  const duration = video.duration
-  const totalFrames = Math.ceil(duration * targetFps)
-
-  const sourceCanvas = document.createElement('canvas')
-  sourceCanvas.width = video.videoWidth
-  sourceCanvas.height = video.videoHeight
-  const sourceCtx = sourceCanvas.getContext('2d')!
-
-  const outputCanvas = document.createElement('canvas')
-  outputCanvas.width = video.videoWidth * scaleMultiplier
-  outputCanvas.height = video.videoHeight * scaleMultiplier
-  const outputCtx = outputCanvas.getContext('2d')!
-
-  onProgress?.(2, 'Loading upscaler model...')
-  const upscalerWorker = new Worker(new URL('../../workers/upscaler.worker.ts', import.meta.url), { type: 'module' })
+    video.onloadedmetadata = () => resolve();
+    video.onerror = () => reject(new Error("Failed to load video"));
+  });
+
+  const scaleMultiplier = parseInt(scale.replace("x", ""));
+  const targetFps = 30;
+  const frameInterval = 1 / targetFps;
+  const duration = video.duration;
+  const totalFrames = Math.ceil(duration * targetFps);
+
+  const sourceCanvas = document.createElement("canvas");
+  sourceCanvas.width = video.videoWidth;
+  sourceCanvas.height = video.videoHeight;
+  const sourceCtx = sourceCanvas.getContext("2d")!;
+
+  const outputCanvas = document.createElement("canvas");
+  outputCanvas.width = video.videoWidth * scaleMultiplier;
+  outputCanvas.height = video.videoHeight * scaleMultiplier;
+  const outputCtx = outputCanvas.getContext("2d")!;
+
+  onProgress?.(2, "Loading upscaler model...");
+  const upscalerWorker = new Worker(
+    new URL("../../workers/upscaler.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
   await new Promise<void>((resolve, reject) => {
     const handler = (e: MessageEvent) => {
-      if (e.data.type === 'loaded') {
-        upscalerWorker.removeEventListener('message', handler)
-        resolve()
-      } else if (e.data.type === 'error') {
-        upscalerWorker.removeEventListener('message', handler)
-        reject(new Error(String(e.data.payload)))
+      if (e.data.type === "loaded") {
+        upscalerWorker.removeEventListener("message", handler);
+        resolve();
+      } else if (e.data.type === "error") {
+        upscalerWorker.removeEventListener("message", handler);
+        reject(new Error(String(e.data.payload)));
       }
-    }
-    upscalerWorker.onmessage = handler
-    upscalerWorker.postMessage({ type: 'load', payload: { model, scale, id: 0 } })
-  })
+    };
+    upscalerWorker.onmessage = handler;
+    upscalerWorker.postMessage({
+      type: "load",
+      payload: { model, scale, id: 0 },
+    });
+  });
 
   const upscaleFrame = (imageData: ImageData): Promise<string> => {
     return new Promise((resolve, reject) => {
       const handler = (e: MessageEvent) => {
-        if (e.data.type === 'result') {
-          upscalerWorker.removeEventListener('message', handler)
-          const { imageData: resultData, width, height } = e.data.payload
-          const dataUrl = imageDataToDataURL(resultData, width, height)
-          resolve(dataUrl)
-        } else if (e.data.type === 'error') {
-          upscalerWorker.removeEventListener('message', handler)
-          reject(new Error(String(e.data.payload)))
+        if (e.data.type === "result") {
+          upscalerWorker.removeEventListener("message", handler);
+          const { imageData: resultData, width, height } = e.data.payload;
+          const dataUrl = imageDataToDataURL(resultData, width, height);
+          resolve(dataUrl);
+        } else if (e.data.type === "error") {
+          upscalerWorker.removeEventListener("message", handler);
+          reject(new Error(String(e.data.payload)));
         }
-      }
-      upscalerWorker.onmessage = handler
-      upscalerWorker.postMessage({ type: 'upscale', payload: { imageData, id: 0 } })
-    })
-  }
-
-  const muxerTarget = new ArrayBufferTarget()
+      };
+      upscalerWorker.onmessage = handler;
+      upscalerWorker.postMessage({
+        type: "upscale",
+        payload: { imageData, id: 0 },
+      });
+    });
+  };
+
+  const muxerTarget = new ArrayBufferTarget();
   const muxer = new Muxer({
     target: muxerTarget,
     video: {
-      codec: 'V_VP9',
+      codec: "V_VP9",
       width: outputCanvas.width,
       height: outputCanvas.height,
-      frameRate: targetFps
+      frameRate: targetFps,
     },
-    firstTimestampBehavior: 'offset'
-  })
+    firstTimestampBehavior: "offset",
+  });
 
   const encoder = new VideoEncoder({
     output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
-    error: (e) => console.error('Encoder error:', e)
-  })
+    error: (e) => console.error("Encoder error:", e),
+  });
   encoder.configure({
-    codec: 'vp09.00.10.08',
+    codec: "vp09.00.10.08",
     width: outputCanvas.width,
     height: outputCanvas.height,
     bitrate: 8_000_000,
-    framerate: targetFps
-  })
+    framerate: targetFps,
+  });
 
-  video.pause()
+  video.pause();
   for (let i = 0; i < totalFrames; i++) {
-    const t = i * frameInterval
-    video.currentTime = t
-    await new Promise<void>((r) => { video.onseeked = () => r() })
-    sourceCtx.drawImage(video, 0, 0)
-    const imageData = sourceCtx.getImageData(0, 0, video.videoWidth, video.videoHeight)
-    const dataUrl = await upscaleFrame(imageData)
-    const img = new Image()
+    const t = i * frameInterval;
+    video.currentTime = t;
+    await new Promise<void>((r) => {
+      video.onseeked = () => r();
+    });
+    sourceCtx.drawImage(video, 0, 0);
+    const imageData = sourceCtx.getImageData(
+      0,
+      0,
+      video.videoWidth,
+      video.videoHeight,
+    );
+    const dataUrl = await upscaleFrame(imageData);
+    const img = new Image();
     await new Promise<void>((r) => {
       img.onload = () => {
-        outputCtx.drawImage(img, 0, 0)
-        r()
-      }
-      img.src = dataUrl
-    })
-    const frame = new VideoFrame(outputCanvas, { timestamp: Math.round(t * 1_000_000) })
-    encoder.encode(frame, { keyFrame: i % 30 === 0 })
-    frame.close()
-    const pct = 5 + Math.round(((i + 1) / totalFrames) * 90)
-    onProgress?.(pct, `Frame ${i + 1}/${totalFrames}`)
+        outputCtx.drawImage(img, 0, 0);
+        r();
+      };
+      img.src = dataUrl;
+    });
+    const frame = new VideoFrame(outputCanvas, {
+      timestamp: Math.round(t * 1_000_000),
+    });
+    encoder.encode(frame, { keyFrame: i % 30 === 0 });
+    frame.close();
+    const pct = 5 + Math.round(((i + 1) / totalFrames) * 90);
+    onProgress?.(pct, `Frame ${i + 1}/${totalFrames}`);
   }
 
-  upscalerWorker.terminate()
-  await encoder.flush()
-  encoder.close()
-  muxer.finalize()
-  onProgress?.(98, 'Finalizing...')
+  upscalerWorker.terminate();
+  await encoder.flush();
+  encoder.close();
+  muxer.finalize();
+  onProgress?.(98, "Finalizing...");
 
-  const buffer = muxerTarget.buffer
-  if (!buffer || buffer.byteLength === 0) throw new Error('Encoder produced no output')
+  const buffer = muxerTarget.buffer;
+  if (!buffer || buffer.byteLength === 0)
+    throw new Error("Encoder produced no output");
 
-  const blob = new Blob([buffer], { type: 'video/webm' })
+  const blob = new Blob([buffer], { type: "video/webm" });
   return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve((reader.result as string).split(',')[1] ?? '')
-    reader.onerror = () => reject(new Error('Failed to read video'))
-    reader.readAsDataURL(blob)
-  })
+    const reader = new FileReader();
+    reader.onload = () =>
+      resolve((reader.result as string).split(",")[1] ?? "");
+    reader.onerror = () => reject(new Error("Failed to read video"));
+    reader.readAsDataURL(blob);
+  });
 }
 
 /**
@@ -400,82 +455,115 @@ export async function runFaceSwapper(
   sourceUrl: string,
   targetUrl: string,
   _params: Record<string, unknown>,
-  onProgress?: (progress: number, message?: string) => void
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  onProgress?.(5, 'Loading images...')
+  onProgress?.(5, "Loading images...");
   const [sourceImageData, targetImageData] = await Promise.all([
     loadImageAsImageData(sourceUrl),
-    loadImageAsImageData(targetUrl)
-  ])
+    loadImageAsImageData(targetUrl),
+  ]);
 
-  const worker = new Worker(new URL('../../workers/faceSwapper.worker.ts', import.meta.url), { type: 'module' })
+  const worker = new Worker(
+    new URL("../../workers/faceSwapper.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
   const initPromise = new Promise<void>((resolve, reject) => {
     const handler = (e: MessageEvent) => {
-      if (e.data.type === 'ready') {
-        worker.removeEventListener('message', handler)
-        resolve()
-      } else if (e.data.type === 'error') {
-        worker.removeEventListener('message', handler)
-        reject(new Error(String(e.data.payload)))
+      if (e.data.type === "ready") {
+        worker.removeEventListener("message", handler);
+        resolve();
+      } else if (e.data.type === "error") {
+        worker.removeEventListener("message", handler);
+        reject(new Error(String(e.data.payload)));
       }
-    }
-    worker.onmessage = handler
-    worker.postMessage({ type: 'init', payload: { id: 0, timeout: 600000, enableEnhancement: false } })
-  })
-
-  onProgress?.(10, 'Initializing models...')
-  await initPromise
-
-  const detectFaces = (imageData: ImageData, imageId: 'source' | 'target'): Promise<Array<{ landmarks: number[][]; box: { x: number; y: number; width: number; height: number; confidence: number } }>> => {
+    };
+    worker.onmessage = handler;
+    worker.postMessage({
+      type: "init",
+      payload: { id: 0, timeout: 600000, enableEnhancement: false },
+    });
+  });
+
+  onProgress?.(10, "Initializing models...");
+  await initPromise;
+
+  const detectFaces = (
+    imageData: ImageData,
+    imageId: "source" | "target",
+  ): Promise<
+    Array<{
+      landmarks: number[][];
+      box: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        confidence: number;
+      };
+    }>
+  > => {
     return new Promise((resolve, reject) => {
-      const float32 = imageDataToFloat32(imageData)
-      const id = Math.floor(Math.random() * 1e6)
+      const float32 = imageDataToFloat32(imageData);
+      const id = Math.floor(Math.random() * 1e6);
       const handler = (e: MessageEvent) => {
-        if (e.data.type === 'detectResult' && e.data.payload?.id === id) {
-          worker.removeEventListener('message', handler)
-          resolve(e.data.payload.faces ?? [])
-        } else if (e.data.type === 'error') {
-          worker.removeEventListener('message', handler)
-          reject(new Error(String(e.data.payload)))
+        if (e.data.type === "detectResult" && e.data.payload?.id === id) {
+          worker.removeEventListener("message", handler);
+          resolve(e.data.payload.faces ?? []);
+        } else if (e.data.type === "error") {
+          worker.removeEventListener("message", handler);
+          reject(new Error(String(e.data.payload)));
         }
-      }
-      worker.onmessage = handler
+      };
+      worker.onmessage = handler;
       worker.postMessage(
-        { type: 'detect', payload: { imageData: float32, width: imageData.width, height: imageData.height, imageId, id } },
-        { transfer: [float32.buffer] }
-      )
-    })
-  }
+        {
+          type: "detect",
+          payload: {
+            imageData: float32,
+            width: imageData.width,
+            height: imageData.height,
+            imageId,
+            id,
+          },
+        },
+        { transfer: [float32.buffer] },
+      );
+    });
+  };
 
-  onProgress?.(30, 'Detecting faces...')
+  onProgress?.(30, "Detecting faces...");
   // Detect faces sequentially to avoid "Session already started" errors from ONNX Runtime
-  const sourceFaces = await detectFaces(sourceImageData, 'source')
-  const targetFaces = await detectFaces(targetImageData, 'target')
+  const sourceFaces = await detectFaces(sourceImageData, "source");
+  const targetFaces = await detectFaces(targetImageData, "target");
 
-  if (!sourceFaces.length) throw new Error('No face found in source image')
-  if (!targetFaces.length) throw new Error('No face found in target image')
+  if (!sourceFaces.length) throw new Error("No face found in source image");
+  if (!targetFaces.length) throw new Error("No face found in target image");
 
-  onProgress?.(50, 'Swapping faces...')
+  onProgress?.(50, "Swapping faces...");
   const result = await new Promise<string>((resolve, reject) => {
-    const id = Math.floor(Math.random() * 1e6)
+    const id = Math.floor(Math.random() * 1e6);
     const handler = (e: MessageEvent) => {
-      if (e.data.type === 'swapResult' && e.data.payload?.id === id) {
-        worker.removeEventListener('message', handler)
-        const { data, width, height } = e.data.payload
-        const imgData = float32ToImageData(data instanceof Float32Array ? data : new Float32Array(data), width, height)
-        resolve(imageDataToDataURL(imgData, width, height))
-      } else if (e.data.type === 'error') {
-        worker.removeEventListener('message', handler)
-        reject(new Error(String(e.data.payload)))
+      if (e.data.type === "swapResult" && e.data.payload?.id === id) {
+        worker.removeEventListener("message", handler);
+        const { data, width, height } = e.data.payload;
+        const imgData = float32ToImageData(
+          data instanceof Float32Array ? data : new Float32Array(data),
+          width,
+          height,
+        );
+        resolve(imageDataToDataURL(imgData, width, height));
+      } else if (e.data.type === "error") {
+        worker.removeEventListener("message", handler);
+        reject(new Error(String(e.data.payload)));
       }
-    }
-    worker.onmessage = handler
-    const srcF32 = imageDataToFloat32(sourceImageData)
-    const tgtF32 = imageDataToFloat32(targetImageData)
+    };
+    worker.onmessage = handler;
+    const srcF32 = imageDataToFloat32(sourceImageData);
+    const tgtF32 = imageDataToFloat32(targetImageData);
     worker.postMessage(
       {
-        type: 'swap',
+        type: "swap",
         payload: {
           sourceImage: srcF32,
           sourceWidth: sourceImageData.width,
@@ -484,81 +572,98 @@ export async function runFaceSwapper(
           targetImage: tgtF32,
           targetWidth: targetImageData.width,
           targetHeight: targetImageData.height,
-          targetFaces: targetFaces.map(f => ({ landmarks: f.landmarks, box: f.box })),
-          id
-        }
+          targetFaces: targetFaces.map((f) => ({
+            landmarks: f.landmarks,
+            box: f.box,
+          })),
+          id,
+        },
       },
-      { transfer: [srcF32.buffer, tgtF32.buffer] }
-    )
-  })
+      { transfer: [srcF32.buffer, tgtF32.buffer] },
+    );
+  });
 
-  worker.terminate()
-  onProgress?.(100, 'Done')
-  return dataURLToBase64(result)
+  worker.terminate();
+  onProgress?.(100, "Done");
+  return dataURLToBase64(result);
 }
 
 /** Convert mask image to Float32Array (alpha or luminance > 128 = 1) */
-async function loadMaskAsFloat32(url: string, width: number, height: number): Promise<Float32Array> {
-  const res = await fetch(url)
-  if (!res.ok) throw new Error(`Failed to fetch mask: ${res.status}`)
-  const blob = await res.blob()
-  const bitmap = await createImageBitmap(blob)
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  const ctx = canvas.getContext('2d')!
-  ctx.drawImage(bitmap, 0, 0, width, height)
-  bitmap.close()
-
-  const imageData = ctx.getImageData(0, 0, width, height)
-  const { data } = imageData
-  const float32 = new Float32Array(width * height)
+async function loadMaskAsFloat32(
+  url: string,
+  width: number,
+  height: number,
+): Promise<Float32Array> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Failed to fetch mask: ${res.status}`);
+  const blob = await res.blob();
+  const bitmap = await createImageBitmap(blob);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d")!;
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  bitmap.close();
+
+  const imageData = ctx.getImageData(0, 0, width, height);
+  const { data } = imageData;
+  const float32 = new Float32Array(width * height);
   for (let i = 0; i < width * height; i++) {
-    const r = data[i * 4]
-    const g = data[i * 4 + 1]
-    const b = data[i * 4 + 2]
-    const a = data[i * 4 + 3]
+    const r = data[i * 4];
+    const g = data[i * 4 + 1];
+    const b = data[i * 4 + 2];
+    const a = data[i * 4 + 3];
     // Transparent pixels are always background (0).
     // For opaque pixels, use luminance to decide: white = mask, black = background.
     // This handles both:
     //  - MaskEditor output (opaque black/white, alpha always 255)
     //  - Segment-anything output (transparent bg + opaque white mask)
     if (a <= 128) {
-      float32[i] = 0
+      float32[i] = 0;
     } else {
-      float32[i] = (r > 128 || g > 128 || b > 128) ? 1 : 0
+      float32[i] = r > 128 || g > 128 || b > 128 ? 1 : 0;
     }
   }
-  return float32
+  return float32;
 }
 
 /** Convert image to Float32Array CHW 0-1 for LaMa */
-async function loadImageAsFloat32CHW(url: string): Promise<{ data: Float32Array; width: number; height: number }> {
-  const imageData = await loadImageAsImageData(url)
-  const { data, width, height } = imageData
-  const float32 = new Float32Array(3 * width * height)
+async function loadImageAsFloat32CHW(
+  url: string,
+): Promise<{ data: Float32Array; width: number; height: number }> {
+  const imageData = await loadImageAsImageData(url);
+  const { data, width, height } = imageData;
+  const float32 = new Float32Array(3 * width * height);
   for (let i = 0; i < width * height; i++) {
-    float32[i] = data[i * 4] / 255
-    float32[width * height + i] = data[i * 4 + 1] / 255
-    float32[2 * width * height + i] = data[i * 4 + 2] / 255
+    float32[i] = data[i * 4] / 255;
+    float32[width * height + i] = data[i * 4 + 1] / 255;
+    float32[2 * width * height + i] = data[i * 4 + 2] / 255;
   }
-  return { data: float32, width, height }
+  return { data: float32, width, height };
 }
 
-function float32CHWToDataURL(data: Float32Array, width: number, height: number): string {
-  const imageData = new ImageData(width, height)
-  const out = imageData.data
+function float32CHWToDataURL(
+  data: Float32Array,
+  width: number,
+  height: number,
+): string {
+  const imageData = new ImageData(width, height);
+  const out = imageData.data;
   for (let i = 0; i < width * height; i++) {
-    out[i * 4] = Math.round(Math.min(1, Math.max(0, data[i])) * 255)
-    out[i * 4 + 1] = Math.round(Math.min(1, Math.max(0, data[width * height + i])) * 255)
-    out[i * 4 + 2] = Math.round(Math.min(1, Math.max(0, data[2 * width * height + i])) * 255)
-    out[i * 4 + 3] = 255
+    out[i * 4] = Math.round(Math.min(1, Math.max(0, data[i])) * 255);
+    out[i * 4 + 1] = Math.round(
+      Math.min(1, Math.max(0, data[width * height + i])) * 255,
+    );
+    out[i * 4 + 2] = Math.round(
+      Math.min(1, Math.max(0, data[2 * width * height + i])) * 255,
+    );
+    out[i * 4 + 3] = 255;
   }
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  canvas.getContext('2d')!.putImageData(imageData, 0, 0)
-  return canvas.toDataURL('image/png')
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  canvas.getContext("2d")!.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
 }
 
 /**
@@ -568,56 +673,73 @@ export async function runImageEraser(
   imageUrl: string,
   maskUrl: string,
   _params: Record<string, unknown>,
-  onProgress?: (progress: number, message?: string) => void
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  onProgress?.(5, 'Loading image and mask...')
-  const { data: imageData, width, height } = await loadImageAsFloat32CHW(imageUrl)
-  const maskData = await loadMaskAsFloat32(maskUrl, width, height)
-
-  const worker = new Worker(new URL('../../workers/imageEraser.worker.ts', import.meta.url), { type: 'module' })
+  onProgress?.(5, "Loading image and mask...");
+  const {
+    data: imageData,
+    width,
+    height,
+  } = await loadImageAsFloat32CHW(imageUrl);
+  const maskData = await loadMaskAsFloat32(maskUrl, width, height);
+
+  const worker = new Worker(
+    new URL("../../workers/imageEraser.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
   return new Promise((resolve, reject) => {
     const handleMessage = (e: MessageEvent) => {
-      const { type, payload } = e.data
-      if (type === 'phase') {
-        onProgress?.(15, 'Processing...')
-      } else if (type === 'progress') {
-        const p = payload?.progress ?? 0
-        onProgress?.(15 + Math.round(p * 0.8), 'Inpainting...')
-      } else if (type === 'ready') {
-        onProgress?.(20, 'Model loaded, processing...')
-        const imgCopy = new Float32Array(imageData)
-        const maskCopy = new Float32Array(maskData)
+      const { type, payload } = e.data;
+      if (type === "phase") {
+        onProgress?.(15, "Processing...");
+      } else if (type === "progress") {
+        const p = payload?.progress ?? 0;
+        onProgress?.(15 + Math.round(p * 0.8), "Inpainting...");
+      } else if (type === "ready") {
+        onProgress?.(20, "Model loaded, processing...");
+        const imgCopy = new Float32Array(imageData);
+        const maskCopy = new Float32Array(maskData);
         worker.postMessage(
-          { type: 'process', payload: { imageData: imgCopy, maskData: maskCopy, width, height, id: 0 } },
-          { transfer: [imgCopy.buffer, maskCopy.buffer] }
-        )
-      } else if (type === 'result') {
-        const { data, width: w, height: h } = payload
-        const result = data instanceof Float32Array ? data : new Float32Array(data)
-        const dataUrl = float32CHWToDataURL(result, w, h)
-        worker.terminate()
-        onProgress?.(100, 'Done')
-        resolve(dataURLToBase64(dataUrl))
-      } else if (type === 'error') {
-        worker.terminate()
-        reject(new Error(String(payload ?? 'Unknown error')))
+          {
+            type: "process",
+            payload: {
+              imageData: imgCopy,
+              maskData: maskCopy,
+              width,
+              height,
+              id: 0,
+            },
+          },
+          { transfer: [imgCopy.buffer, maskCopy.buffer] },
+        );
+      } else if (type === "result") {
+        const { data, width: w, height: h } = payload;
+        const result =
+          data instanceof Float32Array ? data : new Float32Array(data);
+        const dataUrl = float32CHWToDataURL(result, w, h);
+        worker.terminate();
+        onProgress?.(100, "Done");
+        resolve(dataURLToBase64(dataUrl));
+      } else if (type === "error") {
+        worker.terminate();
+        reject(new Error(String(payload ?? "Unknown error")));
       }
-    }
+    };
 
-    worker.onmessage = handleMessage
+    worker.onmessage = handleMessage;
     worker.onerror = (ev) => {
-      worker.terminate()
-      reject(new Error(ev.message || 'Worker error'))
-    }
+      worker.terminate();
+      reject(new Error(ev.message || "Worker error"));
+    };
 
-    worker.postMessage({ type: 'init', payload: { id: 0, timeout: 600000 } })
-  })
+    worker.postMessage({ type: "init", payload: { id: 0, timeout: 600000 } });
+  });
 }
 
 interface SegmentPointInput {
-  point: [number, number]
-  label: 0 | 1
+  point: [number, number];
+  label: 0 | 1;
 }
 
 /**
@@ -628,131 +750,153 @@ interface SegmentPointInput {
  */
 export async function runSegmentAnything(
   imageUrl: string,
-  params: { pointX?: number; pointY?: number; __segmentPoints?: string; __previewMask?: string; invertMask?: boolean },
-  onProgress?: (progress: number, message?: string) => void
+  params: {
+    pointX?: number;
+    pointY?: number;
+    __segmentPoints?: string;
+    __previewMask?: string;
+    invertMask?: boolean;
+  },
+  onProgress?: (progress: number, message?: string) => void,
 ): Promise<string> {
-  const invert = Boolean(params.invertMask)
+  const invert = Boolean(params.invertMask);
 
   // If a preview mask was already generated in the SegmentPointPicker, use it directly
-  const previewMask = params.__previewMask
-  if (previewMask && typeof previewMask === 'string' && previewMask.trim()) {
-    onProgress?.(50, 'Using previewed mask...')
+  const previewMask = params.__previewMask;
+  if (previewMask && typeof previewMask === "string" && previewMask.trim()) {
+    onProgress?.(50, "Using previewed mask...");
     // Load the mask image and re-export as base64
-    const res = await fetch(previewMask)
+    const res = await fetch(previewMask);
     if (res.ok) {
-      const blob = await res.blob()
-      const bitmap = await createImageBitmap(blob)
-      const canvas = document.createElement('canvas')
-      canvas.width = bitmap.width
-      canvas.height = bitmap.height
-      const ctx2d = canvas.getContext('2d')!
-      ctx2d.drawImage(bitmap, 0, 0)
-      bitmap.close()
+      const blob = await res.blob();
+      const bitmap = await createImageBitmap(blob);
+      const canvas = document.createElement("canvas");
+      canvas.width = bitmap.width;
+      canvas.height = bitmap.height;
+      const ctx2d = canvas.getContext("2d")!;
+      ctx2d.drawImage(bitmap, 0, 0);
+      bitmap.close();
       if (invert) {
-        const imgData = ctx2d.getImageData(0, 0, canvas.width, canvas.height)
-        const d = imgData.data
+        const imgData = ctx2d.getImageData(0, 0, canvas.width, canvas.height);
+        const d = imgData.data;
         for (let i = 0; i < d.length; i += 4) {
-          d[i] = 255 - d[i]
-          d[i + 1] = 255 - d[i + 1]
-          d[i + 2] = 255 - d[i + 2]
+          d[i] = 255 - d[i];
+          d[i + 1] = 255 - d[i + 1];
+          d[i + 2] = 255 - d[i + 2];
           // Keep alpha: if was transparent (0) make opaque (255) and vice versa
-          d[i + 3] = d[i + 3] > 128 ? 0 : 255
+          d[i + 3] = d[i + 3] > 128 ? 0 : 255;
         }
-        ctx2d.putImageData(imgData, 0, 0)
+        ctx2d.putImageData(imgData, 0, 0);
       }
-      const dataUrl = canvas.toDataURL('image/png')
-      onProgress?.(100, 'Done')
-      return dataURLToBase64(dataUrl)
+      const dataUrl = canvas.toDataURL("image/png");
+      onProgress?.(100, "Done");
+      return dataURLToBase64(dataUrl);
     }
     // If fetch failed, fall through to full SAM execution
   }
 
-  let points: SegmentPointInput[]
+  let points: SegmentPointInput[];
   try {
-    const parsed = params.__segmentPoints ? JSON.parse(params.__segmentPoints as string) : null
+    const parsed = params.__segmentPoints
+      ? JSON.parse(params.__segmentPoints as string)
+      : null;
     if (Array.isArray(parsed) && parsed.length > 0) {
       points = parsed.filter(
         (p: unknown): p is SegmentPointInput =>
           p != null &&
-          typeof p === 'object' &&
+          typeof p === "object" &&
           Array.isArray((p as SegmentPointInput).point) &&
           ((p as SegmentPointInput).point as unknown[]).length >= 2 &&
-          ((p as SegmentPointInput).label === 0 || (p as SegmentPointInput).label === 1)
-      )
+          ((p as SegmentPointInput).label === 0 ||
+            (p as SegmentPointInput).label === 1),
+      );
     } else {
-      points = []
+      points = [];
     }
   } catch {
-    points = []
+    points = [];
   }
   if (points.length === 0) {
-    const pointX = typeof params.pointX === 'number' ? params.pointX : 0.5
-    const pointY = typeof params.pointY === 'number' ? params.pointY : 0.5
-    points = [{ point: [pointX, pointY], label: 1 }]
+    const pointX = typeof params.pointX === "number" ? params.pointX : 0.5;
+    const pointY = typeof params.pointY === "number" ? params.pointY : 0.5;
+    points = [{ point: [pointX, pointY], label: 1 }];
   }
 
-  const worker = new Worker(new URL('../../workers/segmentAnything.worker.ts', import.meta.url), { type: 'module' })
+  const worker = new Worker(
+    new URL("../../workers/segmentAnything.worker.ts", import.meta.url),
+    { type: "module" },
+  );
 
-  onProgress?.(10, 'Loading model and encoding image...')
+  onProgress?.(10, "Loading model and encoding image...");
   await new Promise<void>((resolve, reject) => {
     const handler = (e: MessageEvent) => {
-      if (e.data.type === 'segmented') {
-        worker.removeEventListener('message', handler)
-        resolve()
-      } else if (e.data.type === 'error') {
-        worker.removeEventListener('message', handler)
-        reject(new Error(String(e.data.payload?.message ?? e.data.payload)))
+      if (e.data.type === "segmented") {
+        worker.removeEventListener("message", handler);
+        resolve();
+      } else if (e.data.type === "error") {
+        worker.removeEventListener("message", handler);
+        reject(new Error(String(e.data.payload?.message ?? e.data.payload)));
       }
-    }
-    worker.onmessage = handler
-    worker.postMessage({ type: 'segment', payload: { id: 0, imageDataUrl: imageUrl } })
-  })
-
-  onProgress?.(60, 'Decoding mask...')
-  const decodeId = 1
-  const pointsForWorker = points.map(p => ({ point: p.point as [number, number], label: p.label as 0 | 1 }))
-  const maskResult = await new Promise<{ mask: Uint8Array; width: number; height: number }>((resolve, reject) => {
+    };
+    worker.onmessage = handler;
+    worker.postMessage({
+      type: "segment",
+      payload: { id: 0, imageDataUrl: imageUrl },
+    });
+  });
+
+  onProgress?.(60, "Decoding mask...");
+  const decodeId = 1;
+  const pointsForWorker = points.map((p) => ({
+    point: p.point as [number, number],
+    label: p.label as 0 | 1,
+  }));
+  const maskResult = await new Promise<{
+    mask: Uint8Array;
+    width: number;
+    height: number;
+  }>((resolve, reject) => {
     const handler = (e: MessageEvent) => {
-      if (e.data.type === 'maskResult' && e.data.payload?.id === decodeId) {
-        worker.removeEventListener('message', handler)
-        const { mask, width, height } = e.data.payload
+      if (e.data.type === "maskResult" && e.data.payload?.id === decodeId) {
+        worker.removeEventListener("message", handler);
+        const { mask, width, height } = e.data.payload;
         resolve({
           mask: new Uint8Array(mask),
           width,
-          height
-        })
-      } else if (e.data.type === 'error') {
-        worker.removeEventListener('message', handler)
-        reject(new Error(String(e.data.payload?.message ?? e.data.payload)))
+          height,
+        });
+      } else if (e.data.type === "error") {
+        worker.removeEventListener("message", handler);
+        reject(new Error(String(e.data.payload?.message ?? e.data.payload)));
       }
-    }
-    worker.onmessage = handler
+    };
+    worker.onmessage = handler;
     worker.postMessage({
-      type: 'decodeMask',
-      payload: { id: decodeId, points: pointsForWorker }
-    })
-  })
+      type: "decodeMask",
+      payload: { id: decodeId, points: pointsForWorker },
+    });
+  });
 
-  worker.terminate()
+  worker.terminate();
 
-  const { mask, width, height } = maskResult
-  const imageData = new ImageData(width, height)
+  const { mask, width, height } = maskResult;
+  const imageData = new ImageData(width, height);
   for (let i = 0; i < width * height; i++) {
     // SAM outputs 0 or 1; scale to 0 or 255 so downstream consumers
     // (e.g. image-eraser loadMaskAsFloat32) can distinguish mask from background
     // via luminance check (r > 128).  Alpha is always 255 (fully opaque).
-    const raw = mask[i] ? 255 : 0
-    const v = invert ? 255 - raw : raw
-    imageData.data[i * 4] = v
-    imageData.data[i * 4 + 1] = v
-    imageData.data[i * 4 + 2] = v
-    imageData.data[i * 4 + 3] = v ? 255 : 0
+    const raw = mask[i] ? 255 : 0;
+    const v = invert ? 255 - raw : raw;
+    imageData.data[i * 4] = v;
+    imageData.data[i * 4 + 1] = v;
+    imageData.data[i * 4 + 2] = v;
+    imageData.data[i * 4 + 3] = v ? 255 : 0;
   }
-  const canvas = document.createElement('canvas')
-  canvas.width = width
-  canvas.height = height
-  canvas.getContext('2d')!.putImageData(imageData, 0, 0)
-  const dataUrl = canvas.toDataURL('image/png')
-  onProgress?.(100, 'Done')
-  return dataURLToBase64(dataUrl)
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  canvas.getContext("2d")!.putImageData(imageData, 0, 0);
+  const dataUrl = canvas.toDataURL("image/png");
+  onProgress?.(100, "Done");
+  return dataURLToBase64(dataUrl);
 }
diff --git a/src/workflow/lib/model-converter.ts b/src/workflow/lib/model-converter.ts
index d2600ba9..b856a961 100644
--- a/src/workflow/lib/model-converter.ts
+++ b/src/workflow/lib/model-converter.ts
@@ -3,187 +3,267 @@
  * Shared by renderer (workflow UI) and electron main (execution).
  * Keeps workflow model list in sync with Models browser / Playground (same API source).
  */
-import type { Model } from '@/types/model'
-import type { FormFieldConfig } from '@/lib/schemaToForm'
-import type { WaveSpeedModel, ModelParamSchema } from '@/workflow/types/node-defs'
+import type { Model } from "@/types/model";
+import type { FormFieldConfig } from "@/lib/schemaToForm";
+import type {
+  WaveSpeedModel,
+  ModelParamSchema,
+} from "@/workflow/types/node-defs";
 
-const HIDDEN_FIELDS = new Set(['enable_base64_output', 'enable_sync_mode'])
-const TEXTAREA_FIELDS = ['prompt', 'negative_prompt', 'text', 'description', 'content']
+const HIDDEN_FIELDS = new Set(["enable_base64_output", "enable_sync_mode"]);
+const TEXTAREA_FIELDS = [
+  "prompt",
+  "negative_prompt",
+  "text",
+  "description",
+  "content",
+];
 
 export function convertDesktopModel(m: Model): WaveSpeedModel {
-  const modelId = m.model_id
-  const provider = modelId.split('/')[0] || 'unknown'
-  const displayName = m.name || modelId.split('/').pop() || modelId
-  const category = m.type || 'other'
-  const inputSchema = parseInputSchema(m.api_schema)
-  const costPerRun = m.base_price
-  return { modelId, provider, displayName, category, inputSchema, costPerRun }
+  const modelId = m.model_id;
+  const provider = modelId.split("/")[0] || "unknown";
+  const displayName = m.name || modelId.split("/").pop() || modelId;
+  const category = m.type || "other";
+  const inputSchema = parseInputSchema(m.api_schema);
+  const costPerRun = m.base_price;
+  return { modelId, provider, displayName, category, inputSchema, costPerRun };
 }
 
-function parseInputSchema(apiSchema: Model['api_schema']): ModelParamSchema[] {
-  if (!apiSchema) return []
+function parseInputSchema(apiSchema: Model["api_schema"]): ModelParamSchema[] {
+  if (!apiSchema) return [];
 
-  const apiSchemas = (apiSchema as Record<string, unknown>).api_schemas as Array<{
-    type: string
-    request_schema?: {
-      properties?: Record<string, unknown>
-      required?: string[]
-      'x-order-properties'?: string[]
-    }
-  }> | undefined
+  const apiSchemas = (apiSchema as Record<string, unknown>).api_schemas as
+    | Array<{
+        type: string;
+        request_schema?: {
+          properties?: Record<string, unknown>;
+          required?: string[];
+          "x-order-properties"?: string[];
+        };
+      }>
+    | undefined;
 
-  const requestSchema = apiSchemas?.find(s => s.type === 'model_run')?.request_schema
+  const requestSchema = apiSchemas?.find(
+    (s) => s.type === "model_run",
+  )?.request_schema;
   if (!requestSchema?.properties) {
-    const components = apiSchema.components
+    const components = apiSchema.components;
     if (components?.schemas?.Request?.properties) {
-      const properties = components.schemas.Request.properties
-      const required = components.schemas.Request.required ?? []
-      return parseProperties(properties as Record<string, Record<string, unknown>>, required)
+      const properties = components.schemas.Request.properties;
+      const required = components.schemas.Request.required ?? [];
+      return parseProperties(
+        properties as Record<string, Record<string, unknown>>,
+        required,
+      );
     }
-    return []
+    return [];
   }
 
-  const properties = requestSchema.properties
-  const required = requestSchema.required ?? []
-  const orderProperties = requestSchema['x-order-properties']
+  const properties = requestSchema.properties;
+  const required = requestSchema.required ?? [];
+  const orderProperties = requestSchema["x-order-properties"];
 
-  let result = parseProperties(properties as Record<string, Record<string, unknown>>, required)
+  let result = parseProperties(
+    properties as Record<string, Record<string, unknown>>,
+    required,
+  );
 
   if (orderProperties?.length) {
     result = result.sort((a, b) => {
-      const idxA = orderProperties.indexOf(a.name)
-      const idxB = orderProperties.indexOf(b.name)
-      return (idxA === -1 ? Infinity : idxA) - (idxB === -1 ? Infinity : idxB)
-    })
+      const idxA = orderProperties.indexOf(a.name);
+      const idxB = orderProperties.indexOf(b.name);
+      return (idxA === -1 ? Infinity : idxA) - (idxB === -1 ? Infinity : idxB);
+    });
   }
 
-  return result
+  return result;
 }
 
 function parseProperties(
   properties: Record<string, Record<string, unknown>>,
-  required: string[]
+  required: string[],
 ): ModelParamSchema[] {
   return Object.entries(properties)
     .map(([name, prop]) => {
-      const param = parseParam(name, prop)
-      if (param && required.includes(name)) param.required = true
-      return param
+      const param = parseParam(name, prop);
+      if (param && required.includes(name)) param.required = true;
+      return param;
     })
-    .filter((p): p is ModelParamSchema => p !== null)
+    .filter((p): p is ModelParamSchema => p !== null);
 }
 
-function parseParam(name: string, prop: Record<string, unknown>): ModelParamSchema | null {
-  if (!name || HIDDEN_FIELDS.has(name)) return null
-
-  const n = name.toLowerCase()
-  const uiComponent = prop['x-ui-component'] as string | undefined
-  const isHidden = prop['x-hidden'] === true
-  const rawType = String(prop.type ?? 'string').toLowerCase()
-
-  if (uiComponent === 'loras' || (n === 'loras' && rawType === 'array') || (n.endsWith('_loras') && rawType === 'array')) {
-    const param: ModelParamSchema = { name, type: 'string' }
-    if (prop.description) param.description = String(prop.description)
-    if (prop.title) param.label = String(prop.title)
-    if (prop.default !== undefined) param.default = prop.default
-    if (isHidden) param.hidden = true
-    param.fieldType = 'loras'
-    param.maxItems = typeof prop.maxItems === 'number' ? prop.maxItems : 3
-    return param
-  }
-
-  if (rawType === 'array') {
-    if (n.endsWith('images') || n.endsWith('image_urls') || n.endsWith('videos') || n.endsWith('video_urls') || n.endsWith('audios') || n.endsWith('audio_urls')) {
-      const param: ModelParamSchema = { name, type: 'string' }
-      if (prop.description) param.description = String(prop.description)
-      if (prop.title) param.label = String(prop.title)
-      if (prop.default !== undefined) param.default = prop.default
-      if (isHidden) param.hidden = true
-      if (n.includes('image')) param.mediaType = 'image'
-      else if (n.includes('video')) param.mediaType = 'video'
-      else param.mediaType = 'audio'
-      param.fieldType = 'file-array'
-      return param
+function parseParam(
+  name: string,
+  prop: Record<string, unknown>,
+): ModelParamSchema | null {
+  if (!name || HIDDEN_FIELDS.has(name)) return null;
+
+  const n = name.toLowerCase();
+  const uiComponent = prop["x-ui-component"] as string | undefined;
+  const isHidden = prop["x-hidden"] === true;
+  const rawType = String(prop.type ?? "string").toLowerCase();
+
+  if (
+    uiComponent === "loras" ||
+    (n === "loras" && rawType === "array") ||
+    (n.endsWith("_loras") && rawType === "array")
+  ) {
+    const param: ModelParamSchema = { name, type: "string" };
+    if (prop.description) param.description = String(prop.description);
+    if (prop.title) param.label = String(prop.title);
+    if (prop.default !== undefined) param.default = prop.default;
+    if (isHidden) param.hidden = true;
+    param.fieldType = "loras";
+    param.maxItems = typeof prop.maxItems === "number" ? prop.maxItems : 3;
+    return param;
+  }
+
+  if (rawType === "array") {
+    if (
+      n.endsWith("images") ||
+      n.endsWith("image_urls") ||
+      n.endsWith("videos") ||
+      n.endsWith("video_urls") ||
+      n.endsWith("audios") ||
+      n.endsWith("audio_urls")
+    ) {
+      const param: ModelParamSchema = { name, type: "string" };
+      if (prop.description) param.description = String(prop.description);
+      if (prop.title) param.label = String(prop.title);
+      if (prop.default !== undefined) param.default = prop.default;
+      if (isHidden) param.hidden = true;
+      if (n.includes("image")) param.mediaType = "image";
+      else if (n.includes("video")) param.mediaType = "video";
+      else param.mediaType = "audio";
+      param.fieldType = "file-array";
+      return param;
     }
-    if (n.includes('image') || n.includes('video') || n.includes('audio')) {
-      const param: ModelParamSchema = { name, type: 'string' }
-      if (prop.description) param.description = String(prop.description)
-      if (prop.title) param.label = String(prop.title)
-      if (prop.default !== undefined) param.default = prop.default
-      if (isHidden) param.hidden = true
-      if (n.includes('image')) param.mediaType = 'image'
-      else if (n.includes('video')) param.mediaType = 'video'
-      else param.mediaType = 'audio'
-      param.fieldType = 'file-array'
-      return param
+    if (n.includes("image") || n.includes("video") || n.includes("audio")) {
+      const param: ModelParamSchema = { name, type: "string" };
+      if (prop.description) param.description = String(prop.description);
+      if (prop.title) param.label = String(prop.title);
+      if (prop.default !== undefined) param.default = prop.default;
+      if (isHidden) param.hidden = true;
+      if (n.includes("image")) param.mediaType = "image";
+      else if (n.includes("video")) param.mediaType = "video";
+      else param.mediaType = "audio";
+      param.fieldType = "file-array";
+      return param;
     }
-    const param: ModelParamSchema = { name, type: 'string' }
-    if (prop.description) param.description = String(prop.description)
-    if (prop.title) param.label = String(prop.title)
-    if (prop.default !== undefined) param.default = prop.default
-    if (isHidden) param.hidden = true
-    param.fieldType = 'json'
-    return param
-  }
-
-  if (rawType === 'object') {
-    const param: ModelParamSchema = { name, type: 'string' }
-    if (prop.description) param.description = String(prop.description)
-    if (prop.title) param.label = String(prop.title)
-    if (prop.default !== undefined) param.default = prop.default
-    if (isHidden) param.hidden = true
-    param.fieldType = 'json'
-    return param
-  }
-
-  let type: ModelParamSchema['type'] = 'string'
-  if (rawType === 'number' || rawType === 'float' || rawType === 'double') type = 'number'
-  else if (rawType === 'integer' || rawType === 'int') type = 'integer'
-  else if (rawType === 'boolean' || rawType === 'bool') type = 'boolean'
-  else if (Array.isArray(prop.enum)) type = 'enum'
-
-  const param: ModelParamSchema = { name, type }
-  if (prop.description) param.description = String(prop.description)
-  if (prop.title) param.label = String(prop.title)
-  if (prop.default !== undefined) param.default = prop.default
-  if (Array.isArray(prop.enum)) param.enum = prop.enum.map(String)
-  if (typeof prop.minimum === 'number') param.min = prop.minimum
-  if (typeof prop.maximum === 'number') param.max = prop.maximum
-  if (typeof prop.step === 'number') param.step = prop.step
-  if (isHidden) param.hidden = true
-  if (prop['x-accept']) param.accept = String(prop['x-accept'])
-  if (prop['x-placeholder']) param.placeholder = String(prop['x-placeholder'])
-
-  if (uiComponent === 'uploader') {
-    param.mediaType = 'image'
-    param.fieldType = 'file'
-    return param
-  }
-  if (n.endsWith('images') || n.endsWith('image_urls') || n.endsWith('videos') || n.endsWith('video_urls') || n.endsWith('audios') || n.endsWith('audio_urls')) {
-    if (n.includes('image')) param.mediaType = 'image'
-    else if (n.includes('video')) param.mediaType = 'video'
-    else param.mediaType = 'audio'
-    param.fieldType = 'file-array'
-    return param
-  }
-  if (n.endsWith('image') || n.endsWith('image_url')) { param.mediaType = 'image'; param.fieldType = 'file'; return param }
-  if (n.endsWith('video') || n.endsWith('video_url')) { param.mediaType = 'video'; param.fieldType = 'file'; return param }
-  if (n.endsWith('audio') || n.endsWith('audio_url')) { param.mediaType = 'audio'; param.fieldType = 'file'; return param }
-  if (n === 'size') { param.fieldType = 'size'; return param }
-  if (uiComponent === 'slider') { param.fieldType = 'slider'; return param }
-  if (param.enum?.length) { param.fieldType = 'select'; return param }
-  if (type === 'boolean') { param.fieldType = 'boolean'; return param }
-  if ((type === 'number' || type === 'integer') && param.min !== undefined && param.max !== undefined) { param.fieldType = 'slider'; return param }
-  if (type === 'number' || type === 'integer') { param.fieldType = 'number'; return param }
-  if (TEXTAREA_FIELDS.some(f => n.includes(f))) { param.fieldType = 'textarea'; return param }
-
-  param.fieldType = 'text'
-  return param
+    const param: ModelParamSchema = { name, type: "string" };
+    if (prop.description) param.description = String(prop.description);
+    if (prop.title) param.label = String(prop.title);
+    if (prop.default !== undefined) param.default = prop.default;
+    if (isHidden) param.hidden = true;
+    param.fieldType = "json";
+    return param;
+  }
+
+  if (rawType === "object") {
+    const param: ModelParamSchema = { name, type: "string" };
+    if (prop.description) param.description = String(prop.description);
+    if (prop.title) param.label = String(prop.title);
+    if (prop.default !== undefined) param.default = prop.default;
+    if (isHidden) param.hidden = true;
+    param.fieldType = "json";
+    return param;
+  }
+
+  let type: ModelParamSchema["type"] = "string";
+  if (rawType === "number" || rawType === "float" || rawType === "double")
+    type = "number";
+  else if (rawType === "integer" || rawType === "int") type = "integer";
+  else if (rawType === "boolean" || rawType === "bool") type = "boolean";
+  else if (Array.isArray(prop.enum)) type = "enum";
+
+  const param: ModelParamSchema = { name, type };
+  if (prop.description) param.description = String(prop.description);
+  if (prop.title) param.label = String(prop.title);
+  if (prop.default !== undefined) param.default = prop.default;
+  if (Array.isArray(prop.enum)) param.enum = prop.enum.map(String);
+  if (typeof prop.minimum === "number") param.min = prop.minimum;
+  if (typeof prop.maximum === "number") param.max = prop.maximum;
+  if (typeof prop.step === "number") param.step = prop.step;
+  if (isHidden) param.hidden = true;
+  if (prop["x-accept"]) param.accept = String(prop["x-accept"]);
+  if (prop["x-placeholder"]) param.placeholder = String(prop["x-placeholder"]);
+
+  if (uiComponent === "uploader") {
+    param.mediaType = "image";
+    param.fieldType = "file";
+    return param;
+  }
+  if (
+    n.endsWith("images") ||
+    n.endsWith("image_urls") ||
+    n.endsWith("videos") ||
+    n.endsWith("video_urls") ||
+    n.endsWith("audios") ||
+    n.endsWith("audio_urls")
+  ) {
+    if (n.includes("image")) param.mediaType = "image";
+    else if (n.includes("video")) param.mediaType = "video";
+    else param.mediaType = "audio";
+    param.fieldType = "file-array";
+    return param;
+  }
+  if (n.endsWith("image") || n.endsWith("image_url")) {
+    param.mediaType = "image";
+    param.fieldType = "file";
+    return param;
+  }
+  if (n.endsWith("video") || n.endsWith("video_url")) {
+    param.mediaType = "video";
+    param.fieldType = "file";
+    return param;
+  }
+  if (n.endsWith("audio") || n.endsWith("audio_url")) {
+    param.mediaType = "audio";
+    param.fieldType = "file";
+    return param;
+  }
+  if (n === "size") {
+    param.fieldType = "size";
+    return param;
+  }
+  if (uiComponent === "slider") {
+    param.fieldType = "slider";
+    return param;
+  }
+  if (param.enum?.length) {
+    param.fieldType = "select";
+    return param;
+  }
+  if (type === "boolean") {
+    param.fieldType = "boolean";
+    return param;
+  }
+  if (
+    (type === "number" || type === "integer") &&
+    param.min !== undefined &&
+    param.max !== undefined
+  ) {
+    param.fieldType = "slider";
+    return param;
+  }
+  if (type === "number" || type === "integer") {
+    param.fieldType = "number";
+    return param;
+  }
+  if (TEXTAREA_FIELDS.some((f) => n.includes(f))) {
+    param.fieldType = "textarea";
+    return param;
+  }
+
+  param.fieldType = "text";
+  return param;
 }
 
 /** Map Playground form fields (from schemaToForm) to workflow ModelParamSchema for node display. */
-export function formFieldsToModelParamSchema(fields: FormFieldConfig[]): ModelParamSchema[] {
-  return fields.map(f => {
+export function formFieldsToModelParamSchema(
+  fields: FormFieldConfig[],
+): ModelParamSchema[] {
+  return fields.map((f) => {
     const base: ModelParamSchema = {
       name: f.name,
       label: f.label,
@@ -196,39 +276,62 @@ export function formFieldsToModelParamSchema(fields: FormFieldConfig[]): ModelPa
       min: f.min,
       max: f.max,
       step: f.step,
-    }
+    };
     switch (f.type) {
-      case 'text':
-        return { ...base, type: 'string', fieldType: 'text' }
-      case 'textarea':
-        return { ...base, type: 'string', fieldType: 'textarea' }
-      case 'number':
-        return { ...base, type: 'number', fieldType: 'number' }
-      case 'slider':
-        return { ...base, type: 'number', fieldType: 'slider' }
-      case 'boolean':
-        return { ...base, type: 'boolean', fieldType: 'boolean' }
-      case 'select':
+      case "text":
+        return { ...base, type: "string", fieldType: "text" };
+      case "textarea":
+        return { ...base, type: "string", fieldType: "textarea" };
+      case "number":
+        return { ...base, type: "number", fieldType: "number" };
+      case "slider":
+        return { ...base, type: "number", fieldType: "slider" };
+      case "boolean":
+        return { ...base, type: "boolean", fieldType: "boolean" };
+      case "select":
         return {
           ...base,
-          type: 'enum',
-          fieldType: 'select',
+          type: "enum",
+          fieldType: "select",
           enum: (f.options ?? []).map(String),
-        }
-      case 'file': {
-        const media = f.accept?.startsWith('image') ? 'image' : f.accept?.startsWith('video') ? 'video' : f.accept?.startsWith('audio') ? 'audio' : undefined
-        return { ...base, type: 'string', fieldType: 'file', mediaType: media }
+        };
+      case "file": {
+        const media = f.accept?.startsWith("image")
+          ? "image"
+          : f.accept?.startsWith("video")
+            ? "video"
+            : f.accept?.startsWith("audio")
+              ? "audio"
+              : undefined;
+        return { ...base, type: "string", fieldType: "file", mediaType: media };
       }
-      case 'file-array': {
-        const media = f.accept?.includes('image') ? 'image' as const : f.accept?.includes('video') ? 'video' as const : f.accept?.includes('audio') ? 'audio' as const : undefined
-        return { ...base, type: 'string', fieldType: 'file-array', mediaType: media, maxItems: f.maxFiles }
+      case "file-array": {
+        const media = f.accept?.includes("image")
+          ? ("image" as const)
+          : f.accept?.includes("video")
+            ? ("video" as const)
+            : f.accept?.includes("audio")
+              ? ("audio" as const)
+              : undefined;
+        return {
+          ...base,
+          type: "string",
+          fieldType: "file-array",
+          mediaType: media,
+          maxItems: f.maxFiles,
+        };
       }
-      case 'size':
-        return { ...base, type: 'string', fieldType: 'size' }
-      case 'loras':
-        return { ...base, type: 'string', fieldType: 'loras', maxItems: f.maxFiles }
+      case "size":
+        return { ...base, type: "string", fieldType: "size" };
+      case "loras":
+        return {
+          ...base,
+          type: "string",
+          fieldType: "loras",
+          maxItems: f.maxFiles,
+        };
       default:
-        return { ...base, type: 'string', fieldType: 'text' }
+        return { ...base, type: "string", fieldType: "text" };
     }
-  })
+  });
 }
diff --git a/src/workflow/lib/outputDisplay.ts b/src/workflow/lib/outputDisplay.ts
index 47ad1f8c..fb1cbc94 100644
--- a/src/workflow/lib/outputDisplay.ts
+++ b/src/workflow/lib/outputDisplay.ts
@@ -3,56 +3,67 @@
  * Outputs can be URLs (image, video, audio, 3D, file) or plain text (e.g. from LLM or text-input node).
  */
 
-export type OutputItemType = 'image' | 'video' | 'audio' | '3d' | 'file' | 'text'
+export type OutputItemType =
+  | "image"
+  | "video"
+  | "audio"
+  | "3d"
+  | "file"
+  | "text";
 
 /** Classify a single output item (URL or plain text) for display. */
 export function getOutputItemType(item: string): OutputItemType {
-  const s = item.trim()
-  if (!s) return 'text'
+  const s = item.trim();
+  if (!s) return "text";
 
   // data: URLs (no file extension in the usual sense)
-  if (s.startsWith('data:')) {
-    if (s.startsWith('data:image/')) return 'image'
-    if (s.startsWith('data:video/')) return 'video'
-    if (s.startsWith('data:audio/')) return 'audio'
-    if (s.startsWith('data:text/')) return 'text'
-    return 'file'
+  if (s.startsWith("data:")) {
+    if (s.startsWith("data:image/")) return "image";
+    if (s.startsWith("data:video/")) return "video";
+    if (s.startsWith("data:audio/")) return "audio";
+    if (s.startsWith("data:text/")) return "text";
+    return "file";
   }
 
   // blob: URLs — produced by FFmpeg worker (merge / trim / convert).
   // They don't carry an extension, so default to 'video' which covers
   // both video and audio playback via <video> element.
-  if (s.startsWith('blob:')) {
-    return 'video'
+  if (s.startsWith("blob:")) {
+    return "video";
   }
 
   // Remote or local-asset URLs — use extension
-  if (s.startsWith('http://') || s.startsWith('https://') || s.startsWith('local-asset://')) {
-    const normalized = s.toLowerCase().split('?')[0]
-    if (/\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(normalized)) return 'image'
-    if (/\.(mp4|webm|mov|avi|mkv)$/.test(normalized)) return 'video'
-    if (/\.(mp3|wav|ogg|flac|aac|m4a)$/.test(normalized)) return 'audio'
-    if (/\.(glb|gltf)$/.test(normalized)) return '3d'
-    return 'file'
+  if (
+    s.startsWith("http://") ||
+    s.startsWith("https://") ||
+    s.startsWith("local-asset://")
+  ) {
+    const normalized = s.toLowerCase().split("?")[0];
+    if (/\.(jpg|jpeg|png|gif|webp|bmp|svg|avif)$/.test(normalized))
+      return "image";
+    if (/\.(mp4|webm|mov|avi|mkv)$/.test(normalized)) return "video";
+    if (/\.(mp3|wav|ogg|flac|aac|m4a)$/.test(normalized)) return "audio";
+    if (/\.(glb|gltf)$/.test(normalized)) return "3d";
+    return "file";
   }
 
   // Otherwise treat as plain text (e.g. from text-input node or LLM text output)
-  return 'text'
+  return "text";
 }
 
 /** Return true if the item is a URL we can use for image preview (including data:image). */
 export function isImageUrl(url: string): boolean {
-  return getOutputItemType(url) === 'image'
+  return getOutputItemType(url) === "image";
 }
 
 /** Decode data:text/plain;base64,... to string if possible; otherwise return as-is. */
 export function decodeDataText(dataUrl: string): string {
-  if (!dataUrl.startsWith('data:text/')) return dataUrl
-  const base64 = dataUrl.replace(/^data:text\/[^;]+;base64,/, '')
-  if (!base64) return dataUrl
+  if (!dataUrl.startsWith("data:text/")) return dataUrl;
+  const base64 = dataUrl.replace(/^data:text\/[^;]+;base64,/, "");
+  if (!base64) return dataUrl;
   try {
-    return atob(base64)
+    return atob(base64);
   } catch {
-    return dataUrl
+    return dataUrl;
   }
 }
diff --git a/src/workflow/lib/topological.ts b/src/workflow/lib/topological.ts
index 334282b5..1edfb200 100644
--- a/src/workflow/lib/topological.ts
+++ b/src/workflow/lib/topological.ts
@@ -2,34 +2,37 @@
  * Topological sort for workflow execution (shared by browser and Electron).
  */
 export interface SimpleEdge {
-  sourceNodeId: string
-  targetNodeId: string
+  sourceNodeId: string;
+  targetNodeId: string;
 }
 
-export function topologicalLevels(nodeIds: string[], edges: SimpleEdge[]): string[][] {
-  const inDegree = new Map<string, number>()
-  const adj = new Map<string, string[]>()
+export function topologicalLevels(
+  nodeIds: string[],
+  edges: SimpleEdge[],
+): string[][] {
+  const inDegree = new Map<string, number>();
+  const adj = new Map<string, string[]>();
   for (const id of nodeIds) {
-    inDegree.set(id, 0)
-    adj.set(id, [])
+    inDegree.set(id, 0);
+    adj.set(id, []);
   }
   for (const e of edges) {
-    adj.get(e.sourceNodeId)?.push(e.targetNodeId)
-    inDegree.set(e.targetNodeId, (inDegree.get(e.targetNodeId) ?? 0) + 1)
+    adj.get(e.sourceNodeId)?.push(e.targetNodeId);
+    inDegree.set(e.targetNodeId, (inDegree.get(e.targetNodeId) ?? 0) + 1);
   }
-  const levels: string[][] = []
-  let queue = nodeIds.filter(id => inDegree.get(id) === 0)
+  const levels: string[][] = [];
+  let queue = nodeIds.filter((id) => inDegree.get(id) === 0);
   while (queue.length > 0) {
-    levels.push([...queue])
-    const nextQueue: string[] = []
+    levels.push([...queue]);
+    const nextQueue: string[] = [];
     for (const node of queue) {
       for (const neighbor of adj.get(node) ?? []) {
-        const deg = (inDegree.get(neighbor) ?? 1) - 1
-        inDegree.set(neighbor, deg)
-        if (deg === 0) nextQueue.push(neighbor)
+        const deg = (inDegree.get(neighbor) ?? 1) - 1;
+        inDegree.set(neighbor, deg);
+        if (deg === 0) nextQueue.push(neighbor);
       }
     }
-    queue = nextQueue
+    queue = nextQueue;
   }
-  return levels
+  return levels;
 }
diff --git a/src/workflow/stores/execution.store.ts b/src/workflow/stores/execution.store.ts
index 1417e12b..749afdd9 100644
--- a/src/workflow/stores/execution.store.ts
+++ b/src/workflow/stores/execution.store.ts
@@ -3,49 +3,58 @@
  * Also tracks last result URL per node for inline canvas preview.
  * Includes RunSession tracking for the global execution monitor.
  */
-import { create } from 'zustand'
-import { v4 as uuid } from 'uuid'
-import { historyIpc } from '../ipc/ipc-client'
-import { executeWorkflowInBrowser } from '../browser/run-in-browser'
-import { useAssetsStore, detectAssetType } from '@/stores/assetsStore'
-import type { NodeStatus, EdgeStatus } from '@/workflow/types/execution'
+import { create } from "zustand";
+import { v4 as uuid } from "uuid";
+import { historyIpc } from "../ipc/ipc-client";
+import { executeWorkflowInBrowser } from "../browser/run-in-browser";
+import { useAssetsStore, detectAssetType } from "@/stores/assetsStore";
+import type { NodeStatus, EdgeStatus } from "@/workflow/types/execution";
 
 export interface RunSession {
-  id: string
-  workflowId: string
-  workflowName: string
-  startedAt: string
-  nodeIds: string[]
-  nodeLabels: Record<string, string>
+  id: string;
+  workflowId: string;
+  workflowName: string;
+  startedAt: string;
+  nodeIds: string[];
+  nodeLabels: Record<string, string>;
   /** Per-node final status within THIS session (frozen when session ends) */
-  nodeResults: Record<string, 'running' | 'done' | 'error'>
+  nodeResults: Record<string, "running" | "done" | "error">;
   /** Per-node cost within THIS session */
-  nodeCosts: Record<string, number>
-  status: 'running' | 'completed' | 'error' | 'cancelled'
+  nodeCosts: Record<string, number>;
+  status: "running" | "completed" | "error" | "cancelled";
   /** Execution scope: 'full' = Run All, 'node' = single node Run, 'continue' = Run from here */
-  scope?: 'full' | 'node' | 'continue'
+  scope?: "full" | "node" | "continue";
 }
 
-const MAX_SESSIONS = 20
+const MAX_SESSIONS = 20;
 
 /** AbortController for the current in-browser run; Stop calls abort() on it. */
-let browserRunAbortController: AbortController | null = null
+let browserRunAbortController: AbortController | null = null;
 
 function isAbortError(e: unknown): boolean {
-  return e instanceof DOMException && e.name === 'AbortError' ||
-    (e instanceof Error && e.message?.toLowerCase().includes('abort'))
+  return (
+    (e instanceof DOMException && e.name === "AbortError") ||
+    (e instanceof Error && e.message?.toLowerCase().includes("abort"))
+  );
 }
 
 /** Node types whose results should be auto-saved to My Assets */
-const SAVEABLE_NODE_TYPES = ['ai-task/run']
+const SAVEABLE_NODE_TYPES = ["ai-task/run"];
 function isSaveableNodeType(nodeType: string): boolean {
-  return SAVEABLE_NODE_TYPES.includes(nodeType) || nodeType.startsWith('free-tool/')
+  return (
+    SAVEABLE_NODE_TYPES.includes(nodeType) || nodeType.startsWith("free-tool/")
+  );
 }
 
 /** Lazy-loaded workflow store reference (avoids circular import) */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-let importedWorkflowStore: { getState: () => { workflowName: string } } | null = null
-import('./workflow.store').then(m => { importedWorkflowStore = m.useWorkflowStore }).catch(() => {})
+let importedWorkflowStore: { getState: () => { workflowName: string } } | null =
+  null;
+import("./workflow.store")
+  .then((m) => {
+    importedWorkflowStore = m.useWorkflowStore;
+  })
+  .catch(() => {});
 
 /** Auto-save workflow node results to My Assets (browser mode). Fire-and-forget. */
 function autoSaveWorkflowResults(
@@ -53,65 +62,106 @@ function autoSaveWorkflowResults(
   nodeType: string,
   urls: string[],
   params: Record<string, unknown> | undefined,
-  workflowName?: string
+  workflowName?: string,
 ): void {
-  if (!isSaveableNodeType(nodeType)) return
-  const { settings, saveAsset, hasAssetForExecution } = useAssetsStore.getState()
-  if (!settings.autoSaveAssets) return
+  if (!isSaveableNodeType(nodeType)) return;
+  const { settings, saveAsset, hasAssetForExecution } =
+    useAssetsStore.getState();
+  if (!settings.autoSaveAssets) return;
 
-  const modelId = String(params?.modelId ?? nodeType)
-  const executionId = `browser-${nodeId}-${Date.now().toString(36)}`
+  const modelId = String(params?.modelId ?? nodeType);
+  const executionId = `browser-${nodeId}-${Date.now().toString(36)}`;
 
   // Skip if already saved (unlikely in browser but safe)
-  if (hasAssetForExecution(executionId)) return
+  if (hasAssetForExecution(executionId)) return;
 
   for (let i = 0; i < urls.length; i++) {
-    const url = urls[i]
-    if (!url) continue
-    const assetType = detectAssetType(url)
-    if (!assetType) continue
+    const url = urls[i];
+    if (!url) continue;
+    const assetType = detectAssetType(url);
+    if (!assetType) continue;
     saveAsset(url, assetType, {
       modelId,
       resultIndex: i,
-      source: 'workflow',
+      source: "workflow",
       executionId,
-      workflowName: workflowName || undefined
-    }).catch(err => console.error('[ExecutionStore] Failed to auto-save to assets:', err))
+      workflowName: workflowName || undefined,
+    }).catch((err) =>
+      console.error("[ExecutionStore] Failed to auto-save to assets:", err),
+    );
   }
 }
 
 export interface ExecutionState {
-  nodeStatuses: Record<string, NodeStatus>
-  edgeStatuses: Record<string, EdgeStatus>
-  activeExecutions: Set<string>
-  progressMap: Record<string, { progress: number; message?: string }>
-  errorMessages: Record<string, string>
-  lastResults: Record<string, Array<{ urls: string[]; time: string; cost?: number; durationMs?: number }>>
-  _wasRunning: boolean
-  _fetchedNodes: Set<string>
+  nodeStatuses: Record<string, NodeStatus>;
+  edgeStatuses: Record<string, EdgeStatus>;
+  activeExecutions: Set<string>;
+  progressMap: Record<string, { progress: number; message?: string }>;
+  errorMessages: Record<string, string>;
+  lastResults: Record<
+    string,
+    Array<{ urls: string[]; time: string; cost?: number; durationMs?: number }>
+  >;
+  _wasRunning: boolean;
+  _fetchedNodes: Set<string>;
 
   /** Run sessions for the global monitor panel */
-  runSessions: RunSession[]
-  showRunMonitor: boolean
-  toggleRunMonitor: () => void
+  runSessions: RunSession[];
+  showRunMonitor: boolean;
+  toggleRunMonitor: () => void;
 
   /** Run entire workflow in browser (only execution path). */
-  runAllInBrowser: (nodes: Array<{ id: string; data: { nodeType: string; params?: Record<string, unknown>; label?: string } }>, edges: Array<{ source: string; target: string; sourceHandle?: string | null; targetHandle?: string | null }>) => Promise<void>
+  runAllInBrowser: (
+    nodes: Array<{
+      id: string;
+      data: {
+        nodeType: string;
+        params?: Record<string, unknown>;
+        label?: string;
+      };
+    }>,
+    edges: Array<{
+      source: string;
+      target: string;
+      sourceHandle?: string | null;
+      targetHandle?: string | null;
+    }>,
+  ) => Promise<void>;
   /** Run single node (and its upstream) in browser. */
-  runNodeInBrowser: (nodes: Array<{ id: string; data: { nodeType: string; params?: Record<string, unknown>; label?: string } }>, edges: Array<{ source: string; target: string; sourceHandle?: string | null; targetHandle?: string | null }>, nodeId: string) => Promise<void>
-  runNode: (workflowId: string, nodeId: string) => Promise<void>
-  continueFrom: (workflowId: string, nodeId: string) => Promise<void>
-  retryNode: (workflowId: string, nodeId: string) => Promise<void>
-  cancelNode: (workflowId: string, nodeId: string) => Promise<void>
-  cancelAll: (workflowId: string) => Promise<void>
-  updateNodeStatus: (nodeId: string, status: NodeStatus, errorMessage?: string) => void
-  updateEdgeStatus: (edgeId: string, status: EdgeStatus) => void
-  updateProgress: (nodeId: string, progress: number, message?: string) => void
-  resetStatuses: () => void
-  restoreResultsForNodes: (nodeIds: string[]) => Promise<void>
-  initListeners: () => void
-  fetchLastResult: (nodeId: string, force?: boolean) => void
-  clearNodeResults: (nodeId: string) => void
+  runNodeInBrowser: (
+    nodes: Array<{
+      id: string;
+      data: {
+        nodeType: string;
+        params?: Record<string, unknown>;
+        label?: string;
+      };
+    }>,
+    edges: Array<{
+      source: string;
+      target: string;
+      sourceHandle?: string | null;
+      targetHandle?: string | null;
+    }>,
+    nodeId: string,
+  ) => Promise<void>;
+  runNode: (workflowId: string, nodeId: string) => Promise<void>;
+  continueFrom: (workflowId: string, nodeId: string) => Promise<void>;
+  retryNode: (workflowId: string, nodeId: string) => Promise<void>;
+  cancelNode: (workflowId: string, nodeId: string) => Promise<void>;
+  cancelAll: (workflowId: string) => Promise<void>;
+  updateNodeStatus: (
+    nodeId: string,
+    status: NodeStatus,
+    errorMessage?: string,
+  ) => void;
+  updateEdgeStatus: (edgeId: string, status: EdgeStatus) => void;
+  updateProgress: (nodeId: string, progress: number, message?: string) => void;
+  resetStatuses: () => void;
+  restoreResultsForNodes: (nodeIds: string[]) => Promise<void>;
+  initListeners: () => void;
+  fetchLastResult: (nodeId: string, force?: boolean) => void;
+  clearNodeResults: (nodeId: string) => void;
 }
 
 export const useExecutionStore = create<ExecutionState>((set, get) => ({
@@ -126,442 +176,599 @@ export const useExecutionStore = create<ExecutionState>((set, get) => ({
   runSessions: [],
   showRunMonitor: false,
 
-  toggleRunMonitor: () => set(s => ({ showRunMonitor: !s.showRunMonitor })),
+  toggleRunMonitor: () => set((s) => ({ showRunMonitor: !s.showRunMonitor })),
 
   runAllInBrowser: async (nodes, edges) => {
-    const nodeLabels: Record<string, string> = {}
+    const nodeLabels: Record<string, string> = {};
     for (const n of nodes) {
-      nodeLabels[n.id] = (n.data?.label as string) || n.data?.nodeType || n.id.slice(0, 8)
+      nodeLabels[n.id] =
+        (n.data?.label as string) || n.data?.nodeType || n.id.slice(0, 8);
     }
-    const sessionId = uuid()
-    const nodeIds = nodes.map(n => n.id)
-    const nodeResults: Record<string, 'running' | 'done' | 'error'> = {}
-    for (const nid of nodeIds) nodeResults[nid] = 'running'
+    const sessionId = uuid();
+    const nodeIds = nodes.map((n) => n.id);
+    const nodeResults: Record<string, "running" | "done" | "error"> = {};
+    for (const nid of nodeIds) nodeResults[nid] = "running";
 
     // Get actual workflow identity for session tracking
-    const { useWorkflowStore } = await import('./workflow.store')
-    const wfState = useWorkflowStore.getState()
-    const actualWorkflowId = wfState.workflowId || 'browser'
-    const actualWorkflowName = wfState.workflowName || 'Workflow'
-
-    set(s => ({
-      runSessions: [{
-        id: sessionId,
-        workflowId: actualWorkflowId,
-        workflowName: actualWorkflowName,
-        startedAt: new Date().toISOString(),
-        nodeIds,
-        nodeLabels,
-        nodeResults,
-        nodeCosts: {},
-        status: 'running' as const,
-        scope: 'full' as const
-      }, ...s.runSessions].slice(0, MAX_SESSIONS)
-    }))
-
-    const controller = new AbortController()
-    browserRunAbortController = controller
-    try {
-      await executeWorkflowInBrowser(nodes, edges, {
-        onNodeStatus: (nodeId, status, errorMessage) => {
-          get().updateNodeStatus(nodeId, status, errorMessage)
+    const { useWorkflowStore } = await import("./workflow.store");
+    const wfState = useWorkflowStore.getState();
+    const actualWorkflowId = wfState.workflowId || "browser";
+    const actualWorkflowName = wfState.workflowName || "Workflow";
+
+    set((s) => ({
+      runSessions: [
+        {
+          id: sessionId,
+          workflowId: actualWorkflowId,
+          workflowName: actualWorkflowName,
+          startedAt: new Date().toISOString(),
+          nodeIds,
+          nodeLabels,
+          nodeResults,
+          nodeCosts: {},
+          status: "running" as const,
+          scope: "full" as const,
         },
-        onProgress: (nodeId, progress, message) => {
-          get().updateProgress(nodeId, progress, message)
-        },
-        onNodeComplete: (nodeId, { urls, cost }) => {
-          set(s => {
-            const existing = s.lastResults[nodeId] ?? []
-            return {
-              lastResults: {
-                ...s.lastResults,
-                [nodeId]: [{ urls, time: new Date().toISOString(), cost }, ...existing].slice(0, 50)
-              }
+        ...s.runSessions,
+      ].slice(0, MAX_SESSIONS),
+    }));
+
+    const controller = new AbortController();
+    browserRunAbortController = controller;
+    try {
+      await executeWorkflowInBrowser(
+        nodes,
+        edges,
+        {
+          onNodeStatus: (nodeId, status, errorMessage) => {
+            get().updateNodeStatus(nodeId, status, errorMessage);
+          },
+          onProgress: (nodeId, progress, message) => {
+            get().updateProgress(nodeId, progress, message);
+          },
+          onNodeComplete: (nodeId, { urls, cost }) => {
+            set((s) => {
+              const existing = s.lastResults[nodeId] ?? [];
+              return {
+                lastResults: {
+                  ...s.lastResults,
+                  [nodeId]: [
+                    { urls, time: new Date().toISOString(), cost },
+                    ...existing,
+                  ].slice(0, 50),
+                },
+              };
+            });
+            // Auto-save to My Assets
+            const node = nodes.find((n) => n.id === nodeId);
+            if (node) {
+              const wfName = importedWorkflowStore?.getState().workflowName;
+              autoSaveWorkflowResults(
+                nodeId,
+                node.data.nodeType,
+                urls,
+                node.data.params,
+                wfName,
+              );
             }
-          })
-          // Auto-save to My Assets
-          const node = nodes.find(n => n.id === nodeId)
-          if (node) {
-            const wfName = importedWorkflowStore?.getState().workflowName
-            autoSaveWorkflowResults(nodeId, node.data.nodeType, urls, node.data.params, wfName)
-          }
-        }
-      }, { signal: controller.signal })
+          },
+        },
+        { signal: controller.signal },
+      );
     } catch (error) {
       if (isAbortError(error)) {
-        set(s => ({
-          runSessions: s.runSessions.map(rs => rs.id === sessionId ? { ...rs, status: 'cancelled' as const } : rs)
-        }))
-        for (const nid of nodeIds) get().updateNodeStatus(nid, 'idle')
+        set((s) => ({
+          runSessions: s.runSessions.map((rs) =>
+            rs.id === sessionId ? { ...rs, status: "cancelled" as const } : rs,
+          ),
+        }));
+        for (const nid of nodeIds) get().updateNodeStatus(nid, "idle");
       } else {
-        const msg = error instanceof Error ? error.message : String(error)
-        console.error('[ExecutionStore] runAllInBrowser error:', msg)
-        set(s => ({
-          runSessions: s.runSessions.map(rs => rs.id === sessionId ? { ...rs, status: 'error' as const } : rs)
-        }))
+        const msg = error instanceof Error ? error.message : String(error);
+        console.error("[ExecutionStore] runAllInBrowser error:", msg);
+        set((s) => ({
+          runSessions: s.runSessions.map((rs) =>
+            rs.id === sessionId ? { ...rs, status: "error" as const } : rs,
+          ),
+        }));
       }
     } finally {
-      browserRunAbortController = null
+      browserRunAbortController = null;
     }
   },
 
   runNodeInBrowser: async (nodes, edges, nodeId) => {
-    const upstream = new Set<string>([nodeId])
-    const reverse = new Map<string, string[]>()
+    const upstream = new Set<string>([nodeId]);
+    const reverse = new Map<string, string[]>();
     for (const e of edges) {
-      const list = reverse.get(e.target) ?? []
-      list.push(e.source)
-      reverse.set(e.target, list)
+      const list = reverse.get(e.target) ?? [];
+      list.push(e.source);
+      reverse.set(e.target, list);
     }
-    let queue = [nodeId]
+    let queue = [nodeId];
     while (queue.length > 0) {
-      const next: string[] = []
+      const next: string[] = [];
       for (const id of queue) {
         for (const src of reverse.get(id) ?? []) {
           if (!upstream.has(src)) {
-            upstream.add(src)
-            next.push(src)
+            upstream.add(src);
+            next.push(src);
           }
         }
       }
-      queue = next
+      queue = next;
     }
-    const nodeIds = nodes.map(n => n.id).filter(id => upstream.has(id))
-    const nodeLabels: Record<string, string> = {}
+    const nodeIds = nodes.map((n) => n.id).filter((id) => upstream.has(id));
+    const nodeLabels: Record<string, string> = {};
     for (const n of nodes) {
-      if (upstream.has(n.id)) nodeLabels[n.id] = (n.data?.label as string) || n.data?.nodeType || n.id.slice(0, 8)
+      if (upstream.has(n.id))
+        nodeLabels[n.id] =
+          (n.data?.label as string) || n.data?.nodeType || n.id.slice(0, 8);
     }
-    const sessionId = uuid()
-    const nodeResults: Record<string, 'running' | 'done' | 'error'> = {}
-    for (const nid of nodeIds) nodeResults[nid] = 'running'
+    const sessionId = uuid();
+    const nodeResults: Record<string, "running" | "done" | "error"> = {};
+    for (const nid of nodeIds) nodeResults[nid] = "running";
 
     // Get actual workflow identity for session tracking
-    const { useWorkflowStore: wfStore } = await import('./workflow.store')
-    const wfState = wfStore.getState()
-    const actualWorkflowId = wfState.workflowId || 'browser'
-
-    set(s => ({
-      runSessions: [{
-        id: sessionId,
-        workflowId: actualWorkflowId,
-        workflowName: 'Run node',
-        startedAt: new Date().toISOString(),
-        nodeIds,
-        nodeLabels,
-        nodeResults,
-        nodeCosts: {},
-        status: 'running' as const,
-        scope: 'node' as const
-      }, ...s.runSessions].slice(0, MAX_SESSIONS)
-    }))
+    const { useWorkflowStore: wfStore } = await import("./workflow.store");
+    const wfState = wfStore.getState();
+    const actualWorkflowId = wfState.workflowId || "browser";
+
+    set((s) => ({
+      runSessions: [
+        {
+          id: sessionId,
+          workflowId: actualWorkflowId,
+          workflowName: "Run node",
+          startedAt: new Date().toISOString(),
+          nodeIds,
+          nodeLabels,
+          nodeResults,
+          nodeCosts: {},
+          status: "running" as const,
+          scope: "node" as const,
+        },
+        ...s.runSessions,
+      ].slice(0, MAX_SESSIONS),
+    }));
     // Collect existing result URLs so upstream nodes can feed the target node
-    const existingResults = new Map<string, string>()
-    const lastResults = get().lastResults
+    const existingResults = new Map<string, string>();
+    const lastResults = get().lastResults;
     for (const [nid, groups] of Object.entries(lastResults)) {
       if (groups && groups.length > 0 && groups[0].urls.length > 0) {
-        existingResults.set(nid, groups[0].urls[0])
+        existingResults.set(nid, groups[0].urls[0]);
       }
     }
 
-    const controller = new AbortController()
-    browserRunAbortController = controller
+    const controller = new AbortController();
+    browserRunAbortController = controller;
     try {
-      await executeWorkflowInBrowser(nodes, edges, {
-        onNodeStatus: (nid, status, errorMessage) => { get().updateNodeStatus(nid, status, errorMessage) },
-        onProgress: (nid, progress, message) => { get().updateProgress(nid, progress, message) },
-        onNodeComplete: (nid, { urls, cost }) => {
-          set(s => {
-            const existing = s.lastResults[nid] ?? []
-            return {
-              lastResults: {
-                ...s.lastResults,
-                [nid]: [{ urls, time: new Date().toISOString(), cost }, ...existing].slice(0, 50)
-              }
+      await executeWorkflowInBrowser(
+        nodes,
+        edges,
+        {
+          onNodeStatus: (nid, status, errorMessage) => {
+            get().updateNodeStatus(nid, status, errorMessage);
+          },
+          onProgress: (nid, progress, message) => {
+            get().updateProgress(nid, progress, message);
+          },
+          onNodeComplete: (nid, { urls, cost }) => {
+            set((s) => {
+              const existing = s.lastResults[nid] ?? [];
+              return {
+                lastResults: {
+                  ...s.lastResults,
+                  [nid]: [
+                    { urls, time: new Date().toISOString(), cost },
+                    ...existing,
+                  ].slice(0, 50),
+                },
+              };
+            });
+            // Auto-save to My Assets
+            const node = nodes.find((n) => n.id === nid);
+            if (node) {
+              const wfName = importedWorkflowStore?.getState().workflowName;
+              autoSaveWorkflowResults(
+                nid,
+                node.data.nodeType,
+                urls,
+                node.data.params,
+                wfName,
+              );
             }
-          })
-          // Auto-save to My Assets
-          const node = nodes.find(n => n.id === nid)
-          if (node) {
-            const wfName = importedWorkflowStore?.getState().workflowName
-            autoSaveWorkflowResults(nid, node.data.nodeType, urls, node.data.params, wfName)
-          }
-        }
-      }, { runOnlyNodeId: nodeId, existingResults, signal: controller.signal })
+          },
+        },
+        { runOnlyNodeId: nodeId, existingResults, signal: controller.signal },
+      );
     } catch (error) {
       if (isAbortError(error)) {
-        set(s => ({
-          runSessions: s.runSessions.map(rs => rs.id === sessionId ? { ...rs, status: 'cancelled' as const } : rs)
-        }))
-        for (const nid of nodeIds) get().updateNodeStatus(nid, 'idle')
+        set((s) => ({
+          runSessions: s.runSessions.map((rs) =>
+            rs.id === sessionId ? { ...rs, status: "cancelled" as const } : rs,
+          ),
+        }));
+        for (const nid of nodeIds) get().updateNodeStatus(nid, "idle");
       } else {
-        const msg = error instanceof Error ? error.message : String(error)
-        console.error('[ExecutionStore] runNodeInBrowser error:', msg)
-        set(s => ({
-          runSessions: s.runSessions.map(rs => rs.id === sessionId ? { ...rs, status: 'error' as const } : rs)
-        }))
+        const msg = error instanceof Error ? error.message : String(error);
+        console.error("[ExecutionStore] runNodeInBrowser error:", msg);
+        set((s) => ({
+          runSessions: s.runSessions.map((rs) =>
+            rs.id === sessionId ? { ...rs, status: "error" as const } : rs,
+          ),
+        }));
       }
     } finally {
-      browserRunAbortController = null
+      browserRunAbortController = null;
     }
   },
 
   runNode: async (_workflowId, nodeId) => {
-    const { useWorkflowStore } = await import('./workflow.store')
-    const { nodes, edges } = useWorkflowStore.getState()
-    const browserNodes = nodes.map(n => ({
+    const { useWorkflowStore } = await import("./workflow.store");
+    const { nodes, edges } = useWorkflowStore.getState();
+    const browserNodes = nodes.map((n) => ({
       id: n.id,
       data: {
-        nodeType: n.data?.nodeType ?? '',
-        params: { ...(n.data?.params ?? {}), __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] } },
-        label: n.data?.label
-      }
-    }))
-    const browserEdges = edges.map(e => ({ source: e.source, target: e.target, sourceHandle: e.sourceHandle ?? undefined, targetHandle: e.targetHandle ?? undefined }))
-    get().runNodeInBrowser(browserNodes, browserEdges, nodeId)
+        nodeType: n.data?.nodeType ?? "",
+        params: {
+          ...(n.data?.params ?? {}),
+          __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] },
+        },
+        label: n.data?.label,
+      },
+    }));
+    const browserEdges = edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle ?? undefined,
+      targetHandle: e.targetHandle ?? undefined,
+    }));
+    get().runNodeInBrowser(browserNodes, browserEdges, nodeId);
   },
   continueFrom: async (_workflowId, nodeId) => {
-    const { useWorkflowStore } = await import('./workflow.store')
-    const { nodes, edges } = useWorkflowStore.getState()
-    const browserNodes = nodes.map(n => ({
+    const { useWorkflowStore } = await import("./workflow.store");
+    const { nodes, edges } = useWorkflowStore.getState();
+    const browserNodes = nodes.map((n) => ({
       id: n.id,
       data: {
-        nodeType: n.data?.nodeType ?? '',
-        params: { ...(n.data?.params ?? {}), __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] } },
-        label: n.data?.label
-      }
-    }))
-    const browserEdges = edges.map(e => ({ source: e.source, target: e.target, sourceHandle: e.sourceHandle ?? undefined, targetHandle: e.targetHandle ?? undefined }))
+        nodeType: n.data?.nodeType ?? "",
+        params: {
+          ...(n.data?.params ?? {}),
+          __meta: { modelInputSchema: n.data?.modelInputSchema ?? [] },
+        },
+        label: n.data?.label,
+      },
+    }));
+    const browserEdges = edges.map((e) => ({
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle ?? undefined,
+      targetHandle: e.targetHandle ?? undefined,
+    }));
 
     // Collect existing result URLs so upstream nodes can feed downstream
-    const existingResults = new Map<string, string>()
-    const lastResults = get().lastResults
+    const existingResults = new Map<string, string>();
+    const lastResults = get().lastResults;
     for (const [nid, groups] of Object.entries(lastResults)) {
       if (groups && groups.length > 0 && groups[0].urls.length > 0) {
-        existingResults.set(nid, groups[0].urls[0])
+        existingResults.set(nid, groups[0].urls[0]);
       }
     }
 
-    const nodeLabels: Record<string, string> = {}
+    const nodeLabels: Record<string, string> = {};
     for (const n of nodes) {
-      nodeLabels[n.id] = (n.data?.label as string) || n.data?.nodeType || n.id.slice(0, 8)
+      nodeLabels[n.id] =
+        (n.data?.label as string) || n.data?.nodeType || n.id.slice(0, 8);
     }
-    const sessionId = uuid()
-    const nodeIds = nodes.map(n => n.id)
-    const nodeResults: Record<string, 'running' | 'done' | 'error'> = {}
-    for (const nid of nodeIds) nodeResults[nid] = 'running'
-    const actualWorkflowId = useWorkflowStore.getState().workflowId || 'browser'
-    set(s => ({
-      runSessions: [{
-        id: sessionId,
-        workflowId: actualWorkflowId,
-        workflowName: 'Run from here',
-        startedAt: new Date().toISOString(),
-        nodeIds,
-        nodeLabels,
-        nodeResults,
-        nodeCosts: {},
-        status: 'running' as const,
-        scope: 'continue' as const
-      }, ...s.runSessions].slice(0, MAX_SESSIONS)
-    }))
-
-    const controller = new AbortController()
-    browserRunAbortController = controller
+    const sessionId = uuid();
+    const nodeIds = nodes.map((n) => n.id);
+    const nodeResults: Record<string, "running" | "done" | "error"> = {};
+    for (const nid of nodeIds) nodeResults[nid] = "running";
+    const actualWorkflowId =
+      useWorkflowStore.getState().workflowId || "browser";
+    set((s) => ({
+      runSessions: [
+        {
+          id: sessionId,
+          workflowId: actualWorkflowId,
+          workflowName: "Run from here",
+          startedAt: new Date().toISOString(),
+          nodeIds,
+          nodeLabels,
+          nodeResults,
+          nodeCosts: {},
+          status: "running" as const,
+          scope: "continue" as const,
+        },
+        ...s.runSessions,
+      ].slice(0, MAX_SESSIONS),
+    }));
+
+    const controller = new AbortController();
+    browserRunAbortController = controller;
     try {
-      await executeWorkflowInBrowser(browserNodes, browserEdges, {
-        onNodeStatus: (nid, status, errorMessage) => { get().updateNodeStatus(nid, status, errorMessage) },
-        onProgress: (nid, progress, message) => { get().updateProgress(nid, progress, message) },
-        onNodeComplete: (nid, { urls, cost }) => {
-          set(s => {
-            const existing = s.lastResults[nid] ?? []
-            return {
-              lastResults: {
-                ...s.lastResults,
-                [nid]: [{ urls, time: new Date().toISOString(), cost }, ...existing].slice(0, 50)
-              }
-            }
-          })
-        }
-      }, { continueFromNodeId: nodeId, existingResults, signal: controller.signal })
+      await executeWorkflowInBrowser(
+        browserNodes,
+        browserEdges,
+        {
+          onNodeStatus: (nid, status, errorMessage) => {
+            get().updateNodeStatus(nid, status, errorMessage);
+          },
+          onProgress: (nid, progress, message) => {
+            get().updateProgress(nid, progress, message);
+          },
+          onNodeComplete: (nid, { urls, cost }) => {
+            set((s) => {
+              const existing = s.lastResults[nid] ?? [];
+              return {
+                lastResults: {
+                  ...s.lastResults,
+                  [nid]: [
+                    { urls, time: new Date().toISOString(), cost },
+                    ...existing,
+                  ].slice(0, 50),
+                },
+              };
+            });
+          },
+        },
+        {
+          continueFromNodeId: nodeId,
+          existingResults,
+          signal: controller.signal,
+        },
+      );
     } catch (error) {
       if (isAbortError(error)) {
-        set(s => ({
-          runSessions: s.runSessions.map(rs => rs.id === sessionId ? { ...rs, status: 'cancelled' as const } : rs)
-        }))
-        for (const nid of nodeIds) get().updateNodeStatus(nid, 'idle')
+        set((s) => ({
+          runSessions: s.runSessions.map((rs) =>
+            rs.id === sessionId ? { ...rs, status: "cancelled" as const } : rs,
+          ),
+        }));
+        for (const nid of nodeIds) get().updateNodeStatus(nid, "idle");
       } else {
-        const msg = error instanceof Error ? error.message : String(error)
-        console.error('[ExecutionStore] continueFrom error:', msg)
-        set(s => ({
-          runSessions: s.runSessions.map(rs => rs.id === sessionId ? { ...rs, status: 'error' as const } : rs)
-        }))
+        const msg = error instanceof Error ? error.message : String(error);
+        console.error("[ExecutionStore] continueFrom error:", msg);
+        set((s) => ({
+          runSessions: s.runSessions.map((rs) =>
+            rs.id === sessionId ? { ...rs, status: "error" as const } : rs,
+          ),
+        }));
       }
     } finally {
-      browserRunAbortController = null
+      browserRunAbortController = null;
     }
   },
-  retryNode: async () => { /* Only Run All is supported (browser execution) */ },
+  retryNode: async () => {
+    /* Only Run All is supported (browser execution) */
+  },
   cancelNode: async () => {
     if (browserRunAbortController) {
-      browserRunAbortController.abort()
+      browserRunAbortController.abort();
     }
   },
   cancelAll: async (workflowId) => {
     if (browserRunAbortController) {
-      browserRunAbortController.abort()
+      browserRunAbortController.abort();
     }
-    set(s => ({
-      runSessions: s.runSessions.map(rs =>
-        rs.workflowId === workflowId && rs.status === 'running' ? { ...rs, status: 'cancelled' as const } : rs
-      )
-    }))
+    set((s) => ({
+      runSessions: s.runSessions.map((rs) =>
+        rs.workflowId === workflowId && rs.status === "running"
+          ? { ...rs, status: "cancelled" as const }
+          : rs,
+      ),
+    }));
   },
 
   updateNodeStatus: (nodeId, status, errorMessage) => {
-    set(state => {
-      const newStatuses = { ...state.nodeStatuses, [nodeId]: status }
-      const newActive = new Set(state.activeExecutions)
-      const newErrors = { ...state.errorMessages }
-      let wasRunning = state._wasRunning
-      if (status === 'running') {
-        newActive.add(nodeId)
-        wasRunning = true // mark that execution started
-        delete newErrors[nodeId]
+    set((state) => {
+      const newStatuses = { ...state.nodeStatuses, [nodeId]: status };
+      const newActive = new Set(state.activeExecutions);
+      const newErrors = { ...state.errorMessages };
+      let wasRunning = state._wasRunning;
+      if (status === "running") {
+        newActive.add(nodeId);
+        wasRunning = true; // mark that execution started
+        delete newErrors[nodeId];
       } else {
-        newActive.delete(nodeId)
+        newActive.delete(nodeId);
       }
-      if (status === 'error' && errorMessage) {
-        newErrors[nodeId] = errorMessage
-      } else if (status !== 'error') {
-        delete newErrors[nodeId]
+      if (status === "error" && errorMessage) {
+        newErrors[nodeId] = errorMessage;
+      } else if (status !== "error") {
+        delete newErrors[nodeId];
       }
-      const newProgress = status !== 'running' ? (() => { const p = { ...state.progressMap }; delete p[nodeId]; return p })() : state.progressMap
-      return { nodeStatuses: newStatuses, activeExecutions: newActive, errorMessages: newErrors, _wasRunning: wasRunning, progressMap: newProgress }
-    })
+      const newProgress =
+        status !== "running"
+          ? (() => {
+              const p = { ...state.progressMap };
+              delete p[nodeId];
+              return p;
+            })()
+          : state.progressMap;
+      return {
+        nodeStatuses: newStatuses,
+        activeExecutions: newActive,
+        errorMessages: newErrors,
+        _wasRunning: wasRunning,
+        progressMap: newProgress,
+      };
+    });
 
     // When a node finishes successfully, force-refresh its results
-    if (status === 'confirmed' || status === 'unconfirmed') {
-      setTimeout(() => get().fetchLastResult(nodeId, true), 1500)
+    if (status === "confirmed" || status === "unconfirmed") {
+      setTimeout(() => get().fetchLastResult(nodeId, true), 1500);
     }
 
     // Update the LATEST running session that contains this node
-    if (status === 'confirmed' || status === 'unconfirmed' || status === 'error') {
-      set(s => {
-        const idx = s.runSessions.findIndex(rs => rs.status === 'running' && rs.nodeIds.includes(nodeId))
-        if (idx === -1) return {}
-        const rs = s.runSessions[idx]
-        const newResults = { ...rs.nodeResults, [nodeId]: status === 'error' ? 'error' as const : 'done' as const }
-        const allDone = rs.nodeIds.every(nid => newResults[nid] === 'done' || newResults[nid] === 'error')
-        const hasError = Object.values(newResults).some(v => v === 'error')
-        const newStatus = allDone ? (hasError ? 'error' as const : 'completed' as const) : 'running' as const
-        const updated = [...s.runSessions]
-        updated[idx] = { ...rs, nodeResults: newResults, status: newStatus }
-        return { runSessions: updated }
-      })
+    if (
+      status === "confirmed" ||
+      status === "unconfirmed" ||
+      status === "error"
+    ) {
+      set((s) => {
+        const idx = s.runSessions.findIndex(
+          (rs) => rs.status === "running" && rs.nodeIds.includes(nodeId),
+        );
+        if (idx === -1) return {};
+        const rs = s.runSessions[idx];
+        const newResults = {
+          ...rs.nodeResults,
+          [nodeId]: status === "error" ? ("error" as const) : ("done" as const),
+        };
+        const allDone = rs.nodeIds.every(
+          (nid) => newResults[nid] === "done" || newResults[nid] === "error",
+        );
+        const hasError = Object.values(newResults).some((v) => v === "error");
+        const newStatus = allDone
+          ? hasError
+            ? ("error" as const)
+            : ("completed" as const)
+          : ("running" as const);
+        const updated = [...s.runSessions];
+        updated[idx] = { ...rs, nodeResults: newResults, status: newStatus };
+        return { runSessions: updated };
+      });
 
       // Fetch cost for this node and update the session
-      if (status === 'confirmed' || status === 'unconfirmed') {
-        historyIpc.list(nodeId).then(records => {
-          if (!records || records.length === 0) return
-          const cost = records[0].cost ?? 0
-          set(s => ({
-            runSessions: s.runSessions.map(rs =>
-              rs.nodeIds.includes(nodeId) && rs.nodeCosts[nodeId] === undefined
-                ? { ...rs, nodeCosts: { ...rs.nodeCosts, [nodeId]: cost } }
-                : rs
-            )
-          }))
-        }).catch(() => {})
+      if (status === "confirmed" || status === "unconfirmed") {
+        historyIpc
+          .list(nodeId)
+          .then((records) => {
+            if (!records || records.length === 0) return;
+            const cost = records[0].cost ?? 0;
+            set((s) => ({
+              runSessions: s.runSessions.map((rs) =>
+                rs.nodeIds.includes(nodeId) &&
+                rs.nodeCosts[nodeId] === undefined
+                  ? { ...rs, nodeCosts: { ...rs.nodeCosts, [nodeId]: cost } }
+                  : rs,
+              ),
+            }));
+          })
+          .catch(() => {});
       }
     }
 
     // Reset _wasRunning when all done
-    const currentState = get()
+    const currentState = get();
     if (currentState._wasRunning && currentState.activeExecutions.size === 0) {
-      setTimeout(() => set({ _wasRunning: false }), 100)
+      setTimeout(() => set({ _wasRunning: false }), 100);
     }
   },
 
   updateEdgeStatus: (edgeId, status) => {
-    set(state => ({ edgeStatuses: { ...state.edgeStatuses, [edgeId]: status } }))
+    set((state) => ({
+      edgeStatuses: { ...state.edgeStatuses, [edgeId]: status },
+    }));
   },
 
   updateProgress: (nodeId, progress, message) => {
-    set(state => ({ progressMap: { ...state.progressMap, [nodeId]: { progress, message } } }))
+    set((state) => ({
+      progressMap: { ...state.progressMap, [nodeId]: { progress, message } },
+    }));
   },
 
   resetStatuses: () => {
-    set({ nodeStatuses: {}, edgeStatuses: {}, activeExecutions: new Set(), progressMap: {}, errorMessages: {} })
+    set({
+      nodeStatuses: {},
+      edgeStatuses: {},
+      activeExecutions: new Set(),
+      progressMap: {},
+      errorMessages: {},
+    });
   },
 
   /** Restore results for all nodes in a workflow (call after loadWorkflow).
    *  Skips nodes that are already cached to avoid redundant IPC calls on tab switch. */
   restoreResultsForNodes: async (nodeIds: string[]) => {
-    const fetched = get()._fetchedNodes
-    const toFetch = nodeIds.filter(id => !fetched.has(id))
-    if (toFetch.length === 0) return
+    const fetched = get()._fetchedNodes;
+    const toFetch = nodeIds.filter((id) => !fetched.has(id));
+    if (toFetch.length === 0) return;
     for (const nodeId of toFetch) {
-      get().fetchLastResult(nodeId)
+      get().fetchLastResult(nodeId);
     }
   },
 
   fetchLastResult: async (nodeId, force) => {
     // Skip if already cached (unless forced, e.g. after new execution)
-    if (!force && get()._fetchedNodes.has(nodeId) && get().lastResults[nodeId]) return
+    if (!force && get()._fetchedNodes.has(nodeId) && get().lastResults[nodeId])
+      return;
     try {
-      const records = await historyIpc.list(nodeId)
+      const records = await historyIpc.list(nodeId);
       if (records && records.length > 0) {
-        const groups: Array<{ urls: string[]; time: string; cost?: number; durationMs?: number }> = []
+        const groups: Array<{
+          urls: string[];
+          time: string;
+          cost?: number;
+          durationMs?: number;
+        }> = [];
         for (const r of records) {
-          if (r.status !== 'success') continue
-          const meta = r.resultMetadata as Record<string, unknown> | null
-          const metaUrls = meta?.resultUrls as string[] | undefined
-          const urls: string[] = []
+          if (r.status !== "success") continue;
+          const meta = r.resultMetadata as Record<string, unknown> | null;
+          const metaUrls = meta?.resultUrls as string[] | undefined;
+          const urls: string[] = [];
           if (metaUrls && Array.isArray(metaUrls) && metaUrls.length > 0) {
-            for (const u of metaUrls) { if (u && typeof u === 'string') urls.push(u) }
+            for (const u of metaUrls) {
+              if (u && typeof u === "string") urls.push(u);
+            }
           } else if (r.resultPath) {
-            urls.push(r.resultPath)
+            urls.push(r.resultPath);
           }
           if (urls.length > 0) {
-            groups.push({ urls, time: r.createdAt, cost: r.cost, durationMs: r.durationMs ?? undefined })
+            groups.push({
+              urls,
+              time: r.createdAt,
+              cost: r.cost,
+              durationMs: r.durationMs ?? undefined,
+            });
           }
         }
         if (groups.length > 0) {
           // Merge with existing groups: deduplicate by time, keep newest first
-          set(state => {
-            const existing = state.lastResults[nodeId] ?? []
-            const existingTimes = new Set(existing.map(g => g.time))
-            const newGroups = groups.filter(g => !existingTimes.has(g.time))
-            const merged = [...newGroups, ...existing].sort((a, b) =>
-              new Date(b.time).getTime() - new Date(a.time).getTime()
-            ).slice(0, 50) // cap at 50 entries per node
-            const newFetched = new Set(state._fetchedNodes)
-            newFetched.add(nodeId)
-            return { lastResults: { ...state.lastResults, [nodeId]: merged }, _fetchedNodes: newFetched }
-          })
+          set((state) => {
+            const existing = state.lastResults[nodeId] ?? [];
+            const existingTimes = new Set(existing.map((g) => g.time));
+            const newGroups = groups.filter((g) => !existingTimes.has(g.time));
+            const merged = [...newGroups, ...existing]
+              .sort(
+                (a, b) =>
+                  new Date(b.time).getTime() - new Date(a.time).getTime(),
+              )
+              .slice(0, 50); // cap at 50 entries per node
+            const newFetched = new Set(state._fetchedNodes);
+            newFetched.add(nodeId);
+            return {
+              lastResults: { ...state.lastResults, [nodeId]: merged },
+              _fetchedNodes: newFetched,
+            };
+          });
         } else {
           // No results but mark as fetched so we don't re-query
-          set(state => {
-            const newFetched = new Set(state._fetchedNodes)
-            newFetched.add(nodeId)
-            return { _fetchedNodes: newFetched }
-          })
+          set((state) => {
+            const newFetched = new Set(state._fetchedNodes);
+            newFetched.add(nodeId);
+            return { _fetchedNodes: newFetched };
+          });
         }
       }
-    } catch { /* ignore */ }
+    } catch {
+      /* ignore */
+    }
   },
 
   clearNodeResults: (nodeId) => {
-    set(state => {
-      const newResults = { ...state.lastResults }
-      delete newResults[nodeId]
-      const newFetched = new Set(state._fetchedNodes)
-      newFetched.delete(nodeId)
-      return { lastResults: newResults, _fetchedNodes: newFetched }
-    })
+    set((state) => {
+      const newResults = { ...state.lastResults };
+      delete newResults[nodeId];
+      const newFetched = new Set(state._fetchedNodes);
+      newFetched.delete(nodeId);
+      return { lastResults: newResults, _fetchedNodes: newFetched };
+    });
   },
 
   initListeners: () => {
     // Execution is browser-only; state updates come from runAllInBrowser callbacks
-  }
-}))
+  },
+}));
diff --git a/src/workflow/stores/ui.store.ts b/src/workflow/stores/ui.store.ts
index 37276760..959c8533 100644
--- a/src/workflow/stores/ui.store.ts
+++ b/src/workflow/stores/ui.store.ts
@@ -4,57 +4,63 @@
  * Right panel shows Config/Results tabs when a node is selected.
  * Settings panel is a separate toggle.
  */
-import { create } from 'zustand'
+import { create } from "zustand";
 
 export interface UIState {
-  selectedNodeId: string | null
-  selectedNodeIds: Set<string>
-  showNodeConfig: boolean
-  showResults: boolean
-  showSettings: boolean
-  showNodePalette: boolean
-  showWorkflowPanel: boolean
+  selectedNodeId: string | null;
+  selectedNodeIds: Set<string>;
+  showNodeConfig: boolean;
+  showResults: boolean;
+  showSettings: boolean;
+  showNodePalette: boolean;
+  showWorkflowPanel: boolean;
   /** Right panel: workflow results (reversed execution order) */
-  showWorkflowResultsPanel: boolean
+  showWorkflowResultsPanel: boolean;
   /** Right panel width (resizable via drag) */
-  workflowResultsPanelWidth: number
+  workflowResultsPanelWidth: number;
   /** Shared left sidebar width for both Workflows and Nodes panels */
-  sidebarWidth: number
+  sidebarWidth: number;
   /** Canvas grid background visibility */
-  showGrid: boolean
-  previewSrc: string | null
-  previewItems: string[]
-  previewIndex: number
+  showGrid: boolean;
+  previewSrc: string | null;
+  previewItems: string[];
+  previewIndex: number;
   /** Naming dialog state */
-  showNamingDialog: boolean
-  namingDialogDefault: string
-  namingDialogResolve: ((result: { name: string; overwriteId?: string } | null) => void) | null
+  showNamingDialog: boolean;
+  namingDialogDefault: string;
+  namingDialogResolve:
+    | ((result: { name: string; overwriteId?: string } | null) => void)
+    | null;
   /** Canvas interaction mode: 'select' for marquee selection, 'hand' for pan */
-  interactionMode: 'select' | 'hand'
+  interactionMode: "select" | "hand";
   /** Returns the center of the current ReactFlow viewport in flow coordinates */
-  getViewportCenter: () => { x: number; y: number }
+  getViewportCenter: () => { x: number; y: number };
   /** Register the getter (called once from WorkflowCanvas onInit) */
-  setGetViewportCenter: (fn: () => { x: number; y: number }) => void
+  setGetViewportCenter: (fn: () => { x: number; y: number }) => void;
 
-  selectNode: (nodeId: string | null) => void
-  selectNodes: (nodeIds: string[]) => void
-  setInteractionMode: (mode: 'select' | 'hand') => void
-  toggleNodeConfig: () => void
-  toggleResults: () => void
-  toggleSettings: () => void
-  toggleNodePalette: () => void
-  toggleWorkflowPanel: () => void
-  toggleWorkflowResultsPanel: () => void
-  setWorkflowResultsPanelWidth: (width: number) => void
-  setSidebarWidth: (width: number) => void
-  toggleGrid: () => void
-  openPreview: (src: string, items?: string[]) => void
-  prevPreview: () => void
-  nextPreview: () => void
-  closePreview: () => void
+  selectNode: (nodeId: string | null) => void;
+  selectNodes: (nodeIds: string[]) => void;
+  setInteractionMode: (mode: "select" | "hand") => void;
+  toggleNodeConfig: () => void;
+  toggleResults: () => void;
+  toggleSettings: () => void;
+  toggleNodePalette: () => void;
+  toggleWorkflowPanel: () => void;
+  toggleWorkflowResultsPanel: () => void;
+  setWorkflowResultsPanelWidth: (width: number) => void;
+  setSidebarWidth: (width: number) => void;
+  toggleGrid: () => void;
+  openPreview: (src: string, items?: string[]) => void;
+  prevPreview: () => void;
+  nextPreview: () => void;
+  closePreview: () => void;
   /** Show naming dialog and return a promise that resolves with the name (+ optional overwrite id) or null */
-  promptWorkflowName: (defaultName?: string) => Promise<{ name: string; overwriteId?: string } | null>
-  resolveNamingDialog: (result: { name: string; overwriteId?: string } | null) => void
+  promptWorkflowName: (
+    defaultName?: string,
+  ) => Promise<{ name: string; overwriteId?: string } | null>;
+  resolveNamingDialog: (
+    result: { name: string; overwriteId?: string } | null,
+  ) => void;
 }
 
 export const useUIStore = create<UIState>((set, get) => ({
@@ -73,65 +79,104 @@ export const useUIStore = create<UIState>((set, get) => ({
   previewItems: [],
   previewIndex: -1,
   showNamingDialog: false,
-  namingDialogDefault: '',
+  namingDialogDefault: "",
   namingDialogResolve: null,
-  interactionMode: 'hand',
+  interactionMode: "hand",
   getViewportCenter: () => ({ x: 200, y: 150 }),
   setGetViewportCenter: (fn) => set({ getViewportCenter: fn }),
 
-  selectNode: (nodeId) => set({
-    selectedNodeId: nodeId,
-    selectedNodeIds: nodeId ? new Set([nodeId]) : new Set(),
-    showSettings: false
-  }),
+  selectNode: (nodeId) =>
+    set({
+      selectedNodeId: nodeId,
+      selectedNodeIds: nodeId ? new Set([nodeId]) : new Set(),
+      showSettings: false,
+    }),
 
-  selectNodes: (nodeIds) => set({
-    selectedNodeId: nodeIds.length === 1 ? nodeIds[0] : nodeIds.length > 0 ? nodeIds[nodeIds.length - 1] : null,
-    selectedNodeIds: new Set(nodeIds),
-    showSettings: false
-  }),
+  selectNodes: (nodeIds) =>
+    set({
+      selectedNodeId:
+        nodeIds.length === 1
+          ? nodeIds[0]
+          : nodeIds.length > 0
+            ? nodeIds[nodeIds.length - 1]
+            : null,
+      selectedNodeIds: new Set(nodeIds),
+      showSettings: false,
+    }),
 
   setInteractionMode: (mode) => set({ interactionMode: mode }),
 
-  toggleNodeConfig: () => set(s => ({ showNodeConfig: !s.showNodeConfig })),
-  toggleResults: () => set(s => ({ showResults: !s.showResults })),
-  toggleSettings: () => set(s => ({ showSettings: !s.showSettings, selectedNodeId: s.showSettings ? s.selectedNodeId : null })),
-  toggleNodePalette: () => set(s => ({ showNodePalette: !s.showNodePalette, showWorkflowPanel: false })),
-  toggleWorkflowPanel: () => set(s => ({ showWorkflowPanel: !s.showWorkflowPanel, showNodePalette: false })),
-  toggleWorkflowResultsPanel: () => set(s => ({ showWorkflowResultsPanel: !s.showWorkflowResultsPanel })),
-  setWorkflowResultsPanelWidth: (width) => set({ workflowResultsPanelWidth: Math.max(180, Math.min(500, width)) }),
-  setSidebarWidth: (width) => set({ sidebarWidth: Math.max(180, Math.min(400, width)) }),
-  toggleGrid: () => set(s => ({ showGrid: !s.showGrid })),
-  openPreview: (src, items) => set(() => {
-    const list = Array.isArray(items) && items.length > 0 ? items : [src]
-    const idx = Math.max(0, list.indexOf(src))
-    return {
-      previewSrc: src,
-      previewItems: list,
-      previewIndex: idx
-    }
-  }),
-  prevPreview: () => set(s => {
-    if (s.previewItems.length <= 1 || s.previewIndex < 0) return {}
-    const nextIndex = (s.previewIndex - 1 + s.previewItems.length) % s.previewItems.length
-    return { previewIndex: nextIndex, previewSrc: s.previewItems[nextIndex] ?? s.previewSrc }
-  }),
-  nextPreview: () => set(s => {
-    if (s.previewItems.length <= 1 || s.previewIndex < 0) return {}
-    const nextIndex = (s.previewIndex + 1) % s.previewItems.length
-    return { previewIndex: nextIndex, previewSrc: s.previewItems[nextIndex] ?? s.previewSrc }
-  }),
-  closePreview: () => set({ previewSrc: null, previewItems: [], previewIndex: -1 }),
+  toggleNodeConfig: () => set((s) => ({ showNodeConfig: !s.showNodeConfig })),
+  toggleResults: () => set((s) => ({ showResults: !s.showResults })),
+  toggleSettings: () =>
+    set((s) => ({
+      showSettings: !s.showSettings,
+      selectedNodeId: s.showSettings ? s.selectedNodeId : null,
+    })),
+  toggleNodePalette: () =>
+    set((s) => ({
+      showNodePalette: !s.showNodePalette,
+      showWorkflowPanel: false,
+    })),
+  toggleWorkflowPanel: () =>
+    set((s) => ({
+      showWorkflowPanel: !s.showWorkflowPanel,
+      showNodePalette: false,
+    })),
+  toggleWorkflowResultsPanel: () =>
+    set((s) => ({ showWorkflowResultsPanel: !s.showWorkflowResultsPanel })),
+  setWorkflowResultsPanelWidth: (width) =>
+    set({ workflowResultsPanelWidth: Math.max(180, Math.min(500, width)) }),
+  setSidebarWidth: (width) =>
+    set({ sidebarWidth: Math.max(180, Math.min(400, width)) }),
+  toggleGrid: () => set((s) => ({ showGrid: !s.showGrid })),
+  openPreview: (src, items) =>
+    set(() => {
+      const list = Array.isArray(items) && items.length > 0 ? items : [src];
+      const idx = Math.max(0, list.indexOf(src));
+      return {
+        previewSrc: src,
+        previewItems: list,
+        previewIndex: idx,
+      };
+    }),
+  prevPreview: () =>
+    set((s) => {
+      if (s.previewItems.length <= 1 || s.previewIndex < 0) return {};
+      const nextIndex =
+        (s.previewIndex - 1 + s.previewItems.length) % s.previewItems.length;
+      return {
+        previewIndex: nextIndex,
+        previewSrc: s.previewItems[nextIndex] ?? s.previewSrc,
+      };
+    }),
+  nextPreview: () =>
+    set((s) => {
+      if (s.previewItems.length <= 1 || s.previewIndex < 0) return {};
+      const nextIndex = (s.previewIndex + 1) % s.previewItems.length;
+      return {
+        previewIndex: nextIndex,
+        previewSrc: s.previewItems[nextIndex] ?? s.previewSrc,
+      };
+    }),
+  closePreview: () =>
+    set({ previewSrc: null, previewItems: [], previewIndex: -1 }),
 
-  promptWorkflowName: (defaultName = '') => {
-    return new Promise<{ name: string; overwriteId?: string } | null>(resolve => {
-      set({ showNamingDialog: true, namingDialogDefault: defaultName, namingDialogResolve: resolve })
-    })
+  promptWorkflowName: (defaultName = "") => {
+    return new Promise<{ name: string; overwriteId?: string } | null>(
+      (resolve) => {
+        set({
+          showNamingDialog: true,
+          namingDialogDefault: defaultName,
+          namingDialogResolve: resolve,
+        });
+      },
+    );
   },
 
   resolveNamingDialog: (result) => {
-    const { namingDialogResolve } = get()
-    if (namingDialogResolve) namingDialogResolve(result)
-    set({ showNamingDialog: false, namingDialogResolve: null })
-  }
-}))
+    const { namingDialogResolve } = get();
+    if (namingDialogResolve) namingDialogResolve(result);
+    set({ showNamingDialog: false, namingDialogResolve: null });
+  },
+}));
diff --git a/src/workflow/stores/workflow.store.ts b/src/workflow/stores/workflow.store.ts
index 442e6aed..31d0ee21 100644
--- a/src/workflow/stores/workflow.store.ts
+++ b/src/workflow/stores/workflow.store.ts
@@ -2,7 +2,7 @@
  * Workflow Zustand store — manages canvas nodes, edges, and workflow metadata.
  * Includes snapshot-based undo/redo (Ctrl+Z / Ctrl+Shift+Z).
  */
-import { create } from 'zustand'
+import { create } from "zustand";
 import {
   type Node as ReactFlowNode,
   type Edge as ReactFlowEdge,
@@ -11,172 +11,198 @@ import {
   type NodeChange,
   type EdgeChange,
   applyNodeChanges,
-  applyEdgeChanges
-} from 'reactflow'
-import { v4 as uuid } from 'uuid'
-import { workflowIpc, registryIpc } from '../ipc/ipc-client'
-import type { WorkflowNode, WorkflowEdge } from '@/workflow/types/workflow'
+  applyEdgeChanges,
+} from "reactflow";
+import { v4 as uuid } from "uuid";
+import { workflowIpc, registryIpc } from "../ipc/ipc-client";
+import type { WorkflowNode, WorkflowEdge } from "@/workflow/types/workflow";
 
 /** Lazy getter to avoid circular import with execution.store */
 function getActiveExecutions(): Set<string> {
   try {
     // Dynamic import resolved at runtime, not at module load
     // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const mod = require('./execution.store')
-    const executionStore = resolveStoreExport<{ activeExecutions: Set<string> }>(mod, 'useExecutionStore')
-    return executionStore?.getState().activeExecutions ?? new Set()
+    const mod = require("./execution.store");
+    const executionStore = resolveStoreExport<{
+      activeExecutions: Set<string>;
+    }>(mod, "useExecutionStore");
+    return executionStore?.getState().activeExecutions ?? new Set();
   } catch {
-    return new Set()
+    return new Set();
   }
 }
 
 type StoreWithGetState<TState> = {
-  getState: () => TState
-}
-
-function resolveStoreExport<TState>(mod: unknown, name: string): StoreWithGetState<TState> | null {
-  if (!mod || typeof mod !== 'object') return null
-  const moduleObj = mod as Record<string, unknown>
-  const direct = moduleObj[name] as StoreWithGetState<TState> | undefined
-  if (direct && typeof direct.getState === 'function') return direct
-
-  const defaultExport = moduleObj.default as Record<string, unknown> | undefined
-  if (!defaultExport || typeof defaultExport !== 'object') return null
-
-  const nested = defaultExport[name] as StoreWithGetState<TState> | undefined
-  if (nested && typeof nested.getState === 'function') return nested
-
-  const defaultStore = defaultExport as unknown as StoreWithGetState<TState>
-  if (typeof defaultStore.getState === 'function') return defaultStore
-
-  return null
+  getState: () => TState;
+};
+
+function resolveStoreExport<TState>(
+  mod: unknown,
+  name: string,
+): StoreWithGetState<TState> | null {
+  if (!mod || typeof mod !== "object") return null;
+  const moduleObj = mod as Record<string, unknown>;
+  const direct = moduleObj[name] as StoreWithGetState<TState> | undefined;
+  if (direct && typeof direct.getState === "function") return direct;
+
+  const defaultExport = moduleObj.default as
+    | Record<string, unknown>
+    | undefined;
+  if (!defaultExport || typeof defaultExport !== "object") return null;
+
+  const nested = defaultExport[name] as StoreWithGetState<TState> | undefined;
+  if (nested && typeof nested.getState === "function") return nested;
+
+  const defaultStore = defaultExport as unknown as StoreWithGetState<TState>;
+  if (typeof defaultStore.getState === "function") return defaultStore;
+
+  return null;
 }
 
 /* ── Default content for new workflows ─────────────────────────────────── */
 
-const DEFAULT_NEW_WORKFLOW_MODEL = 'bytedance/seedream-v4.5'
-const DEFAULT_NEW_WORKFLOW_PROMPT = 'An ethereal female elf with long platinum-blonde hair and pointed ears, wearing an elegant dress made of leaves and vines. She stands barefoot in an ancient forest illuminated by magical light spots, one hand gently touching a glowing mushroom. Her expression is otherworldly and curious. Dreamy soft focus, Tyndall effect light beams filtering through the canopy, magical realism photography.'
+const DEFAULT_NEW_WORKFLOW_MODEL = "bytedance/seedream-v4.5";
+const DEFAULT_NEW_WORKFLOW_PROMPT =
+  "An ethereal female elf with long platinum-blonde hair and pointed ears, wearing an elegant dress made of leaves and vines. She stands barefoot in an ancient forest illuminated by magical light spots, one hand gently touching a glowing mushroom. Her expression is otherworldly and curious. Dreamy soft focus, Tyndall effect light beams filtering through the canopy, magical realism photography.";
 
 /** Returns one AI task node (and no edges) for a new workflow. */
-export function getDefaultNewWorkflowContent(): { nodes: ReactFlowNode[]; edges: ReactFlowEdge[] } {
-  const nodeId = uuid()
+export function getDefaultNewWorkflowContent(): {
+  nodes: ReactFlowNode[];
+  edges: ReactFlowEdge[];
+} {
+  const nodeId = uuid();
   return {
-    nodes: [{
-      id: nodeId,
-      type: 'custom',
-      position: { x: 120, y: 120 },
-      data: {
-        nodeType: 'ai-task/run',
-        params: { modelId: DEFAULT_NEW_WORKFLOW_MODEL, prompt: DEFAULT_NEW_WORKFLOW_PROMPT },
-        label: '',
-        paramDefinitions: [],
-        inputDefinitions: [],
-        outputDefinitions: []
-      }
-    }],
-    edges: []
-  }
+    nodes: [
+      {
+        id: nodeId,
+        type: "custom",
+        position: { x: 120, y: 120 },
+        data: {
+          nodeType: "ai-task/run",
+          params: {
+            modelId: DEFAULT_NEW_WORKFLOW_MODEL,
+            prompt: DEFAULT_NEW_WORKFLOW_PROMPT,
+          },
+          label: "",
+          paramDefinitions: [],
+          inputDefinitions: [],
+          outputDefinitions: [],
+        },
+      },
+    ],
+    edges: [],
+  };
 }
 
 /* ── Undo / Redo history (snapshot-based) ──────────────────────────────── */
 
-const MAX_UNDO = 50
+const MAX_UNDO = 50;
 
 interface Snapshot {
-  nodes: ReactFlowNode[]
-  edges: ReactFlowEdge[]
+  nodes: ReactFlowNode[];
+  edges: ReactFlowEdge[];
 }
 
-let undoStack: Snapshot[] = []
-let redoStack: Snapshot[] = []
+let undoStack: Snapshot[] = [];
+let redoStack: Snapshot[] = [];
 
 function pushUndo(s: Snapshot) {
-  undoStack = [...undoStack.slice(-(MAX_UNDO - 1)), s]
-  redoStack = [] // any new change clears redo
+  undoStack = [...undoStack.slice(-(MAX_UNDO - 1)), s];
+  redoStack = []; // any new change clears redo
 }
 
 /** Time-debounced undo push — avoids creating a snapshot on every keystroke
  *  during rapid text editing (especially CJK IME input). */
-let _lastUndoPushTime = 0
-const UNDO_DEBOUNCE_MS = 600
+let _lastUndoPushTime = 0;
+const UNDO_DEBOUNCE_MS = 600;
 
 function pushUndoDebounced(s: Snapshot) {
-  const now = Date.now()
+  const now = Date.now();
   if (now - _lastUndoPushTime > UNDO_DEBOUNCE_MS) {
-    pushUndo(s)
-    _lastUndoPushTime = now
+    pushUndo(s);
+    _lastUndoPushTime = now;
   }
 }
 
 /** Snapshot captured at the start of a node drag — pushed to undo when drag ends. */
-let _dragStartSnapshot: Snapshot | null = null
+let _dragStartSnapshot: Snapshot | null = null;
 
 /* ── Save concurrency guard ────────────────────────────────────────────── */
-let _saveInProgress = false
+let _saveInProgress = false;
 
 export interface SaveWorkflowOptions {
   /** When true, untitled workflows are saved with an auto-generated name instead of prompting. */
-  forRun?: boolean
+  forRun?: boolean;
 }
 
 /** Internal save implementation — extracted so the concurrency guard stays clean. */
 async function _doSaveWorkflow(
   get: () => WorkflowState,
   set: (partial: Partial<WorkflowState>) => void,
-  options?: SaveWorkflowOptions
+  options?: SaveWorkflowOptions,
 ) {
-  let { workflowId } = get()
-  const { workflowName, nodes, edges } = get()
+  let { workflowId } = get();
+  const { workflowName, nodes, edges } = get();
 
   // Don't save unnamed workflows — prompt user for a name via UI dialog (unless saving for run)
-  const isUntitled = !workflowName || /^Untitled Workflow(\s+\d+)?$/.test(workflowName)
+  const isUntitled =
+    !workflowName || /^Untitled Workflow(\s+\d+)?$/.test(workflowName);
   if (isUntitled) {
     if (options?.forRun) {
       // Auto-generate a name so Run Workflow never requires naming
-      const autoName = `Workflow ${new Date().toISOString().slice(0, 19).replace('T', ' ')}`
-      set({ workflowName: autoName })
+      const autoName = `Workflow ${new Date().toISOString().slice(0, 19).replace("T", " ")}`;
+      set({ workflowName: autoName });
     } else {
-      const uiStoreModule = await import('./ui.store')
-      const uiStore = resolveStoreExport<{ promptWorkflowName: (defaultName?: string) => Promise<{ name: string; overwriteId?: string } | null> }>(uiStoreModule, 'useUIStore')
-      const promptWorkflowName = uiStore?.getState().promptWorkflowName
-      if (typeof promptWorkflowName !== 'function') {
-        throw new Error('Workflow naming dialog is unavailable')
+      const uiStoreModule = await import("./ui.store");
+      const uiStore = resolveStoreExport<{
+        promptWorkflowName: (
+          defaultName?: string,
+        ) => Promise<{ name: string; overwriteId?: string } | null>;
+      }>(uiStoreModule, "useUIStore");
+      const promptWorkflowName = uiStore?.getState().promptWorkflowName;
+      if (typeof promptWorkflowName !== "function") {
+        throw new Error("Workflow naming dialog is unavailable");
       }
-      const result = await promptWorkflowName(workflowName || '')
-      if (!result || !result.name.trim() || /^Untitled Workflow(\s+\d+)?$/.test(result.name.trim())) return
-      set({ workflowName: result.name.trim() })
+      const result = await promptWorkflowName(workflowName || "");
+      if (
+        !result ||
+        !result.name.trim() ||
+        /^Untitled Workflow(\s+\d+)?$/.test(result.name.trim())
+      )
+        return;
+      set({ workflowName: result.name.trim() });
       // If user chose to overwrite an existing workflow, use that workflow's ID
       if (result.overwriteId) {
-        workflowId = result.overwriteId
-        set({ workflowId: result.overwriteId })
+        workflowId = result.overwriteId;
+        set({ workflowId: result.overwriteId });
       }
     }
   }
 
-  let finalName = get().workflowName
+  let finalName = get().workflowName;
 
   // Session restore may carry a stale workflowId (e.g. after reinstall or DB path migration).
   // Validate it before save; if not found, create a new workflow on this save.
   if (workflowId) {
     try {
-      await workflowIpc.load(workflowId)
+      await workflowIpc.load(workflowId);
     } catch {
-      workflowId = null
-      set({ workflowId: null })
+      workflowId = null;
+      set({ workflowId: null });
     }
   }
 
   // Auto-create workflow on first save (lazy creation)
   if (!workflowId) {
-    if (nodes.length === 0) return
-    const wf = await workflowIpc.create({ name: finalName })
-    workflowId = wf.id
+    if (nodes.length === 0) return;
+    const wf = await workflowIpc.create({ name: finalName });
+    workflowId = wf.id;
     // Use the actual name returned by create (may have been deduplicated)
-    finalName = wf.name
-    set({ workflowId: wf.id, workflowName: wf.name })
+    finalName = wf.name;
+    set({ workflowId: wf.id, workflowName: wf.name });
   }
 
-  const wfNodes: WorkflowNode[] = nodes.map(n => ({
+  const wfNodes: WorkflowNode[] = nodes.map((n) => ({
     id: n.id,
     workflowId: workflowId!,
     nodeType: n.data.nodeType,
@@ -185,80 +211,103 @@ async function _doSaveWorkflow(
       ...(n.data.params ?? {}),
       __meta: {
         label: n.data.label,
-        modelInputSchema: n.data.modelInputSchema ?? []
-      }
+        modelInputSchema: n.data.modelInputSchema ?? [],
+      },
     },
-    currentOutputId: null // placeholder — repo will preserve existing DB value
-  }))
+    currentOutputId: null, // placeholder — repo will preserve existing DB value
+  }));
 
-  const wfEdges: WorkflowEdge[] = edges.map(e => ({
+  const wfEdges: WorkflowEdge[] = edges.map((e) => ({
     id: e.id,
     workflowId: workflowId!,
     sourceNodeId: e.source,
-    sourceOutputKey: e.sourceHandle ?? 'output',
+    sourceOutputKey: e.sourceHandle ?? "output",
     targetNodeId: e.target,
-    targetInputKey: e.targetHandle ?? 'input'
-  }))
-
-  await workflowIpc.save({ id: workflowId!, name: finalName, nodes: wfNodes, edges: wfEdges })
+    targetInputKey: e.targetHandle ?? "input",
+  }));
+
+  await workflowIpc.save({
+    id: workflowId!,
+    name: finalName,
+    nodes: wfNodes,
+    edges: wfEdges,
+  });
   // Sync name back — backend may have deduplicated it
   try {
-    const saved = await workflowIpc.load(workflowId!)
+    const saved = await workflowIpc.load(workflowId!);
     if (saved.name !== finalName) {
-      set({ workflowName: saved.name })
+      set({ workflowName: saved.name });
     }
-  } catch { /* ignore */ }
-  set({ isDirty: false })
+  } catch {
+    /* ignore */
+  }
+  set({ isDirty: false });
 }
 
 /* ── Store ─────────────────────────────────────────────────────────────── */
 
 export interface WorkflowState {
-  nodes: ReactFlowNode[]
-  edges: ReactFlowEdge[]
-  workflowId: string | null
-  workflowName: string
-  isDirty: boolean
-  canUndo: boolean
-  canRedo: boolean
-
-  addNode: (type: string, position: XYPosition, defaultParams?: Record<string, unknown>, label?: string, paramDefs?: unknown[], inputDefs?: unknown[], outputDefs?: unknown[]) => string
-  removeNode: (nodeId: string) => void
-  removeNodes: (nodeIds: string[]) => void
-  duplicateNode: (nodeId: string) => string
-  addEdge: (connection: Connection) => void
-  removeEdge: (edgeId: string) => void
-  removeEdgesByIds: (edgeIds: string[]) => void
-  updateNodeParams: (nodeId: string, params: Record<string, unknown>) => void
-  updateNodeData: (nodeId: string, data: Record<string, unknown>) => void
-  onNodesChange: (changes: NodeChange[]) => void
-  onEdgesChange: (changes: EdgeChange[]) => void
-  undo: () => void
-  redo: () => void
-  saveWorkflow: (options?: SaveWorkflowOptions) => Promise<void>
-  loadWorkflow: (id: string) => Promise<void>
-  newWorkflow: (name: string) => Promise<void>
-  setWorkflowName: (name: string) => void
-  renameWorkflow: (newName: string) => Promise<void>
-  reset: () => void
+  nodes: ReactFlowNode[];
+  edges: ReactFlowEdge[];
+  workflowId: string | null;
+  workflowName: string;
+  isDirty: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+
+  addNode: (
+    type: string,
+    position: XYPosition,
+    defaultParams?: Record<string, unknown>,
+    label?: string,
+    paramDefs?: unknown[],
+    inputDefs?: unknown[],
+    outputDefs?: unknown[],
+  ) => string;
+  removeNode: (nodeId: string) => void;
+  removeNodes: (nodeIds: string[]) => void;
+  duplicateNode: (nodeId: string) => string;
+  addEdge: (connection: Connection) => void;
+  removeEdge: (edgeId: string) => void;
+  removeEdgesByIds: (edgeIds: string[]) => void;
+  updateNodeParams: (nodeId: string, params: Record<string, unknown>) => void;
+  updateNodeData: (nodeId: string, data: Record<string, unknown>) => void;
+  onNodesChange: (changes: NodeChange[]) => void;
+  onEdgesChange: (changes: EdgeChange[]) => void;
+  undo: () => void;
+  redo: () => void;
+  saveWorkflow: (options?: SaveWorkflowOptions) => Promise<void>;
+  loadWorkflow: (id: string) => Promise<void>;
+  newWorkflow: (name: string) => Promise<void>;
+  setWorkflowName: (name: string) => void;
+  renameWorkflow: (newName: string) => Promise<void>;
+  reset: () => void;
 }
 
 export const useWorkflowStore = create<WorkflowState>((set, get) => ({
   nodes: [],
   edges: [],
   workflowId: null,
-  workflowName: 'Untitled Workflow',
+  workflowName: "Untitled Workflow",
   isDirty: false,
   canUndo: false,
   canRedo: false,
 
-  addNode: (type, position, defaultParams = {}, label, paramDefs = [], inputDefs = [], outputDefs = []) => {
-    const { nodes, edges, workflowId } = get()
-    pushUndo({ nodes, edges })
-    const id = uuid()
+  addNode: (
+    type,
+    position,
+    defaultParams = {},
+    label,
+    paramDefs = [],
+    inputDefs = [],
+    outputDefs = [],
+  ) => {
+    const { nodes, edges, workflowId } = get();
+    pushUndo({ nodes, edges });
+    const id = uuid();
     const newNode: ReactFlowNode = {
       id,
-      type: 'custom',
+      type: "custom",
       position,
       data: {
         nodeType: type,
@@ -266,242 +315,337 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
         label: label ?? type,
         paramDefinitions: paramDefs,
         inputDefinitions: inputDefs,
-        outputDefinitions: outputDefs
-      }
-    }
-    set(state => ({ nodes: [...state.nodes, newNode], isDirty: true, canUndo: true, canRedo: false }))
+        outputDefinitions: outputDefs,
+      },
+    };
+    set((state) => ({
+      nodes: [...state.nodes, newNode],
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
 
     // Only auto-save if workflow already exists; don't auto-create on node add
     if (workflowId) {
-      setTimeout(() => { get().saveWorkflow().catch(console.error) }, 100)
+      setTimeout(() => {
+        get().saveWorkflow().catch(console.error);
+      }, 100);
     }
-    return id
+    return id;
   },
 
   removeNode: (nodeId) => {
     // Guard: prevent deleting a running node
     if (getActiveExecutions().has(nodeId)) {
-      alert('Cannot delete a running node. Cancel execution first.')
-      return
+      alert("Cannot delete a running node. Cancel execution first.");
+      return;
     }
-    const { nodes, edges } = get()
-    pushUndo({ nodes, edges })
-    set(state => ({
-      nodes: state.nodes.filter(n => n.id !== nodeId),
-      edges: state.edges.filter(e => e.source !== nodeId && e.target !== nodeId),
-      isDirty: true, canUndo: true, canRedo: false
-    }))
+    const { nodes, edges } = get();
+    pushUndo({ nodes, edges });
+    set((state) => ({
+      nodes: state.nodes.filter((n) => n.id !== nodeId),
+      edges: state.edges.filter(
+        (e) => e.source !== nodeId && e.target !== nodeId,
+      ),
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
   },
 
   removeNodes: (nodeIds) => {
-    if (nodeIds.length === 0) return
-    const activeExecs = getActiveExecutions()
-    const blocked = nodeIds.filter(id => activeExecs.has(id))
+    if (nodeIds.length === 0) return;
+    const activeExecs = getActiveExecutions();
+    const blocked = nodeIds.filter((id) => activeExecs.has(id));
     if (blocked.length > 0) {
-      alert('Cannot delete running nodes. Cancel execution first.')
-      return
+      alert("Cannot delete running nodes. Cancel execution first.");
+      return;
     }
-    const { nodes, edges } = get()
-    pushUndo({ nodes, edges })
-    const removeSet = new Set(nodeIds)
-    set(state => ({
-      nodes: state.nodes.filter(n => !removeSet.has(n.id)),
-      edges: state.edges.filter(e => !removeSet.has(e.source) && !removeSet.has(e.target)),
-      isDirty: true, canUndo: true, canRedo: false
-    }))
+    const { nodes, edges } = get();
+    pushUndo({ nodes, edges });
+    const removeSet = new Set(nodeIds);
+    set((state) => ({
+      nodes: state.nodes.filter((n) => !removeSet.has(n.id)),
+      edges: state.edges.filter(
+        (e) => !removeSet.has(e.source) && !removeSet.has(e.target),
+      ),
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
   },
 
   duplicateNode: (nodeId) => {
-    const state = get()
-    const orig = state.nodes.find(n => n.id === nodeId)
-    if (!orig) return ''
-    pushUndo({ nodes: state.nodes, edges: state.edges })
-    const id = uuid()
+    const state = get();
+    const orig = state.nodes.find((n) => n.id === nodeId);
+    if (!orig) return "";
+    pushUndo({ nodes: state.nodes, edges: state.edges });
+    const id = uuid();
     const newNode: ReactFlowNode = {
-      ...orig, id,
+      ...orig,
+      id,
       position: { x: orig.position.x + 50, y: orig.position.y + 50 },
-      data: { ...orig.data, params: { ...orig.data.params } }
-    }
-    set(state => ({ nodes: [...state.nodes, newNode], isDirty: true, canUndo: true, canRedo: false }))
-    return id
+      data: { ...orig.data, params: { ...orig.data.params } },
+    };
+    set((state) => ({
+      nodes: [...state.nodes, newNode],
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
+    return id;
   },
 
   addEdge: (connection) => {
-    if (!connection.source || !connection.target) return
+    if (!connection.source || !connection.target) return;
     // Guard: no self-connections
-    if (connection.source === connection.target) return
-    const { nodes, edges } = get()
+    if (connection.source === connection.target) return;
+    const { nodes, edges } = get();
     // Guard: no duplicate connections (same source handle → same target handle)
-    const duplicate = edges.some(e =>
-      e.source === connection.source && e.target === connection.target &&
-      e.sourceHandle === (connection.sourceHandle ?? 'output') &&
-      e.targetHandle === (connection.targetHandle ?? 'input')
-    )
-    if (duplicate) return
+    const duplicate = edges.some(
+      (e) =>
+        e.source === connection.source &&
+        e.target === connection.target &&
+        e.sourceHandle === (connection.sourceHandle ?? "output") &&
+        e.targetHandle === (connection.targetHandle ?? "input"),
+    );
+    if (duplicate) return;
     // Guard: a target handle can only have one incoming connection
-    const targetHandle = connection.targetHandle ?? 'input'
-    const existingToTarget = edges.some(e => e.target === connection.target && e.targetHandle === targetHandle)
+    const targetHandle = connection.targetHandle ?? "input";
+    const existingToTarget = edges.some(
+      (e) => e.target === connection.target && e.targetHandle === targetHandle,
+    );
     if (existingToTarget) {
       // Replace the existing connection
-      const filtered = edges.filter(e => !(e.target === connection.target && e.targetHandle === targetHandle))
-      pushUndo({ nodes, edges })
-      const id = uuid()
+      const filtered = edges.filter(
+        (e) =>
+          !(e.target === connection.target && e.targetHandle === targetHandle),
+      );
+      pushUndo({ nodes, edges });
+      const id = uuid();
       const newEdge: ReactFlowEdge = {
-        id, source: connection.source, target: connection.target,
-        sourceHandle: connection.sourceHandle ?? 'output', targetHandle, type: 'custom'
-      }
-      set({ edges: [...filtered, newEdge], isDirty: true, canUndo: true, canRedo: false })
+        id,
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle ?? "output",
+        targetHandle,
+        type: "custom",
+      };
+      set({
+        edges: [...filtered, newEdge],
+        isDirty: true,
+        canUndo: true,
+        canRedo: false,
+      });
     } else {
-      pushUndo({ nodes, edges })
-      const id = uuid()
+      pushUndo({ nodes, edges });
+      const id = uuid();
       const newEdge: ReactFlowEdge = {
-        id, source: connection.source, target: connection.target,
-        sourceHandle: connection.sourceHandle ?? 'output', targetHandle, type: 'custom'
-      }
-      set(state => ({ edges: [...state.edges, newEdge], isDirty: true, canUndo: true, canRedo: false }))
+        id,
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle ?? "output",
+        targetHandle,
+        type: "custom",
+      };
+      set((state) => ({
+        edges: [...state.edges, newEdge],
+        isDirty: true,
+        canUndo: true,
+        canRedo: false,
+      }));
     }
     setTimeout(() => {
-      const state = get()
-      if (state.workflowId) state.saveWorkflow().catch(console.error)
-    }, 100)
+      const state = get();
+      if (state.workflowId) state.saveWorkflow().catch(console.error);
+    }, 100);
   },
 
   removeEdge: (edgeId) => {
-    const { nodes, edges } = get()
-    pushUndo({ nodes, edges })
-    set(state => ({ edges: state.edges.filter(e => e.id !== edgeId), isDirty: true, canUndo: true, canRedo: false }))
+    const { nodes, edges } = get();
+    pushUndo({ nodes, edges });
+    set((state) => ({
+      edges: state.edges.filter((e) => e.id !== edgeId),
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
   },
 
   removeEdgesByIds: (edgeIds) => {
-    if (edgeIds.length === 0) return
-    const { nodes, edges } = get()
-    pushUndo({ nodes, edges })
-    const removeSet = new Set(edgeIds)
-    set(state => ({ edges: state.edges.filter(e => !removeSet.has(e.id)), isDirty: true, canUndo: true, canRedo: false }))
+    if (edgeIds.length === 0) return;
+    const { nodes, edges } = get();
+    pushUndo({ nodes, edges });
+    const removeSet = new Set(edgeIds);
+    set((state) => ({
+      edges: state.edges.filter((e) => !removeSet.has(e.id)),
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
   },
 
   updateNodeParams: (nodeId, params) => {
-    const { nodes, edges } = get()
-    pushUndoDebounced({ nodes, edges })
-    set(state => ({
-      nodes: state.nodes.map(n => n.id === nodeId ? { ...n, data: { ...n.data, params } } : n),
-      isDirty: true, canUndo: true, canRedo: false
-    }))
+    const { nodes, edges } = get();
+    pushUndoDebounced({ nodes, edges });
+    set((state) => ({
+      nodes: state.nodes.map((n) =>
+        n.id === nodeId ? { ...n, data: { ...n.data, params } } : n,
+      ),
+      isDirty: true,
+      canUndo: true,
+      canRedo: false,
+    }));
   },
 
   updateNodeData: (nodeId, dataUpdate) => {
-    set(state => ({
-      nodes: state.nodes.map(n => n.id === nodeId ? { ...n, data: { ...n.data, ...dataUpdate } } : n),
-      isDirty: true
-    }))
+    set((state) => ({
+      nodes: state.nodes.map((n) =>
+        n.id === nodeId ? { ...n, data: { ...n.data, ...dataUpdate } } : n,
+      ),
+      isDirty: true,
+    }));
   },
 
   onNodesChange: (changes) => {
     // Structural changes (add/remove) always push undo immediately
-    const isStructural = changes.some(c => c.type === 'remove' || c.type === 'add')
+    const isStructural = changes.some(
+      (c) => c.type === "remove" || c.type === "add",
+    );
     if (isStructural) {
-      const { nodes, edges } = get()
-      pushUndo({ nodes, edges })
+      const { nodes, edges } = get();
+      pushUndo({ nodes, edges });
     }
 
     // Track node drag: capture snapshot at drag start, push undo at drag end
-    const posChanges = changes.filter((c): c is NodeChange & { type: 'position'; dragging?: boolean } => c.type === 'position')
+    const posChanges = changes.filter(
+      (c): c is NodeChange & { type: "position"; dragging?: boolean } =>
+        c.type === "position",
+    );
     if (posChanges.length > 0) {
-      const anyDragging = posChanges.some(c => c.dragging === true)
-      const anyDragEnd = posChanges.some(c => c.dragging === false)
+      const anyDragging = posChanges.some((c) => c.dragging === true);
+      const anyDragEnd = posChanges.some((c) => c.dragging === false);
 
       if (anyDragging && !_dragStartSnapshot) {
         // Drag just started — capture current state before positions change
-        const { nodes, edges } = get()
-        _dragStartSnapshot = { nodes, edges }
+        const { nodes, edges } = get();
+        _dragStartSnapshot = { nodes, edges };
       }
       if (anyDragEnd && _dragStartSnapshot) {
         // Drag ended — push the pre-drag snapshot to undo stack
-        pushUndo(_dragStartSnapshot)
-        _dragStartSnapshot = null
+        pushUndo(_dragStartSnapshot);
+        _dragStartSnapshot = null;
       }
     }
 
-    set(state => ({
+    set((state) => ({
       nodes: applyNodeChanges(changes, state.nodes),
       isDirty: true,
-      ...(isStructural || posChanges.some(c => c.dragging === false) ? { canUndo: true, canRedo: false } : {})
-    }))
+      ...(isStructural || posChanges.some((c) => c.dragging === false)
+        ? { canUndo: true, canRedo: false }
+        : {}),
+    }));
   },
 
   onEdgesChange: (changes) => {
-    const isStructural = changes.some(c => c.type === 'remove' || c.type === 'add')
+    const isStructural = changes.some(
+      (c) => c.type === "remove" || c.type === "add",
+    );
     if (isStructural) {
-      const { nodes, edges } = get()
-      pushUndo({ nodes, edges })
+      const { nodes, edges } = get();
+      pushUndo({ nodes, edges });
     }
-    set(state => ({
+    set((state) => ({
       edges: applyEdgeChanges(changes, state.edges),
       isDirty: true,
-      ...(isStructural ? { canUndo: true, canRedo: false } : {})
-    }))
+      ...(isStructural ? { canUndo: true, canRedo: false } : {}),
+    }));
   },
 
   undo: () => {
-    if (undoStack.length === 0) return
-    const { nodes, edges } = get()
-    redoStack = [...redoStack, { nodes, edges }]
-    const prev = undoStack[undoStack.length - 1]
-    undoStack = undoStack.slice(0, -1)
-    set({ nodes: prev.nodes, edges: prev.edges, isDirty: true, canUndo: undoStack.length > 0, canRedo: true })
+    if (undoStack.length === 0) return;
+    const { nodes, edges } = get();
+    redoStack = [...redoStack, { nodes, edges }];
+    const prev = undoStack[undoStack.length - 1];
+    undoStack = undoStack.slice(0, -1);
+    set({
+      nodes: prev.nodes,
+      edges: prev.edges,
+      isDirty: true,
+      canUndo: undoStack.length > 0,
+      canRedo: true,
+    });
   },
 
   redo: () => {
-    if (redoStack.length === 0) return
-    const { nodes, edges } = get()
-    undoStack = [...undoStack, { nodes, edges }]
-    const next = redoStack[redoStack.length - 1]
-    redoStack = redoStack.slice(0, -1)
-    set({ nodes: next.nodes, edges: next.edges, isDirty: true, canUndo: true, canRedo: redoStack.length > 0 })
+    if (redoStack.length === 0) return;
+    const { nodes, edges } = get();
+    undoStack = [...undoStack, { nodes, edges }];
+    const next = redoStack[redoStack.length - 1];
+    redoStack = redoStack.slice(0, -1);
+    set({
+      nodes: next.nodes,
+      edges: next.edges,
+      isDirty: true,
+      canUndo: true,
+      canRedo: redoStack.length > 0,
+    });
   },
 
   saveWorkflow: async (options) => {
     // Prevent concurrent saves — two overlapping calls can both see workflowId=null
     // and each create a separate workflow, resulting in duplicates.
-    if (_saveInProgress) return
-    _saveInProgress = true
+    if (_saveInProgress) return;
+    _saveInProgress = true;
     try {
-      await _doSaveWorkflow(get, set, options)
+      await _doSaveWorkflow(get, set, options);
     } finally {
-      _saveInProgress = false
+      _saveInProgress = false;
     }
   },
 
   loadWorkflow: async (id) => {
-    const wf = await workflowIpc.load(id)
-    let defMap = new Map<string, { params: unknown[]; inputs: unknown[]; outputs: unknown[]; label: string }>()
+    const wf = await workflowIpc.load(id);
+    let defMap = new Map<
+      string,
+      {
+        params: unknown[];
+        inputs: unknown[];
+        outputs: unknown[];
+        label: string;
+      }
+    >();
     try {
-      const defs = await registryIpc.getAll()
+      const defs = await registryIpc.getAll();
       defMap = new Map(
-        defs.map(def => [
+        defs.map((def) => [
           def.type,
           {
             params: def.params ?? [],
             inputs: def.inputs ?? [],
             outputs: def.outputs ?? [],
-            label: def.label ?? def.type
-          }
-        ])
-      )
+            label: def.label ?? def.type,
+          },
+        ]),
+      );
     } catch {
       // Keep empty map as fallback; nodes still load with persisted params.
     }
 
-    const rfNodes: ReactFlowNode[] = wf.graphDefinition.nodes.map(n => {
+    const rfNodes: ReactFlowNode[] = wf.graphDefinition.nodes.map((n) => {
       // Restore modelInputSchema and label from saved params metadata
-      const meta = (n.params as Record<string, unknown>).__meta as Record<string, unknown> | undefined
-      const modelInputSchema = meta?.modelInputSchema as unknown[] | undefined
-      const def = defMap.get(n.nodeType)
-      const label = (meta?.label as string) || (def ? def.label : n.nodeType)
+      const meta = (n.params as Record<string, unknown>).__meta as
+        | Record<string, unknown>
+        | undefined;
+      const modelInputSchema = meta?.modelInputSchema as unknown[] | undefined;
+      const def = defMap.get(n.nodeType);
+      const label = (meta?.label as string) || (def ? def.label : n.nodeType);
       // Strip __meta from the params passed to the node
-      const { __meta: _, ...cleanParams } = n.params as Record<string, unknown>
+      const { __meta: _, ...cleanParams } = n.params as Record<string, unknown>;
       return {
-        id: n.id, type: 'custom', position: n.position,
+        id: n.id,
+        type: "custom",
+        position: n.position,
         data: {
           nodeType: n.nodeType,
           params: cleanParams,
@@ -509,46 +653,82 @@ export const useWorkflowStore = create<WorkflowState>((set, get) => ({
           modelInputSchema: modelInputSchema ?? [],
           paramDefinitions: def?.params ?? [],
           inputDefinitions: def?.inputs ?? [],
-          outputDefinitions: def?.outputs ?? []
-        }
-      }
-    })
-    const rfEdges: ReactFlowEdge[] = wf.graphDefinition.edges.map(e => ({
-      id: e.id, source: e.sourceNodeId, target: e.targetNodeId,
-      sourceHandle: e.sourceOutputKey, targetHandle: e.targetInputKey, type: 'custom'
-    }))
-    set({ workflowId: wf.id, workflowName: wf.name, nodes: rfNodes, edges: rfEdges, isDirty: false })
+          outputDefinitions: def?.outputs ?? [],
+        },
+      };
+    });
+    const rfEdges: ReactFlowEdge[] = wf.graphDefinition.edges.map((e) => ({
+      id: e.id,
+      source: e.sourceNodeId,
+      target: e.targetNodeId,
+      sourceHandle: e.sourceOutputKey,
+      targetHandle: e.targetInputKey,
+      type: "custom",
+    }));
+    set({
+      workflowId: wf.id,
+      workflowName: wf.name,
+      nodes: rfNodes,
+      edges: rfEdges,
+      isDirty: false,
+    });
 
     // Restore previous execution results for all nodes
     try {
-      const executionStoreModule = await import('./execution.store')
-      const executionStore = resolveStoreExport<{ restoreResultsForNodes: (nodeIds: string[]) => Promise<void> }>(executionStoreModule, 'useExecutionStore')
-      executionStore?.getState().restoreResultsForNodes(rfNodes.map(n => n.id))
-    } catch { /* ignore */ }
+      const executionStoreModule = await import("./execution.store");
+      const executionStore = resolveStoreExport<{
+        restoreResultsForNodes: (nodeIds: string[]) => Promise<void>;
+      }>(executionStoreModule, "useExecutionStore");
+      executionStore
+        ?.getState()
+        .restoreResultsForNodes(rfNodes.map((n) => n.id));
+    } catch {
+      /* ignore */
+    }
   },
 
   newWorkflow: async (name) => {
-    const wf = await workflowIpc.create({ name })
-    const { nodes, edges } = getDefaultNewWorkflowContent()
-    set({ workflowId: wf.id, workflowName: wf.name, nodes, edges, isDirty: false })
+    const wf = await workflowIpc.create({ name });
+    const { nodes, edges } = getDefaultNewWorkflowContent();
+    set({
+      workflowId: wf.id,
+      workflowName: wf.name,
+      nodes,
+      edges,
+      isDirty: false,
+    });
   },
 
   setWorkflowName: (name) => set({ workflowName: name, isDirty: true }),
 
   renameWorkflow: async (newName) => {
-    const { workflowId } = get()
-    set({ workflowName: newName })
+    const { workflowId } = get();
+    set({ workflowName: newName });
     if (workflowId) {
-      const result = await workflowIpc.rename(workflowId, newName) as unknown as { finalName: string } | void
+      const result = (await workflowIpc.rename(
+        workflowId,
+        newName,
+      )) as unknown as { finalName: string } | void;
       // If the backend deduplicated the name, sync it back
-      if (result && typeof result === 'object' && 'finalName' in result && result.finalName !== newName) {
-        set({ workflowName: result.finalName })
+      if (
+        result &&
+        typeof result === "object" &&
+        "finalName" in result &&
+        result.finalName !== newName
+      ) {
+        set({ workflowName: result.finalName });
       }
     }
   },
 
   reset: () => {
-    const { nodes, edges } = getDefaultNewWorkflowContent()
-    set({ nodes, edges, workflowId: null, workflowName: 'Untitled Workflow', isDirty: false })
-  }
-}))
+    const { nodes, edges } = getDefaultNewWorkflowContent();
+    set({
+      nodes,
+      edges,
+      workflowId: null,
+      workflowName: "Untitled Workflow",
+      isDirty: false,
+    });
+  },
+}));
diff --git a/src/workflow/types/execution.ts b/src/workflow/types/execution.ts
index 1ad10ed2..03036862 100644
--- a/src/workflow/types/execution.ts
+++ b/src/workflow/types/execution.ts
@@ -2,38 +2,43 @@
  * Execution types — node execution records, status enums, and progress updates.
  */
 
-export type ExecutionStatus = 'pending' | 'running' | 'success' | 'error'
+export type ExecutionStatus = "pending" | "running" | "success" | "error";
 
 export interface NodeExecutionRecord {
-  id: string
-  nodeId: string
-  workflowId: string
-  inputHash: string
-  paramsHash: string
-  status: ExecutionStatus
-  resultPath: string | null
-  resultMetadata: Record<string, unknown> | null
-  durationMs: number | null
-  cost: number
-  createdAt: string
-  score: number | null
-  starred: boolean
+  id: string;
+  nodeId: string;
+  workflowId: string;
+  inputHash: string;
+  paramsHash: string;
+  status: ExecutionStatus;
+  resultPath: string | null;
+  resultMetadata: Record<string, unknown> | null;
+  durationMs: number | null;
+  cost: number;
+  createdAt: string;
+  score: number | null;
+  starred: boolean;
 }
 
-export type NodeStatus = 'idle' | 'running' | 'confirmed' | 'unconfirmed' | 'error'
-export type EdgeStatus = 'no-data' | 'has-data'
+export type NodeStatus =
+  | "idle"
+  | "running"
+  | "confirmed"
+  | "unconfirmed"
+  | "error";
+export type EdgeStatus = "no-data" | "has-data";
 
 export interface NodeStatusUpdate {
-  workflowId: string
-  nodeId: string
-  status: NodeStatus
-  errorMessage?: string
+  workflowId: string;
+  nodeId: string;
+  status: NodeStatus;
+  errorMessage?: string;
 }
 
 export interface ProgressUpdate {
-  workflowId: string
-  nodeId: string
-  progress: number
-  message?: string
-  previewUrl?: string
+  workflowId: string;
+  nodeId: string;
+  progress: number;
+  message?: string;
+  previewUrl?: string;
 }
diff --git a/src/workflow/types/index.ts b/src/workflow/types/index.ts
index 66845d8b..7f2d002f 100644
--- a/src/workflow/types/index.ts
+++ b/src/workflow/types/index.ts
@@ -1,22 +1,48 @@
 export type {
-  Workflow, WorkflowStatus, GraphDefinition, WorkflowNode, WorkflowEdge
-} from './workflow'
+  Workflow,
+  WorkflowStatus,
+  GraphDefinition,
+  WorkflowNode,
+  WorkflowEdge,
+} from "./workflow";
 
 export type {
-  NodeExecutionRecord, ExecutionStatus, NodeStatus, EdgeStatus,
-  NodeStatusUpdate, ProgressUpdate
-} from './execution'
+  NodeExecutionRecord,
+  ExecutionStatus,
+  NodeStatus,
+  EdgeStatus,
+  NodeStatusUpdate,
+  ProgressUpdate,
+} from "./execution";
 
 export type {
-  PortDefinition, PortDataType, ParamDefinition, ParamType,
-  NodeCategory, NodeTypeDefinition, ModelParamSchema, ModelCategory,
-  WaveSpeedModel, ModelListCache
-} from './node-defs'
+  PortDefinition,
+  PortDataType,
+  ParamDefinition,
+  ParamType,
+  NodeCategory,
+  NodeTypeDefinition,
+  ModelParamSchema,
+  ModelCategory,
+  WaveSpeedModel,
+  ModelListCache,
+} from "./node-defs";
 
-export { TYPE_COMPATIBILITY, isCompatible, getCompatibleTypes } from './type-compatibility'
+export {
+  TYPE_COMPATIBILITY,
+  isCompatible,
+  getCompatibleTypes,
+} from "./type-compatibility";
 
 export type {
-  IpcChannels, IpcChannelName, IpcArgs, IpcResult,
-  CreateWorkflowInput, SaveWorkflowInput, WorkflowSummary,
-  CostEstimate, BudgetConfig, ApiKeyConfig
-} from './ipc'
+  IpcChannels,
+  IpcChannelName,
+  IpcArgs,
+  IpcResult,
+  CreateWorkflowInput,
+  SaveWorkflowInput,
+  WorkflowSummary,
+  CostEstimate,
+  BudgetConfig,
+  ApiKeyConfig,
+} from "./ipc";
diff --git a/src/workflow/types/ipc.ts b/src/workflow/types/ipc.ts
index 86200399..b7ed7129 100644
--- a/src/workflow/types/ipc.ts
+++ b/src/workflow/types/ipc.ts
@@ -2,82 +2,122 @@
  * IPC channel type definitions for workflow module.
  */
 
-import type { Workflow, WorkflowNode, WorkflowEdge } from './workflow'
-import type { NodeExecutionRecord, NodeStatusUpdate, ProgressUpdate } from './execution'
-import type { NodeTypeDefinition, WaveSpeedModel } from './node-defs'
+import type { Workflow, WorkflowNode, WorkflowEdge } from "./workflow";
+import type {
+  NodeExecutionRecord,
+  NodeStatusUpdate,
+  ProgressUpdate,
+} from "./execution";
+import type { NodeTypeDefinition, WaveSpeedModel } from "./node-defs";
 
 export interface CreateWorkflowInput {
-  name: string
+  name: string;
 }
 
 export interface SaveWorkflowInput {
-  id: string
-  name: string
-  nodes: WorkflowNode[]
-  edges: WorkflowEdge[]
-  status?: Workflow['status']
+  id: string;
+  name: string;
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  status?: Workflow["status"];
 }
 
 export interface WorkflowSummary {
-  id: string
-  name: string
-  createdAt: string
-  updatedAt: string
-  status: string
-  nodeCount: number
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  status: string;
+  nodeCount: number;
 }
 
 export interface CostEstimate {
-  totalEstimated: number
-  breakdown: { nodeId: string; nodeType: string; estimated: number }[]
-  withinBudget: boolean
-  reason?: string
+  totalEstimated: number;
+  breakdown: { nodeId: string; nodeType: string; estimated: number }[];
+  withinBudget: boolean;
+  reason?: string;
 }
 
 export interface BudgetConfig {
-  perExecutionLimit: number
-  dailyLimit: number
+  perExecutionLimit: number;
+  dailyLimit: number;
 }
 
 export interface ApiKeyConfig {
-  wavespeedKey?: string
-  llmKey?: string
+  wavespeedKey?: string;
+  llmKey?: string;
 }
 
 export type IpcChannels = {
-  'workflow:create': { args: CreateWorkflowInput; result: Workflow }
-  'workflow:save': { args: SaveWorkflowInput; result: void }
-  'workflow:load': { args: { id: string }; result: Workflow }
-  'workflow:list': { args: void; result: WorkflowSummary[] }
-  'workflow:rename': { args: { id: string; name: string }; result: void }
-  'workflow:delete': { args: { id: string }; result: void }
-  'workflow:duplicate': { args: { id: string }; result: Workflow }
-  'execution:run-all': { args: { workflowId: string }; result: void }
-  'execution:run-node': { args: { workflowId: string; nodeId: string }; result: void }
-  'execution:continue-from': { args: { workflowId: string; nodeId: string }; result: void }
-  'execution:retry': { args: { workflowId: string; nodeId: string }; result: void }
-  'execution:cancel': { args: { workflowId: string; nodeId: string }; result: void }
-  'execution:node-status': { args: NodeStatusUpdate; result: void }
-  'execution:progress': { args: ProgressUpdate; result: void }
-  'execution:edge-status': { args: { edgeId: string; status: 'no-data' | 'has-data' }; result: void }
-  'history:list': { args: { nodeId: string }; result: NodeExecutionRecord[] }
-  'history:set-current': { args: { nodeId: string; executionId: string }; result: void }
-  'history:star': { args: { executionId: string; starred: boolean }; result: void }
-  'history:score': { args: { executionId: string; score: number }; result: void }
-  'cost:estimate': { args: { workflowId: string; nodeIds: string[] }; result: CostEstimate }
-  'cost:get-budget': { args: void; result: BudgetConfig }
-  'cost:set-budget': { args: BudgetConfig; result: void }
-  'cost:get-daily-spend': { args: void; result: number }
-  'settings:get-api-keys': { args: void; result: ApiKeyConfig }
-  'settings:set-api-keys': { args: ApiKeyConfig; result: void }
-  'registry:get-all': { args: void; result: NodeTypeDefinition[] }
-  'models:list': { args: void; result: WaveSpeedModel[] }
-  'models:search': { args: { query: string; category?: string; provider?: string }; result: WaveSpeedModel[] }
-  'models:refresh': { args: void; result: WaveSpeedModel[] }
-  'models:get-schema': { args: { modelId: string }; result: WaveSpeedModel | null }
-  'models:refresh-progress': { args: { loaded: number; total: number }; result: void }
-}
+  "workflow:create": { args: CreateWorkflowInput; result: Workflow };
+  "workflow:save": { args: SaveWorkflowInput; result: void };
+  "workflow:load": { args: { id: string }; result: Workflow };
+  "workflow:list": { args: void; result: WorkflowSummary[] };
+  "workflow:rename": { args: { id: string; name: string }; result: void };
+  "workflow:delete": { args: { id: string }; result: void };
+  "workflow:duplicate": { args: { id: string }; result: Workflow };
+  "execution:run-all": { args: { workflowId: string }; result: void };
+  "execution:run-node": {
+    args: { workflowId: string; nodeId: string };
+    result: void;
+  };
+  "execution:continue-from": {
+    args: { workflowId: string; nodeId: string };
+    result: void;
+  };
+  "execution:retry": {
+    args: { workflowId: string; nodeId: string };
+    result: void;
+  };
+  "execution:cancel": {
+    args: { workflowId: string; nodeId: string };
+    result: void;
+  };
+  "execution:node-status": { args: NodeStatusUpdate; result: void };
+  "execution:progress": { args: ProgressUpdate; result: void };
+  "execution:edge-status": {
+    args: { edgeId: string; status: "no-data" | "has-data" };
+    result: void;
+  };
+  "history:list": { args: { nodeId: string }; result: NodeExecutionRecord[] };
+  "history:set-current": {
+    args: { nodeId: string; executionId: string };
+    result: void;
+  };
+  "history:star": {
+    args: { executionId: string; starred: boolean };
+    result: void;
+  };
+  "history:score": {
+    args: { executionId: string; score: number };
+    result: void;
+  };
+  "cost:estimate": {
+    args: { workflowId: string; nodeIds: string[] };
+    result: CostEstimate;
+  };
+  "cost:get-budget": { args: void; result: BudgetConfig };
+  "cost:set-budget": { args: BudgetConfig; result: void };
+  "cost:get-daily-spend": { args: void; result: number };
+  "settings:get-api-keys": { args: void; result: ApiKeyConfig };
+  "settings:set-api-keys": { args: ApiKeyConfig; result: void };
+  "registry:get-all": { args: void; result: NodeTypeDefinition[] };
+  "models:list": { args: void; result: WaveSpeedModel[] };
+  "models:search": {
+    args: { query: string; category?: string; provider?: string };
+    result: WaveSpeedModel[];
+  };
+  "models:refresh": { args: void; result: WaveSpeedModel[] };
+  "models:get-schema": {
+    args: { modelId: string };
+    result: WaveSpeedModel | null;
+  };
+  "models:refresh-progress": {
+    args: { loaded: number; total: number };
+    result: void;
+  };
+};
 
-export type IpcChannelName = keyof IpcChannels
-export type IpcArgs<C extends IpcChannelName> = IpcChannels[C]['args']
-export type IpcResult<C extends IpcChannelName> = IpcChannels[C]['result']
+export type IpcChannelName = keyof IpcChannels;
+export type IpcArgs<C extends IpcChannelName> = IpcChannels[C]["args"];
+export type IpcResult<C extends IpcChannelName> = IpcChannels[C]["result"];
diff --git a/src/workflow/types/node-defs.ts b/src/workflow/types/node-defs.ts
index 27e12dcf..e4293b42 100644
--- a/src/workflow/types/node-defs.ts
+++ b/src/workflow/types/node-defs.ts
@@ -2,80 +2,112 @@
  * Node type definition types — port schemas, parameter schemas, and node type metadata.
  */
 
-export type PortDataType = 'text' | 'image' | 'video' | 'audio' | 'url' | 'any' | 'boolean'
+export type PortDataType =
+  | "text"
+  | "image"
+  | "video"
+  | "audio"
+  | "url"
+  | "any"
+  | "boolean";
 
 export interface PortDefinition {
-  key: string
-  label: string
-  dataType: PortDataType
-  required: boolean
+  key: string;
+  label: string;
+  dataType: PortDataType;
+  required: boolean;
 }
 
-export type ParamType = 'string' | 'number' | 'boolean' | 'select' | 'file' | 'textarea' | 'slider'
+export type ParamType =
+  | "string"
+  | "number"
+  | "boolean"
+  | "select"
+  | "file"
+  | "textarea"
+  | "slider";
 
 export interface ParamDefinition {
-  key: string
-  label: string
-  type: ParamType
-  default?: unknown
-  options?: { label: string; value: string }[]
-  validation?: { min?: number; max?: number; step?: number; pattern?: string }
-  dataType?: PortDataType
-  connectable?: boolean
-  description?: string
+  key: string;
+  label: string;
+  type: ParamType;
+  default?: unknown;
+  options?: { label: string; value: string }[];
+  validation?: { min?: number; max?: number; step?: number; pattern?: string };
+  dataType?: PortDataType;
+  connectable?: boolean;
+  description?: string;
 }
 
-export type NodeCategory = 'input' | 'ai-task' | 'ai-generation' | 'free-tool' | 'processing' | 'control' | 'output'
+export type NodeCategory =
+  | "input"
+  | "ai-task"
+  | "ai-generation"
+  | "free-tool"
+  | "processing"
+  | "control"
+  | "output";
 
 export interface NodeTypeDefinition {
-  type: string
-  category: NodeCategory
-  label: string
-  inputs: PortDefinition[]
-  outputs: PortDefinition[]
-  params: ParamDefinition[]
-  costPerExecution?: number
+  type: string;
+  category: NodeCategory;
+  label: string;
+  inputs: PortDefinition[];
+  outputs: PortDefinition[];
+  params: ParamDefinition[];
+  costPerExecution?: number;
 }
 
 export interface ModelParamSchema {
-  name: string
-  type: 'string' | 'number' | 'integer' | 'boolean' | 'enum'
-  label?: string
-  description?: string
-  default?: unknown
-  required?: boolean
-  enum?: string[]
-  min?: number
-  max?: number
-  step?: number
-  mediaType?: 'image' | 'video' | 'audio'
+  name: string;
+  type: "string" | "number" | "integer" | "boolean" | "enum";
+  label?: string;
+  description?: string;
+  default?: unknown;
+  required?: boolean;
+  enum?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  mediaType?: "image" | "video" | "audio";
   /** Specific UI control type — matched from x-ui-component or field name patterns */
-  fieldType?: 'text' | 'textarea' | 'number' | 'slider' | 'boolean' | 'select' | 'file' | 'file-array' | 'size' | 'loras' | 'json'
+  fieldType?:
+    | "text"
+    | "textarea"
+    | "number"
+    | "slider"
+    | "boolean"
+    | "select"
+    | "file"
+    | "file-array"
+    | "size"
+    | "loras"
+    | "json";
   /** Whether this field is hidden by default (x-hidden) */
-  hidden?: boolean
+  hidden?: boolean;
   /** File accept filter from x-accept */
-  accept?: string
+  accept?: string;
   /** Placeholder text from x-placeholder */
-  placeholder?: string
+  placeholder?: string;
   /** Max items for array fields (loras, file-array) */
-  maxItems?: number
+  maxItems?: number;
 }
 
-export type ModelCategory = string
+export type ModelCategory = string;
 
 export interface WaveSpeedModel {
-  modelId: string
-  provider: string
-  displayName: string
-  category: ModelCategory
-  inputSchema: ModelParamSchema[]
-  costPerRun?: number
+  modelId: string;
+  provider: string;
+  displayName: string;
+  category: ModelCategory;
+  inputSchema: ModelParamSchema[];
+  costPerRun?: number;
 }
 
 export interface ModelListCache {
-  models: WaveSpeedModel[]
-  categories: string[]
-  providers: string[]
-  fetchedAt: string
-  ttlMs: number
+  models: WaveSpeedModel[];
+  categories: string[];
+  providers: string[];
+  fetchedAt: string;
+  ttlMs: number;
 }
diff --git a/src/workflow/types/type-compatibility.ts b/src/workflow/types/type-compatibility.ts
index e5f933e1..4056669b 100644
--- a/src/workflow/types/type-compatibility.ts
+++ b/src/workflow/types/type-compatibility.ts
@@ -2,23 +2,26 @@
  * Type compatibility system for parameter connections.
  */
 
-import type { PortDataType } from './node-defs'
+import type { PortDataType } from "./node-defs";
 
 export const TYPE_COMPATIBILITY: Record<PortDataType, PortDataType[]> = {
-  'text': ['text', 'any'],
-  'boolean': ['boolean', 'any'],
-  'url': ['url', 'image', 'video', 'audio', 'any'],
-  'image': ['image', 'url', 'any'],
-  'video': ['video', 'url', 'any'],
-  'audio': ['audio', 'url', 'any'],
-  'any': ['text', 'boolean', 'url', 'image', 'video', 'audio', 'any']
-}
+  text: ["text", "any"],
+  boolean: ["boolean", "any"],
+  url: ["url", "image", "video", "audio", "any"],
+  image: ["image", "url", "any"],
+  video: ["video", "url", "any"],
+  audio: ["audio", "url", "any"],
+  any: ["text", "boolean", "url", "image", "video", "audio", "any"],
+};
 
-export function isCompatible(sourceType: PortDataType, targetType: PortDataType): boolean {
-  const compatibleTargets = TYPE_COMPATIBILITY[sourceType]
-  return compatibleTargets ? compatibleTargets.includes(targetType) : false
+export function isCompatible(
+  sourceType: PortDataType,
+  targetType: PortDataType,
+): boolean {
+  const compatibleTargets = TYPE_COMPATIBILITY[sourceType];
+  return compatibleTargets ? compatibleTargets.includes(targetType) : false;
 }
 
 export function getCompatibleTypes(sourceType: PortDataType): PortDataType[] {
-  return TYPE_COMPATIBILITY[sourceType] || []
+  return TYPE_COMPATIBILITY[sourceType] || [];
 }
diff --git a/src/workflow/types/workflow.ts b/src/workflow/types/workflow.ts
index c85fa5cd..e6ddd66e 100644
--- a/src/workflow/types/workflow.ts
+++ b/src/workflow/types/workflow.ts
@@ -2,38 +2,38 @@
  * Workflow data types — core domain models for workflow persistence and graph structure.
  */
 
-export type WorkflowStatus = 'draft' | 'ready' | 'archived'
+export type WorkflowStatus = "draft" | "ready" | "archived";
 
 export interface Workflow {
-  id: string
-  name: string
-  createdAt: string
-  updatedAt: string
-  graphDefinition: GraphDefinition
-  status: WorkflowStatus
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  graphDefinition: GraphDefinition;
+  status: WorkflowStatus;
 }
 
 export interface GraphDefinition {
-  nodes: WorkflowNode[]
-  edges: WorkflowEdge[]
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
 }
 
 export interface WorkflowNode {
-  id: string
-  workflowId: string
-  nodeType: string
-  position: { x: number; y: number }
-  params: Record<string, unknown>
-  currentOutputId: string | null
+  id: string;
+  workflowId: string;
+  nodeType: string;
+  position: { x: number; y: number };
+  params: Record<string, unknown>;
+  currentOutputId: string | null;
 }
 
 export interface WorkflowEdge {
-  id: string
-  workflowId: string
-  sourceNodeId: string
-  sourceOutputKey: string
-  targetNodeId: string
-  targetInputKey: string
-  connectionType?: 'port' | 'parameter'
-  targetParamType?: string
+  id: string;
+  workflowId: string;
+  sourceNodeId: string;
+  sourceOutputKey: string;
+  targetNodeId: string;
+  targetInputKey: string;
+  connectionType?: "port" | "parameter";
+  targetParamType?: string;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index d1ebfa14..3f3f7def 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
-  content: [
-    './index.html',
-    './src/**/*.{ts,tsx}',
-  ],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
     container: {
       center: true,
@@ -71,4 +68,4 @@ module.exports = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};
diff --git a/vite.config.ts b/vite.config.ts
index 40d442bb..3dc5c638 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,54 +1,58 @@
-import { resolve } from 'path'
-import { defineConfig, type Plugin } from 'vite'
-import react from '@vitejs/plugin-react'
+import { resolve } from "path";
+import { defineConfig, type Plugin } from "vite";
+import react from "@vitejs/plugin-react";
 
 // Stub Capacitor modules for web/desktop build (they only run in Capacitor mobile)
-const CAPACITOR_MODULES = ['@capacitor/core', '@capacitor/filesystem', '@capacitor/browser']
+const CAPACITOR_MODULES = [
+  "@capacitor/core",
+  "@capacitor/filesystem",
+  "@capacitor/browser",
+];
 function stubCapacitorPlugin(): Plugin {
   return {
-    name: 'stub-capacitor',
+    name: "stub-capacitor",
     resolveId(id) {
-      if (CAPACITOR_MODULES.includes(id)) return '\0' + id
+      if (CAPACITOR_MODULES.includes(id)) return "\0" + id;
     },
     load(id) {
-      if (id.startsWith('\0@capacitor/')) {
+      if (id.startsWith("\0@capacitor/")) {
         return `
           export const CapacitorHttp = { get: async () => ({ status: 0, data: null }) };
           export const Filesystem = { mkdir: async () => {}, writeFile: async () => {} };
           export const Directory = { Documents: 'DOCUMENTS' };
           export const Browser = { open: async () => {} };
-        `
+        `;
       }
-    }
-  }
+    },
+  };
 }
 
 export default defineConfig({
   plugins: [stubCapacitorPlugin(), react()],
   server: {
     port: 8989,
-    host: '0.0.0.0',
+    host: "0.0.0.0",
   },
   resolve: {
     alias: {
-      '@': resolve(__dirname, 'src')
-    }
+      "@": resolve(__dirname, "src"),
+    },
   },
   worker: {
-    format: 'es'
+    format: "es",
   },
   // Ensure WASM files are properly served
-  assetsInclude: ['**/*.wasm'],
+  assetsInclude: ["**/*.wasm"],
   optimizeDeps: {
-    exclude: ['@huggingface/transformers']
+    exclude: ["@huggingface/transformers"],
   },
   build: {
-    outDir: 'dist-web',
-    assetsDir: 'assets',
+    outDir: "dist-web",
+    assetsDir: "assets",
     sourcemap: false,
     rollupOptions: {
-      input: resolve(__dirname, 'index.html'),
+      input: resolve(__dirname, "index.html"),
     },
   },
-  base: './',
-})
+  base: "./",
+});